From 41c2f458074940498e47d60f847004a0dce0ec43 Mon Sep 17 00:00:00 2001 From: Andreas Kienle Date: Fri, 26 Sep 2025 11:05:36 +0200 Subject: [PATCH 1/5] feat: navigation via tabs --- public/locales/en.json | 23 +- src/components/ControlPlane/ComponentList.tsx | 21 +- src/components/ControlPlane/FluxList.tsx | 205 ------------------ .../ControlPlane/GitRepositories.tsx | 135 ++++++++++++ .../ControlPlane/Kustomizations.tsx | 116 ++++++++++ .../ControlPlane/ManagedResources.tsx | 59 +++-- src/components/ControlPlane/Providers.tsx | 55 +++-- .../ControlPlane/ProvidersConfig.tsx | 16 +- .../GenericHintCard/GenericHintCard.tsx | 3 +- .../HintsCardsRow/HintsCardsRow.tsx | 6 +- src/index.css | 4 - src/spaces/mcp/pages/McpPage.module.css | 6 +- src/spaces/mcp/pages/McpPage.tsx | 149 ++++++------- src/types/types.ts | 1 + 14 files changed, 439 insertions(+), 360 deletions(-) delete mode 100644 src/components/ControlPlane/FluxList.tsx create mode 100644 src/components/ControlPlane/GitRepositories.tsx create mode 100644 src/components/ControlPlane/Kustomizations.tsx diff --git a/public/locales/en.json b/public/locales/en.json index 1db60e95..0789d0be 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -22,8 +22,6 @@ "tableCreatedHeader": "Created", "tableVersionHeader": "Revision", "noFluxError": "Please install flux to view this component", - "gitOpsTitle": "GitOps", - "kustomizationsTitle": "Kustomizations", "undefinedError": "Something went wrong" }, "ProvidersList": { @@ -32,7 +30,6 @@ "tableCreatedHeader": "Created" }, "ManagedResources": { - "header": "Managed Resources", "tableHeaderKind": "Kind", "tableHeaderName": "Name", "tableHeaderCreated": "Created", @@ -40,7 +37,6 @@ "tableHeaderReady": "Ready" }, "ProvidersConfig": { - "headerProviderConfigs": "Provider Configs", "tableHeaderProvider": "Provider", "tableHeaderName": "Name", "tableHeaderCreated": "Created", @@ -195,12 +191,18 @@ }, "McpPage": { "accessError": "Managed Control Plane does not have access information yet", - "componentsTitle": "Components", "overviewTitle": "Overview", + "dashboardTitle": "Dashboard", + "graphTitle": "Graph", + "componentsTitle": "Components", "crossplaneTitle": "Crossplane", - "gitOpsTitle": "GitOps", - "landscapersTitle": "Landscapers", - "graphTitle": "Graph" + "providersTitle": "Providers", + "providerConfigsTitle": "ProviderConfigs", + "managedResourcesTitle": "Managed Resources", + "fluxTitle": "Flux", + "gitRepositoriesTitle": "GitRepositories", + "kustomizationsTitle": "Kustomizations", + "landscapersTitle": "Landscapers" }, "ToastContext": { "errorMessage": "useToast must be used within a ToastProvider" @@ -295,7 +297,6 @@ "learnButton": "Learn how to do this in code" }, "Providers": { - "headerProviders": "Providers", "tableHeaderVersion": "Version", "tableHeaderName": "Name", "tableHeaderCreated": "Created", @@ -350,7 +351,9 @@ "remaining": "Remaining", "active": "Active", "copyToClipboardSuccessToast": "Copied to clipboard", - "copyToClipboardFailedToast": "Failed to copy to clipboard" + "copyToClipboardFailedToast": "Failed to copy to clipboard", + "resourcesCount": "Resources ({{count}})", + "itemsCount": "Items ({{count}})" }, "errors": { "installError": "Install error", diff --git a/src/components/ControlPlane/ComponentList.tsx b/src/components/ControlPlane/ComponentList.tsx index 1edb314a..e8242b68 100644 --- a/src/components/ControlPlane/ComponentList.tsx +++ b/src/components/ControlPlane/ComponentList.tsx @@ -1,4 +1,11 @@ -import { AnalyticalTable, AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react'; +import { + AnalyticalTable, + AnalyticalTableColumnDefinition, + Panel, + Title, + Toolbar, + ToolbarSpacer, +} from '@ui5/webcomponents-react'; import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes'; import { useTranslation } from 'react-i18next'; @@ -40,8 +47,16 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) { ]; return ( -
+ + {t('common.itemsCount', { count: data.length })} + + + } + > -
+ ); } diff --git a/src/components/ControlPlane/FluxList.tsx b/src/components/ControlPlane/FluxList.tsx deleted file mode 100644 index ccbf5f18..00000000 --- a/src/components/ControlPlane/FluxList.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx'; -import { AnalyticalTableColumnDefinition, FlexBox, Title } from '@ui5/webcomponents-react'; -import IllustratedError from '../Shared/IllustratedError.tsx'; -import { useApiResource } from '../../lib/api/useApiResource'; -import { FluxRequest } from '../../lib/api/types/flux/listGitRepo'; -import { FluxKustomization, KustomizationsResponse } from '../../lib/api/types/flux/listKustomization'; -import { useTranslation } from 'react-i18next'; -import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo.ts'; - -import { YamlViewButton } from '../Yaml/YamlViewButton.tsx'; -import { useMemo } from 'react'; -import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx'; -import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx'; - -export default function FluxList() { - const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled - const { - data: kustmizationData, - error: kustomizationErr, - isLoading: kustomizationIsLoading, - } = useApiResource(FluxKustomization); //404 if component not enabled - - const { t } = useTranslation(); - - interface CellData { - cell: { - value: T | null; // null for grouping rows - row: { - original?: FluxRow; // missing for grouping rows - }; - }; - } - - type FluxRow = { - name: string; - created: string; - isReady: boolean; - statusUpdateTime?: string; - item: unknown; - readyMessage: string; - }; - - const gitReposColumns: AnalyticalTableColumnDefinition[] = useMemo( - () => [ - { - Header: t('FluxList.tableNameHeader'), - accessor: 'name', - minWidth: 250, - }, - { - Header: t('FluxList.tableCreatedHeader'), - accessor: 'created', - }, - { - Header: t('FluxList.tableVersionHeader'), - accessor: 'revision', - }, - { - Header: t('FluxList.tableStatusHeader'), - accessor: 'status', - width: 125, - hAlign: 'Center', - Filter: ({ column }) => , - Cell: (cellData: CellData) => - cellData.cell.row.original?.isReady != null ? ( - - ) : null, - }, - { - Header: t('yaml.YAML'), - hAlign: 'Center', - width: 75, - accessor: 'yaml', - disableFilters: true, - Cell: (cellData: CellData) => ( - - ), - }, - ], - [t], - ); - - const kustomizationsColumns: AnalyticalTableColumnDefinition[] = useMemo( - () => [ - { - Header: t('FluxList.tableNameHeader'), - accessor: 'name', - minWidth: 250, - }, - { - Header: t('FluxList.tableCreatedHeader'), - accessor: 'created', - }, - { - Header: t('FluxList.tableStatusHeader'), - accessor: 'status', - width: 125, - hAlign: 'Center', - Filter: ({ column }) => , - Cell: (cellData: CellData) => - cellData.cell.row.original?.isReady != null ? ( - - ) : null, - }, - - { - Header: t('yaml.YAML'), - hAlign: 'Center', - width: 75, - accessor: 'yaml', - disableFilters: true, - Cell: (cellData: CellData) => , - }, - ], - [t], - ); - - if (repoErr || kustomizationErr) { - return ( - - ); - } - - const gitReposRows: FluxRow[] = - gitReposData?.items?.map((item) => { - const readyObject = item.status?.conditions?.find((x) => x.type === 'Ready'); - return { - name: item.metadata.name, - isReady: readyObject?.status === 'True', - statusUpdateTime: readyObject?.lastTransitionTime, - revision: shortenCommitHash(item.status.artifact?.revision ?? '-'), - created: formatDateAsTimeAgo(item.metadata.creationTimestamp), - item: item, - readyMessage: readyObject?.message ?? readyObject?.reason ?? '', - }; - }) ?? []; - - const kustomizationsRows: FluxRow[] = - kustmizationData?.items?.map((item) => { - const readyObject = item.status?.conditions?.find((x) => x.type === 'Ready'); - return { - name: item.metadata.name, - isReady: readyObject?.status === 'True', - statusUpdateTime: readyObject?.lastTransitionTime, - created: formatDateAsTimeAgo(item.metadata.creationTimestamp), - item: item, - readyMessage: readyObject?.message ?? readyObject?.reason ?? '', - }; - }) ?? []; - - return ( - <> -
- - {t('FluxList.gitOpsTitle')} - - - -
-
- - {t('FluxList.kustomizationsTitle')} - - - -
- - ); -} - -function shortenCommitHash(commitHash: string): string { - //example hash: master@sha1:b3396adb98a6a0f5eeedd1a600beaf5e954a1f28 - const match = commitHash.match(/^([a-zA-Z0-9-_]+)@sha1:([a-f0-9]{40})/); - - if (match && match[2]) { - return `${match[1]}@${match[2].slice(0, 7)}`; - } - - //example output : master@b3396ad - return commitHash; -} diff --git a/src/components/ControlPlane/GitRepositories.tsx b/src/components/ControlPlane/GitRepositories.tsx new file mode 100644 index 00000000..ac34c625 --- /dev/null +++ b/src/components/ControlPlane/GitRepositories.tsx @@ -0,0 +1,135 @@ +import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx'; +import { AnalyticalTableColumnDefinition, Panel, Title, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react'; +import IllustratedError from '../Shared/IllustratedError.tsx'; +import { useApiResource } from '../../lib/api/useApiResource'; +import { FluxRequest } from '../../lib/api/types/flux/listGitRepo'; +import { KustomizationsResponse } from '../../lib/api/types/flux/listKustomization'; +import { useTranslation } from 'react-i18next'; +import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo.ts'; + +import { YamlViewButton } from '../Yaml/YamlViewButton.tsx'; +import { useMemo } from 'react'; +import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx'; +import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx'; + +export function GitRepositories() { + const { data, error, isLoading } = useApiResource(FluxRequest); //404 if component not enabled + const { t } = useTranslation(); + + interface CellData { + cell: { + value: T | null; // null for grouping rows + row: { + original?: FluxRow; // missing for grouping rows + }; + }; + } + + type FluxRow = { + name: string; + created: string; + isReady: boolean; + statusUpdateTime?: string; + item: unknown; + readyMessage: string; + }; + + const columns: AnalyticalTableColumnDefinition[] = useMemo( + () => [ + { + Header: t('FluxList.tableNameHeader'), + accessor: 'name', + minWidth: 250, + }, + { + Header: t('FluxList.tableCreatedHeader'), + accessor: 'created', + }, + { + Header: t('FluxList.tableVersionHeader'), + accessor: 'revision', + }, + { + Header: t('FluxList.tableStatusHeader'), + accessor: 'status', + width: 125, + hAlign: 'Center', + Filter: ({ column }) => , + Cell: (cellData: CellData) => + cellData.cell.row.original?.isReady != null ? ( + + ) : null, + }, + { + Header: t('yaml.YAML'), + hAlign: 'Center', + width: 75, + accessor: 'yaml', + disableFilters: true, + Cell: (cellData: CellData) => ( + + ), + }, + ], + [t], + ); + + if (error) { + return ( + + ); + } + + const rows: FluxRow[] = + data?.items?.map((item) => { + const readyObject = item.status?.conditions?.find((x) => x.type === 'Ready'); + return { + name: item.metadata.name, + isReady: readyObject?.status === 'True', + statusUpdateTime: readyObject?.lastTransitionTime, + revision: shortenCommitHash(item.status.artifact?.revision ?? '-'), + created: formatDateAsTimeAgo(item.metadata.creationTimestamp), + item: item, + readyMessage: readyObject?.message ?? readyObject?.reason ?? '', + }; + }) ?? []; + + return ( + + {t('common.resourcesCount', { count: rows.length })} + + + + } + > + + + ); +} + +function shortenCommitHash(commitHash: string): string { + //example hash: master@sha1:b3396adb98a6a0f5eeedd1a600beaf5e954a1f28 + const match = commitHash.match(/^([a-zA-Z0-9-_]+)@sha1:([a-f0-9]{40})/); + + if (match && match[2]) { + return `${match[1]}@${match[2].slice(0, 7)}`; + } + + //example output : master@b3396ad + return commitHash; +} diff --git a/src/components/ControlPlane/Kustomizations.tsx b/src/components/ControlPlane/Kustomizations.tsx new file mode 100644 index 00000000..3471b084 --- /dev/null +++ b/src/components/ControlPlane/Kustomizations.tsx @@ -0,0 +1,116 @@ +import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx'; +import { AnalyticalTableColumnDefinition, Panel, Title, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react'; +import IllustratedError from '../Shared/IllustratedError.tsx'; +import { useApiResource } from '../../lib/api/useApiResource'; +import { FluxKustomization } from '../../lib/api/types/flux/listKustomization'; +import { useTranslation } from 'react-i18next'; +import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo.ts'; + +import { YamlViewButton } from '../Yaml/YamlViewButton.tsx'; +import { useMemo } from 'react'; +import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx'; +import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx'; + +export function Kustomizations() { + const { data, error, isLoading } = useApiResource(FluxKustomization); //404 if component not enabled + const { t } = useTranslation(); + + interface CellData { + cell: { + value: T | null; // null for grouping rows + row: { + original?: FluxRow; // missing for grouping rows + }; + }; + } + + type FluxRow = { + name: string; + created: string; + isReady: boolean; + statusUpdateTime?: string; + item: unknown; + readyMessage: string; + }; + + const columns: AnalyticalTableColumnDefinition[] = useMemo( + () => [ + { + Header: t('FluxList.tableNameHeader'), + accessor: 'name', + minWidth: 250, + }, + { + Header: t('FluxList.tableCreatedHeader'), + accessor: 'created', + }, + { + Header: t('FluxList.tableStatusHeader'), + accessor: 'status', + width: 125, + hAlign: 'Center', + Filter: ({ column }) => , + Cell: (cellData: CellData) => + cellData.cell.row.original?.isReady != null ? ( + + ) : null, + }, + + { + Header: t('yaml.YAML'), + hAlign: 'Center', + width: 75, + accessor: 'yaml', + disableFilters: true, + Cell: (cellData: CellData) => , + }, + ], + [t], + ); + + if (error) { + return ( + + ); + } + + const rows: FluxRow[] = + data?.items?.map((item) => { + const readyObject = item.status?.conditions?.find((x) => x.type === 'Ready'); + return { + name: item.metadata.name, + isReady: readyObject?.status === 'True', + statusUpdateTime: readyObject?.lastTransitionTime, + created: formatDateAsTimeAgo(item.metadata.creationTimestamp), + item: item, + readyMessage: readyObject?.message ?? readyObject?.reason ?? '', + }; + }) ?? []; + + return ( + + {t('common.resourcesCount', { count: rows.length })} + + + + } + > + + + ); +} diff --git a/src/components/ControlPlane/ManagedResources.tsx b/src/components/ControlPlane/ManagedResources.tsx index d09944bc..9147e682 100644 --- a/src/components/ControlPlane/ManagedResources.tsx +++ b/src/components/ControlPlane/ManagedResources.tsx @@ -3,7 +3,10 @@ import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, + Panel, Title, + Toolbar, + ToolbarSpacer, } from '@ui5/webcomponents-react'; import { useApiResource } from '../../lib/api/useApiResource'; import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources'; @@ -139,33 +142,41 @@ export function ManagedResources() { return ( <> - {t('ManagedResources.header')} - {error && } {!error && ( - + + {t('common.resourcesCount', { count: rows.length })} + + + } + > + + )} ); diff --git a/src/components/ControlPlane/Providers.tsx b/src/components/ControlPlane/Providers.tsx index 11dc4393..dbe56c3d 100644 --- a/src/components/ControlPlane/Providers.tsx +++ b/src/components/ControlPlane/Providers.tsx @@ -4,7 +4,10 @@ import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, + Panel, Title, + Toolbar, + ToolbarSpacer, } from '@ui5/webcomponents-react'; import { useApiResource } from '../../lib/api/useApiResource'; @@ -137,31 +140,39 @@ export function Providers() { return ( <> - {t('Providers.headerProviders')} - {error && } {!error && ( - + + {t('common.resourcesCount', { count: rows.length })} + + + } + > + + )} ); diff --git a/src/components/ControlPlane/ProvidersConfig.tsx b/src/components/ControlPlane/ProvidersConfig.tsx index 7cd7b1c9..c580854a 100644 --- a/src/components/ControlPlane/ProvidersConfig.tsx +++ b/src/components/ControlPlane/ProvidersConfig.tsx @@ -3,7 +3,10 @@ import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, + Panel, Title, + Toolbar, + ToolbarSpacer, } from '@ui5/webcomponents-react'; import '@ui5/webcomponents-icons/dist/sys-enter-2'; import '@ui5/webcomponents-icons/dist/sys-cancel-2'; @@ -87,8 +90,15 @@ export function ProvidersConfig() { ); return ( - <> - {t('ProvidersConfig.headerProviderConfigs')} + + {t('common.resourcesCount', { count: rows.length })} + + + } + > - + ); } diff --git a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx index dc6123e0..05436e4b 100644 --- a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx +++ b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx @@ -15,6 +15,7 @@ export const GenericHintCard: React.FC = ({ isLoading, error, config, + onClick, }) => { const { t } = useTranslation(); const [hovered, setHovered] = useState(false); @@ -57,7 +58,7 @@ export const GenericHintCard: React.FC = ({ className={cx({ [styles['disabled']]: !enabled, })} - onClick={handleClick} + onClick={() => (enabled ? onClick?.() : null)} onMouseEnter={enabled ? () => setHovered(true) : undefined} onMouseLeave={enabled ? () => setHovered(false) : undefined} > diff --git a/src/components/HintsCardsRow/HintsCardsRow.tsx b/src/components/HintsCardsRow/HintsCardsRow.tsx index de68d23c..67f8d94a 100644 --- a/src/components/HintsCardsRow/HintsCardsRow.tsx +++ b/src/components/HintsCardsRow/HintsCardsRow.tsx @@ -8,9 +8,11 @@ import { resourcesInterval } from '../../lib/shared/constants'; import { useApiResource } from '../../lib/api/useApiResource'; import { ManagedResourceItem } from '../../lib/shared/types'; import React, { useMemo } from 'react'; +import { McpPageSectionId } from '../../spaces/mcp/pages/McpPage.tsx'; interface HintsProps { mcp: ControlPlaneType; + onNavigateToMcpSection: (sectionId: McpPageSectionId) => void; } // Export styles for use by hint components @@ -25,7 +27,7 @@ export const flattenManagedResources = (managedResources: ManagedResourcesRespon .flatMap((managedResource) => managedResource.items || []); }; -const HintsCardsRow: React.FC = ({ mcp }) => { +const HintsCardsRow: React.FC = ({ mcp, onNavigateToMcpSection }) => { const { data: managedResources, isLoading: managedResourcesLoading, @@ -69,6 +71,7 @@ const HintsCardsRow: React.FC = ({ mcp }) => { isLoading={managedResourcesLoading} error={managedResourcesError} config={crossplaneConfig} + onClick={() => onNavigateToMcpSection('crossplane')} /> = ({ mcp }) => { isLoading={managedResourcesLoading} error={managedResourcesError} config={gitOpsConfig} + onClick={() => onNavigateToMcpSection('flux')} /> ('overview'); const { data: mcp, error, @@ -66,7 +76,7 @@ export default function McpPage() { } + selectedSectionId={selectedSectionId} + onSelectedSectionChange={() => setSelectedSectionId(undefined)} > - - - - - - - - {t('McpPage.componentsTitle')}} - noAnimation + + + setSelectedSectionId(sectionId)} /> + + + + + + + - + - - {t('McpPage.crossplaneTitle')}} - noAnimation + + + + + + -
- -
-
- -
-
- -
- - - - {t('McpPage.landscapersTitle')}} - noAnimation + + + - - + + - - {t('McpPage.gitOpsTitle')}} - noAnimation + + + + + + - - + + + + + + diff --git a/src/types/types.ts b/src/types/types.ts index 342e89aa..7fe092d7 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -50,4 +50,5 @@ export interface GenericHintProps { isLoading?: boolean; error?: APIError; config: GenericHintConfig; + onClick?: () => void; } From fc5315cfd09c6bacf6667f00053dfcdded551dcc Mon Sep 17 00:00:00 2001 From: Andreas Kienle Date: Fri, 26 Sep 2025 11:08:44 +0200 Subject: [PATCH 2/5] fix(lint) --- .../HintsCardsRow/GenericHintCard/GenericHintCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx index 05436e4b..9cf446af 100644 --- a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx +++ b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx @@ -24,6 +24,7 @@ export const GenericHintCard: React.FC = ({ const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t); // Handle click navigation if scroll target is provided + /* const handleClick = enabled && config.scrollTarget ? () => { @@ -32,7 +33,7 @@ export const GenericHintCard: React.FC = ({ el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } - : undefined; + : undefined; */ return (
From eba36baf662d98b0c982a21a7692e989a720ce9d Mon Sep 17 00:00:00 2001 From: Andreas Kienle Date: Wed, 1 Oct 2025 20:56:55 +0200 Subject: [PATCH 3/5] Fix --- src/components/ControlPlane/GitRepositories.tsx | 5 +++-- src/components/ControlPlane/Kustomizations.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/ControlPlane/GitRepositories.tsx b/src/components/ControlPlane/GitRepositories.tsx index ac34c625..43141edf 100644 --- a/src/components/ControlPlane/GitRepositories.tsx +++ b/src/components/ControlPlane/GitRepositories.tsx @@ -11,6 +11,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx'; import { useMemo } from 'react'; import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx'; import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx'; +import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts'; export function GitRepositories() { const { data, error, isLoading } = useApiResource(FluxRequest); //404 if component not enabled @@ -75,7 +76,7 @@ export function GitRepositories() { accessor: 'yaml', disableFilters: true, Cell: (cellData: CellData) => ( - + ), }, ], @@ -112,7 +113,7 @@ export function GitRepositories() { header={ {t('common.resourcesCount', { count: rows.length })} - + } diff --git a/src/components/ControlPlane/Kustomizations.tsx b/src/components/ControlPlane/Kustomizations.tsx index 3471b084..15588f26 100644 --- a/src/components/ControlPlane/Kustomizations.tsx +++ b/src/components/ControlPlane/Kustomizations.tsx @@ -10,6 +10,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx'; import { useMemo } from 'react'; import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx'; import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx'; +import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts'; export function Kustomizations() { const { data, error, isLoading } = useApiResource(FluxKustomization); //404 if component not enabled @@ -70,7 +71,9 @@ export function Kustomizations() { width: 75, accessor: 'yaml', disableFilters: true, - Cell: (cellData: CellData) => , + Cell: (cellData: CellData) => ( + + ), }, ], [t], @@ -105,7 +108,7 @@ export function Kustomizations() { header={ {t('common.resourcesCount', { count: rows.length })} - + } From 894fd2ae09d49ed374c8a14145af1dcd98c5d78b Mon Sep 17 00:00:00 2001 From: Andreas Kienle Date: Thu, 2 Oct 2025 12:54:34 +0200 Subject: [PATCH 4/5] delete commented code --- .../GenericHintCard/GenericHintCard.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx index 9cf446af..a0dedc95 100644 --- a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx +++ b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx @@ -23,18 +23,6 @@ export const GenericHintCard: React.FC = ({ // Calculate segments and state using the provided calculator const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t); - // Handle click navigation if scroll target is provided - /* - const handleClick = - enabled && config.scrollTarget - ? () => { - const el = document.querySelector(config.scrollTarget!); - if (el) { - el.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - } - : undefined; */ - return (
Date: Thu, 2 Oct 2025 13:00:11 +0200 Subject: [PATCH 5/5] remove scroll target --- .../HintsCardsRow/GenericHintCard/genericHintConfigs.ts | 2 -- src/types/types.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts b/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts index b44eebc9..50531ee4 100644 --- a/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts +++ b/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts @@ -16,7 +16,6 @@ export const useCrossplaneHintConfig = (): GenericHintConfig => { subtitle: t('Hints.CrossplaneHint.subtitle'), iconSrc: '/crossplane-icon.png', iconAlt: 'Crossplane', - scrollTarget: '.crossplane-table-element', calculateSegments: (allItems, isLoading, error, enabled) => calculateCrossplaneSegments(allItems, isLoading, error, enabled, t), calculateHoverData: (allItems, enabled) => calculateCrossplaneHoverDataGeneric(allItems, enabled, t), @@ -31,7 +30,6 @@ export const useGitOpsHintConfig = (): GenericHintConfig => { subtitle: t('Hints.GitOpsHint.subtitle'), iconSrc: '/flux.png', iconAlt: 'Flux', - scrollTarget: '.cp-page-section-gitops', calculateSegments: (allItems, isLoading, error, enabled) => calculateGitOpsSegments(allItems, isLoading, error, enabled, t), calculateHoverData: (allItems, enabled) => calculateGitOpsHoverDataGeneric(allItems, enabled, t), diff --git a/src/types/types.ts b/src/types/types.ts index 7fe092d7..a614677c 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -36,7 +36,6 @@ export interface GenericHintConfig { iconSrc: string; iconAlt: string; iconStyle?: React.CSSProperties; - scrollTarget?: string; calculateSegments: GenericHintSegmentCalculator; calculateHoverData?: HoverDataCalculator; renderHoverContent?: (allItems: ManagedResourceItem[], enabled: boolean) => ReactNode;