feat: config drift

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "4.0.2",
+    "version": "0.4.5-beta-5",
     "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",

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 = {

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>
                             ))
                     ) : (

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,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
             isSelected: NodeStatus.Progressing == selectedTab,
         },
         { status: NodeStatus.Healthy, count: healthyNodeCount, isSelected: NodeStatus.Healthy == selectedTab },
+        { status: NodeFilters.drifted, count: driftedNodeCount, isSelected: selectedTab === NodeFilters.drifted },
     ]
     const validFilterOptions = filterOptions.filter(({ count }) => count > 0)
     const displayedInlineFilters = validFilterOptions.slice(
@@ -72,7 +77,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) {

src/Shared/Components/CICDHistory/types.tsx

@@ -517,6 +517,8 @@ export interface DeploymentHistorySidebarType {
 export interface AppStatusDetailsChartType {
     filterRemoveHealth?: boolean
     showFooter: boolean
+    showConfigDriftInfo?: boolean
+    onClose?: () => void
 }
 
 export interface StatusFilterButtonType {
@@ -533,6 +535,10 @@ export enum NodeStatus {
     Unknown = 'unknown',
 }
 
+export enum NodeFilters {
+    drifted = 'drifted',
+}
+
 type NodesMap = {
     [key in NodeType]?: Map<string, any>
 }

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
     })
 

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