From 620dee4db7bcf4e0770a4128623857b7bc29b607 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Wed, 16 Oct 2024 14:00:21 +0530 Subject: [PATCH 1/5] feat: remove selected tab state from status filter button --- .../CICDHistory/AppStatusDetailsChart.tsx | 58 +++++++++++-------- .../StatusFilterButtonComponent.tsx | 32 +--------- src/Shared/Components/CICDHistory/types.tsx | 1 + 3 files changed, 38 insertions(+), 53 deletions(-) diff --git a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx index c8f797bef..58266fb83 100644 --- a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx +++ b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { useMemo, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import Tippy from '@tippyjs/react' import { useHistory } from 'react-router-dom' import { URLS } from '@Common/Constants' @@ -35,7 +35,8 @@ const AppStatusDetailsChart = ({ }: AppStatusDetailsChartType) => { const history = useHistory() const _appDetails = IndexStore.getAppDetails() - const [currentFilter, setCurrentFilter] = useState('') + const [currentFilter, setCurrentFilter] = useState('all') + const [flattenedNodes, setFlattenedNodes] = useState([]) const { appId, environmentId: envId } = _appDetails @@ -48,30 +49,35 @@ const AppStatusDetailsChart = ({ () => aggregateNodes(_appDetails.resourceTree?.nodes || [], _appDetails.resourceTree?.podMetadata || []), [_appDetails], ) - const nodesKeyArray = Object.keys(nodes?.nodes || {}) - let flattenedNodes = [] - if (nodesKeyArray.length > 0) { - for (let index = 0; index < nodesKeyArray.length; index++) { - const element = nodes.nodes[nodesKeyArray[index]] - // eslint-disable-next-line no-loop-func - element.forEach((childElement) => { - if (childElement.health) { - flattenedNodes.push(childElement) - } - }) - } - flattenedNodes.sort( - (a, b) => - STATUS_SORTING_ORDER[a.health.status?.toLowerCase()] - - STATUS_SORTING_ORDER[b.health.status?.toLowerCase()], - ) - if (filterRemoveHealth) { - flattenedNodes = flattenedNodes.filter( - (node) => node.health.status?.toLowerCase() !== DEPLOYMENT_STATUS.HEALTHY, + useEffect(() => { + const nodesKeyArray = Object.keys(nodes?.nodes || {}) + let newFlattenedNodes = [] + if (nodesKeyArray.length > 0) { + for (let index = 0; index < nodesKeyArray.length; index++) { + const element = nodes.nodes[nodesKeyArray[index]] + // eslint-disable-next-line no-loop-func + element.forEach((childElement) => { + if (childElement.health) { + newFlattenedNodes.push(childElement) + } + }) + } + newFlattenedNodes.sort( + (a, b) => + STATUS_SORTING_ORDER[a.health.status?.toLowerCase()] - + STATUS_SORTING_ORDER[b.health.status?.toLowerCase()], ) + + if (filterRemoveHealth) { + newFlattenedNodes = newFlattenedNodes.filter( + (node) => node.health.status?.toLowerCase() !== DEPLOYMENT_STATUS.HEALTHY, + ) + } + + setFlattenedNodes(newFlattenedNodes) } - } + }, [`${nodes}`]) function getNodeMessage(kind: string, name: string) { if ( @@ -96,7 +102,11 @@ const AppStatusDetailsChart = ({
- +
diff --git a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx index 66c9b0586..1f177d7ee 100644 --- a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx +++ b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx @@ -15,16 +15,12 @@ */ /* eslint-disable eqeqeq */ -import { useEffect, useState } from 'react' import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg' import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common' import { NodeFilters, NodeStatus, StatusFilterButtonType } from './types' -import { IndexStore } from '../../Store' import './StatusFilterButtonComponent.scss' -export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => { - const [selectedTab, setSelectedTab] = useState('all') - +export const StatusFilterButtonComponent = ({ nodes, selectedTab, handleFilterClick }: StatusFilterButtonType) => { const maxInlineFilterCount = 4 let allNodeCount: number = 0 let healthyNodeCount: number = 0 @@ -72,28 +68,6 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status const overflowFilters = validFilterOptions.length > maxInlineFilterCount ? validFilterOptions.slice(maxInlineFilterCount) : null - useEffect(() => { - if ( - (selectedTab === NodeStatus.Healthy && healthyNodeCount === 0) || - (selectedTab === NodeStatus.Degraded && failedNodeCount === 0) || - (selectedTab === NodeStatus.Progressing && progressingNodeCount === 0) || - (selectedTab === NodeStatus.Missing && missingNodeCount === 0) || - (selectedTab === NodeFilters.drifted && driftedNodeCount === 0) - ) { - setSelectedTab('all') - } else if (handleFilterClick) { - handleFilterClick(selectedTab) - } else { - IndexStore.updateFilterType(selectedTab.toUpperCase()) - } - }, [nodes, selectedTab]) - - const handleTabSwitch = (event): void => { - setSelectedTab(event.target.value) - } - - const handleMenuOptionClick = (status: string) => () => setSelectedTab(status) - const renderOverflowFilters = () => overflowFilters ? ( @@ -109,7 +83,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status key={filter.status} type="button" className={`dc__transparent w-100 py-6 px-8 flex left dc__gap-8 fs-13 lh-20 fw-4 cn-9 ${filter.isSelected ? 'bcb-1' : 'bcn-0 dc__hover-n50'}`} - onClick={handleMenuOptionClick(filter.status)} + onClick={() => handleFilterClick(filter.status)} > handleFilterClick(e.target.value)} > {displayedInlineFilters.map((filter, index) => ( + selectedTab: string handleFilterClick?: (selectedFilter: string) => void } From 1189cdc1e361eba83ec0b5d37d7bdeb46568a54e Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Wed, 16 Oct 2024 15:32:56 +0530 Subject: [PATCH 2/5] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0b95186db..7fa298d81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.0-beta-8", + "version": "0.5.0-beta-9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.0-beta-8", + "version": "0.5.0-beta-9", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index e878335ff..488b5b8b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.0-beta-8", + "version": "0.5.0-beta-9", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 296593abc5e526cb195cffe86f5c765073e0e44c Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 22 Oct 2024 17:05:35 +0530 Subject: [PATCH 3/5] feat: add all resource kind constant --- package-lock.json | 4 ++-- package.json | 2 +- .../Components/CICDHistory/AppStatusDetailsChart.tsx | 6 +++--- .../CICDHistory/StatusFilterButtonComponent.tsx | 9 +++++++-- src/Shared/constants.tsx | 2 ++ 5 files changed, 15 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b2219979..0892335a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.8", + "version": "0.5.8-beta-4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.8", + "version": "0.5.8-beta-4", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 71f17bf42..6cd6a7dee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.5.8", + "version": "0.5.8-beta-4", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx index 58266fb83..34010f661 100644 --- a/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx +++ b/src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx @@ -22,7 +22,7 @@ import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled. import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg' import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER, NodeFilters } from './types' import { StatusFilterButtonComponent } from './StatusFilterButtonComponent' -import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType } from '../../constants' +import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType, ALL_RESOURCE_KIND_FILTER } from '../../constants' import { IndexStore } from '../../Store' import { aggregateNodes } from '../../Helpers' import { Button, ButtonStyleType, ButtonVariantType } from '../Button' @@ -35,7 +35,7 @@ const AppStatusDetailsChart = ({ }: AppStatusDetailsChartType) => { const history = useHistory() const _appDetails = IndexStore.getAppDetails() - const [currentFilter, setCurrentFilter] = useState('all') + const [currentFilter, setCurrentFilter] = useState(ALL_RESOURCE_KIND_FILTER) const [flattenedNodes, setFlattenedNodes] = useState([]) const { appId, environmentId: envId } = _appDetails @@ -125,7 +125,7 @@ const AppStatusDetailsChart = ({ flattenedNodes .filter( (nodeDetails) => - currentFilter === 'all' || + currentFilter === ALL_RESOURCE_KIND_FILTER || (currentFilter === NodeFilters.drifted && nodeDetails.hasDrift) || nodeDetails.health.status?.toLowerCase() === currentFilter, ) diff --git a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx index a1483828b..f4550311b 100644 --- a/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx +++ b/src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx @@ -15,6 +15,7 @@ */ /* eslint-disable eqeqeq */ +import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants' import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg' import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common' import { NodeFilters, NodeStatus, StatusFilterButtonType } from './types' @@ -48,8 +49,12 @@ export const StatusFilterButtonComponent = ({ nodes, selectedTab, handleFilterCl allNodeCount += 1 }) + const handleInlineFilterClick = (e) => { + handleFilterClick(e.target.value) + } + const filterOptions = [ - { status: 'all', count: allNodeCount, isSelected: selectedTab == 'all' }, + { status: ALL_RESOURCE_KIND_FILTER, count: allNodeCount, isSelected: selectedTab == ALL_RESOURCE_KIND_FILTER }, { status: NodeStatus.Missing, count: missingNodeCount, isSelected: NodeStatus.Missing == selectedTab }, { status: NodeStatus.Degraded, count: failedNodeCount, isSelected: NodeStatus.Degraded == selectedTab }, { @@ -108,7 +113,7 @@ export const StatusFilterButtonComponent = ({ nodes, selectedTab, handleFilterCl name="status-filter-button" initialTab={selectedTab} disabled={false} - onChange={(e) => handleFilterClick(e.target.value)} + onChange={handleInlineFilterClick} > {displayedInlineFilters.map((filter, index) => ( = { config: [], allowed: false, } + +export const ALL_RESOURCE_KIND_FILTER = 'all' From cf3d29940cc6ac20dd40b2e113d9741e94ae319b Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 28 Oct 2024 15:37:16 +0530 Subject: [PATCH 4/5] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffce84fa2..620eb518e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-3", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 540626213..849bdeb27 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.1", + "version": "0.6.1-beta-3", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 746148b641186cd42c5a4be41739ef0fb05eaf7b Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Mon, 4 Nov 2024 13:40:08 +0530 Subject: [PATCH 5/5] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 300334ee6..b368ff2a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.2", + "version": "0.6.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.2", + "version": "0.6.3", "license": "ISC", "dependencies": { "@types/react-dates": "^21.8.6", diff --git a/package.json b/package.json index 5c464dacb..0939abd83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.6.2", + "version": "0.6.3", "description": "Supporting common component library", "type": "module", "main": "dist/index.js",