Merge remote-tracking branch 'origin/master' into sebastian/prod-2652…

…-use-new-metrics-queries-in-service-component-and-cluster
pluralsh · Sep 27, 2024 · 7eae4f8 · 7eae4f8
2 parents 3b608c6 + 528db15
commit 7eae4f8
Show file tree

Hide file tree

Showing 227 changed files with 2,175 additions and 4,788 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -46,7 +46,7 @@
     "@nivo/pie": "0.87.0",
     "@nivo/radial-bar": "0.87.0",
     "@nivo/tooltip": "0.87.0",
-    "@pluralsh/design-system": "3.69.1",
+    "@pluralsh/design-system": "3.69.2",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-virtual": "3.0.1",

diff --git a/assets/src/components/apps/Apps.tsx b/assets/src/components/apps/Apps.tsx
@@ -182,11 +182,8 @@ export default function Apps() {
     const filteredByState = appsByState[filter]
 
     const fuse = new Fuse(filteredByState, searchOptions)
-    const filteredByQuery = query
-      ? fuse.search(query).map(({ item }) => item)
-      : filteredByState
 
-    return filteredByQuery
+    return query ? fuse.search(query).map(({ item }) => item) : filteredByState
   }, [appsByState, filter, query])
   const noFilteredApps = filteredApps?.length < 1
 

diff --git a/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx b/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx
@@ -209,9 +209,7 @@ export default function RunbookAlert({ alert }: { alert: RunbookAlertStatus }) {
                 </ChipList>
               </ExpandedItem>
             )}
-            {true && (
-              <ExpandedItem heading="fingerprint">{fingerprint}</ExpandedItem>
-            )}
+            <ExpandedItem heading="fingerprint">{fingerprint}</ExpandedItem>
           </div>
         </AccordionItem>
       </Accordion>

diff --git a/assets/src/components/backups/cluster/backups/Backups.tsx b/assets/src/components/backups/cluster/backups/Backups.tsx
@@ -5,11 +5,14 @@ import {
   useSetBreadcrumbs,
 } from '@pluralsh/design-system'
 import { useTheme } from 'styled-components'
-import { ComponentProps, useMemo } from 'react'
+import { useMemo } from 'react'
 import isEmpty from 'lodash/isEmpty'
 import { useParams } from 'react-router-dom'
 
-import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData'
+import {
+  DEFAULT_REACT_VIRTUAL_OPTIONS,
+  useFetchPaginatedData,
+} from 'components/utils/table/useFetchPaginatedData'
 
 import {
   useClusterBackupsQuery,
@@ -32,14 +35,6 @@ import {
   ColStatus,
 } from './BackupsColumns'
 
-const QUERY_PAGE_SIZE = 100
-
-const REACT_VIRTUAL_OPTIONS: ComponentProps<
-  typeof Table
->['reactVirtualOptions'] = {
-  overscan: 10,
-}
-
 const columns = [ColCluster, ColBackupId, ColBackupDate, ColStatus, ColActions]
 
 export default function Backups() {
@@ -65,14 +60,8 @@ export default function Backups() {
     fetchNextPage,
     setVirtualSlice,
   } = useFetchPaginatedData(
-    {
-      queryHook: useClusterBackupsQuery,
-      pageSize: QUERY_PAGE_SIZE,
-      keyPath: ['clusterBackups'],
-    },
-    {
-      clusterId,
-    }
+    { queryHook: useClusterBackupsQuery, keyPath: ['clusterBackups'] },
+    { clusterId }
   )
 
   useSetBreadcrumbs(
@@ -117,7 +106,7 @@ export default function Backups() {
             loose
             columns={columns}
             reactTableOptions={{ meta: { refetch, cluster } }}
-            reactVirtualOptions={REACT_VIRTUAL_OPTIONS}
+            reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
             data={data?.clusterBackups?.edges || []}
             virtualizeRows
             hasNextPage={pageInfo?.hasNextPage}

diff --git a/assets/src/components/backups/cluster/restores/Restores.tsx b/assets/src/components/backups/cluster/restores/Restores.tsx
@@ -12,7 +12,10 @@ import isEmpty from 'lodash/isEmpty'
 import { useParams } from 'react-router-dom'
 import { capitalize } from 'lodash'
 
-import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData'
+import {
+  DEFAULT_REACT_VIRTUAL_OPTIONS,
+  useFetchPaginatedData,
+} from 'components/utils/table/useFetchPaginatedData'
 
 import {
   ClusterBasicFragment,
@@ -36,8 +39,6 @@ import {
 } from '../../../../routes/backupRoutesConsts'
 import { DateTimeCol } from '../../../utils/table/DateTimeCol'
 
-const QUERY_PAGE_SIZE = 100
-
 const restoreStatusSeverity = {
   [RestoreStatus.Created]: 'info',
   [RestoreStatus.Pending]: 'info',
@@ -48,12 +49,6 @@ const restoreStatusSeverity = {
   ComponentProps<typeof Chip>['severity']
 >
 
-const REACT_VIRTUAL_OPTIONS: ComponentProps<
-  typeof Table
->['reactVirtualOptions'] = {
-  overscan: 10,
-}
-
 const columnHelper = createColumnHelper<Edge<ClusterRestore>>()
 
 const columns = [
@@ -152,14 +147,8 @@ export default function Restores() {
     fetchNextPage,
     setVirtualSlice,
   } = useFetchPaginatedData(
-    {
-      queryHook: useClusterRestoresQuery,
-      pageSize: QUERY_PAGE_SIZE,
-      keyPath: ['clusterRestores'],
-    },
-    {
-      clusterId,
-    }
+    { queryHook: useClusterRestoresQuery, keyPath: ['clusterRestores'] },
+    { clusterId }
   )
 
   useSetBreadcrumbs(
@@ -204,7 +193,7 @@ export default function Restores() {
             loose
             columns={columns}
             reactTableOptions={{ meta: { refetch, cluster } }}
-            reactVirtualOptions={REACT_VIRTUAL_OPTIONS}
+            reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
             data={data?.clusterRestores?.edges || []}
             virtualizeRows
             hasNextPage={pageInfo?.hasNextPage}

diff --git a/assets/src/components/backups/clusters/ClusterColumns.tsx b/assets/src/components/backups/clusters/ClusterColumns.tsx
@@ -152,6 +152,5 @@ export const ColActions = columnHelper.accessor(({ node }) => node?.id, {
 })
 
 enum MenuItemKey {
-  Navigate = 'navigate',
   Delete = 'delete',
 }
diff --git a/assets/src/components/backups/clusters/Clusters.tsx b/assets/src/components/backups/clusters/Clusters.tsx
@@ -6,11 +6,14 @@ import {
   useSetBreadcrumbs,
 } from '@pluralsh/design-system'
 import { useTheme } from 'styled-components'
-import { ComponentProps, useMemo } from 'react'
+import { useMemo } from 'react'
 import isEmpty from 'lodash/isEmpty'
 import { useNavigate } from 'react-router-dom'
 
-import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData'
+import {
+  DEFAULT_REACT_VIRTUAL_OPTIONS,
+  useFetchPaginatedData,
+} from 'components/utils/table/useFetchPaginatedData'
 
 import {
   BACKUPS_ABS_PATH,
@@ -25,14 +28,6 @@ import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
 import ConfigureClusterBackups from './ConfigureClusterBackups'
 import { ColActions, ColCluster, ColName, ColProvider } from './ClusterColumns'
 
-const QUERY_PAGE_SIZE = 100
-
-const REACT_VIRTUAL_OPTIONS: ComponentProps<
-  typeof Table
->['reactVirtualOptions'] = {
-  overscan: 10,
-}
-
 export const BACKUPS_CLUSTERS_BASE_CRUMBS: Breadcrumb[] = [
   { label: 'backups', url: BACKUPS_ABS_PATH },
   {
@@ -56,14 +51,8 @@ export default function Clusters() {
     fetchNextPage,
     setVirtualSlice,
   } = useFetchPaginatedData(
-    {
-      queryHook: useClustersObjectStoresQuery,
-      pageSize: QUERY_PAGE_SIZE,
-      keyPath: ['clusters'],
-    },
-    {
-      backups: true,
-    }
+    { queryHook: useClustersObjectStoresQuery, keyPath: ['clusters'] },
+    { backups: true }
   )
 
   const clusters = data?.clusters
@@ -98,7 +87,7 @@ export default function Clusters() {
             loose
             columns={columns}
             reactTableOptions={{ meta: { refetch } }}
-            reactVirtualOptions={REACT_VIRTUAL_OPTIONS}
+            reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
             data={clusters?.edges || []}
             virtualizeRows
             hasNextPage={pageInfo?.hasNextPage}

diff --git a/assets/src/components/backups/objectstores/ObjectStores.tsx b/assets/src/components/backups/objectstores/ObjectStores.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, useMemo } from 'react'
+import { useMemo } from 'react'
 import {
   Breadcrumb,
   EmptyState,
@@ -11,7 +11,10 @@ import isEmpty from 'lodash/isEmpty'
 
 import { useTheme } from 'styled-components'
 
-import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData'
+import {
+  DEFAULT_REACT_VIRTUAL_OPTIONS,
+  useFetchPaginatedData,
+} from 'components/utils/table/useFetchPaginatedData'
 
 import { useSetPageHeaderContent } from '../../cd/ContinuousDeployment'
 import {
@@ -26,14 +29,6 @@ import { GqlError } from '../../utils/Alert'
 import CreateObjectStore from './CreateObjectStore'
 import { ColActions, ColName, ColProvider } from './ObjectStoreColumns'
 
-const QUERY_PAGE_SIZE = 100
-
-const REACT_VIRTUAL_OPTIONS: ComponentProps<
-  typeof Table
->['reactVirtualOptions'] = {
-  overscan: 10,
-}
-
 const BACKUPS_OBJECT_STORES_BASE_CRUMBS: Breadcrumb[] = [
   { label: 'backups', url: BACKUPS_ABS_PATH },
   {
@@ -57,7 +52,6 @@ export default function ObjectStores() {
     setVirtualSlice,
   } = useFetchPaginatedData({
     queryHook: useObjectStoresQuery,
-    pageSize: QUERY_PAGE_SIZE,
     keyPath: ['objectStores'],
   })
 
@@ -93,7 +87,7 @@ export default function ObjectStores() {
             loose
             columns={columns}
             reactTableOptions={{ meta: { refetch } }}
-            reactVirtualOptions={REACT_VIRTUAL_OPTIONS}
+            reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
             data={objectStores?.edges || []}
             virtualizeRows
             hasNextPage={pageInfo?.hasNextPage}

diff --git a/assets/src/components/cd/ContinuousDeployment.tsx b/assets/src/components/cd/ContinuousDeployment.tsx
@@ -99,9 +99,8 @@ export const CD_BASE_CRUMBS = [
 
 function useCurrentTab() {
   const pathMatch = useMatch(`${CD_ABS_PATH}/:tab/*`)
-  const tab = pathMatch?.params?.tab || ''
 
-  return tab
+  return pathMatch?.params?.tab || ''
 }
 
 export function useDefaultCDPath() {

diff --git a/assets/src/components/cd/cluster/Cluster.tsx b/assets/src/components/cd/cluster/Cluster.tsx
@@ -151,6 +151,7 @@ export default function Cluster() {
             />
           </div>
           <TabList
+            scrollable
             stateRef={tabStateRef}
             stateProps={{
               orientation: 'horizontal',
@@ -186,6 +187,7 @@ export default function Cluster() {
               flexGrow: 1,
               flexShrink: 0,
               gap: theme.spacing.small,
+              marginLeft: theme.spacing.large,
             }}
           >
             {headerContent}

diff --git a/assets/src/components/cd/cluster/ClusterAddOns.tsx b/assets/src/components/cd/cluster/ClusterAddOns.tsx
@@ -169,6 +169,7 @@ export default function ClusterAddOns() {
       >
         {addOns.map((addon, i) => (
           <ClusterAddOnsEntry
+            key={addon.id}
             addon={addon}
             active={addon.id === addOn?.id}
             first={i === 0}

diff --git a/assets/src/components/cd/cluster/ClusterMetadata.tsx b/assets/src/components/cd/cluster/ClusterMetadata.tsx
@@ -226,9 +226,8 @@ export default function ClusterMetadata() {
 
 function formatJson(jsonObject) {
   try {
-    const formattedJson = JSON.stringify(jsonObject, null, 2) // Convert the object back into a formatted string
-
-    return formattedJson
+    // Convert the object back into a formatted string
+    return JSON.stringify(jsonObject, null, 2)
   } catch (e) {
     console.error('Invalid JSON:', e)
 

diff --git a/assets/src/components/cd/cluster/ClusterPRs.tsx b/assets/src/components/cd/cluster/ClusterPRs.tsx
@@ -12,12 +12,11 @@ import {
   ColStatus,
   ColTitle,
 } from '../../pr/queue/PrQueueColumns'
-import {
-  PRS_REACT_VIRTUAL_OPTIONS,
-  PR_QUERY_PAGE_SIZE,
-} from '../../pr/queue/PrQueue'
 import { GqlError } from '../../utils/Alert'
-import { useFetchPaginatedData } from '../utils/useFetchPaginatedData'
+import {
+  DEFAULT_REACT_VIRTUAL_OPTIONS,
+  useFetchPaginatedData,
+} from '../../utils/table/useFetchPaginatedData'
 import { usePullRequestsQuery } from '../../../generated/graphql'
 import { useThrottle } from '../../hooks/useThrottle'
 
@@ -50,7 +49,6 @@ export default function ClusterPRs() {
   } = useFetchPaginatedData(
     {
       queryHook: usePullRequestsQuery,
-      pageSize: PR_QUERY_PAGE_SIZE,
       keyPath: ['pullRequests'],
     },
     {
@@ -89,7 +87,7 @@ export default function ClusterPRs() {
       <FullHeightTableWrap>
         <Table
           columns={columns}
-          reactVirtualOptions={PRS_REACT_VIRTUAL_OPTIONS}
+          reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
           data={data?.pullRequests?.edges || []}
           virtualizeRows
           reactTableOptions={reactTableOptions}

diff --git a/assets/src/components/cd/cluster/ClusterPods.tsx b/assets/src/components/cd/cluster/ClusterPods.tsx
@@ -36,6 +36,7 @@ import { NamespaceListFooter } from '../../cluster/pods/Pods'
 import { columnHelper } from '../../cluster/nodes/NodesList'
 import { TableCaretLink } from '../../cluster/TableElements'
 import { getPodDetailsPath } from '../../../routes/cdRoutesConsts'
+import { useFetchPaginatedData } from '../../utils/table/useFetchPaginatedData'
 
 const POLL_INTERVAL = 10 * 1000
 
@@ -101,10 +102,20 @@ export default function ClusterPods() {
     variables: { clusterId },
     pollInterval: POLL_INTERVAL,
   })
-  const { data, error } = useClusterPodsQuery({
-    variables: { clusterId, namespace },
-    pollInterval: POLL_INTERVAL,
-  })
+
+  const { data, error, loading, pageInfo, fetchNextPage, setVirtualSlice } =
+    useFetchPaginatedData(
+      {
+        pollInterval: POLL_INTERVAL,
+        queryHook: useClusterPodsQuery,
+        keyPath: ['pods'],
+      },
+      {
+        clusterId,
+        namespace,
+      }
+    )
+
   const theme = useTheme()
   const [filterString, setFilterString] = useState('')
   const debouncedFilterString = useDebounce(filterString, 300)
@@ -234,6 +245,10 @@ export default function ClusterPods() {
             pods={pods}
             columns={columns}
             reactTableOptions={reactTableOptions}
+            hasNextPage={pageInfo?.hasNextPage}
+            fetchNextPage={fetchNextPage}
+            isFetchingNextPage={loading}
+            onVirtualSliceChange={setVirtualSlice}
             refetch={refetch}
             linkBasePath={getPodDetailsPath({
               clusterId,

diff --git a/assets/src/components/cd/cluster/ClusterSettings.tsx b/assets/src/components/cd/cluster/ClusterSettings.tsx
@@ -152,7 +152,7 @@ export function ClusterSettingsModal(
   props: ComponentProps<typeof ClusterSettingsModalInner>
 ) {
   return (
-    <ModalMountTransition open={!!props.open}>
+    <ModalMountTransition open={props.open}>
       <ClusterSettingsModalInner {...props} />
     </ModalMountTransition>
   )