feat: enhance Custom Resources

public/i18n/en.yaml

@@ -484,15 +484,23 @@ custom-resource-definitions:
   description: <0>CustomResourceDefinition</0> 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
     plural: Plural
     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
@@ -508,6 +516,8 @@ custom-resource-definitions:
 custom-resources:
   description: <0>Custom resource</0> extends the Kubernetes API. You can define your own custom resource by creating a <1>CustomResourceDefinition</1> first.
   title: Custom Resources
+  headers:
+    api-version: API Version
 daemon-sets:
   description: <0>DaemonSet</0> ensures that replicated Pods are running across a set of available nodes.
   name_singular: DaemonSet

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 <ResourcesList {...params} />;
 }

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]) => (
-          <li key={group}>
+          <li key={group} className="cr-group-list">
             <ResourceListRenderer
               resourceUrl={resourceUrl}
               resourceType="CustomResourceDefinition"

src/components/CustomResources/GroupingListPage.scss

@@ -0,0 +1,18 @@
+.cr-group-list {
+  ui5-table-cell[slot='default-1'] {
+    width: 35vw;
+  }
+
+  ui5-table-cell[slot='default-2'] {
+    width: 22vw;
+  }
+}
+
+@media (max-width: 850px) {
+  .cr-group-list {
+    ui5-table-cell[slot='default-1'],
+    ui5-table-cell[slot='default-2'] {
+      width: unset;
+    }
+  }
+}

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 (
+    <>
+      <UI5Panel title={t('common.headers.specification')}>
+        <LayoutPanelRow
+          name={t('custom-resource-definitions.headers.scope')}
+          value={spec?.scope}
+        />
+        <LayoutPanelRow
+          name={t('custom-resource-definitions.headers.categories')}
+          value={<Tokens tokens={spec.names?.categories} />}
+        />
+        <LayoutPanelRow
+          name={t('custom-resource-definitions.headers.group')}
+          value={spec?.group}
+        />
+
+        <UI5Panel title={t('custom-resource-definitions.headers.conversion')}>
+          {spec.conversion && (
+            <>
+              <LayoutPanelRow
+                name={t('custom-resource-definitions.headers.strategy')}
+                value={spec.conversion.strategy}
+              />
+              {spec.conversion?.webhook && (
+                <>
+                  <LayoutPanelRow
+                    name={t('custom-resource-definitions.headers.service-name')}
+                    value={
+                      spec.conversion?.webhook?.clientConfig?.service?.name
+                    }
+                  />
+                  <LayoutPanelRow
+                    name={t(
+                      'custom-resource-definitions.headers.service-namespace',
+                    )}
+                    value={
+                      spec.conversion?.webhook?.clientConfig?.service?.namespace
+                    }
+                  />
+                  <LayoutPanelRow
+                    name={t('custom-resource-definitions.headers.service-port')}
+                    value={
+                      spec.conversion?.webhook?.clientConfig?.service?.port
+                    }
+                  />
+                  <LayoutPanelRow
+                    name={t(
+                      'custom-resource-definitions.headers.conversion-review-versions',
+                    )}
+                    value={
+                      <Tokens
+                        tokens={
+                          spec.conversion?.webhook?.conversionReviewVersions
+                        }
+                      />
+                    }
+                  />
+                </>
+              )}
+            </>
+          )}
+        </UI5Panel>
+        {spec?.versions && (
+          <GenericList
+            title={t('custom-resource-definitions.headers.versions')}
+            headerRenderer={() => [
+              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,
+            }}
+          />
+        )}
+      </UI5Panel>
+    </>
+  );
+};

src/resources/CustomResourceDefinitions/CurrentCRDVersion.js

@@ -84,6 +84,7 @@ export const CurrentCRDVersion = resource => {
           resource.spec.scope !== 'Namespaced' ? ['namespace'] : []
         }
         hideCreateOption={true}
+        simpleEmptyListMessage={true}
       />
       <AdditionalPrinterColumns
         additionalPrinterColumns={

src/resources/CustomResourceDefinitions/CustomResourceDefinitionDetails.js

@@ -3,28 +3,17 @@ import { useTranslation } from 'react-i18next';
 import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import { GenericList } from 'shared/components/GenericList/GenericList';
-import { Tokens } from 'shared/components/Tokens';
 import { EventsList } from 'shared/components/EventsList';
 
 import { CurrentCRDVersion } from './CurrentCRDVersion';
 import { RelatedCRDsList } from './RelatedCRDsList';
 import CustomResourceDefinitionCreate from './CustomResourceDefinitionCreate';
 import { ResourceDescription } from 'resources/CustomResourceDefinitions';
+import { CRDSpecification } from './CRDSpecification';
 
 export function CustomResourceDefinitionDetails(props) {
   const { t } = useTranslation();
 
-  const customColumns = [
-    {
-      header: t('custom-resource-definitions.headers.scope'),
-      value: resource => resource.spec.scope,
-    },
-    {
-      header: t('custom-resource-definitions.headers.categories'),
-      value: ({ spec }) => <Tokens tokens={spec.names?.categories} />,
-    },
-  ];
-
   const ResourceNames = resource => {
     const headerRenderer = () => [
       t('custom-resource-definitions.headers.kind'),
@@ -69,17 +58,27 @@ 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 (
     <ResourceDetails
-      customColumns={customColumns}
       customComponents={[
+        CRDSpecification,
         ResourceNames,
         CurrentCRDVersion,
         RelatedCRDsList,
         Events,
       ]}
       description={ResourceDescription}
       createResourceForm={CustomResourceDefinitionCreate}
+      statusConditions={statusConditions}
       {...props}
     />
   );

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,21 +54,37 @@ export default function CustomResource({ params }) {
       }${crdName}/${resourceName}`
     : '';
 
-  const yamlPreview = resource => (
-    <ReadonlyEditorPanel
-      key="editor"
-      title="YAML"
-      value={jsyaml.dump(resource)}
-      editorProps={{ language: 'yaml', height: '500px' }}
-    />
-  );
+  const customColumns = [
+    {
+      header: t('custom-resources.headers.api-version'),
+      value: resource => resource.apiVersion,
+    },
+  ];
+  const yamlPreview = resource => {
+    return Object.keys(resource || {})
+      ?.map(key => {
+        if (typeof resource[key] === 'object' && key !== 'metadata') {
+          return (
+            <ReadonlyEditorPanel
+              title={key}
+              value={jsyaml.dump(resource[key])}
+              key={key + JSON.stringify(resource[key])}
+            />
+          );
+        }
+        return null;
+      })
+      .filter(Boolean);
+  };
+
   return (
     <ResourceDetails
       layoutNumber={params.layoutNumber ?? 'EndColumn'}
       resourceUrl={resourceUrl}
       resourceType={crdName}
       resourceName={resourceName}
       namespace={namespace}
+      customColumns={customColumns}
       createResourceForm={CRCreateWrapper}
       customComponents={[yamlPreview]}
       layoutCloseCreateUrl={params.layoutCloseCreateUrl}

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 (
     <section className="object-details">
       {!root && (
-        <div>
-          {name && <Text className="property-name">{name}</Text>}{' '}
+        <FlexBox alignItems="Center">
+          {name && (
+            <Text style={spacing.sapUiTinyMarginEnd} className="property-name">
+              {name}
+            </Text>
+          )}
           {types &&
             types
               .map(type => {
@@ -40,7 +43,7 @@ export function JSONSchema({
               {t('schema.required')}
             </ObjectStatus>
           )}
-        </div>
+        </FlexBox>
       )}
       {description && <div className="description">{description}</div>}
 

src/shared/components/SchemaViewer/ObjectProperties.js

@@ -20,13 +20,13 @@ function ObjectProperty({ label, val, handler, required, expanded = false }) {
       >
         {handler.expandable && (
           <Icon
-            style={spacing.sapUiSmallMarginEnd}
+            style={spacing.sapUiTinyMarginEnd}
             aria-hidden
             name={
               collapsed ? 'navigation-right-arrow' : 'navigation-down-arrow'
             }
           />
-        )}{' '}
+        )}
         <Text>{label}</Text>
       </dd>
       {(!handler.expandable || !collapsed) && (

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;
       }
     }