From eb8d62d5e0d89d9b91c122aa8fe2ef2751d879a2 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 26 Sep 2024 10:16:40 +0200 Subject: [PATCH] fix: General pagination fixes and improvements (#1413) --- assets/src/components/apps/Apps.tsx | 5 +- .../app/runbooks/runbook/RunbookAlerts.tsx | 4 +- .../backups/cluster/backups/Backups.tsx | 27 ++---- .../backups/cluster/restores/Restores.tsx | 25 ++---- .../backups/clusters/ClusterColumns.tsx | 1 - .../components/backups/clusters/Clusters.tsx | 27 ++---- .../backups/objectstores/ObjectStores.tsx | 18 ++-- .../components/cd/ContinuousDeployment.tsx | 3 +- .../components/cd/cluster/ClusterAddOns.tsx | 1 + .../components/cd/cluster/ClusterMetadata.tsx | 5 +- .../src/components/cd/cluster/ClusterPRs.tsx | 12 ++- .../src/components/cd/cluster/ClusterPods.tsx | 23 ++++- .../components/cd/cluster/ClusterSettings.tsx | 2 +- .../cd/clusters/ClusterUpgradeFlyover.tsx | 2 +- .../src/components/cd/clusters/Clusters.tsx | 17 ++-- .../cd/globalServices/GlobalService.tsx | 30 +------ .../cd/globalServices/GlobalServicesTable.tsx | 14 ++- .../globalServices/details/GlobalService.tsx | 2 +- .../details/GlobalServiceInfo.tsx | 2 +- .../details/GlobalServiceServices.tsx | 18 ++-- .../components/cd/namespaces/Namespaces.tsx | 29 +------ .../cd/namespaces/NamespacesTable.tsx | 14 ++- .../namespaces/details/ManagedNamespace.tsx | 2 +- .../details/ManagedNamespaceServices.tsx | 18 ++-- .../src/components/cd/observers/Observers.tsx | 17 ++-- .../cd/pipelines/PipelineContexts.tsx | 8 +- .../cd/pipelines/PipelinePullRequests.tsx | 4 +- .../src/components/cd/pipelines/Pipelines.tsx | 12 ++- .../cd/pipelines/nodes/StageNode.tsx | 11 ++- .../cd/pipelines/utils/getNodesAndEdges.tsx | 48 ++++++----- .../cd/pipelines/utils/nodeLayouter.tsx | 6 +- .../cd/repos/FluxHelmRepositoriesColumns.tsx | 7 -- .../src/components/cd/services/Services.tsx | 18 +--- .../components/cd/services/ServicesTable.tsx | 16 ++-- .../service/ServiceDetailsSidecar.tsx | 1 + .../cd/services/service/ServicePRs.tsx | 12 ++- .../components/cd/utils/ClusterSelector.tsx | 49 ++++------- .../components/cluster/nodes/NodeEvents.tsx | 6 +- .../src/components/cluster/nodes/NodeRaw.tsx | 6 +- .../src/components/cluster/pods/PodsList.tsx | 2 +- .../src/components/commandpalette/commands.ts | 16 ++-- .../component/ComponentMetadata.tsx | 2 - .../src/components/component/ComponentRaw.tsx | 2 +- .../component/tree/ComponentTreeNode.tsx | 3 - .../components/contexts/DocPageContext.tsx | 1 - .../db-management/RestoreDatabaseModal.tsx | 4 +- .../db-management/TimezoneComboBox.tsx | 4 +- assets/src/components/help/Chatbot.tsx | 2 +- assets/src/components/home/Home.tsx | 2 +- .../clusteroverview/ClusterOverviewCard.tsx | 10 +-- .../clusteroverview/ClusterOverviewTable.tsx | 5 +- .../home/deployments/DeploymentsCard.tsx | 17 ++-- .../home/deployments/DeploymentsTable.tsx | 5 +- .../violations/ConstraintViolationsCard.tsx | 5 +- .../components/home/pullrequests/PrCard.tsx | 13 +-- .../components/home/pullrequests/PrTable.tsx | 5 +- assets/src/components/hooks/useNewKeyIf.tsx | 14 --- .../kubernetes/rbac/ClusterRole.tsx | 15 +--- .../components/kubernetes/workloads/utils.tsx | 2 +- assets/src/components/login/Login.tsx | 4 +- .../notifications/NotificationsPanel.tsx | 16 ++-- assets/src/components/policies/Policies.tsx | 15 +--- .../components/policies/PoliciesFilter.tsx | 39 ++++----- .../src/components/policies/PoliciesTable.tsx | 5 +- .../pr/automations/PrAutomations.tsx | 17 ++-- .../pr/automations/PrAutomationsColumns.tsx | 2 +- .../pr/automations/PrConfigurationInput.tsx | 2 +- assets/src/components/pr/queue/PrQueue.tsx | 24 ++---- .../components/pr/scm/PrScmConnections.tsx | 15 ++-- .../pr/scm/PrScmConnectionsColumns.tsx | 2 +- assets/src/components/pr/scm/ScmWebhooks.tsx | 14 ++- .../components/pr/scm/ScmWebhooksColumns.tsx | 6 +- .../observability/ObservabilityProviders.tsx | 17 ++-- .../NotificationRouterConfigurationInput.tsx | 2 +- .../routers/NotificationRouters.tsx | 17 ++-- .../notifications/sinks/NotificationSinks.tsx | 17 ++-- .../sinks/NotificationSinksColumns.tsx | 2 +- .../settings/projectsettings/ProjectsList.tsx | 7 +- .../usermanagement/groups/GroupsList.tsx | 9 +- .../personas/PersonaConfiguration.tsx | 86 +++++++++---------- .../usermanagement/personas/PersonasList.tsx | 11 ++- .../serviceaccounts/ServiceAccountsList.tsx | 7 +- .../usermanagement/users/UsersList.tsx | 7 +- .../components/stacks/StackSettingsModal.tsx | 2 +- assets/src/components/stacks/Stacks.tsx | 5 +- .../stacks/common/StackTypeIcon.tsx | 2 - .../StackCustomRunChooseTemplate.tsx | 2 +- assets/src/components/stacks/prs/StackPrs.tsx | 7 +- assets/src/components/utils/Link.tsx | 11 +-- .../src/components/utils/RadialBarChart.tsx | 2 +- .../src/components/utils/ShowAfterDelay.tsx | 2 +- .../src/components/utils/StopPropagation.tsx | 14 --- .../src/components/utils/TypeaheadEditor.jsx | 2 +- assets/src/components/utils/animations.ts | 21 ----- assets/src/components/utils/events.ts | 4 - assets/src/components/utils/hooks.ts | 18 ---- .../utils/layout/ResponsivePageFullWidth.tsx | 55 ++++++------ .../components/utils/table/ColWithIcon.tsx | 53 +----------- .../table/{TruncateStart.tsx => Truncate.tsx} | 0 .../table}/useFetchPaginatedData.tsx | 7 +- assets/src/components/vpn/columns/Actions.tsx | 6 +- assets/src/components/vpn/columns/Delete.tsx | 6 +- assets/src/generated/graphql.ts | 29 +++++-- assets/src/graph/cdClusters.graphql | 26 ++++-- assets/src/utils/hasDefined.ts | 10 --- assets/src/utils/hostname.ts | 12 --- assets/src/utils/kubernetes.ts | 2 +- assets/src/utils/time.ts | 2 - 108 files changed, 461 insertions(+), 833 deletions(-) delete mode 100644 assets/src/components/hooks/useNewKeyIf.tsx delete mode 100644 assets/src/components/utils/StopPropagation.tsx delete mode 100644 assets/src/components/utils/animations.ts delete mode 100644 assets/src/components/utils/events.ts delete mode 100644 assets/src/components/utils/hooks.ts rename assets/src/components/utils/table/{TruncateStart.tsx => Truncate.tsx} (100%) rename assets/src/components/{cd/utils => utils/table}/useFetchPaginatedData.tsx (93%) delete mode 100644 assets/src/utils/hasDefined.ts diff --git a/assets/src/components/apps/Apps.tsx b/assets/src/components/apps/Apps.tsx index b8cf5517e9..16c9185a93 100644 --- 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 index 22fa0d7942..37d66ad8c0 100644 --- 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 }) { )} - {true && ( - {fingerprint} - )} + {fingerprint} diff --git a/assets/src/components/backups/cluster/backups/Backups.tsx b/assets/src/components/backups/cluster/backups/Backups.tsx index 9be6a4d083..b52bd7c60b 100644 --- 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 index 3a364a1f6b..1a42a32b61 100644 --- 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['severity'] > -const REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - const columnHelper = createColumnHelper>() 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 index 71a1adddbe..d70c9ad454 100644 --- 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 index 6ef85ad04a..3f21c8624d 100644 --- 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 index 3c7859e020..19a8b1bada 100644 --- 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 index 157f980942..e597eaab77 100644 --- 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/ClusterAddOns.tsx b/assets/src/components/cd/cluster/ClusterAddOns.tsx index 92ea7a8104..68cd92a3a9 100644 --- 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) => ( ) { return ( - + ) diff --git a/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx b/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx index e68ea87c3f..10fe749a1e 100644 --- a/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx +++ b/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx @@ -27,7 +27,7 @@ import { useUpdateClusterMutation, } from 'generated/graphql' import isEmpty from 'lodash/isEmpty' -import { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useState } from 'react' import { coerce } from 'semver' import styled, { useTheme } from 'styled-components' import { diff --git a/assets/src/components/cd/clusters/Clusters.tsx b/assets/src/components/cd/clusters/Clusters.tsx index f68f1fc225..b6a3b2692b 100644 --- a/assets/src/components/cd/clusters/Clusters.tsx +++ b/assets/src/components/cd/clusters/Clusters.tsx @@ -50,7 +50,10 @@ import { import { TagsFilter } from '../services/ClusterTagsFilter' -import { useFetchPaginatedData } from '../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../utils/table/useFetchPaginatedData' import { useProjectId } from '../../contexts/ProjectsContext' @@ -64,8 +67,6 @@ export const CD_CLUSTERS_BASE_CRUMBS: Breadcrumb[] = [ { label: 'clusters', url: `${CD_REL_PATH}/${CLUSTERS_REL_PATH}` }, ] -export const CLUSTERS_QUERY_PAGE_SIZE = 100 - type TableWrapperSCProps = { $blurred: boolean } @@ -131,7 +132,6 @@ export default function Clusters() { } = useFetchPaginatedData( { queryHook: useClustersQuery, - pageSize: CLUSTERS_QUERY_PAGE_SIZE, keyPath: ['clusters'], }, { @@ -240,7 +240,7 @@ export default function Clusters() { hasNextPage={pageInfo?.hasNextPage} fetchNextPage={fetchNextPage} isFetchingNextPage={loading} - reactVirtualOptions={CLUSTERS_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} onVirtualSliceChange={setVirtualSlice} /> @@ -253,11 +253,6 @@ export default function Clusters() { ) } -export const CLUSTERS_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} export function ClustersTable({ refetch, @@ -275,7 +270,7 @@ export function ClustersTable({ return (
( - { - SSH: 'SSH', - BASIC: 'Basic', - }, - 'Unknown' -) - -export function AuthMethodChip({ - authMethod, -}: { - authMethod: AuthMethod | null | undefined -}) { - return {authMethodToLabel(authMethod)} -} - -export const GLOBAL_SERVICES_QUERY_PAGE_SIZE = 100 - -export const GLOBAL_SERVICES_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - export const columns = [ ColServiceName, ColDistribution, diff --git a/assets/src/components/cd/globalServices/GlobalServicesTable.tsx b/assets/src/components/cd/globalServices/GlobalServicesTable.tsx index 2c2286524b..c7e43acdc6 100644 --- a/assets/src/components/cd/globalServices/GlobalServicesTable.tsx +++ b/assets/src/components/cd/globalServices/GlobalServicesTable.tsx @@ -15,13 +15,12 @@ import { GqlError } from 'components/utils/Alert' import { useProjectId } from 'components/contexts/ProjectsContext' -import { useFetchPaginatedData } from '../utils/useFetchPaginatedData' - import { - GLOBAL_SERVICES_QUERY_PAGE_SIZE, - GLOBAL_SERVICES_REACT_VIRTUAL_OPTIONS, - columns, -} from './GlobalService' + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../utils/table/useFetchPaginatedData' + +import { columns } from './GlobalService' function GlobalServicesTableComponent({ setRefetch, @@ -43,7 +42,6 @@ function GlobalServicesTableComponent({ } = useFetchPaginatedData( { queryHook: useGlobalServicesQuery, - pageSize: GLOBAL_SERVICES_QUERY_PAGE_SIZE, keyPath: ['globalServices'], }, { projectId } @@ -105,7 +103,7 @@ function GlobalServicesTableComponent({ fetchNextPage={fetchNextPage} isFetchingNextPage={loading} reactTableOptions={reactTableOptions} - reactVirtualOptions={GLOBAL_SERVICES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} onVirtualSliceChange={setVirtualSlice} emptyStateProps={{ message: "Looks like you don't have any service deployments yet.", diff --git a/assets/src/components/cd/globalServices/details/GlobalService.tsx b/assets/src/components/cd/globalServices/details/GlobalService.tsx index aa0df02c20..6e1f790deb 100644 --- a/assets/src/components/cd/globalServices/details/GlobalService.tsx +++ b/assets/src/components/cd/globalServices/details/GlobalService.tsx @@ -48,7 +48,7 @@ import { LinkTabWrap } from '../../../utils/Tabs' import { PluralErrorBoundary } from '../../PluralErrorBoundary' import KickButton from '../../../utils/KickButton' import { GqlError } from '../../../utils/Alert' -import { useFetchPaginatedData } from '../../utils/useFetchPaginatedData' +import { useFetchPaginatedData } from '../../../utils/table/useFetchPaginatedData' import { useProjectId } from '../../../contexts/ProjectsContext' import { mapExistingNodes } from '../../../../utils/graphql' import { DistroProviderIcon } from '../../../utils/ClusterDistro' diff --git a/assets/src/components/cd/globalServices/details/GlobalServiceInfo.tsx b/assets/src/components/cd/globalServices/details/GlobalServiceInfo.tsx index 5348be4ace..dc9d770382 100644 --- a/assets/src/components/cd/globalServices/details/GlobalServiceInfo.tsx +++ b/assets/src/components/cd/globalServices/details/GlobalServiceInfo.tsx @@ -175,7 +175,7 @@ function TagsModalInner({ export function TagsModal(props: ComponentProps) { return ( - + ) diff --git a/assets/src/components/cd/globalServices/details/GlobalServiceServices.tsx b/assets/src/components/cd/globalServices/details/GlobalServiceServices.tsx index 10e4cb4266..ae4719ef8a 100644 --- a/assets/src/components/cd/globalServices/details/GlobalServiceServices.tsx +++ b/assets/src/components/cd/globalServices/details/GlobalServiceServices.tsx @@ -11,24 +11,19 @@ import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap import LoadingIndicator from 'components/utils/LoadingIndicator' import { GqlError } from 'components/utils/Alert' import { useOutletContext } from 'react-router-dom' -import { ComponentProps, useMemo } from 'react' +import { useMemo } from 'react' import { columns } from 'components/cd/services/Services' -import { useFetchPaginatedData } from '../../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../../utils/table/useFetchPaginatedData' import { useSetPageScrollable } from '../../ContinuousDeployment' import { GlobalServiceContextT, getBreadcrumbs } from './GlobalService' -const GLOBAL_SERVICES_QUERY_PAGE_SIZE = 100 - -const GLOBAL_SERVICES_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - export function GlobalServiceServices() { const navigate = useNavigate() const { globalServiceId, globalService } = @@ -57,7 +52,6 @@ export function GlobalServiceServices() { } = useFetchPaginatedData( { queryHook: useGetGlobalServiceServicesQuery, - pageSize: GLOBAL_SERVICES_QUERY_PAGE_SIZE, keyPath: ['globalService', 'services'], }, { serviceId: globalServiceId } @@ -95,7 +89,7 @@ export function GlobalServiceServices() { ) } reactTableOptions={{ meta: { refetch } }} - reactVirtualOptions={GLOBAL_SERVICES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} emptyStateProps={{ message: 'No services found.' }} /> diff --git a/assets/src/components/cd/namespaces/Namespaces.tsx b/assets/src/components/cd/namespaces/Namespaces.tsx index 3d6175944c..1ab7993942 100644 --- a/assets/src/components/cd/namespaces/Namespaces.tsx +++ b/assets/src/components/cd/namespaces/Namespaces.tsx @@ -1,9 +1,6 @@ -import { ComponentProps } from 'react' -import { Chip, Table, useSetBreadcrumbs } from '@pluralsh/design-system' +import { useSetBreadcrumbs } from '@pluralsh/design-system' -import { AuthMethod } from 'generated/graphql' import { CD_REL_PATH, NAMESPACES_REL_PATH } from 'routes/cdRoutesConsts' -import { createMapperWithFallback } from 'utils/mapping' import { CD_BASE_CRUMBS } from '../ContinuousDeployment' @@ -16,30 +13,6 @@ import { } from './NamespacesColumns' import { NamespacesTable } from './NamespacesTable' -const authMethodToLabel = createMapperWithFallback( - { - SSH: 'SSH', - BASIC: 'Basic', - }, - 'Unknown' -) - -export function AuthMethodChip({ - authMethod, -}: { - authMethod: AuthMethod | null | undefined -}) { - return {authMethodToLabel(authMethod)} -} - -export const NAMESPACES_QUERY_PAGE_SIZE = 100 - -export const NAMESPACES_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - export const columns = [ ColName, ColAnnotations, diff --git a/assets/src/components/cd/namespaces/NamespacesTable.tsx b/assets/src/components/cd/namespaces/NamespacesTable.tsx index 7ddb2c3d57..0fa6c244e9 100644 --- a/assets/src/components/cd/namespaces/NamespacesTable.tsx +++ b/assets/src/components/cd/namespaces/NamespacesTable.tsx @@ -12,13 +12,12 @@ import { GqlError } from 'components/utils/Alert' import { useProjectId } from 'components/contexts/ProjectsContext' -import { useFetchPaginatedData } from '../utils/useFetchPaginatedData' - import { - NAMESPACES_QUERY_PAGE_SIZE, - NAMESPACES_REACT_VIRTUAL_OPTIONS, - columns, -} from './Namespaces' + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../utils/table/useFetchPaginatedData' + +import { columns } from './Namespaces' export function NamespacesTable() { const theme = useTheme() @@ -36,7 +35,6 @@ export function NamespacesTable() { } = useFetchPaginatedData( { queryHook: useManagedNamespacesQuery, - pageSize: NAMESPACES_QUERY_PAGE_SIZE, keyPath: ['managedNamespaces'], }, { projectId } @@ -91,7 +89,7 @@ export function NamespacesTable() { fetchNextPage={fetchNextPage} isFetchingNextPage={loading} reactTableOptions={reactTableOptions} - reactVirtualOptions={NAMESPACES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} onVirtualSliceChange={setVirtualSlice} emptyStateProps={{ message: "Looks like you don't have any namespaces yet", diff --git a/assets/src/components/cd/namespaces/details/ManagedNamespace.tsx b/assets/src/components/cd/namespaces/details/ManagedNamespace.tsx index 323e69a857..4ae959feca 100644 --- a/assets/src/components/cd/namespaces/details/ManagedNamespace.tsx +++ b/assets/src/components/cd/namespaces/details/ManagedNamespace.tsx @@ -45,7 +45,7 @@ import { LinkTabWrap } from '../../../utils/Tabs' import { PluralErrorBoundary } from '../../PluralErrorBoundary' import { GqlError } from '../../../utils/Alert' -import { useFetchPaginatedData } from '../../utils/useFetchPaginatedData' +import { useFetchPaginatedData } from '../../../utils/table/useFetchPaginatedData' import { useProjectId } from '../../../contexts/ProjectsContext' import { mapExistingNodes } from '../../../../utils/graphql' import { TRUNCATE } from '../../../utils/truncate' diff --git a/assets/src/components/cd/namespaces/details/ManagedNamespaceServices.tsx b/assets/src/components/cd/namespaces/details/ManagedNamespaceServices.tsx index d32e985c0b..28a7545314 100644 --- a/assets/src/components/cd/namespaces/details/ManagedNamespaceServices.tsx +++ b/assets/src/components/cd/namespaces/details/ManagedNamespaceServices.tsx @@ -11,24 +11,19 @@ import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap import LoadingIndicator from 'components/utils/LoadingIndicator' import { GqlError } from 'components/utils/Alert' import { useOutletContext } from 'react-router-dom' -import { ComponentProps, useMemo } from 'react' +import { useMemo } from 'react' import { columns } from 'components/cd/services/Services' -import { useFetchPaginatedData } from '../../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../../utils/table/useFetchPaginatedData' import { useSetPageScrollable } from '../../ContinuousDeployment' import { ManagedNamespaceContextT, getBreadcrumbs } from './ManagedNamespace' -const MANAGED_NAMESPACES_QUERY_PAGE_SIZE = 100 - -const MANAGED_NAMESPACES_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - export function ManagedNamespaceServices() { const navigate = useNavigate() const { namespaceId, namespace } = @@ -54,7 +49,6 @@ export function ManagedNamespaceServices() { } = useFetchPaginatedData( { queryHook: useGetManagedNamespaceServicesQuery, - pageSize: MANAGED_NAMESPACES_QUERY_PAGE_SIZE, keyPath: ['managedNamespace', 'services'], }, { namespaceId } @@ -92,7 +86,7 @@ export function ManagedNamespaceServices() { ) } reactTableOptions={{ meta: { refetch } }} - reactVirtualOptions={MANAGED_NAMESPACES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} emptyStateProps={{ message: 'No services found.' }} /> diff --git a/assets/src/components/cd/observers/Observers.tsx b/assets/src/components/cd/observers/Observers.tsx index cdefc41c9c..4e6934f4f0 100644 --- a/assets/src/components/cd/observers/Observers.tsx +++ b/assets/src/components/cd/observers/Observers.tsx @@ -1,4 +1,4 @@ -import { ComponentProps, useState } from 'react' +import { useState } from 'react' import { IconFrame, LoopingLogo, @@ -24,7 +24,10 @@ import { Div } from 'honorable' import styled, { useTheme } from 'styled-components' import { CD_BASE_CRUMBS } from '../ContinuousDeployment' -import { useFetchPaginatedData } from '../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../utils/table/useFetchPaginatedData' import { useProjectId } from '../../contexts/ProjectsContext' import { DateTimeCol } from '../../utils/table/DateTimeCol' import { @@ -43,12 +46,6 @@ export const breadcrumbs = [ { label: 'observers', url: OBSERVERS_ABS_PATH }, ] -const pageSize = 100 - -const virtualOptions: ComponentProps['reactVirtualOptions'] = { - overscan: 10, -} - const PropsContainer = styled.div(({ theme }) => ({ display: 'flex', flexDirection: 'column', @@ -277,7 +274,7 @@ export default function Observers() { const { data, loading, error, pageInfo, fetchNextPage } = useFetchPaginatedData( - { queryHook: useObserversQuery, pageSize, keyPath: ['observers'] }, + { queryHook: useObserversQuery, keyPath: ['observers'] }, { projectId } ) @@ -291,7 +288,7 @@ export default function Observers() {
export const columnHelper = createColumnHelper() -export const REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} + const ColId = columnHelper.accessor((row) => row.node?.id, { id: 'id', header: 'Context ID', diff --git a/assets/src/components/cd/pipelines/PipelinePullRequests.tsx b/assets/src/components/cd/pipelines/PipelinePullRequests.tsx index eeec5d395d..9380534ed6 100644 --- a/assets/src/components/cd/pipelines/PipelinePullRequests.tsx +++ b/assets/src/components/cd/pipelines/PipelinePullRequests.tsx @@ -4,7 +4,7 @@ import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap import { PullRequestFragment } from 'generated/graphql' import { ComponentProps, useMemo } from 'react' -import { REACT_VIRTUAL_OPTIONS } from './PipelineContexts' +import { DEFAULT_REACT_VIRTUAL_OPTIONS } from '../../utils/table/useFetchPaginatedData' export function PipelinePullRequestsModal({ pullRequests, @@ -40,7 +40,7 @@ export function PipelinePullRequestsTable({ return (
{servicePullRequests[serviceId]?.length && ( - +
{ + e.stopPropagation() + }} + > - +
)} diff --git a/assets/src/components/cd/pipelines/utils/getNodesAndEdges.tsx b/assets/src/components/cd/pipelines/utils/getNodesAndEdges.tsx index 10cfa4e0c6..573c982bea 100644 --- a/assets/src/components/cd/pipelines/utils/getNodesAndEdges.tsx +++ b/assets/src/components/cd/pipelines/utils/getNodesAndEdges.tsx @@ -39,7 +39,7 @@ const TYPE_SORT_VALS = Object.fromEntries( ) function createNodeEdges(nodeId: string, toId: string, fromId: string) { - const edges: Edge[] = [] + const edges: Edge[] = [] if (toId) { edges.push({ @@ -75,7 +75,7 @@ export function getNodesAndEdges(pipeline: PipelineFragment) { } function getGateNodes(pipeEdges: PipelineStageEdgeFragment[]) { - const allEdges: Edge[] = [] + const allEdges: Edge[] = [] const nodes = pipeEdges?.flatMap((e) => { let edge = e @@ -106,31 +106,33 @@ function getGateNodes(pipeEdges: PipelineStageEdgeFragment[]) { } }) as Record - const ret = (Object.entries(groupedGates) as Entries) - // Order of edges matters to Dagre layout, so sort by type ahead of time - .sort(([aType], [bType]) => TYPE_SORT_VALS[bType] - TYPE_SORT_VALS[aType]) - .flatMap(([type, gates]) => { - // Don't add unsupported gate types - if (type !== NodeType.Job && type !== NodeType.Approval) { - return [] - } - // Gate types that get their own node - if (type === NodeType.Job) { - const { edges, nodes } = getFlatGateNodesAndEdges(gates, edge, type) + return ( + (Object.entries(groupedGates) as Entries) + // Order of edges matters to Dagre layout, so sort by type ahead of time + .sort( + ([aType], [bType]) => TYPE_SORT_VALS[bType] - TYPE_SORT_VALS[aType] + ) + .flatMap(([type, gates]) => { + // Don't add unsupported gate types + if (type !== NodeType.Job && type !== NodeType.Approval) { + return [] + } + // Gate types that get their own node + if (type === NodeType.Job) { + const { edges, nodes } = getFlatGateNodesAndEdges(gates, edge, type) - allEdges.push(...edges) - - return nodes - } + allEdges.push(...edges) - const { edges, node } = getGroupedGateNodeAndEdges(edge, type, gates) + return nodes + } - allEdges.push(...edges) + const { edges, node } = getGroupedGateNodeAndEdges(edge, type, gates) - return node || [] - }) + allEdges.push(...edges) - return ret + return node || [] + }) + ) }) return { nodes, edges: allEdges } @@ -164,7 +166,7 @@ function getFlatGateNodesAndEdges( edge: PipelineStageEdgeFragment, type: NodeType ) { - const edges: Edge[] = [] + const edges: Edge[] = [] const nodes = gates?.flatMap((gate) => { const nodeId = gate.id diff --git a/assets/src/components/cd/pipelines/utils/nodeLayouter.tsx b/assets/src/components/cd/pipelines/utils/nodeLayouter.tsx index fd633f30df..8dfa367090 100644 --- a/assets/src/components/cd/pipelines/utils/nodeLayouter.tsx +++ b/assets/src/components/cd/pipelines/utils/nodeLayouter.tsx @@ -14,13 +14,11 @@ function measureNode(node: FlowNode, zoom) { const rect = domNode?.getBoundingClientRect() - const ret = { + return { ...node, width: (rect?.width || 200) / zoom, height: (rect?.height || 200) / zoom, } - - return ret } export type DagreDirection = 'LR' | 'RL' | 'TB' | 'BT' export const getLayoutedElements = ( @@ -41,7 +39,7 @@ export const getLayoutedElements = ( align: 'UL', marginx: margin, marginy: margin, - nodesep: gridGap * 1, + nodesep: gridGap, ranksep: gridGap * 4, }) diff --git a/assets/src/components/cd/repos/FluxHelmRepositoriesColumns.tsx b/assets/src/components/cd/repos/FluxHelmRepositoriesColumns.tsx index 9c880ce364..00bf564521 100644 --- a/assets/src/components/cd/repos/FluxHelmRepositoriesColumns.tsx +++ b/assets/src/components/cd/repos/FluxHelmRepositoriesColumns.tsx @@ -39,13 +39,6 @@ export const ColNamespace = columnHelper.accessor( } ) -export const ColAuthMethod = columnHelper.accessor((node) => node?.spec.type, { - id: 'type', - header: 'Type', - enableSorting: true, - cell: ({ getValue }) => getValue(), -}) - export const ColStatus = columnHelper.accessor( (repo) => (repo?.status?.ready ? GitHealth.Pullable : GitHealth.Failed), { diff --git a/assets/src/components/cd/services/Services.tsx b/assets/src/components/cd/services/Services.tsx index 2369bca76e..77731dc5ed 100644 --- a/assets/src/components/cd/services/Services.tsx +++ b/assets/src/components/cd/services/Services.tsx @@ -1,17 +1,9 @@ -import { - ComponentProps, - Dispatch, - SetStateAction, - useMemo, - useRef, - useState, -} from 'react' +import { Dispatch, SetStateAction, useMemo, useRef, useState } from 'react' import { ListIcon, NetworkInterfaceIcon, SubTab, TabList, - Table, useSetBreadcrumbs, } from '@pluralsh/design-system' import { useTheme } from 'styled-components' @@ -61,14 +53,6 @@ export const columns = [ ColActions, ] -export const SERVICES_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - -export const SERVICES_QUERY_PAGE_SIZE = 100 - export function getServiceStatuses( serviceStatuses?: Maybe[]> ): Record { diff --git a/assets/src/components/cd/services/ServicesTable.tsx b/assets/src/components/cd/services/ServicesTable.tsx index be05948a3a..90f3ed5300 100644 --- a/assets/src/components/cd/services/ServicesTable.tsx +++ b/assets/src/components/cd/services/ServicesTable.tsx @@ -16,18 +16,15 @@ import { GqlError } from 'components/utils/Alert' import { useOutletContext } from 'react-router-dom' -import { useFetchPaginatedData } from '../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../utils/table/useFetchPaginatedData' import { useProjectId } from '../../contexts/ProjectsContext' import { ServicesFilters, StatusTabKey } from './ServicesFilters' -import { - SERVICES_QUERY_PAGE_SIZE, - SERVICES_REACT_VIRTUAL_OPTIONS, - ServicesContextT, - columns, - getServiceStatuses, -} from './Services' +import { ServicesContextT, columns, getServiceStatuses } from './Services' export default function ServicesTable() { const theme = useTheme() @@ -53,7 +50,6 @@ export default function ServicesTable() { } = useFetchPaginatedData( { queryHook: useServiceDeploymentsQuery, - pageSize: SERVICES_QUERY_PAGE_SIZE, keyPath: ['serviceDeployments'], }, { @@ -138,7 +134,7 @@ export default function ServicesTable() { fetchNextPage={fetchNextPage} isFetchingNextPage={loading} reactTableOptions={reactTableOptions} - reactVirtualOptions={SERVICES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} onVirtualSliceChange={setVirtualSlice} /> diff --git a/assets/src/components/cd/services/service/ServiceDetailsSidecar.tsx b/assets/src/components/cd/services/service/ServiceDetailsSidecar.tsx index 56dfc18e3e..b48651129d 100644 --- a/assets/src/components/cd/services/service/ServiceDetailsSidecar.tsx +++ b/assets/src/components/cd/services/service/ServiceDetailsSidecar.tsx @@ -81,6 +81,7 @@ export function ServiceDetailsSidecar({ message="Resync service" tooltipMessage="Use this to sync this service now instead of at the next poll interval" variables={{ id }} + width="100%" /> diff --git a/assets/src/components/cd/services/service/ServicePRs.tsx b/assets/src/components/cd/services/service/ServicePRs.tsx index ac881a9ad4..303d864889 100644 --- a/assets/src/components/cd/services/service/ServicePRs.tsx +++ b/assets/src/components/cd/services/service/ServicePRs.tsx @@ -28,13 +28,12 @@ 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 { useThrottle } from '../../../hooks/useThrottle' -import { useFetchPaginatedData } from '../../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../../utils/table/useFetchPaginatedData' import { getServiceDetailsBreadcrumbs, @@ -88,7 +87,6 @@ export default function ServicePRs() { } = useFetchPaginatedData( { queryHook: usePullRequestsQuery, - pageSize: PR_QUERY_PAGE_SIZE, keyPath: ['pullRequests'], }, { @@ -140,7 +138,7 @@ export default function ServicePRs() {
data?.clusters?.edges?.flatMap((e) => (e?.node ? e.node : [])) || [], [data?.clusters?.edges] ) - const pageInfo = data?.clusters?.pageInfo const findCluster = useCallback( (clusterId: Nullable) => { if (!clusterId) { return null } - if (currentData?.cluster && currentData?.cluster.id === clusterId) { - return currentData.cluster - } - if (previousData?.cluster && previousData?.cluster.id === clusterId) { - return previousData.cluster + if (data?.cluster && data?.cluster.id === clusterId) { + return data.cluster } return clusters?.find((cluster) => cluster?.id === clusterId) }, - [clusters, currentData?.cluster, previousData?.cluster] + [clusters, data?.cluster] ) + const selectedCluster = useMemo( () => findCluster(clusterId), [clusterId, findCluster] @@ -122,20 +114,13 @@ export default function ClusterSelector({ Loading ) : isEmpty(clusters) ? ( No results - ) : data?.clusters?.pageInfo.hasNextPage ? ( + ) : pageInfo?.hasNextPage ? ( Show more ) : undefined } onFooterClick={() => { - if (data?.clusters?.pageInfo.hasNextPage) { - if (!pageInfo) { - return - } - fetchMore({ - variables: { after: pageInfo.endCursor }, - updateQuery: (prev, { fetchMoreResult: { clusters } }) => - extendConnection(prev, clusters, 'clusters'), - }) + if (pageInfo?.hasNextPage) { + fetchNextPage() } else { setClusterSelectIsOpen(false) } diff --git a/assets/src/components/cluster/nodes/NodeEvents.tsx b/assets/src/components/cluster/nodes/NodeEvents.tsx index ff9fae1134..ac135e171c 100644 --- a/assets/src/components/cluster/nodes/NodeEvents.tsx +++ b/assets/src/components/cluster/nodes/NodeEvents.tsx @@ -10,10 +10,8 @@ import EventsTable from '../../utils/EventsTable' export default function NodeEvents() { const { name } = useParams() - const { data, refetch: _refetch } = useQuery<{ - node: { - events?: Event[] - } + const { data } = useQuery<{ + node: { events?: Event[] } }>(NODE_EVENTS_Q, { variables: { name }, fetchPolicy: 'cache-and-network', diff --git a/assets/src/components/cluster/nodes/NodeRaw.tsx b/assets/src/components/cluster/nodes/NodeRaw.tsx index 26c1c09c93..d31efa9cb2 100644 --- a/assets/src/components/cluster/nodes/NodeRaw.tsx +++ b/assets/src/components/cluster/nodes/NodeRaw.tsx @@ -10,11 +10,7 @@ import { RawPageCode } from '../RawPageCode' export default function NodeEvents() { const { name } = useParams() - const { data, refetch: _refetch } = useQuery<{ - node: { - raw: string - } - }>(NODE_RAW_Q, { + const { data } = useQuery<{ node: { raw: string } }>(NODE_RAW_Q, { variables: { name }, pollInterval: POLL_INTERVAL, fetchPolicy: 'cache-and-network', diff --git a/assets/src/components/cluster/pods/PodsList.tsx b/assets/src/components/cluster/pods/PodsList.tsx index f5cb2bddf8..e5ea01229f 100644 --- a/assets/src/components/cluster/pods/PodsList.tsx +++ b/assets/src/components/cluster/pods/PodsList.tsx @@ -23,7 +23,7 @@ import { ReadinessT } from 'utils/status' import { Confirm } from 'components/utils/Confirm' import { useMutation } from '@apollo/client' -import { TruncateStart } from 'components/utils/table/TruncateStart' +import { TruncateStart } from 'components/utils/table/Truncate' import { InlineLink } from 'components/utils/typography/InlineLink' diff --git a/assets/src/components/commandpalette/commands.ts b/assets/src/components/commandpalette/commands.ts index ddc9a96e16..14a44b0f40 100644 --- a/assets/src/components/commandpalette/commands.ts +++ b/assets/src/components/commandpalette/commands.ts @@ -117,18 +117,16 @@ export function useCommands(): CommandGroup[] { const { data } = useClustersTinyQuery({ pollInterval: 120_000, fetchPolicy: 'cache-and-network', - variables: { projectId }, + variables: { projectId, first: 100 }, }) - const clusters = useMemo( - () => mapExistingNodes(data?.clusters), - [data?.clusters] - ) + const cluster = useMemo(() => { + const clusters = mapExistingNodes(data?.clusters) - const cluster = useMemo( - () => (!isEmpty(clusters) ? clusters[0] : undefined), - [clusters] - ) + return !isEmpty(clusters) + ? clusters.find(({ self }) => !!self) ?? clusters[0] + : undefined + }, [data?.clusters]) return useMemo( () => [ diff --git a/assets/src/components/component/ComponentMetadata.tsx b/assets/src/components/component/ComponentMetadata.tsx index b07e34e49d..6dd7e2247a 100644 --- a/assets/src/components/component/ComponentMetadata.tsx +++ b/assets/src/components/component/ComponentMetadata.tsx @@ -7,8 +7,6 @@ import { ComponentStatusChip } from '../apps/app/components/misc' import { InfoSection } from './info/common' -export const componentsWithLogs: string[] = ['deployment', 'statefulset'] - export default function MetadataOutlet() { const { component, data } = useOutletContext() diff --git a/assets/src/components/component/ComponentRaw.tsx b/assets/src/components/component/ComponentRaw.tsx index 3bc8141cd3..5428f417d4 100644 --- a/assets/src/components/component/ComponentRaw.tsx +++ b/assets/src/components/component/ComponentRaw.tsx @@ -42,7 +42,7 @@ export function RawYaml({ raw }: { raw?: object | string | null | undefined }) { export function RawJson({ raw }: { raw?: object | string | null | undefined }) { const rawStr = useMemo(() => { - let json = '' + let json: string try { json = raw diff --git a/assets/src/components/component/tree/ComponentTreeNode.tsx b/assets/src/components/component/tree/ComponentTreeNode.tsx index 123c687e67..c3ee904dde 100644 --- a/assets/src/components/component/tree/ComponentTreeNode.tsx +++ b/assets/src/components/component/tree/ComponentTreeNode.tsx @@ -4,7 +4,6 @@ import { Modal, Tooltip, } from '@pluralsh/design-system' -import { PipelineStageEdgeFragment } from 'generated/graphql' import { ComponentProps, useState } from 'react' import { type NodeProps, Position } from 'reactflow' import { useTheme } from 'styled-components' @@ -175,5 +174,3 @@ function DetailsModal({ ) } - -export type EdgeNode = NodeProps diff --git a/assets/src/components/contexts/DocPageContext.tsx b/assets/src/components/contexts/DocPageContext.tsx index f4a9ca9e41..1bf0e0dca2 100644 --- a/assets/src/components/contexts/DocPageContext.tsx +++ b/assets/src/components/contexts/DocPageContext.tsx @@ -29,7 +29,6 @@ const reducer: ImmerReducer< draft.selectedHash = action.payload return draft - break case 'setHash': draft.selectedHash = action.payload diff --git a/assets/src/components/db-management/RestoreDatabaseModal.tsx b/assets/src/components/db-management/RestoreDatabaseModal.tsx index 8081ca08ae..04528a92e0 100644 --- a/assets/src/components/db-management/RestoreDatabaseModal.tsx +++ b/assets/src/components/db-management/RestoreDatabaseModal.tsx @@ -110,7 +110,7 @@ export function RestoreDatabaseModal({ } } - const modal = ( + return ( ) - - return modal } diff --git a/assets/src/components/db-management/TimezoneComboBox.tsx b/assets/src/components/db-management/TimezoneComboBox.tsx index 4d63ffd4a5..60f0bd6b49 100644 --- a/assets/src/components/db-management/TimezoneComboBox.tsx +++ b/assets/src/components/db-management/TimezoneComboBox.tsx @@ -92,7 +92,7 @@ export function TimezoneComboBox({ ? `${currentZone.friendlyName} (${currentZone.offset})` : 'Select a timezone' - const comboBox = ( + return ( ) - - return comboBox } diff --git a/assets/src/components/help/Chatbot.tsx b/assets/src/components/help/Chatbot.tsx index 2b714cef76..961d283620 100644 --- a/assets/src/components/help/Chatbot.tsx +++ b/assets/src/components/help/Chatbot.tsx @@ -221,7 +221,7 @@ function ChatbotFrame({ ComponentProps, { onClose: () => void; onMin: () => void } >) { - const [lazyQ, { called, loading, data, error: _error }] = useChatLazyQuery() + const [lazyQ, { called, loading, data }] = useChatLazyQuery() const hasMounted = useRef(false) const wasLoading = usePrevious(loading) const historyScrollRef = useRef(null) diff --git a/assets/src/components/home/Home.tsx b/assets/src/components/home/Home.tsx index ab88d02f68..84e3ef0a3d 100644 --- a/assets/src/components/home/Home.tsx +++ b/assets/src/components/home/Home.tsx @@ -21,7 +21,7 @@ export default function Home() { const isManager = useIsManager() return ( - + >) => navigate( diff --git a/assets/src/components/home/deployments/DeploymentsCard.tsx b/assets/src/components/home/deployments/DeploymentsCard.tsx index aec0560693..2f636bd221 100644 --- a/assets/src/components/home/deployments/DeploymentsCard.tsx +++ b/assets/src/components/home/deployments/DeploymentsCard.tsx @@ -1,13 +1,12 @@ -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { ServiceDeploymentStatus, useServiceDeploymentsQuery, } from 'generated/graphql' -import { - SERVICES_QUERY_PAGE_SIZE, - SERVICES_REACT_VIRTUAL_OPTIONS, -} from 'components/cd/services/Services' import { GqlError } from 'components/utils/Alert' import pluralize from 'pluralize' @@ -31,13 +30,9 @@ export function DeploymentsCard() { } = useFetchPaginatedData( { queryHook: useServiceDeploymentsQuery, - pageSize: SERVICES_QUERY_PAGE_SIZE, keyPath: ['serviceDeployments'], }, - { - status: ServiceDeploymentStatus.Failed, - projectId, - } + { status: ServiceDeploymentStatus.Failed, projectId } ) if (error) { @@ -60,7 +55,7 @@ export function DeploymentsCard() { hasNextPage={pageInfo?.hasNextPage} fetchNextPage={fetchNextPage} isFetchingNextPage={loading} - reactVirtualOptions={SERVICES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} onVirtualSliceChange={setVirtualSlice} css={{ maxHeight: HOME_CARD_MAX_HEIGHT }} /> diff --git a/assets/src/components/home/deployments/DeploymentsTable.tsx b/assets/src/components/home/deployments/DeploymentsTable.tsx index 734aeb8ba5..4647ec6829 100644 --- a/assets/src/components/home/deployments/DeploymentsTable.tsx +++ b/assets/src/components/home/deployments/DeploymentsTable.tsx @@ -4,7 +4,6 @@ import { ComponentProps } from 'react' import { useNavigate } from 'react-router-dom' import { Edge } from 'utils/graphql' import { Row } from '@tanstack/react-table' -import { SERVICES_REACT_VIRTUAL_OPTIONS } from 'components/cd/services/Services' import { getServiceDetailsPath } from 'routes/cdRoutesConsts' import { @@ -17,6 +16,8 @@ import { } from 'components/cd/services/ServicesColumns' import { TableSkeleton } from 'components/utils/SkeletonLoaders' +import { DEFAULT_REACT_VIRTUAL_OPTIONS } from '../../utils/table/useFetchPaginatedData' + export function DeploymentsTable({ refetch, data, @@ -39,7 +40,7 @@ export function DeploymentsTable({ loose data={data} columns={deploymentsColumns} - reactVirtualOptions={SERVICES_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} reactTableOptions={reactTableOptions} onRowClick={( _e, diff --git a/assets/src/components/home/managerview/violations/ConstraintViolationsCard.tsx b/assets/src/components/home/managerview/violations/ConstraintViolationsCard.tsx index 45befacd8e..8d604d3247 100644 --- a/assets/src/components/home/managerview/violations/ConstraintViolationsCard.tsx +++ b/assets/src/components/home/managerview/violations/ConstraintViolationsCard.tsx @@ -1,6 +1,6 @@ import { H1 } from 'honorable' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { useFetchPaginatedData } from 'components/utils/table/useFetchPaginatedData' import { GqlError } from 'components/utils/Alert' import { PolicyAggregate, @@ -11,8 +11,6 @@ import { useTheme } from 'styled-components' import { POLL_INTERVAL } from 'components/cd/ContinuousDeployment' -import { POLICIES_QUERY_PAGE_SIZE } from 'components/policies/Policies' - import { PoliciesTable } from 'components/policies/PoliciesTable' import { TableSkeleton } from 'components/utils/SkeletonLoaders' @@ -32,7 +30,6 @@ export function ConstraintViolationsCard() { setVirtualSlice, } = useFetchPaginatedData({ queryHook: usePolicyConstraintsQuery, - pageSize: POLICIES_QUERY_PAGE_SIZE, keyPath: ['policyConstraints'], }) diff --git a/assets/src/components/home/pullrequests/PrCard.tsx b/assets/src/components/home/pullrequests/PrCard.tsx index 51e82a21a9..1f010b0d0f 100644 --- a/assets/src/components/home/pullrequests/PrCard.tsx +++ b/assets/src/components/home/pullrequests/PrCard.tsx @@ -1,7 +1,6 @@ -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { useFetchPaginatedData } from 'components/utils/table/useFetchPaginatedData' import { usePullRequestsQuery } from 'generated/graphql' -import { PR_QUERY_PAGE_SIZE } from 'components/pr/queue/PrQueue' import { GqlError } from 'components/utils/Alert' import { Title2H1 } from '../../utils/typography/Text' @@ -18,14 +17,8 @@ export function PrCard() { fetchNextPage, setVirtualSlice, } = useFetchPaginatedData( - { - queryHook: usePullRequestsQuery, - pageSize: PR_QUERY_PAGE_SIZE, - keyPath: ['pullRequests'], - }, - { - open: true, - } + { queryHook: usePullRequestsQuery, keyPath: ['pullRequests'] }, + { open: true } ) if (error) { diff --git a/assets/src/components/home/pullrequests/PrTable.tsx b/assets/src/components/home/pullrequests/PrTable.tsx index 56b4e3b306..f205698b30 100644 --- a/assets/src/components/home/pullrequests/PrTable.tsx +++ b/assets/src/components/home/pullrequests/PrTable.tsx @@ -1,9 +1,10 @@ import { Table } from '@pluralsh/design-system' import { ComponentProps } from 'react' import { prColumns } from 'components/pr/queue/PrQueueColumns' -import { PRS_REACT_VIRTUAL_OPTIONS } from 'components/pr/queue/PrQueue' import { TableSkeleton } from 'components/utils/SkeletonLoaders' +import { DEFAULT_REACT_VIRTUAL_OPTIONS } from '../../utils/table/useFetchPaginatedData' + export function PrTable({ refetch, data, @@ -25,7 +26,7 @@ export function PrTable({ loose data={data} columns={prColumns} - reactVirtualOptions={PRS_REACT_VIRTUAL_OPTIONS} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} reactTableOptions={reactTableOptions} {...props} /> diff --git a/assets/src/components/hooks/useNewKeyIf.tsx b/assets/src/components/hooks/useNewKeyIf.tsx deleted file mode 100644 index 0b27307e29..0000000000 --- a/assets/src/components/hooks/useNewKeyIf.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useRef } from 'react' - -export function useNewKeyIf(condition: boolean) { - const key = useRef(Number.MIN_SAFE_INTEGER) - - if (condition) { - key.current = - key.current < Number.MAX_SAFE_INTEGER - ? key.current + 1 - : Number.MIN_SAFE_INTEGER - } - - return key.current -} diff --git a/assets/src/components/kubernetes/rbac/ClusterRole.tsx b/assets/src/components/kubernetes/rbac/ClusterRole.tsx index ee3707093a..679f6aedc8 100644 --- a/assets/src/components/kubernetes/rbac/ClusterRole.tsx +++ b/assets/src/components/kubernetes/rbac/ClusterRole.tsx @@ -1,19 +1,16 @@ import { ReactElement, useMemo } from 'react' -import { Outlet, useOutletContext, useParams } from 'react-router-dom' +import { Outlet, useParams } from 'react-router-dom' import { useSetBreadcrumbs } from '@pluralsh/design-system' import { KubernetesClient } from '../../../helpers/kubernetes.client' import { ClusterRoleQueryVariables, - Clusterrole_ClusterRoleDetail as ClusterRoleT, useClusterRoleQuery, } from '../../../generated/graphql-kubernetes' import { MetadataSidecar } from '../common/utils' import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts' import LoadingIndicator from '../../utils/LoadingIndicator' import ResourceDetails, { TabEntry } from '../common/ResourceDetails' -import PolicyRules from '../common/PolicyRules' -import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap' import { useCluster } from '../Cluster' import { Kind } from '../common/types' @@ -63,13 +60,3 @@ export default function ClusterRole(): ReactElement { ) } - -export function RolePolicyRules(): ReactElement { - const cr = useOutletContext() as ClusterRoleT - - return ( - - - - ) -} diff --git a/assets/src/components/kubernetes/workloads/utils.tsx b/assets/src/components/kubernetes/workloads/utils.tsx index 05db5178db..7aeace8cb3 100644 --- a/assets/src/components/kubernetes/workloads/utils.tsx +++ b/assets/src/components/kubernetes/workloads/utils.tsx @@ -9,7 +9,7 @@ import { Common_PodInfo as PodInfoT, } from '../../../generated/graphql-kubernetes' import { Readiness, ReadinessT } from '../../../utils/status' -import { TruncateStart } from '../../utils/table/TruncateStart' +import { TruncateStart } from '../../utils/table/Truncate' const podStatusSeverity = { Running: 'success', diff --git a/assets/src/components/login/Login.tsx b/assets/src/components/login/Login.tsx index e27780c9a3..b30c6b243d 100644 --- a/assets/src/components/login/Login.tsx +++ b/assets/src/components/login/Login.tsx @@ -19,12 +19,14 @@ import { import { localized } from '../../helpers/hostname' import { LoginContextProvider } from '../contexts' import { ME_Q, SIGNIN } from '../graphql/users' -import { LoginPortal } from '../login/LoginPortal' + import { GqlError } from '../utils/Alert' import { LabelledInput } from '../utils/LabelledInput' import LoadingIndicator from '../utils/LoadingIndicator' import ShowAfterDelay from '../utils/ShowAfterDelay' +import { LoginPortal } from './LoginPortal' + // 30 seconds const POLL_INTERVAL = 30 * 1000 const LOGIN_INFO = gql` diff --git a/assets/src/components/notifications/NotificationsPanel.tsx b/assets/src/components/notifications/NotificationsPanel.tsx index d9195d438a..03b580635e 100644 --- a/assets/src/components/notifications/NotificationsPanel.tsx +++ b/assets/src/components/notifications/NotificationsPanel.tsx @@ -19,19 +19,14 @@ import { useAppNotificationsQuery, useReadAppNotificationsMutation, } from '../../generated/graphql' -import { useFetchPaginatedData } from '../cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../utils/table/useFetchPaginatedData' import { mapExistingNodes } from '../../utils/graphql' import Notification from './Notification' -const NOTIFICATIONS_QUERY_PAGE_SIZE = 100 - -const REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - const columnHelper = createColumnHelper() const columns = [ @@ -55,7 +50,6 @@ export function NotificationsPanel({ const { data, pageInfo, fetchNextPage, setVirtualSlice } = useFetchPaginatedData({ queryHook: useAppNotificationsQuery, - pageSize: NOTIFICATIONS_QUERY_PAGE_SIZE, keyPath: ['appNotifications'], }) @@ -133,7 +127,7 @@ export function NotificationsPanel({
['reactVirtualOptions'] = { - overscan: 10, -} - export function Policies() { useSetBreadcrumbs(breadcrumbs) // const [searchString, setSearchString] = useState('') @@ -53,7 +45,6 @@ export function Policies() { useFetchPaginatedData( { queryHook: usePolicyConstraintsQuery, - pageSize: POLICIES_QUERY_PAGE_SIZE, keyPath: ['policyConstraints'], }, policyQFilters diff --git a/assets/src/components/policies/PoliciesFilter.tsx b/assets/src/components/policies/PoliciesFilter.tsx index bb7fa62ce5..830cbbdb89 100644 --- a/assets/src/components/policies/PoliciesFilter.tsx +++ b/assets/src/components/policies/PoliciesFilter.tsx @@ -10,10 +10,11 @@ import { useViolationStatisticsQuery, } from 'generated/graphql' -import { Dispatch, SetStateAction } from 'react' +import { Dispatch, SetStateAction, useMemo } from 'react' import styled, { useTheme } from 'styled-components' import { useProjectId } from '../contexts/ProjectsContext' +import { mapExistingNodes } from '../../utils/graphql' function PoliciesFilter({ selectedKinds, @@ -63,7 +64,10 @@ function PoliciesFilter({ })) .filter(({ id }) => Boolean(id)) - const clusters = clustersData?.clusters?.edges + const clusters = useMemo( + () => mapExistingNodes(clustersData?.clusters), + [clustersData?.clusters] + ) const clusterLabel = 'Cluster' const kindLabel = 'Kind' @@ -104,24 +108,19 @@ function PoliciesFilter({ > No cluster - {clusters?.map((edge) => { - if (!edge?.node) return null - const { node } = edge - - return ( - { - handleCheckboxChange(setSelectedClusters, node.id, checked) - }} - > - {node.name} - - ) - })} + {clusters?.map((node) => ( + { + handleCheckboxChange(setSelectedClusters, node.id, checked) + }} + > + {node.name} + + ))} diff --git a/assets/src/components/pr/automations/PrAutomations.tsx b/assets/src/components/pr/automations/PrAutomations.tsx index e3351f58d9..516a7ee793 100644 --- a/assets/src/components/pr/automations/PrAutomations.tsx +++ b/assets/src/components/pr/automations/PrAutomations.tsx @@ -1,4 +1,4 @@ -import { ComponentProps, useMemo } from 'react' +import { useMemo } from 'react' import { ArrowTopRightIcon, Button, @@ -18,19 +18,15 @@ import { useSetPageHeaderContent } from 'components/cd/ContinuousDeployment' import { PR_BASE_CRUMBS, PR_QUEUE_ABS_PATH } from 'routes/prRoutesConsts' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { columns } from './PrAutomationsColumns' const DOCS_URL = 'https://docs.plural.sh/deployments/pr/crds' -const REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - -const QUERY_PAGE_SIZE = 100 const crumbs = [ ...PR_BASE_CRUMBS, { @@ -54,7 +50,6 @@ export default function AutomationPr() { setVirtualSlice, } = useFetchPaginatedData({ queryHook: usePrAutomationsQuery, - pageSize: QUERY_PAGE_SIZE, keyPath: ['prAutomations'], }) @@ -96,7 +91,7 @@ export default function AutomationPr() {
{ setValue(isChecked.toString()) }} diff --git a/assets/src/components/pr/queue/PrQueue.tsx b/assets/src/components/pr/queue/PrQueue.tsx index 0a562771df..ab104fb89c 100644 --- a/assets/src/components/pr/queue/PrQueue.tsx +++ b/assets/src/components/pr/queue/PrQueue.tsx @@ -17,17 +17,13 @@ import { useThrottle } from 'components/hooks/useThrottle' import { GqlError } from 'components/utils/Alert' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { prColumns } from './PrQueueColumns' -export const PRS_REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - -export const PR_QUERY_PAGE_SIZE = 100 const PR_STATUS_TAB_KEYS = ['ALL', 'OPEN', 'CLOSED'] as const type PrStatusTabKey = (typeof PR_STATUS_TAB_KEYS)[number] @@ -60,14 +56,8 @@ export default function OutstandingPrs() { fetchNextPage, setVirtualSlice, } = useFetchPaginatedData( - { - queryHook: usePullRequestsQuery, - pageSize: PR_QUERY_PAGE_SIZE, - keyPath: ['pullRequests'], - }, - { - q: debouncedSearchString, - } + { queryHook: usePullRequestsQuery, keyPath: ['pullRequests'] }, + { q: debouncedSearchString } ) const reactTableOptions: ComponentProps['reactTableOptions'] = { @@ -103,7 +93,7 @@ export default function OutstandingPrs() {
['reactVirtualOptions'] = { - overscan: 10, -} - export const PR_QUERY_PAGE_SIZE = 100 const crumbs = [ @@ -47,7 +43,6 @@ export default function ScmConnections() { setVirtualSlice, } = useFetchPaginatedData({ queryHook: useScmConnectionsQuery, - pageSize: PR_QUERY_PAGE_SIZE, keyPath: ['scmConnections'], }) @@ -83,7 +78,7 @@ export default function ScmConnections() {
['reactVirtualOptions'] = { - overscan: 10, -} - export const PR_QUERY_PAGE_SIZE = 100 const crumbs = [ @@ -85,7 +81,7 @@ export default function ScmWebhooks() {
node?.url, { gap: theme.spacing.small, }} > - - {url} - + {url} ) diff --git a/assets/src/components/settings/global/observability/ObservabilityProviders.tsx b/assets/src/components/settings/global/observability/ObservabilityProviders.tsx index 0f6438d0a3..efe60daa0c 100644 --- a/assets/src/components/settings/global/observability/ObservabilityProviders.tsx +++ b/assets/src/components/settings/global/observability/ObservabilityProviders.tsx @@ -3,24 +3,20 @@ import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap import { useObservabilityProvidersQuery } from 'generated/graphql' -import { ComponentProps, useState } from 'react' +import { useState } from 'react' import { GqlError } from 'components/utils/Alert' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { SettingsPageHeader } from 'components/settings/Settings' import { EditObservabilityProviderModal } from './EditObservabilityProvider' import { columns } from './ObservabilityProvidersColumns' -const REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} -const OBSERVABILITY_PROVIDER_QUERY_PAGE_SIZE = 100 - const OBSERVABILITY_PROVIDERS_TABLE_HEIGHT = '224px' export default function ObservabilityProviders() { @@ -34,7 +30,6 @@ export default function ObservabilityProviders() { setVirtualSlice, } = useFetchPaginatedData({ queryHook: useObservabilityProvidersQuery, - pageSize: OBSERVABILITY_PROVIDER_QUERY_PAGE_SIZE, keyPath: ['observabilityProviders'], }) @@ -61,7 +56,7 @@ export default function ObservabilityProviders() {
{ setValue(isChecked.toString()) }} diff --git a/assets/src/components/settings/notifications/routers/NotificationRouters.tsx b/assets/src/components/settings/notifications/routers/NotificationRouters.tsx index 40ecda6350..17e8be2ab6 100644 --- a/assets/src/components/settings/notifications/routers/NotificationRouters.tsx +++ b/assets/src/components/settings/notifications/routers/NotificationRouters.tsx @@ -1,4 +1,4 @@ -import { ComponentProps, useMemo, useState } from 'react' +import { useMemo, useState } from 'react' import { Button, LoopingLogo, @@ -20,18 +20,14 @@ import { NOTIFICATIONS_ROUTERS_ABS_PATH, } from 'routes/settingsRoutesConst' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { columns } from './NotificationRoutersColumns' import { CreateNotificationRouterModal } from './CreateNotificationRouterModal' -const REACT_VIRTUAL_OPTIONS: ComponentProps< - typeof Table ->['reactVirtualOptions'] = { - overscan: 10, -} - -const QUERY_PAGE_SIZE = 100 const crumbs = [ ...NOTIFICATIONS_BASE_CRUMBS, { @@ -74,7 +70,6 @@ export default function NotificationRouters() { setVirtualSlice, } = useFetchPaginatedData({ queryHook: useNotificationRoutersQuery, - pageSize: QUERY_PAGE_SIZE, errorPolicy: 'all', keyPath: ['notificationRouters'], }) @@ -101,7 +96,7 @@ export default function NotificationRouters() {
['reactVirtualOptions'] = { - overscan: 10, -} - -const QUERY_PAGE_SIZE = 100 const crumbs = [ ...NOTIFICATIONS_BASE_CRUMBS, { @@ -55,7 +51,6 @@ export default function NotificationSinks() { setVirtualSlice, } = useFetchPaginatedData({ queryHook: useNotificationSinksQuery, - pageSize: QUERY_PAGE_SIZE, keyPath: ['notificationSinks'], }) @@ -81,7 +76,7 @@ export default function NotificationSinks() {
Enable all - {true && ( -
- {Object.entries(configTabs).map(([key, label]) => ( +
+ {Object.entries(configTabs).map(([key, label]) => ( +
+ + {label} +
- - {label} - -
- {configuration[key] && - Object.entries(configuration[key]).map( - ([subKey, checked]) => ( - - setConfiguration?.( - produce(configuration, (draft) => { - draft[key][subKey] = !draft[key][subKey] - }) - ) - } - > - {configKeyToLabel(subKey)} - - ) - )} -
+ {configuration[key] && + Object.entries(configuration[key]).map(([subKey, checked]) => ( + + setConfiguration?.( + produce(configuration, (draft) => { + draft[key][subKey] = !draft[key][subKey] + }) + ) + } + > + {configKeyToLabel(subKey)} + + ))}
- ))} -
- )} +
+ ))} +
) } diff --git a/assets/src/components/settings/usermanagement/personas/PersonasList.tsx b/assets/src/components/settings/usermanagement/personas/PersonasList.tsx index 6716e222c4..70bb789684 100644 --- a/assets/src/components/settings/usermanagement/personas/PersonasList.tsx +++ b/assets/src/components/settings/usermanagement/personas/PersonasList.tsx @@ -6,16 +6,16 @@ import { PersonaFragment, usePersonasQuery } from 'generated/graphql' import { createColumnHelper } from '@tanstack/react-table' import { GridTableWrapper } from '../../../utils/layout/ResponsiveGridLayouts' -import { useFetchPaginatedData } from '../../../cd/utils/useFetchPaginatedData' import { GqlError } from '../../../utils/Alert' - import { Info } from '../../../utils/Info' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../../utils/table/useFetchPaginatedData' import PersonaActions from './PersonaActions' import PersonaCreate from './PersonaCreate' -export const pageSize = 100 - const columnHelper = createColumnHelper() const columns = [ columnHelper.accessor((persona) => persona, { @@ -45,7 +45,6 @@ export function PersonasList() { useFetchPaginatedData({ queryHook: usePersonasQuery, keyPath: ['personas'], - pageSize, }) const personas = useMemo( @@ -68,7 +67,7 @@ export function PersonasList() { fetchNextPage={fetchNextPage} isFetchingNextPage={loading} onVirtualSliceChange={setVirtualSlice} - reactVirtualOptions={{ overscan: 10 }} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} css={{ maxHeight: 'unset', height: '100%', diff --git a/assets/src/components/settings/usermanagement/serviceaccounts/ServiceAccountsList.tsx b/assets/src/components/settings/usermanagement/serviceaccounts/ServiceAccountsList.tsx index f8a3878fae..2673f02dd3 100644 --- a/assets/src/components/settings/usermanagement/serviceaccounts/ServiceAccountsList.tsx +++ b/assets/src/components/settings/usermanagement/serviceaccounts/ServiceAccountsList.tsx @@ -6,7 +6,10 @@ import { useServiceAccountsQuery } from 'generated/graphql' import LoadingIndicator from 'components/utils/LoadingIndicator' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { GqlError } from 'components/utils/Alert' @@ -71,7 +74,7 @@ export default function ServiceAccountsList({ fetchNextPage={fetchNextPage} isFetchingNextPage={loading} onVirtualSliceChange={setVirtualSlice} - reactVirtualOptions={{ overscan: 10 }} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} reactTableOptions={reactTableOptions} css={{ height: '100%', diff --git a/assets/src/components/settings/usermanagement/users/UsersList.tsx b/assets/src/components/settings/usermanagement/users/UsersList.tsx index e5392435d3..938c75e889 100644 --- a/assets/src/components/settings/usermanagement/users/UsersList.tsx +++ b/assets/src/components/settings/usermanagement/users/UsersList.tsx @@ -7,7 +7,10 @@ import { useUsersQuery } from 'generated/graphql' import { LoginContext } from 'components/contexts' import LoadingIndicator from 'components/utils/LoadingIndicator' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { GqlError } from 'components/utils/Alert' @@ -61,7 +64,7 @@ export default function UsersList() { fetchNextPage={fetchNextPage} isFetchingNextPage={loading} onVirtualSliceChange={setVirtualSlice} - reactVirtualOptions={{ overscan: 10 }} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} reactTableOptions={reactTableOptions} css={{ height: '100%', diff --git a/assets/src/components/stacks/StackSettingsModal.tsx b/assets/src/components/stacks/StackSettingsModal.tsx index 921c832934..ef42711774 100644 --- a/assets/src/components/stacks/StackSettingsModal.tsx +++ b/assets/src/components/stacks/StackSettingsModal.tsx @@ -17,7 +17,7 @@ export function StackSettingsModal( props: ComponentProps ) { return ( - + ) diff --git a/assets/src/components/stacks/Stacks.tsx b/assets/src/components/stacks/Stacks.tsx index 01e8c77326..db3297668f 100644 --- a/assets/src/components/stacks/Stacks.tsx +++ b/assets/src/components/stacks/Stacks.tsx @@ -52,7 +52,7 @@ import { getStacksAbsPath, } from '../../routes/stacksRoutesConsts' import { mapExistingNodes } from '../../utils/graphql' -import { useFetchPaginatedData } from '../cd/utils/useFetchPaginatedData' +import { useFetchPaginatedData } from '../utils/table/useFetchPaginatedData' import { GqlError } from '../utils/Alert' import KickButton from '../utils/KickButton' import { ResponsiveLayoutPage } from '../utils/layout/ResponsiveLayoutPage' @@ -95,8 +95,6 @@ enum MenuItemKey { Delete = 'delete', } -const QUERY_PAGE_SIZE = 100 - const pollInterval = 5 * 1000 const getDirectory = (type: Nullable) => [ @@ -147,7 +145,6 @@ export default function Stacks() { useFetchPaginatedData( { queryHook: useStacksQuery, - pageSize: QUERY_PAGE_SIZE, keyPath: ['infrastructureStacks'], }, { diff --git a/assets/src/components/stacks/common/StackTypeIcon.tsx b/assets/src/components/stacks/common/StackTypeIcon.tsx index 7a63916fe0..ee37a7b2ed 100644 --- a/assets/src/components/stacks/common/StackTypeIcon.tsx +++ b/assets/src/components/stacks/common/StackTypeIcon.tsx @@ -33,6 +33,4 @@ export function StackTypeIcon({ /> ) } - - return undefined } diff --git a/assets/src/components/stacks/customrun/StackCustomRunChooseTemplate.tsx b/assets/src/components/stacks/customrun/StackCustomRunChooseTemplate.tsx index 9a4be555e7..4ea523c1fe 100644 --- a/assets/src/components/stacks/customrun/StackCustomRunChooseTemplate.tsx +++ b/assets/src/components/stacks/customrun/StackCustomRunChooseTemplate.tsx @@ -4,7 +4,7 @@ import { } from 'generated/graphql' import { Row, createColumnHelper } from '@tanstack/react-table' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { useFetchPaginatedData } from 'components/utils/table/useFetchPaginatedData' import { GqlError } from 'components/utils/Alert' import LoadingIndicator from 'components/utils/LoadingIndicator' import { useMemo } from 'react' diff --git a/assets/src/components/stacks/prs/StackPrs.tsx b/assets/src/components/stacks/prs/StackPrs.tsx index 527cf800b3..e1267ba703 100644 --- a/assets/src/components/stacks/prs/StackPrs.tsx +++ b/assets/src/components/stacks/prs/StackPrs.tsx @@ -5,7 +5,10 @@ import { useOutletContext, useParams } from 'react-router-dom' import { FullHeightTableWrap } from 'components/utils/layout/FullHeightTableWrap' -import { useFetchPaginatedData } from 'components/cd/utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from 'components/utils/table/useFetchPaginatedData' import { GqlError } from 'components/utils/Alert' import LoadingIndicator from 'components/utils/LoadingIndicator' @@ -59,7 +62,7 @@ export function StackPrs() { isFetchingNextPage={loading} onVirtualSliceChange={setVirtualSlice} reactTableOptions={reactTableOptions} - reactVirtualOptions={{ overscan: 10 }} + reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} css={{ height: '100%' }} emptyStateProps={{ message: 'No PRs found.', diff --git a/assets/src/components/utils/Link.tsx b/assets/src/components/utils/Link.tsx index 0f3b5f0fc9..6b5e974047 100644 --- a/assets/src/components/utils/Link.tsx +++ b/assets/src/components/utils/Link.tsx @@ -1,20 +1,11 @@ -import { ComponentProps } from 'react' import { Link } from 'react-router-dom' import styled from 'styled-components' -export function SafeLink({ children, ...props }: ComponentProps) { - return ( - e.stopPropagation()}> - {children} - - ) -} type UnstyledLinkProps = { $extendStyle?: object } + const unstyledStyles = ({ $extendStyle }: UnstyledLinkProps) => ({ textDecoration: 'none', ...$extendStyle, }) export const UnstyledLink = styled(Link)(unstyledStyles) - -export const UnstyledSafeLink = styled(SafeLink)(unstyledStyles) diff --git a/assets/src/components/utils/RadialBarChart.tsx b/assets/src/components/utils/RadialBarChart.tsx index 0a512b0d47..3659a041ae 100644 --- a/assets/src/components/utils/RadialBarChart.tsx +++ b/assets/src/components/utils/RadialBarChart.tsx @@ -121,7 +121,7 @@ function RadialBarChart({ } & Omit>, 'data'>) { const chartTheme = useChartTheme() const CenteredMetric = useMemo( - () => (true ? createCenteredMetric(centerVal, centerLabel) : () => null), + () => createCenteredMetric(centerVal, centerLabel), [centerLabel, centerVal] ) diff --git a/assets/src/components/utils/ShowAfterDelay.tsx b/assets/src/components/utils/ShowAfterDelay.tsx index 6711c8bcf7..c7c9604a6d 100644 --- a/assets/src/components/utils/ShowAfterDelay.tsx +++ b/assets/src/components/utils/ShowAfterDelay.tsx @@ -19,7 +19,7 @@ function ShowAfterDelayUnstyled({ }) { const [show, setShow] = useState(false) const [transitionIn, setTransitionIn] = useState(false) - const child: ReactElement = Children.only(children) as ReactElement + const child: ReactElement = Children.only(children) as ReactElement const clone = child ? cloneElement(child, { className: `${className}${transitionIn ? ' transitionIn' : ''}`, diff --git a/assets/src/components/utils/StopPropagation.tsx b/assets/src/components/utils/StopPropagation.tsx deleted file mode 100644 index 0341c6d53d..0000000000 --- a/assets/src/components/utils/StopPropagation.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ReactNode } from 'react' - -export function StopPropagation({ children }: { children: ReactNode }) { - return ( -
{ - e.stopPropagation() - }} - > - {children} -
- ) -} diff --git a/assets/src/components/utils/TypeaheadEditor.jsx b/assets/src/components/utils/TypeaheadEditor.jsx index 1094a20eae..0d8e421209 100644 --- a/assets/src/components/utils/TypeaheadEditor.jsx +++ b/assets/src/components/utils/TypeaheadEditor.jsx @@ -45,7 +45,7 @@ export default function TypeaheadEditor({ break case 'Tab': case 'Enter': - if (target === null || suggestions.length === 0) break + if (suggestions.length === 0) break event.preventDefault() Transforms.select(editor, target) insertMention(editor, suggestions[index].value) diff --git a/assets/src/components/utils/animations.ts b/assets/src/components/utils/animations.ts deleted file mode 100644 index 4562a7d897..0000000000 --- a/assets/src/components/utils/animations.ts +++ /dev/null @@ -1,21 +0,0 @@ -import styled, { keyframes } from 'styled-components' - -const scale3d = (a, b, c) => `scale3d(${a}, ${b}, ${c})` - -const pulse = { - from: { - transform: scale3d(1, 1, 1), - }, - '50%': { - transform: scale3d(1.2, 1.2, 1.2), - }, - to: { - transform: scale3d(1, 1, 1), - }, -} - -const pulseAnimation = keyframes`${pulse}` - -export const PulsyDiv = styled.div` - animation: 2s ${pulseAnimation} infinite; -` diff --git a/assets/src/components/utils/events.ts b/assets/src/components/utils/events.ts deleted file mode 100644 index db9971f07e..0000000000 --- a/assets/src/components/utils/events.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const ignoreEvent = (e: Event) => { - e.stopPropagation() - e.preventDefault() -} diff --git a/assets/src/components/utils/hooks.ts b/assets/src/components/utils/hooks.ts deleted file mode 100644 index edc0f4dcc0..0000000000 --- a/assets/src/components/utils/hooks.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { useEffect } from 'react' - -// useful helper for debugging things like modals -// will label a component and log when it mounts and unmounts -export function useMountLogging(name?: string) { - const id = `${name ? `${name}-` : 'component-'}${Math.round( - Math.random() * 1000 - )}` - - useEffect(() => { - console.log(id, 'mounted') - - return () => { - console.log(id, 'unmounted') - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) -} diff --git a/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx b/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx index 5a4cb4a3d9..380794869d 100644 --- a/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx +++ b/assets/src/components/utils/layout/ResponsivePageFullWidth.tsx @@ -1,34 +1,33 @@ -import { ComponentProps, Ref, forwardRef } from 'react' -import styled from 'styled-components' +import { CSSProperties, ComponentProps, Ref, forwardRef } from 'react' import { ResponsiveLayoutPage } from 'components/utils/layout/ResponsiveLayoutPage' import { ScrollablePage } from './ScrollablePage' -const ResponsivePageFullWidthSC = styled(ResponsiveLayoutPage)<{ - $scrollable: boolean -}>(({ $scrollable }) => ({ - flexDirection: 'column', - ...($scrollable - ? { - paddingRight: 0, - paddingBottom: 0, - } - : {}), -})) - -function ResponsivePageFullWidthRef( - { - scrollable = true, - children, - ...props - }: ComponentProps, - ref: Ref -) { - return ( - , + ref: Ref + ) => ( + {children} - + ) -} - -export const ResponsivePageFullWidth = forwardRef(ResponsivePageFullWidthRef) +) diff --git a/assets/src/components/utils/table/ColWithIcon.tsx b/assets/src/components/utils/table/ColWithIcon.tsx index 726cf4b3bb..7fac2670ef 100644 --- a/assets/src/components/utils/table/ColWithIcon.tsx +++ b/assets/src/components/utils/table/ColWithIcon.tsx @@ -1,6 +1,6 @@ -import { AppIcon, Tooltip, WrapWithIf } from '@pluralsh/design-system' +import { AppIcon, WrapWithIf } from '@pluralsh/design-system' import styled from 'styled-components' -import { ComponentProps, ReactNode } from 'react' +import { ComponentProps } from 'react' import classNames from 'classnames' import { Merge } from 'type-fest' @@ -27,55 +27,6 @@ const ColWithIconSC = styled.div(({ theme }) => ({ }, })) -export function ColWithOptionalIcon({ - icon, - iconTooltip, - children, - truncateLeft = false, - ...props -}: Merge< - ComponentProps, - { - icon?: string | ComponentProps['icon'] - truncateLeft?: boolean - iconTooltip?: ReactNode - } ->) { - let iconElt = !!icon && ( - - ) - - if (icon && iconTooltip) { - iconElt = ( - - {iconElt} - - ) - } - - return ( - - {iconElt &&
{iconElt}
} -
- } - > - {children} - -
- - ) -} - export function ColWithIcon({ icon, iconSize, diff --git a/assets/src/components/utils/table/TruncateStart.tsx b/assets/src/components/utils/table/Truncate.tsx similarity index 100% rename from assets/src/components/utils/table/TruncateStart.tsx rename to assets/src/components/utils/table/Truncate.tsx diff --git a/assets/src/components/cd/utils/useFetchPaginatedData.tsx b/assets/src/components/utils/table/useFetchPaginatedData.tsx similarity index 93% rename from assets/src/components/cd/utils/useFetchPaginatedData.tsx rename to assets/src/components/utils/table/useFetchPaginatedData.tsx index c287d091e4..af61c92e2b 100644 --- a/assets/src/components/cd/utils/useFetchPaginatedData.tsx +++ b/assets/src/components/utils/table/useFetchPaginatedData.tsx @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useState } from 'react' +import { ComponentProps, useCallback, useMemo, useState } from 'react' import { VirtualItem } from '@tanstack/react-virtual' import { extendConnection, updateNestedConnection } from 'utils/graphql' import { @@ -12,6 +12,11 @@ import { QueryHookOptions, QueryResult, } from '@apollo/client' +import { Table } from '@pluralsh/design-system' + +export const DEFAULT_REACT_VIRTUAL_OPTIONS: ComponentProps< + typeof Table +>['reactVirtualOptions'] = { overscan: 10 } export const DEFAULT_PAGE_SIZE = 100 diff --git a/assets/src/components/vpn/columns/Actions.tsx b/assets/src/components/vpn/columns/Actions.tsx index 9e2b57ef64..84211a367e 100644 --- a/assets/src/components/vpn/columns/Actions.tsx +++ b/assets/src/components/vpn/columns/Actions.tsx @@ -25,7 +25,9 @@ const ColumnActions = (refetch) => }) function cell(refetch): ColumnDefTemplate> { - const context = (props: CellContext): JSX.Element => { + return function context( + props: CellContext + ): JSX.Element { const { isReady, name } = props.row.original return ( @@ -36,8 +38,6 @@ function cell(refetch): ColumnDefTemplate> { /> ) } - - return context } interface MenuItem { diff --git a/assets/src/components/vpn/columns/Delete.tsx b/assets/src/components/vpn/columns/Delete.tsx index 8cd22d4348..544f0c2333 100644 --- a/assets/src/components/vpn/columns/Delete.tsx +++ b/assets/src/components/vpn/columns/Delete.tsx @@ -22,7 +22,9 @@ const ColumnDelete = (refetch) => }) function cell(refetch): ColumnDefTemplate> { - const context = (props: CellContext): JSX.Element => { + return function context( + props: CellContext + ): JSX.Element { const { isReady, name } = props.row.original return ( @@ -33,8 +35,6 @@ function cell(refetch): ColumnDefTemplate> { /> ) } - - return context } interface DeleteActionsProps { diff --git a/assets/src/generated/graphql.ts b/assets/src/generated/graphql.ts index 4a4210ab87..6135153793 100644 --- a/assets/src/generated/graphql.ts +++ b/assets/src/generated/graphql.ts @@ -8788,6 +8788,7 @@ export type ClusterBasicFragment = { __typename?: 'Cluster', handle?: string | n export type ClustersTinyQueryVariables = Exact<{ projectId?: InputMaybe; + first?: InputMaybe; }>; @@ -8821,6 +8822,10 @@ export type ClusterBasicQuery = { __typename?: 'RootQueryType', cluster?: { __ty export type ClusterPodsQueryVariables = Exact<{ clusterId?: InputMaybe; namespace?: InputMaybe; + first?: InputMaybe; + after?: InputMaybe; + before?: InputMaybe; + last?: InputMaybe; }>; @@ -14305,7 +14310,7 @@ export type CreateBuildMutationHookResult = ReturnType; export type CreateBuildMutationOptions = Apollo.BaseMutationOptions; export const ClustersDocument = gql` - query Clusters($first: Int = 100, $after: String, $q: String, $healthy: Boolean, $tagQuery: TagQuery, $projectId: ID) { + query Clusters($first: Int, $after: String, $q: String, $healthy: Boolean, $tagQuery: TagQuery, $projectId: ID) { clusters( first: $first after: $after @@ -14370,8 +14375,8 @@ export type ClustersLazyQueryHookResult = ReturnType; export type ClustersQueryResult = Apollo.QueryResult; export const ClustersTinyDocument = gql` - query ClustersTiny($projectId: ID) { - clusters(first: 200, projectId: $projectId) { + query ClustersTiny($projectId: ID, $first: Int) { + clusters(first: $first, projectId: $projectId) { edges { node { ...ClusterTiny @@ -14394,6 +14399,7 @@ export const ClustersTinyDocument = gql` * const { data, loading, error } = useClustersTinyQuery({ * variables: { * projectId: // value for 'projectId' + * first: // value for 'first' * }, * }); */ @@ -14414,7 +14420,7 @@ export type ClustersTinyLazyQueryHookResult = ReturnType; export type ClustersTinyQueryResult = Apollo.QueryResult; export const ClusterSelectorDocument = gql` - query ClusterSelector($first: Int = 100, $after: String, $q: String, $currentClusterId: ID, $projectId: ID) { + query ClusterSelector($first: Int, $after: String, $q: String, $currentClusterId: ID, $projectId: ID) { clusters(first: $first, after: $after, q: $q, projectId: $projectId) { pageInfo { ...PageInfo @@ -14549,8 +14555,15 @@ export type ClusterBasicLazyQueryHookResult = ReturnType; export type ClusterBasicQueryResult = Apollo.QueryResult; export const ClusterPodsDocument = gql` - query ClusterPods($clusterId: ID, $namespace: String) { - pods(first: 100, clusterId: $clusterId, namespace: $namespace) { + query ClusterPods($clusterId: ID, $namespace: String, $first: Int, $after: String, $before: String, $last: Int) { + pods( + first: $first + after: $after + before: $before + last: $last + clusterId: $clusterId + namespace: $namespace + ) { pageInfo { ...PageInfo } @@ -14578,6 +14591,10 @@ ${PodFragmentDoc}`; * variables: { * clusterId: // value for 'clusterId' * namespace: // value for 'namespace' + * first: // value for 'first' + * after: // value for 'after' + * before: // value for 'before' + * last: // value for 'last' * }, * }); */ diff --git a/assets/src/graph/cdClusters.graphql b/assets/src/graph/cdClusters.graphql index 085fc0f342..d11fea65ce 100644 --- a/assets/src/graph/cdClusters.graphql +++ b/assets/src/graph/cdClusters.graphql @@ -246,7 +246,7 @@ fragment Cluster on Cluster { } query Clusters( - $first: Int = 100 + $first: Int $after: String $q: String $healthy: Boolean @@ -300,8 +300,8 @@ fragment ClusterBasic on Cluster { currentVersion } -query ClustersTiny($projectId: ID) { - clusters(first: 200, projectId: $projectId) { +query ClustersTiny($projectId: ID, $first: Int) { + clusters(first: $first, projectId: $projectId) { edges { node { ...ClusterTiny @@ -311,7 +311,7 @@ query ClustersTiny($projectId: ID) { } query ClusterSelector( - $first: Int = 100 + $first: Int $after: String $q: String $currentClusterId: ID @@ -344,8 +344,22 @@ query ClusterBasic($id: ID!) { } } -query ClusterPods($clusterId: ID, $namespace: String) { - pods(first: 100, clusterId: $clusterId, namespace: $namespace) { +query ClusterPods( + $clusterId: ID + $namespace: String + $first: Int + $after: String + $before: String + $last: Int +) { + pods( + first: $first + after: $after + before: $before + last: $last + clusterId: $clusterId + namespace: $namespace + ) { pageInfo { ...PageInfo } diff --git a/assets/src/utils/hasDefined.ts b/assets/src/utils/hasDefined.ts deleted file mode 100644 index c65da107cb..0000000000 --- a/assets/src/utils/hasDefined.ts +++ /dev/null @@ -1,10 +0,0 @@ -export function hasDefined( - argument: T | Defined, - keys: K[] -): argument is Defined { - return keys.every((key) => argument[key] != null) -} - -type Defined = { - [P in K]-?: Exclude -} diff --git a/assets/src/utils/hostname.ts b/assets/src/utils/hostname.ts index 1858c781fa..0ee9c3c1bb 100644 --- a/assets/src/utils/hostname.ts +++ b/assets/src/utils/hostname.ts @@ -1,15 +1,3 @@ -export function localized(path) { - const { hostname } = window.location - const proto = window.location.protocol - const { port } = window.location - - if (!port) { - return `${proto}//${hostname}${path}` - } - - return `${proto}//${hostname}:${port}${path}` -} - export function host() { const { hostname, protocol, port } = window.location const base = `${protocol}//${hostname}` diff --git a/assets/src/utils/kubernetes.ts b/assets/src/utils/kubernetes.ts index 502507d7cb..7396300d5a 100644 --- a/assets/src/utils/kubernetes.ts +++ b/assets/src/utils/kubernetes.ts @@ -16,7 +16,7 @@ export function isEqual({ metadata: first }, { metadata: second }) { } export function cpuParser(input?: string | null) { - if (!input || typeof input !== 'string') { + if (!input) { return undefined } const milliMatch = input.match(/^([0-9]+)([a-z])$/) diff --git a/assets/src/utils/time.ts b/assets/src/utils/time.ts index 6259fd0ba9..6a0eb6d51b 100644 --- a/assets/src/utils/time.ts +++ b/assets/src/utils/time.ts @@ -4,9 +4,7 @@ import moment, { Moment } from 'moment-timezone' export const MINUTE_TO_SECONDS = 60 export const HOUR_TO_SECONDS = MINUTE_TO_SECONDS * 60 export const DAY_TO_SECONDS = HOUR_TO_SECONDS * 24 - export const SECOND_TO_MILLISECONDS = 1000 -export const MINUTE_TO_MILLISECONDS = SECOND_TO_MILLISECONDS * 60 export const DURATIONS = [ {