Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,13 @@
"tableHeaderSynced": "Synced",
"tableHeaderReady": "Ready"
},
"ProvidersConfig": {
"headerProviderConfigs": "Provider Configs",
"tableHeaderProvider": "Provider",
"tableHeaderName": "Name",
"tableHeaderCreated": "Created",
"tableHeaderUsage": "Usage"
},
"ControlPlaneListToolbar": {
"buttonText": "Workspace"
},
Expand Down Expand Up @@ -150,9 +157,6 @@
"tableHeaderInstalled": "Installed",
"tableHeaderHealthy": "Healthy"
},
"ProvidersConfig": {
"header": "Provider Configs"
},
"validationErrors": {
"required": "This field is required!",
"properFormatting": "Use A-Z, a-z, 0-9, hyphen (-), and period (.), but note that whitespace (spaces, tabs, etc.) is not allowed for proper compatibility.",
Expand Down
2 changes: 1 addition & 1 deletion src/components/ControlPlane/ComponentList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
columns={componentTableColumns}
minRows={0}
data={data}
style={{marginLeft: "12px", marginRight: "12px"}}
style={{ marginLeft: '12px', marginRight: '12px' }}
/>
</div>
);
Expand Down
14 changes: 1 addition & 13 deletions src/components/ControlPlane/ManagedResources.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
AnalyticalTable,
AnalyticalTableColumnDefinition,
AnalyticalTableScaleWidthMode,
Icon,
Title,
} from '@ui5/webcomponents-react';
import useResource from '../../lib/api/useApiResource';
Expand All @@ -13,7 +12,7 @@ import IllustratedError from '../Shared/IllustratedError';
import '@ui5/webcomponents-icons/dist/sys-enter-2';
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
import { resourcesInterval } from '../../lib/shared/constants';
import { StatusCellProps } from '../../lib/shared/interfaces';
import { ResourceStatusCell } from '../Shared/ResourceStatusCell';

interface CellData<T> {
cell: {
Expand Down Expand Up @@ -140,14 +139,3 @@ export function ManagedResources() {
</>
);
}

function ResourceStatusCell({ value, transitionTime }: StatusCellProps) {
return (
<Icon
design={value ? 'Positive' : 'Negative'}
name={value ? 'sys-enter-2' : 'sys-cancel-2'}
showTooltip={true}
accessibleName={timeAgo.format(new Date(transitionTime))}
/>
);
}
84 changes: 49 additions & 35 deletions src/components/ControlPlane/Providers.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,47 @@

import { useTranslation } from 'react-i18next';
import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, Icon, Title } from '@ui5/webcomponents-react';
import {
AnalyticalTable,
AnalyticalTableColumnDefinition,
AnalyticalTableScaleWidthMode,
Title,
} from '@ui5/webcomponents-react';
import useResource from '../../lib/api/useApiResource';
import IllustratedError from '../Shared/IllustratedError';
import '@ui5/webcomponents-icons/dist/sys-enter-2';
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
import { ProvidersListRequest } from '../../lib/api/types/crossplane/listProviders';
import { resourcesInterval } from '../../lib/shared/constants';
import { timeAgo } from '../../utils/i18n/timeAgo';
import { StatusCellProps } from '../../lib/shared/interfaces';
import { ResourceStatusCell } from '../Shared/ResourceStatusCell';

interface CellData<T> {
cell: {
value: T | null; // null for grouping rows
row: {
original?: ProvidersRow; // missing for grouping rows
}
};
};
}

type ProvidersRow = {
name: string
name: string;
version: string;
healthy: boolean;
healthyTransitionTime: string;
installed: boolean;
installedTransitionTime: string;
created: string;
}
};

export function Providers() {
const { t } = useTranslation();

let {data: providers, error, isLoading} = useResource(ProvidersListRequest, {
refreshInterval: resourcesInterval
const {
data: providers,
error,
isLoading,
} = useResource(ProvidersListRequest, {
refreshInterval: resourcesInterval,
});

const columns: AnalyticalTableColumnDefinition[] = [
Expand All @@ -48,12 +56,24 @@ export function Providers() {
{
Header: t('Providers.tableHeaderInstalled'),
accessor: 'installed',
Cell: (cellData: CellData<ProvidersRow['installed']>) => cellData.cell.row.original?.installed != null ? <ResourceStatusCell value={cellData.cell.row.original?.installed} transitionTime={cellData.cell.row.original?.installedTransitionTime} /> : null
Cell: (cellData: CellData<ProvidersRow['installed']>) =>
cellData.cell.row.original?.installed != null ? (
<ResourceStatusCell
value={cellData.cell.row.original?.installed}
transitionTime={cellData.cell.row.original?.installedTransitionTime}
/>
) : null,
},
{
Header: t('Providers.tableHeaderHealthy'),
accessor: 'healthy',
Cell: (cellData: CellData<ProvidersRow['healthy']>) => cellData.cell.row.original?.installed != null ? <ResourceStatusCell value={cellData.cell.row.original?.healthy} transitionTime={cellData.cell.row.original?.healthyTransitionTime} /> : null
Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
cellData.cell.row.original?.installed != null ? (
<ResourceStatusCell
value={cellData.cell.row.original?.healthy}
transitionTime={cellData.cell.row.original?.healthyTransitionTime}
/>
) : null,
},
{
Header: t('Providers.tableHeaderCreated'),
Expand All @@ -63,28 +83,31 @@ export function Providers() {

const rows: ProvidersRow[] =
providers?.items?.map((item) => {
const installed = item.status.conditions?.find((condition) => condition.type === 'Installed');
const healthy = item.status.conditions?.find((condition) => condition.type === 'Healthy');
const installed = item.status.conditions?.find(
(condition) => condition.type === 'Installed',
);
const healthy = item.status.conditions?.find(
(condition) => condition.type === 'Healthy',
);

return {
name: item.metadata.name,
created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
installed: installed?.status === "True",
installedTransitionTime: installed?.lastTransitionTime ?? "",
healthy: healthy?.status === "True",
healthyTransitionTime: healthy?.lastTransitionTime ?? "",
version: item.spec.package.match(/\d+(\.\d+)+/g)?.toString() ?? "",
}
})
?? [];
installed: installed?.status === 'True',
installedTransitionTime: installed?.lastTransitionTime ?? '',
healthy: healthy?.status === 'True',
healthyTransitionTime: healthy?.lastTransitionTime ?? '',
version: item.spec.package.match(/\d+(\.\d+)+/g)?.toString() ?? '',
};
}) ?? [];

return (
<>
<Title level='H4'>{t('Providers.headerProviders')}</Title>
<Title level="H4">{t('Providers.headerProviders')}</Title>

{error && <IllustratedError error={error}/>}
{error && <IllustratedError error={error} />}

{!error &&
{!error && (
<AnalyticalTable
columns={columns}
data={rows}
Expand All @@ -103,19 +126,10 @@ export function Providers() {
autoResetSortBy: false,
autoResetFilters: false,
autoResetRowState: false,
autoResetResize: false
autoResetResize: false,
}}
/>
}
)}
</>
)
}

function ResourceStatusCell({ value, transitionTime }: StatusCellProps) {
return <Icon
design={value ? 'Positive' : 'Negative'}
name={value ? 'sys-enter-2' : 'sys-cancel-2'}
showTooltip={true}
accessibleName={timeAgo.format(new Date(transitionTime))}
/>
);
}
103 changes: 75 additions & 28 deletions src/components/ControlPlane/ProvidersConfig.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,87 @@

import { useTranslation } from 'react-i18next';
import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, Title } from '@ui5/webcomponents-react';
import {
AnalyticalTable,
AnalyticalTableColumnDefinition,
AnalyticalTableScaleWidthMode,
Title,
} from '@ui5/webcomponents-react';
import '@ui5/webcomponents-icons/dist/sys-enter-2';
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
import { useProvidersConfigResource } from '../../lib/api/useApiResource';
import { timeAgo } from '../../utils/i18n/timeAgo';

type Rows = {
parent: string;
name: string;
usage: string;
created: string;
};

//empty table TBD
export function ProvidersConfig() {
const { t } = useTranslation();
const rows: Rows[] = [];

const { data: providerConfigsList, isLoading } = useProvidersConfigResource({
refreshInterval: 60000, // Resources are quite expensive to fetch, so we refresh every 60 seconds
});

if (providerConfigsList) {
providerConfigsList.forEach((provider) => {
provider.items.forEach((config) => {
rows.push({
parent: provider.provider,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You sure that you can access this object properties without Optional chaining (?.) operator?

name: config.metadata.name,
usage: config.metadata.usage ? config.metadata.usage : '0',
created: timeAgo.format(new Date(config.metadata.creationTimestamp)),
});
});
});
}

const columns: AnalyticalTableColumnDefinition[] = [];
const columns: AnalyticalTableColumnDefinition[] = [
{
Header: t('ProvidersConfig.tableHeaderProvider'),
accessor: 'parent',
},
{
Header: t('ProvidersConfig.tableHeaderName'),
accessor: 'name',
},
{
Header: t('ProvidersConfig.tableHeaderUsage'),
accessor: 'usage',
},
{
Header: t('ProvidersConfig.tableHeaderCreated'),
accessor: 'created',
},
];

return (
<>
<Title level='H4'>{t('ProvidersConfig.header')}</Title>
<AnalyticalTable
columns={columns}
data={[]}
minRows={1}
groupBy={['name']}
scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
loading={false}
filterable
// Prevent the table from resetting when the data changes
retainColumnWidth
reactTableOptions={{
autoResetHiddenColumns: false,
autoResetPage: false,
autoResetExpanded: false,
autoResetGroupBy: false,
autoResetSelectedRows: false,
autoResetSortBy: false,
autoResetFilters: false,
autoResetRowState: false,
autoResetResize: false
}}
/>
<Title level="H4">{t('ProvidersConfig.headerProviderConfigs')}</Title>
<AnalyticalTable
columns={columns}
data={rows ?? []}
minRows={1}
groupBy={['parent']}
scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
loading={isLoading}
filterable
// Prevent the table from resetting when the data changes
retainColumnWidth
reactTableOptions={{
autoResetHiddenColumns: false,
autoResetPage: false,
autoResetExpanded: false,
autoResetGroupBy: false,
autoResetSelectedRows: false,
autoResetSortBy: false,
autoResetFilters: false,
autoResetRowState: false,
autoResetResize: false,
}}
/>
</>
)
);
}
13 changes: 0 additions & 13 deletions src/components/ControlPlane/ProvidersList.tsx

This file was deleted.

31 changes: 20 additions & 11 deletions src/components/ControlPlanes/List/ControlPlaneListToolbar.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
import { Toolbar, ToolbarButton } from "@ui5/webcomponents-react";
import { useState } from "react";
import { Toolbar, ToolbarButton } from '@ui5/webcomponents-react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {CreateWorkspaceDialogContainer} from "../../Dialogs/CreateWorkspaceDialogContainer.tsx";
import { CreateWorkspaceDialogContainer } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';



export function ControlPlaneListToolbar({ projectName }: { projectName: string }) {
export function ControlPlaneListToolbar({
projectName,
}: {
projectName: string;
}) {
const [dialogCreateProjectIsOpen, setDialogIsOpen] = useState(false);
const { t } = useTranslation();

return (
<>
<Toolbar>
<ToolbarButton icon="add" text={t('ControlPlaneListToolbar.buttonText')} onClick={() => setDialogIsOpen(true)} />
<ToolbarButton
icon="add"
text={t('ControlPlaneListToolbar.buttonText')}
onClick={() => setDialogIsOpen(true)}
/>
</Toolbar>
<CreateWorkspaceDialogContainer isOpen={dialogCreateProjectIsOpen} setIsOpen={setDialogIsOpen} project={projectName}/>
<CreateWorkspaceDialogContainer
isOpen={dialogCreateProjectIsOpen}
setIsOpen={setDialogIsOpen}
project={projectName}
/>
</>
)

}
);
}
Loading
Loading