add cost management UI

assets/package.json

@@ -42,13 +42,14 @@
     "@graphql-codegen/named-operations-object": "3.0.0",
     "@jumpn/utils-graphql": "0.6.0",
     "@markdoc/markdoc": "0.4.0",
-    "@nivo/core": "0.87.0",
-    "@nivo/geo": "0.87.0",
-    "@nivo/line": "0.87.0",
-    "@nivo/pie": "0.87.0",
-    "@nivo/radial-bar": "0.87.0",
-    "@nivo/tooltip": "0.87.0",
-    "@pluralsh/design-system": "4.3.0",
+    "@nivo/core": "0.88.0",
+    "@nivo/geo": "0.88.0",
+    "@nivo/line": "0.88.0",
+    "@nivo/pie": "0.88.0",
+    "@nivo/radial-bar": "0.88.0",
+    "@nivo/tooltip": "0.88.0",
+    "@nivo/treemap": "0.88.0",
+    "@pluralsh/design-system": "4.5.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-table": "8.20.5",
@@ -140,8 +141,8 @@
     "@types/jsdom": "21.1.5",
     "@types/mocha": "10.0.8",
     "@types/node": "22.7.4",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "@types/react-window": "1.8.8",
     "@types/uuid": "9.0.7",
     "@typescript-eslint/eslint-plugin": "8.8.0",

assets/src/components/cd/clusters/Clusters.tsx

@@ -1,4 +1,3 @@
-import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap'
 import {
   Breadcrumb,
   GearTrainIcon,
@@ -7,12 +6,13 @@ import {
   Table,
   useSetBreadcrumbs,
 } from '@pluralsh/design-system'
-import { ComponentProps, Key, useMemo, useRef, useState } from 'react'
+import { useDebounce } from '@react-hooks-library/core'
 import { Row } from '@tanstack/react-table'
+import chroma from 'chroma-js'
+import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap'
+import { ComponentProps, Key, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import chroma from 'chroma-js'
-import { useDebounce } from '@react-hooks-library/core'
 
 import {
   ClustersRowFragment,
@@ -26,11 +26,11 @@ import {
   getClusterDetailsPath,
 } from 'routes/cdRoutesConsts'
 
-import { Edge } from 'utils/graphql'
-import { keyToTag } from 'utils/clusterTags'
 import usePersistedState from 'components/hooks/usePersistedState'
-import LoadingIndicator from 'components/utils/LoadingIndicator'
 import { GqlError } from 'components/utils/Alert'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
+import { keySetToTagArray } from 'utils/clusterTags'
+import { Edge } from 'utils/graphql'
 
 import { isEmpty } from 'lodash'
 
@@ -40,8 +40,8 @@ import {
   useSetPageHeaderContent,
   useSetPageScrollable,
 } from '../ContinuousDeployment'
-import { useCDEnabled } from '../utils/useCDEnabled'
 import { DEMO_CLUSTERS } from '../utils/demoData'
+import { useCDEnabled } from '../utils/useCDEnabled'
 
 import {
   ClusterStatusTabKey,
@@ -57,10 +57,10 @@ import {
 
 import { useProjectId } from '../../contexts/ProjectsContext'
 
-import CreateCluster from './create/CreateCluster'
+import { cdClustersColumns } from './ClustersColumns'
 import { DemoTable } from './ClustersDemoTable'
 import { ClustersGettingStarted } from './ClustersGettingStarted'
-import { cdClustersColumns } from './ClustersColumns'
+import CreateCluster from './create/CreateCluster'
 
 export const CD_CLUSTERS_BASE_CRUMBS: Breadcrumb[] = [
   { label: 'cd', url: '/cd' },
@@ -111,8 +111,7 @@ export default function Clusters() {
   const debouncedSearchString = useDebounce(searchString, 100)
 
   const searchTags = useMemo(
-    () =>
-      Array.from(selectedTagKeys.values(), (tagKey) => keyToTag(`${tagKey}`)),
+    () => keySetToTagArray(selectedTagKeys),
     [selectedTagKeys]
   )
 

assets/src/components/cd/services/ClusterTagsFilter.tsx

@@ -2,12 +2,13 @@ import {
   ListBoxFooterPlus,
   ReloadIcon,
   TagMultiSelect,
+  TagMultiSelectProps,
 } from '@pluralsh/design-system'
 import { useThrottle } from 'components/hooks/useThrottle'
 import { Conjunction, TagType, useTagPairsLazyQuery } from 'generated/graphql'
 import isEqual from 'lodash/isEqual'
 import uniqWith from 'lodash/uniqWith'
-import { type ComponentProps, type Key, useMemo, useState } from 'react'
+import { type Key, useMemo, useState } from 'react'
 import { tagToKey } from 'utils/clusterTags'
 
 export function TagsFilter({
@@ -25,9 +26,9 @@ export function TagsFilter({
   selectedTagKeys: Set<Key>
   setSelectedTagKeys: (keys: Set<Key>) => void
   searchOp: Conjunction
-  setSearchOp: ComponentProps<typeof TagMultiSelect>['onChangeMatchType']
-  comboBoxProps?: ComponentProps<typeof TagMultiSelect>['comboBoxProps']
-  selectProps?: ComponentProps<typeof TagMultiSelect>['selectProps']
+  setSearchOp: TagMultiSelectProps['onChangeMatchType']
+  comboBoxProps?: TagMultiSelectProps['comboBoxProps']
+  selectProps?: TagMultiSelectProps['selectProps']
 }) {
   const [open, setOpen] = useState(false)
   const [inputValue, setInputValue] = useState('')

assets/src/components/commandpalette/commands.ts

@@ -3,11 +3,11 @@ import {
   ArrowTopRightIcon,
   CatalogIcon,
   ClusterIcon,
+  CostManagementIcon,
   DocumentIcon,
   EyeIcon,
   GearTrainIcon,
   GitPullIcon,
-  HistoryIcon,
   HomeIcon,
   IconProps,
   KubernetesAltIcon,
@@ -27,9 +27,9 @@ import { isEmpty } from 'lodash'
 import { ComponentType, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+import { COST_MANAGEMENT_ABS_PATH } from 'routes/costManagementRoutesConsts.tsx'
 import { useClustersTinyQuery } from '../../generated/graphql'
 import { AI_ABS_PATH } from '../../routes/aiRoutes.tsx'
-import { BACKUPS_ABS_PATH } from '../../routes/backupRoutesConsts'
 import { CATALOGS_ABS_PATH } from '../../routes/catalogRoutesConsts.tsx'
 import {
   CD_ABS_PATH,
@@ -191,11 +191,11 @@ export function useCommands(): CommandGroup[] {
             hotkeys: ['8'],
           },
           {
-            label: 'Backups',
-            icon: HistoryIcon,
-            callback: () => navigate(BACKUPS_ABS_PATH),
+            label: 'Cost Management',
+            icon: CostManagementIcon,
+            callback: () => navigate(COST_MANAGEMENT_ABS_PATH),
             deps: [navigate],
-            hotkeys: ['shift B', '9'],
+            hotkeys: ['shift C+M', '9'],
           },
           {
             label: 'Settings',

assets/src/components/cost-management/ClusterUsagesTableCols.tsx

@@ -0,0 +1,164 @@
+import {
+  CaretRightIcon,
+  ClusterIcon,
+  Flex,
+  IconFrame,
+} from '@pluralsh/design-system'
+import { ColumnHelper, createColumnHelper } from '@tanstack/react-table'
+import {
+  ClusterNamespaceUsageFragment,
+  ClusterUsageTinyFragment,
+} from 'generated/graphql'
+import styled from 'styled-components'
+
+const columnHelper = createColumnHelper<
+  ClusterUsageTinyFragment | ClusterNamespaceUsageFragment
+>()
+
+export const ColCluster = (
+  columnHelper as ColumnHelper<ClusterUsageTinyFragment>
+).accessor(({ cluster }) => cluster?.name, {
+  id: 'cluster',
+  header: 'Cluster',
+  meta: { gridTemplate: '1fr' },
+  cell: function Cell({ getValue }) {
+    const name = getValue() ?? '--'
+
+    return (
+      <Flex
+        gap="small"
+        align="center"
+      >
+        <IconFrame
+          icon={<ClusterIcon />}
+          type="floating"
+        />
+        {name}
+      </Flex>
+    )
+  },
+})
+
+export const ColNamespace = (
+  columnHelper as ColumnHelper<ClusterNamespaceUsageFragment>
+).accessor(({ namespace }) => namespace, {
+  id: 'namespace',
+  header: 'Namespace',
+  meta: { gridTemplate: '1fr' },
+  cell: function Cell({ getValue }) {
+    const namespace = getValue()
+
+    return namespace
+  },
+})
+
+export const ColNodeCost = (
+  columnHelper as ColumnHelper<ClusterUsageTinyFragment>
+).accessor(({ nodeCost }) => nodeCost, {
+  id: 'nodeCost',
+  header: 'Node cost',
+  cell: function Cell({ getValue }) {
+    const nodeCost = getValue()
+
+    return (
+      <SimpleTextWrapperSC>
+        {nodeCost ? `$${nodeCost.toFixed(3)}` : '--'}
+      </SimpleTextWrapperSC>
+    )
+  },
+})
+
+export const ColCpuCost = columnHelper.accessor(({ cpuCost }) => cpuCost, {
+  id: 'cpuCost',
+  header: 'CPU cost',
+  cell: function Cell({ getValue }) {
+    const cpuCost = getValue()
+
+    return (
+      <SimpleTextWrapperSC>
+        {cpuCost ? `$${cpuCost.toFixed(3)}` : '--'}
+      </SimpleTextWrapperSC>
+    )
+  },
+})
+
+export const ColCpuEfficiency = columnHelper.accessor(
+  (usage) => {
+    const efficiency = (usage.cpuUtil ?? NaN) / (usage.cpu ?? NaN)
+    return isNaN(efficiency) ? NaN : Math.round(efficiency * 100)
+  },
+  {
+    id: 'cpuEfficiency',
+    header: 'CPU efficiency',
+    cell: function Cell({ getValue }) {
+      const efficiency = getValue()
+
+      return (
+        <SimpleTextWrapperSC>
+          {isNaN(efficiency) || efficiency === Infinity
+            ? '--'
+            : `${efficiency}%`}
+        </SimpleTextWrapperSC>
+      )
+    },
+  }
+)
+
+export const ColMemoryCost = columnHelper.accessor(
+  ({ memoryCost }) => memoryCost,
+  {
+    id: 'memoryCost',
+    header: 'Memory cost',
+    cell: function Cell({ getValue }) {
+      const memoryCost = getValue()
+
+      return (
+        <SimpleTextWrapperSC>
+          {memoryCost ? `$${memoryCost.toFixed(3)}` : '--'}
+        </SimpleTextWrapperSC>
+      )
+    },
+  }
+)
+
+export const ColMemoryEfficiency = columnHelper.accessor(
+  (usage) => {
+    const efficiency = (usage.memUtil ?? NaN) / (usage.memory ?? NaN)
+    return isNaN(efficiency) ? NaN : Math.round(efficiency * 100)
+  },
+  {
+    id: 'memoryEfficiency',
+    header: 'Memory efficiency',
+    meta: { gridTemplate: 'auto' },
+    cell: function Cell({ getValue }) {
+      const efficiency = getValue()
+
+      return (
+        <SimpleTextWrapperSC>
+          {isNaN(efficiency) || efficiency === Infinity
+            ? '--'
+            : `${efficiency}%`}
+        </SimpleTextWrapperSC>
+      )
+    },
+  }
+)
+
+export const ColActions = columnHelper.display({
+  id: 'actions',
+  header: '',
+  cell: function Cell() {
+    return (
+      <IconFrame
+        clickable
+        tooltip="Go to usage details"
+        icon={<CaretRightIcon />}
+      />
+    )
+  },
+})
+
+const SimpleTextWrapperSC = styled.span({
+  textAlign: 'right',
+  width: '100%',
+})