feat: Runbook implentation

chith-git · chith-git · commit 6756205030a2 · 2025-10-27T14:20:07.000+05:30
diff --git a/src/Assets/IconV2/ic-book-gear.svg b/src/Assets/IconV2/ic-book-gear.svg
diff --git a/src/Assets/IconV2/ic-check-green.svg b/src/Assets/IconV2/ic-check-green.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 4.50037L6.5 11.5001L3 8.00037" stroke="#1DAD70" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-close-circle-red.svg b/src/Assets/IconV2/ic-close-circle-red.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 5.33337L8 8.00004M8 8.00004L5.33334 10.6667M8 8.00004L10.6667 10.6667M8 8.00004L5.33334 5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33334 11.6819 1.33334 8.00004C1.33334 4.31814 4.3181 1.33337 8 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z" stroke="#F33E3E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-close-circle.svg b/src/Assets/IconV2/ic-close-circle.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6666 11.3334L13.9999 14M13.9999 14L11.3333 16.6667M13.9999 14L16.6666 16.6667M13.9999 14L11.3333 11.3334M20.6666 14C20.6666 17.6819 17.6818 20.6667 13.9999 20.6667C10.318 20.6667 7.33325 17.6819 7.33325 14C7.33325 10.3181 10.318 7.33337 13.9999 7.33337C17.6818 7.33337 20.6666 10.3181 20.6666 14Z" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-confirm.svg b/src/Assets/IconV2/ic-confirm.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 10.5004L12.5 17.5001L9 14.0004" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-info-filled-new.svg b/src/Assets/IconV2/ic-info-filled-new.svg
@@ -0,0 +1,8 @@
+<!--
+  - Copyright (c) 2024. Devtron Inc.
+  -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <circle cx="9.99996" cy="9.99999" r="8.33333" fill="#0066CC"/>
+  <path d="M9.9937 6.72544C9.75861 6.72544 9.55709 6.64148 9.38917 6.47355C9.22124 6.30563 9.13728 6.09992 9.13728 5.85642C9.13728 5.61293 9.22124 5.41142 9.38917 5.25189C9.55709 5.08396 9.75861 5 9.9937 5C10.2372 5 10.4429 5.08396 10.6108 5.25189C10.7788 5.41142 10.8627 5.61293 10.8627 5.85642C10.8627 6.09992 10.7788 6.30563 10.6108 6.47355C10.4429 6.64148 10.2372 6.72544 9.9937 6.72544ZM10.7242 12.7834H12.5V14.0554H7.5V12.7834H9.27582V8.89169H7.5V7.61965H10.7242V12.7834Z" fill="white"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-pencil-white.svg b/src/Assets/IconV2/ic-pencil-white.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 4.00005L12 7.50005M6 13.5H3C2.86739 13.5 2.74021 13.4474 2.64645 13.3536C2.55268 13.2598 2.5 13.1327 2.5 13V10.2072C2.5 10.1415 2.51293 10.0765 2.53806 10.0158C2.56319 9.95515 2.60002 9.90003 2.64645 9.8536L10.1464 2.3536C10.2402 2.25983 10.3674 2.20715 10.5 2.20715C10.6326 2.20715 10.7598 2.25983 10.8536 2.3536L13.6464 5.14649C13.7402 5.24026 13.7929 5.36744 13.7929 5.50005C13.7929 5.63265 13.7402 5.75983 13.6464 5.8536L6 13.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-timer-green.svg b/src/Assets/IconV2/ic-timer-green.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.83337L10.4749 6.3585M6.5 1.33337H9.5M13.5 8.83337C13.5 11.8709 11.0376 14.3334 8 14.3334C4.96243 14.3334 2.5 11.8709 2.5 8.83337C2.5 5.79581 4.96243 3.33337 8 3.33337C11.0376 3.33337 13.5 5.79581 13.5 8.83337Z" stroke="#1DAD70" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-timer-red.svg b/src/Assets/IconV2/ic-timer-red.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.83337L10.4749 6.3585M6.5 1.33337H9.5M13.5 8.83337C13.5 11.8709 11.0376 14.3334 8 14.3334C4.96243 14.3334 2.5 11.8709 2.5 8.83337C2.5 5.79581 4.96243 3.33337 8 3.33337C11.0376 3.33337 13.5 5.79581 13.5 8.83337Z" stroke="#F33E3E" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
@@ -144,6 +144,7 @@ export const URLS = {
     AI_RECOMMENDATIONS: AI_RECOMMENDATIONS_ROOT,
     AI_RECOMMENDATIONS_NOTIFICATIONS: `${AI_RECOMMENDATIONS_ROOT}/notifications`,
     EXTERNAL_APPS: 'ea',
+    AI_RECOMMENDATIONS_RUNBOOKS: `${AI_RECOMMENDATIONS_ROOT}/runbooks`,
 } as const
 
 export const ROUTES = {
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
@@ -34,6 +34,7 @@ import { ReactComponent as ICBgScan } from '@IconsV2/ic-bg-scan.svg'
 import { ReactComponent as ICBgWebhook } from '@IconsV2/ic-bg-webhook.svg'
 import { ReactComponent as ICBharatpe } from '@IconsV2/ic-bharatpe.svg'
 import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
+import { ReactComponent as ICBookGear } from '@IconsV2/ic-book-gear.svg'
 import { ReactComponent as ICBookOpen } from '@IconsV2/ic-book-open.svg'
 import { ReactComponent as ICBot } from '@IconsV2/ic-bot.svg'
 import { ReactComponent as ICBrain } from '@IconsV2/ic-brain.svg'
@@ -54,6 +55,7 @@ import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-on
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
 import { ReactComponent as ICCheckAll } from '@IconsV2/ic-check-all.svg'
 import { ReactComponent as ICCheckCircle } from '@IconsV2/ic-check-circle.svg'
+import { ReactComponent as ICCheckGreen } from '@IconsV2/ic-check-green.svg'
 import { ReactComponent as ICCheckSquare } from '@IconsV2/ic-check-square.svg'
 import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
@@ -64,6 +66,8 @@ import { ReactComponent as ICCleanBrush } from '@IconsV2/ic-clean-brush.svg'
 import { ReactComponent as ICClipboard } from '@IconsV2/ic-clipboard.svg'
 import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg'
 import { ReactComponent as ICClockCounterclockwise } from '@IconsV2/ic-clock-counterclockwise.svg'
+import { ReactComponent as ICCloseCircle } from '@IconsV2/ic-close-circle.svg'
+import { ReactComponent as ICCloseCircleRed } from '@IconsV2/ic-close-circle-red.svg'
 import { ReactComponent as ICCloseLarge } from '@IconsV2/ic-close-large.svg'
 import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg'
 import { ReactComponent as ICCloud } from '@IconsV2/ic-cloud.svg'
@@ -72,6 +76,7 @@ import { ReactComponent as ICCluster } from '@IconsV2/ic-cluster.svg'
 import { ReactComponent as ICClusterIsolated } from '@IconsV2/ic-cluster-isolated.svg'
 import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg'
 import { ReactComponent as ICCoins } from '@IconsV2/ic-coins.svg'
+import { ReactComponent as ICConfirm } from '@IconsV2/ic-confirm.svg'
 import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg'
 import { ReactComponent as ICContainerRegistry } from '@IconsV2/ic-container-registry.svg'
 import { ReactComponent as ICCookr } from '@IconsV2/ic-cookr.svg'
@@ -161,6 +166,7 @@ import { ReactComponent as ICHibernateCircle } from '@IconsV2/ic-hibernate-circl
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
 import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
 import { ReactComponent as ICInfoFilledColor } from '@IconsV2/ic-info-filled-color.svg'
+import { ReactComponent as ICInfoFilledNew } from '@IconsV2/ic-info-filled-new.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICInput } from '@IconsV2/ic-input.svg'
 import { ReactComponent as ICInstall } from '@IconsV2/ic-install.svg'
@@ -216,6 +222,7 @@ import { ReactComponent as ICParty } from '@IconsV2/ic-party.svg'
 import { ReactComponent as ICPath } from '@IconsV2/ic-path.svg'
 import { ReactComponent as ICPauseCircle } from '@IconsV2/ic-pause-circle.svg'
 import { ReactComponent as ICPencil } from '@IconsV2/ic-pencil.svg'
+import { ReactComponent as ICPencilWhite } from '@IconsV2/ic-pencil-white.svg'
 import { ReactComponent as ICPiggybank } from '@IconsV2/ic-piggybank.svg'
 import { ReactComponent as ICPlayOutline } from '@IconsV2/ic-play-outline.svg'
 import { ReactComponent as ICPriorityHighFill } from '@IconsV2/ic-priority-high-fill.svg'
@@ -269,6 +276,8 @@ import { ReactComponent as ICThumbDown } from '@IconsV2/ic-thumb-down.svg'
 import { ReactComponent as ICThumbUp } from '@IconsV2/ic-thumb-up.svg'
 import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg'
 import { ReactComponent as ICTimer } from '@IconsV2/ic-timer.svg'
+import { ReactComponent as ICTimerGreen } from '@IconsV2/ic-timer-green.svg'
+import { ReactComponent as ICTimerRed } from '@IconsV2/ic-timer-red.svg'
 import { ReactComponent as ICTrafficSignal } from '@IconsV2/ic-traffic-signal.svg'
 import { ReactComponent as ICTravclan } from '@IconsV2/ic-travclan.svg'
 import { ReactComponent as ICTrendUp } from '@IconsV2/ic-trend-up.svg'
@@ -328,6 +337,7 @@ export const iconMap = {
     'ic-bg-webhook': ICBgWebhook,
     'ic-bharatpe': ICBharatpe,
     'ic-bitbucket': ICBitbucket,
+    'ic-book-gear': ICBookGear,
     'ic-book-open': ICBookOpen,
     'ic-bot': ICBot,
     'ic-brain': ICBrain,
@@ -347,6 +357,7 @@ export const iconMap = {
     'ic-chat-circle-online': ICChatCircleOnline,
     'ic-check-all': ICCheckAll,
     'ic-check-circle': ICCheckCircle,
+    'ic-check-green': ICCheckGreen,
     'ic-check-square': ICCheckSquare,
     'ic-check': ICCheck,
     'ic-checks': ICChecks,
@@ -358,6 +369,8 @@ export const iconMap = {
     'ic-clipboard': ICClipboard,
     'ic-clock-counterclockwise': ICClockCounterclockwise,
     'ic-clock': ICClock,
+    'ic-close-circle-red': ICCloseCircleRed,
+    'ic-close-circle': ICCloseCircle,
     'ic-close-large': ICCloseLarge,
     'ic-close-small': ICCloseSmall,
     'ic-cloud-vms': ICCloudVms,
@@ -366,6 +379,7 @@ export const iconMap = {
     'ic-cluster': ICCluster,
     'ic-code': ICCode,
     'ic-coins': ICCoins,
+    'ic-confirm': ICConfirm,
     'ic-container-registry': ICContainerRegistry,
     'ic-container': ICContainer,
     'ic-cookr': ICCookr,
@@ -454,6 +468,7 @@ export const iconMap = {
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,
     'ic-info-filled-color': ICInfoFilledColor,
+    'ic-info-filled-new': ICInfoFilledNew,
     'ic-info-filled': ICInfoFilled,
     'ic-info-outline': ICInfoOutline,
     'ic-input': ICInput,
@@ -509,6 +524,7 @@ export const iconMap = {
     'ic-party': ICParty,
     'ic-path': ICPath,
     'ic-pause-circle': ICPauseCircle,
+    'ic-pencil-white': ICPencilWhite,
     'ic-pencil': ICPencil,
     'ic-piggybank': ICPiggybank,
     'ic-play-outline': ICPlayOutline,
@@ -562,6 +578,8 @@ export const iconMap = {
     'ic-thumb-down': ICThumbDown,
     'ic-thumb-up': ICThumbUp,
     'ic-timeout-dash': ICTimeoutDash,
+    'ic-timer-green': ICTimerGreen,
+    'ic-timer-red': ICTimerRed,
     'ic-timer': ICTimer,
     'ic-traffic-signal': ICTrafficSignal,
     'ic-travclan': ICTravclan,
diff --git a/src/Shared/Hooks/useUserPreferences/types.ts b/src/Shared/Hooks/useUserPreferences/types.ts
@@ -57,6 +57,8 @@ export type NavigationItemID =
     | 'data-protection-backup-repositories'
     | 'data-protection-backup-locations'
     | 'data-protection-history-and-logs'
+    | 'ai-recommendations-overview'
+    | 'ai-recommendations-runbooks'
     | 'ai-recommendations-notifications'
 
 export type NavigationSubMenuItemID =
@@ -66,6 +68,7 @@ export type NavigationSubMenuItemID =
     | 'application-management-configurations-chart-repository'
     | 'application-management-configurations-deployment-charts'
     | 'application-management-configurations-notifications'
+    | 'application-management-configurations-runbook'
     | 'application-management-configurations-catalog-frameworks'
     | 'application-management-configurations-scoped-variables'
     | 'application-management-configurations-build-infra'
