diff --git a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/ClusterMap.tsx b/src/Pages/ResourceBrowser/ClusterList/ClusterMap/ClusterMap.tsx deleted file mode 100644 index a0089ea2f3..0000000000 --- a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/ClusterMap.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Link } from 'react-router-dom' -import { ResponsiveContainer, Treemap, TreemapProps } from 'recharts' -import { followCursor } from 'tippy.js' - -import { ClusterStatusType, ConditionalWrap, Tooltip } from '@devtron-labs/devtron-fe-common-lib' - -import { getVisibleSvgTextWithEllipsis } from './utils' -import { ClusterMapProps } from './types' - -import './clustermap.scss' - -const renderWithLink = (href: string) => (children: JSX.Element) => ( - - {children} - -) - -const ClusterTreeMapContent = ({ - x, - y, - width, - height, - status, - name, - value, - href, -}: TreemapProps['content']['props']) => ( - - -
- {name} - {`${value} Nodes`} -
- - {status} - - - } - followCursor - plugins={[followCursor]} - > - - - - {getVisibleSvgTextWithEllipsis({ text: name, maxWidth: width, fontSize: 13, fontWeight: 600 })} - - - {value} - - - - -) - -export const ClusterMap = ({ treeMapData = [], isLoading = false }: ClusterMapProps) => - treeMapData.length ? ( -
-
- {isLoading ? ( -
-
-
-
- ) : ( - treeMapData.map(({ id, label, data }) => ( -
- {label && ( - -

{label}

- - )} -
- - } - isAnimationActive={false} - /> - -
-
- )) - )} -
-
- ) : null diff --git a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/clustermap.scss b/src/Pages/ResourceBrowser/ClusterList/ClusterMap/clustermap.scss deleted file mode 100644 index 905ad97709..0000000000 --- a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/clustermap.scss +++ /dev/null @@ -1,35 +0,0 @@ -.cluster-map { - $parent-selector: &; - - &__container { - height: 165px; - } - - &__bar:hover { - #{$parent-selector}__rect { - fill: var(--G400); - - &--unhealthy { - fill: var(--R400); - } - } - - #{$parent-selector}__text { - fill: var(--N0); - } - } - - &__rect { - stroke: var(--N0); - stroke-width: 2; - fill: var(--G200); - - &--unhealthy { - fill: var(--R200); - } - } - - &__text { - stroke-width: 0; - } -} diff --git a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/index.ts b/src/Pages/ResourceBrowser/ClusterList/ClusterMap/index.ts deleted file mode 100644 index 6f0b565fbd..0000000000 --- a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ClusterMap' -export * from './types' diff --git a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/types.ts b/src/Pages/ResourceBrowser/ClusterList/ClusterMap/types.ts deleted file mode 100644 index 9f48bd5358..0000000000 --- a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ClusterStatusType } from '@devtron-labs/devtron-fe-common-lib' - -interface MapData { - name: string - value: number - status: Extract - href?: string -} - -export interface ClusterTreeMapData { - id: number - label?: string - data: MapData[] -} - -export interface ClusterMapProps { - isLoading?: boolean - treeMapData: ClusterTreeMapData[] -} diff --git a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/utils.ts b/src/Pages/ResourceBrowser/ClusterList/ClusterMap/utils.ts deleted file mode 100644 index 1c230d2e71..0000000000 --- a/src/Pages/ResourceBrowser/ClusterList/ClusterMap/utils.ts +++ /dev/null @@ -1,58 +0,0 @@ -const createMeasurementSvg = (fontSize: number, fontWeight: number) => { - const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') - svg.setAttribute('width', '0') - svg.setAttribute('height', '0') - // Hide it from view - svg.style.position = 'absolute' - - const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text') - textElement.setAttribute('x', '0') - textElement.setAttribute('y', '0') - textElement.setAttribute('font-size', `${fontSize}px`) - textElement.setAttribute('font-weight', `${fontWeight}`) - textElement.setAttribute( - 'font-family', - "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", - ) - - svg.appendChild(textElement) - document.body.appendChild(svg) - - return { svg, textElement } -} - -export const getVisibleSvgTextWithEllipsis = (() => { - let svgInstance: SVGSVGElement | null = null - let textElementInstance: SVGTextElement | null = null - - return ({ text = '', maxWidth = 0, fontSize = 16, fontWeight = 400 }) => { - if (!svgInstance || !textElementInstance) { - const { svg, textElement } = createMeasurementSvg(fontSize, fontWeight) - svgInstance = svg - textElementInstance = textElement - } - - const textElement = textElementInstance - textElement.textContent = '...' - const ellipsisWidth = textElement.getBBox().width - - let start = 0 - let end = text.length - - while (start < end) { - const mid = Math.floor((start + end) / 2) - textElement.textContent = text.slice(0, mid + 1) - - const currentWidth = textElement.getBBox().width - if (currentWidth + ellipsisWidth > maxWidth - 8) { - end = mid - } else { - start = mid + 1 - } - } - - const visibleText = text.slice(0, start) + (start < text.length ? '...' : '') - - return visibleText - } -})() diff --git a/src/Pages/ResourceBrowser/ClusterList/index.ts b/src/Pages/ResourceBrowser/ClusterList/index.ts deleted file mode 100644 index 6b83e86ba6..0000000000 --- a/src/Pages/ResourceBrowser/ClusterList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ClusterMap' diff --git a/src/Pages/ResourceBrowser/index.ts b/src/Pages/ResourceBrowser/index.ts deleted file mode 100644 index 771c6b4ca1..0000000000 --- a/src/Pages/ResourceBrowser/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ClusterList' diff --git a/src/components/ClusterNodes/ClusterSelectionList.tsx b/src/components/ClusterNodes/ClusterSelectionList.tsx index ed1bae4f00..3d9be753fc 100644 --- a/src/components/ClusterNodes/ClusterSelectionList.tsx +++ b/src/components/ClusterNodes/ClusterSelectionList.tsx @@ -32,7 +32,6 @@ import { AddClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg' import { ReactComponent as Success } from '@Icons/appstatus/healthy.svg' import { ReactComponent as TerminalIcon } from '@Icons/ic-terminal-fill.svg' -import { ClusterMap, ClusterTreeMapData } from '@Pages/ResourceBrowser' import { ClusterDetail } from './types' import ClusterNodeEmptyState from './ClusterNodeEmptyStates' import { ClusterSelectionType } from '../ResourceBrowser/Types' @@ -45,11 +44,12 @@ import './clusterNodes.scss' const KubeConfigButton = importComponentFromFELibrary('KubeConfigButton', null, 'function') const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function') const ClusterFilters = importComponentFromFELibrary('ClusterFilters', null, 'function') +const ClusterMap = importComponentFromFELibrary('ClusterMap', null, 'function') -const getClusterMapData = (data: ClusterDetail[]): ClusterTreeMapData['data'] => +const getClusterMapData = (data: ClusterDetail[]) => data.map(({ name, id, nodeCount, status }) => ({ name, - status: status as ClusterTreeMapData['data'][0]['status'], + status, href: `${URLS.RESOURCE_BROWSER}/${id}/${ALL_NAMESPACE_OPTION.value}/${SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}/${K8S_EMPTY_GROUP}`, value: nodeCount ?? 0, })) @@ -86,7 +86,7 @@ const ClusterSelectionList: React.FC = ({ }) }, [searchKey, clusterOptions, `${clusterFilter}`]) - const treeMapData = useMemo(() => { + const treeMapData = useMemo(() => { const { prodClusters, nonProdClusters } = filteredList.reduce( (acc, curr) => { if (curr.status && curr.status !== ClusterStatusType.CONNECTION_FAILED) {