From 63997b3124f07adfaf9272bd62c7562d8f586160 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Fri, 13 Sep 2024 15:40:30 +0200 Subject: [PATCH 1/6] adjust CR and CRD --- public/i18n/en.yaml | 8 ++ .../CustomResources/CustomResources.js | 2 + .../CRDSpecification.tsx | 95 +++++++++++++++++++ .../CurrentCRDVersion.js | 1 + .../CustomResourceDefinitionDetails.js | 25 +++-- .../CustomResources.details.js | 38 +++++++- 6 files changed, 152 insertions(+), 17 deletions(-) create mode 100644 src/resources/CustomResourceDefinitions/CRDSpecification.tsx diff --git a/public/i18n/en.yaml b/public/i18n/en.yaml index a1a034f220..a499b9802e 100644 --- a/public/i18n/en.yaml +++ b/public/i18n/en.yaml @@ -484,7 +484,9 @@ custom-resource-definitions: description: <0>CustomResourceDefinition is an object used to define a custom resource that allows you to extend the Kubernetes API for use cases that are not directly covered by core Kubernetes. headers: categories: Categories + conversion: Conversion description: Description + group: Group json-path: JSON Path kind: Kind list-kind: List Kind @@ -492,7 +494,13 @@ custom-resource-definitions: scope: Scope short-names: Short Names singular: Singular + strategy: Strategy + service-name: Service Name + service-namespace: Service Namespace + service-port: Service Port + conversion-review-versions: Conversion Review Versions type: Type + versions: Versions name_singular: CustomResourceDefinition status: not-served: Not Served diff --git a/src/components/CustomResources/CustomResources.js b/src/components/CustomResources/CustomResources.js index 6833992bf7..8e0ba7fa30 100644 --- a/src/components/CustomResources/CustomResources.js +++ b/src/components/CustomResources/CustomResources.js @@ -15,6 +15,7 @@ export function CustomResources({ hideCreateOption, enableColumnLayout, layoutCloseCreateUrl, + simpleEmptyListMessage = false, }) { const { group, names } = crd.spec; const name = names.plural; @@ -94,6 +95,7 @@ export function CustomResources({ customColumnLayout, layoutNumber: 'MidColumn', parentCrdName: crd.metadata.name, + simpleEmptyListMessage, }; return ; } diff --git a/src/resources/CustomResourceDefinitions/CRDSpecification.tsx b/src/resources/CustomResourceDefinitions/CRDSpecification.tsx new file mode 100644 index 0000000000..b8813d7365 --- /dev/null +++ b/src/resources/CustomResourceDefinitions/CRDSpecification.tsx @@ -0,0 +1,95 @@ +import { useTranslation } from 'react-i18next'; +import { GenericList } from 'shared/components/GenericList/GenericList'; +import { LayoutPanelRow } from 'shared/components/LayoutPanelRow/LayoutPanelRow'; +import { Tokens } from 'shared/components/Tokens'; +import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel'; +import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants'; + +export const CRDSpecification = ({ spec }: { spec: any }) => { + const { t } = useTranslation(); + + return ( + <> + + + } + /> + + + + {spec.conversion && ( + <> + + {spec.conversion?.webhook && ( + <> + + + + + } + /> + + )} + + )} + + {spec?.versions && ( + [ + t('common.headers.name'), + t('custom-resource-definitions.status.served'), + t('custom-resource-definitions.status.storage'), + ]} + rowRenderer={version => [ + version?.name ?? EMPTY_TEXT_PLACEHOLDER, + version?.served.toString() ?? EMPTY_TEXT_PLACEHOLDER, + version?.storage.toString() ?? EMPTY_TEXT_PLACEHOLDER, + ]} + entries={spec?.versions} + searchSettings={{ + showSearchField: false, + }} + /> + )} + + + ); +}; diff --git a/src/resources/CustomResourceDefinitions/CurrentCRDVersion.js b/src/resources/CustomResourceDefinitions/CurrentCRDVersion.js index bdca4ca062..ac7d7ef340 100644 --- a/src/resources/CustomResourceDefinitions/CurrentCRDVersion.js +++ b/src/resources/CustomResourceDefinitions/CurrentCRDVersion.js @@ -84,6 +84,7 @@ export const CurrentCRDVersion = resource => { resource.spec.scope !== 'Namespaced' ? ['namespace'] : [] } hideCreateOption={true} + simpleEmptyListMessage={true} /> resource.spec.scope, - }, - { - header: t('custom-resource-definitions.headers.categories'), - value: ({ spec }) => , - }, - ]; - const ResourceNames = resource => { const headerRenderer = () => [ t('custom-resource-definitions.headers.kind'), @@ -69,10 +58,19 @@ export function CustomResourceDefinitionDetails(props) { ); }; + const statusConditions = resource => { + return resource?.status?.conditions?.map(condition => { + return { + header: { titleText: condition.type, status: condition.status }, + message: condition.message, + }; + }); + }; + return ( ); diff --git a/src/resources/CustomResourceDefinitions/CustomResources.details.js b/src/resources/CustomResourceDefinitions/CustomResources.details.js index be0669b0e8..905b43928f 100644 --- a/src/resources/CustomResourceDefinitions/CustomResources.details.js +++ b/src/resources/CustomResourceDefinitions/CustomResources.details.js @@ -52,14 +52,44 @@ export default function CustomResource({ params }) { }${crdName}/${resourceName}` : ''; - const yamlPreview = resource => ( + const yamlPreview = resource => { + return Object.keys(resource || {}).map(key => { + if (typeof resource[key] === 'object' && key !== 'metadata') { + //&& key !== 'metadata' + return ( + + ); + } + }); + }; + + const yamlSinglePropsPreview = resource => { + const singleProps = {}; + Object.keys(resource || {}).forEach(key => { + if (typeof resource[key] !== 'object' && key !== 'metadata') { + singleProps[key] = resource[key]; + } + }); + if (Object.keys(singleProps).length > 0) { + return ( + + ); + } - ); + />; + }; + return ( Date: Fri, 13 Sep 2024 16:38:20 +0200 Subject: [PATCH 2/6] adjust schemaViewer --- src/shared/components/SchemaViewer/JSONSchema.js | 15 +++++++++------ .../components/SchemaViewer/ObjectProperties.js | 4 ++-- .../components/SchemaViewer/SchemaViewer.scss | 3 ++- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/shared/components/SchemaViewer/JSONSchema.js b/src/shared/components/SchemaViewer/JSONSchema.js index 42962a877c..4b27483e21 100644 --- a/src/shared/components/SchemaViewer/JSONSchema.js +++ b/src/shared/components/SchemaViewer/JSONSchema.js @@ -1,9 +1,8 @@ -import React from 'react'; - import { useTranslation } from 'react-i18next'; import { ObjectProperties } from './ObjectProperties'; -import { ObjectStatus, Text } from '@ui5/webcomponents-react'; +import { FlexBox, ObjectStatus, Text } from '@ui5/webcomponents-react'; +import { spacing } from '@ui5/webcomponents-react-base'; export function JSONSchema({ root = false, @@ -19,8 +18,12 @@ export function JSONSchema({ return (
{!root && ( -
- {name && {name}}{' '} + + {name && ( + + {name} + + )} {types && types .map(type => { @@ -40,7 +43,7 @@ export function JSONSchema({ {t('schema.required')} )} -
+ )} {description &&
{description}
} diff --git a/src/shared/components/SchemaViewer/ObjectProperties.js b/src/shared/components/SchemaViewer/ObjectProperties.js index de212c4e0b..25fbecc0c8 100644 --- a/src/shared/components/SchemaViewer/ObjectProperties.js +++ b/src/shared/components/SchemaViewer/ObjectProperties.js @@ -20,13 +20,13 @@ function ObjectProperty({ label, val, handler, required, expanded = false }) { > {handler.expandable && ( - )}{' '} + )} {label} {(!handler.expandable || !collapsed) && ( diff --git a/src/shared/components/SchemaViewer/SchemaViewer.scss b/src/shared/components/SchemaViewer/SchemaViewer.scss index 045ed723d5..1164daff76 100644 --- a/src/shared/components/SchemaViewer/SchemaViewer.scss +++ b/src/shared/components/SchemaViewer/SchemaViewer.scss @@ -1,7 +1,7 @@ .schema-viewer { dl { display: grid; - grid-template-columns: auto Min(calc(100vw - 30rem), calc(100% - 8rem)); + grid-template-columns: auto Min(calc(100vw - 30rem), calc(100% - 9rem)); grid-row-gap: 4px; margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -12,6 +12,7 @@ &.expandable { cursor: pointer; + margin-bottom: 0.5rem; } } From 86db4766ddf5a50a252e311d15f239c14068ff1d Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Mon, 16 Sep 2024 10:31:00 +0200 Subject: [PATCH 3/6] cleanup --- .../CustomResources.details.js | 26 +------------------ 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/src/resources/CustomResourceDefinitions/CustomResources.details.js b/src/resources/CustomResourceDefinitions/CustomResources.details.js index 905b43928f..a970a9d8d7 100644 --- a/src/resources/CustomResourceDefinitions/CustomResources.details.js +++ b/src/resources/CustomResourceDefinitions/CustomResources.details.js @@ -55,10 +55,9 @@ export default function CustomResource({ params }) { const yamlPreview = resource => { return Object.keys(resource || {}).map(key => { if (typeof resource[key] === 'object' && key !== 'metadata') { - //&& key !== 'metadata' return ( @@ -67,29 +66,6 @@ export default function CustomResource({ params }) { }); }; - const yamlSinglePropsPreview = resource => { - const singleProps = {}; - Object.keys(resource || {}).forEach(key => { - if (typeof resource[key] !== 'object' && key !== 'metadata') { - singleProps[key] = resource[key]; - } - }); - if (Object.keys(singleProps).length > 0) { - return ( - - ); - } - ; - }; - return ( Date: Mon, 16 Sep 2024 10:50:49 +0200 Subject: [PATCH 4/6] fix map --- .../CustomResources.details.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/resources/CustomResourceDefinitions/CustomResources.details.js b/src/resources/CustomResourceDefinitions/CustomResources.details.js index a970a9d8d7..df88a06606 100644 --- a/src/resources/CustomResourceDefinitions/CustomResources.details.js +++ b/src/resources/CustomResourceDefinitions/CustomResources.details.js @@ -53,17 +53,20 @@ export default function CustomResource({ params }) { : ''; const yamlPreview = resource => { - return Object.keys(resource || {}).map(key => { - if (typeof resource[key] === 'object' && key !== 'metadata') { - return ( - - ); - } - }); + return Object.keys(resource || {}) + ?.map(key => { + if (typeof resource[key] === 'object' && key !== 'metadata') { + return ( + + ); + } + return null; + }) + .filter(Boolean); }; return ( From c65ca709b486b21c0b4abc43bb4a598a9038d099 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Mon, 16 Sep 2024 11:02:48 +0200 Subject: [PATCH 5/6] add api version to cr --- public/i18n/en.yaml | 2 ++ .../CustomResourceDefinitions/CustomResources.details.js | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/public/i18n/en.yaml b/public/i18n/en.yaml index a499b9802e..9a5aa51aff 100644 --- a/public/i18n/en.yaml +++ b/public/i18n/en.yaml @@ -516,6 +516,8 @@ custom-resource-definitions: custom-resources: description: <0>Custom resource extends the Kubernetes API. You can define your own custom resource by creating a <1>CustomResourceDefinition first. title: Custom Resources + headers: + api-version: API Version daemon-sets: description: <0>DaemonSet ensures that replicated Pods are running across a set of available nodes. name_singular: DaemonSet diff --git a/src/resources/CustomResourceDefinitions/CustomResources.details.js b/src/resources/CustomResourceDefinitions/CustomResources.details.js index df88a06606..c79cc35b2c 100644 --- a/src/resources/CustomResourceDefinitions/CustomResources.details.js +++ b/src/resources/CustomResourceDefinitions/CustomResources.details.js @@ -8,8 +8,10 @@ import { ReadonlyEditorPanel } from 'shared/components/ReadonlyEditorPanel'; import { activeNamespaceIdState } from 'state/activeNamespaceIdAtom'; import CRCreate from 'resources/CustomResourceDefinitions/CRCreate'; import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; export default function CustomResource({ params }) { + const { t } = useTranslation(); const namespace = useRecoilValue(activeNamespaceIdState); const { customResourceDefinitionName, @@ -52,6 +54,12 @@ export default function CustomResource({ params }) { }${crdName}/${resourceName}` : ''; + const customColumns = [ + { + header: t('custom-resources.headers.api-version'), + value: resource => resource.apiVersion, + }, + ]; const yamlPreview = resource => { return Object.keys(resource || {}) ?.map(key => { @@ -76,6 +84,7 @@ export default function CustomResource({ params }) { resourceType={crdName} resourceName={resourceName} namespace={namespace} + customColumns={customColumns} createResourceForm={CRCreateWrapper} customComponents={[yamlPreview]} layoutCloseCreateUrl={params.layoutCloseCreateUrl} From 5282caeb63f7c37e9ef7761c95518394e5141686 Mon Sep 17 00:00:00 2001 From: Oliwia Gowor Date: Tue, 17 Sep 2024 11:24:35 +0200 Subject: [PATCH 6/6] adjust custom resources lists --- .../CustomResources/GroupingListPage.js | 5 +++-- .../CustomResources/GroupingListPage.scss | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/components/CustomResources/GroupingListPage.scss diff --git a/src/components/CustomResources/GroupingListPage.js b/src/components/CustomResources/GroupingListPage.js index b1b89fdb97..0678c14e3d 100644 --- a/src/components/CustomResources/GroupingListPage.js +++ b/src/components/CustomResources/GroupingListPage.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { groupBy } from 'lodash'; import { Tokens } from 'shared/components/Tokens'; @@ -12,6 +12,7 @@ import { SearchInput } from 'shared/components/GenericList/SearchInput'; import YamlUploadDialog from 'resources/Namespaces/YamlUpload/YamlUploadDialog'; import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel'; import { createPortal } from 'react-dom'; +import './GroupingListPage.scss'; export function GroupingListPage({ title, @@ -57,7 +58,7 @@ export function GroupingListPage({ {entries .sort(([groupA], [groupB]) => groupA.localeCompare(groupB)) .map(([group, crds]) => ( -
  • +