Merge pull request #342 from devtron-labs/feat/config-drift

arunjaindev · web-flow · commit fe512a676535 · 2024-10-21T17:30:57.000+05:30
feat: config drift
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.2",
+    "version": "0.5.2-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -85,7 +85,6 @@
         "react-ga4": "^1.4.1",
         "react-keybind": "^0.9.4",
         "react-mde": "^11.5.0",
-        "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
@@ -65,6 +65,7 @@ export const URLS = {
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
+    CONFIG_DRIFT: 'config-drift',
 }
 
 export const ROUTES = {
diff --git a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx
@@ -16,18 +16,34 @@
 
 import { useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
+import { useHistory } from 'react-router-dom'
+import { URLS } from '@Common/Constants'
 import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg'
-import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER } from './types'
+import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER, NodeFilters } from './types'
 import { StatusFilterButtonComponent } from './StatusFilterButtonComponent'
-import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS } from '../../constants'
+import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType } from '../../constants'
 import { IndexStore } from '../../Store'
 import { aggregateNodes } from '../../Helpers'
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 
-const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppStatusDetailsChartType) => {
+const AppStatusDetailsChart = ({
+    filterRemoveHealth = false,
+    showFooter,
+    showConfigDriftInfo = false,
+    onClose,
+}: AppStatusDetailsChartType) => {
+    const history = useHistory()
     const _appDetails = IndexStore.getAppDetails()
     const [currentFilter, setCurrentFilter] = useState('')
 
+    const { appId, environmentId: envId } = _appDetails
+
+    const handleCompareDesiredManifest = () => {
+        onClose()
+        history.push(`${URLS.APP}/${appId}${URLS.DETAILS}/${envId}/${URLS.APP_DETAILS_K8}/${URLS.CONFIG_DRIFT}`)
+    }
+
     const nodes: AggregatedNodes = useMemo(
         () => aggregateNodes(_appDetails.resourceTree?.nodes || [], _appDetails.resourceTree?.podMetadata || []),
         [_appDetails],
@@ -100,6 +116,7 @@ const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppSt
                             .filter(
                                 (nodeDetails) =>
                                     currentFilter === 'all' ||
+                                    (currentFilter === NodeFilters.drifted && nodeDetails.hasDrift) ||
                                     nodeDetails.health.status?.toLowerCase() === currentFilter,
                             )
                             .map((nodeDetails) => (
@@ -123,7 +140,24 @@ const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppSt
                                     >
                                         {nodeDetails.status ? nodeDetails.status : nodeDetails.health.status}
                                     </div>
-                                    <div>{getNodeMessage(nodeDetails.kind, nodeDetails.name)}</div>
+                                    <div className="flexbox-col dc__gap-4">
+                                        {showConfigDriftInfo && nodeDetails.hasDrift && (
+                                            <div className="flexbox dc__gap-8 dc__align-items-center">
+                                                <span className="fs-13 fw-4 lh-20 cy-7">Config drift detected</span>
+                                                {onClose && appId && envId && (
+                                                    <Button
+                                                        dataTestId="show-config-drift"
+                                                        text="Compare with desired"
+                                                        variant={ButtonVariantType.text}
+                                                        style={ButtonStyleType.default}
+                                                        onClick={handleCompareDesiredManifest}
+                                                        size={ComponentSizeType.small}
+                                                    />
+                                                )}
+                                            </div>
+                                        )}
+                                        <div>{getNodeMessage(nodeDetails.kind, nodeDetails.name)}</div>
+                                    </div>
                                 </div>
                             ))
                     ) : (
diff --git a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx
@@ -18,9 +18,8 @@
 import { useEffect, useState } from 'react'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common'
-import { NodeStatus, StatusFilterButtonType } from './types'
+import { NodeFilters, NodeStatus, StatusFilterButtonType } from './types'
 import { IndexStore } from '../../Store'
-
 import './StatusFilterButtonComponent.scss'
 
 export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
@@ -32,10 +31,15 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
     let progressingNodeCount: number = 0
     let failedNodeCount: number = 0
     let missingNodeCount: number = 0
+    let driftedNodeCount: number = 0
 
     nodes?.forEach((_node) => {
         const _nodeHealth = _node.health?.status
 
+        if (_node.hasDrift) {
+            driftedNodeCount += 1
+        }
+
         if (_nodeHealth?.toLowerCase() === NodeStatus.Healthy) {
             healthyNodeCount += 1
         } else if (_nodeHealth?.toLowerCase() === NodeStatus.Degraded) {
@@ -58,6 +62,11 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
             isSelected: NodeStatus.Progressing == selectedTab,
         },
         { status: NodeStatus.Healthy, count: healthyNodeCount, isSelected: NodeStatus.Healthy == selectedTab },
+        window._env_.FEATURE_CONFIG_DRIFT_ENABLE && {
+            status: NodeFilters.drifted,
+            count: driftedNodeCount,
+            isSelected: selectedTab === NodeFilters.drifted,
+        },
     ]
     const validFilterOptions = filterOptions.filter(({ count }) => count > 0)
     const displayedInlineFilters = validFilterOptions.slice(
@@ -72,7 +81,8 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
             (selectedTab === NodeStatus.Healthy && healthyNodeCount === 0) ||
             (selectedTab === NodeStatus.Degraded && failedNodeCount === 0) ||
             (selectedTab === NodeStatus.Progressing && progressingNodeCount === 0) ||
-            (selectedTab === NodeStatus.Missing && missingNodeCount === 0)
+            (selectedTab === NodeStatus.Missing && missingNodeCount === 0) ||
+            (selectedTab === NodeFilters.drifted && driftedNodeCount === 0)
         ) {
             setSelectedTab('all')
         } else if (handleFilterClick) {
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
@@ -519,6 +519,8 @@ export interface DeploymentHistorySidebarType {
 export interface AppStatusDetailsChartType {
     filterRemoveHealth?: boolean
     showFooter: boolean
+    showConfigDriftInfo?: boolean
+    onClose?: () => void
 }
 
 export interface StatusFilterButtonType {
@@ -535,6 +537,10 @@ export enum NodeStatus {
     Unknown = 'unknown',
 }
 
+export enum NodeFilters {
+    drifted = 'drifted',
+}
+
 type NodesMap = {
     [key in NodeType]?: Map<string, any>
 }
diff --git a/src/Shared/Store/IndexStore.tsx b/src/Shared/Store/IndexStore.tsx
@@ -17,6 +17,7 @@
 /* eslint-disable eqeqeq */
 /* eslint-disable array-callback-return */
 import { BehaviorSubject } from 'rxjs'
+import { NodeFilters } from '@Shared/Components'
 import { AppDetails, AppType, EnvDetails, EnvType, Node, Nodes, PodMetaData, iNode } from '../types'
 
 const _appDetailsSubject: BehaviorSubject<AppDetails> = new BehaviorSubject({} as AppDetails)
@@ -43,6 +44,10 @@ const publishFilteredNodes = () => {
             return true
         }
 
+        if (_nodeFilter.filterType.toLowerCase() === NodeFilters.drifted && _node.hasDrift) {
+            return true
+        }
+
         return false
     })
 
diff --git a/src/Shared/types.ts b/src/Shared/types.ts
@@ -140,6 +140,7 @@ export interface Node {
     port: number
     canBeHibernated: boolean
     isHibernated: boolean
+    hasDrift?: boolean
 }
 
 // eslint-disable-next-line no-use-before-define
diff --git a/src/index.ts b/src/index.ts
@@ -76,6 +76,7 @@ export interface customEnv {
     SYSTEM_CONTROLLER_LISTING_TIMEOUT?: number
     FEATURE_STEP_WISE_LOGS_ENABLE?: boolean
     FEATURE_IMAGE_PROMOTION_ENABLE?: boolean
+    FEATURE_CONFIG_DRIFT_ENABLE: boolean
 }
 declare global {
     interface Window {

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ export const URLS = {`
`65`	`65`	`GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',`
`66`	`66`	`GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',`
`67`	`67`	`NETWORK_STATUS_INTERFACE: '/network-status-interface',`
	`68`	`+ CONFIG_DRIFT: 'config-drift',`
`68`	`69`	`}`
`69`	`70`
`70`	`71`	`export const ROUTES = {`
Original file line number	Diff line number	Diff line change
`@@ -519,6 +519,8 @@ export interface DeploymentHistorySidebarType {`
`519`	`519`	`export interface AppStatusDetailsChartType {`
`520`	`520`	`filterRemoveHealth?: boolean`
`521`	`521`	`showFooter: boolean`
	`522`	`+ showConfigDriftInfo?: boolean`
	`523`	`+ onClose?: () => void`
`522`	`524`	`}`
`523`	`525`
`524`	`526`	`export interface StatusFilterButtonType {`
`@@ -535,6 +537,10 @@ export enum NodeStatus {`
`535`	`537`	`Unknown = 'unknown',`
`536`	`538`	`}`
`537`	`539`
	`540`	`+export enum NodeFilters {`
	`541`	`+ drifted = 'drifted',`
	`542`	`+}`
	`543`	`+`
`538`	`544`	`type NodesMap = {`
`539`	`545`	`[key in NodeType]?: Map<string, any>`
`540`	`546`	`}`
Original file line number	Diff line number	Diff line change
`@@ -140,6 +140,7 @@ export interface Node {`
`140`	`140`	`port: number`
`141`	`141`	`canBeHibernated: boolean`
`142`	`142`	`isHibernated: boolean`
	`143`	`+ hasDrift?: boolean`
`143`	`144`	`}`
`144`	`145`
`145`	`146`	`// eslint-disable-next-line no-use-before-define`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,7 @@ export interface customEnv {`
`76`	`76`	`SYSTEM_CONTROLLER_LISTING_TIMEOUT?: number`
`77`	`77`	`FEATURE_STEP_WISE_LOGS_ENABLE?: boolean`
`78`	`78`	`FEATURE_IMAGE_PROMOTION_ENABLE?: boolean`
	`79`	`+ FEATURE_CONFIG_DRIFT_ENABLE: boolean`
`79`	`80`	`}`
`80`	`81`	`declare global {`
`81`	`82`	`interface Window {`