Merge pull request #198 from webzard-io/bowen/tenant

Bowen/tenant
webzard-io · Nov 14, 2024 · 2c05fa9 · 2c05fa9
2 parents cce3a0e + c50b4f0
commit 2c05fa9
Show file tree

Hide file tree

Showing 19 changed files with 140 additions and 103 deletions.
diff --git a/packages/refine/package.json b/packages/refine/package.json
@@ -30,7 +30,7 @@
     "dayjs": "^1.11.10",
     "i18next": "^23.2.3",
     "js-yaml": "^4.1.0",
-    "k8s-api-provider": "0.0.23",
+    "k8s-api-provider": "^0.0.25",
     "ky": "^0.33.3",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",

diff --git a/packages/refine/src/App.tsx b/packages/refine/src/App.tsx
@@ -160,6 +160,7 @@ function App() {
         apiUrl: '/api/sks-proxy/api/v1/clusters/yangfeng-test/proxy',
         watchWsApiUrl: 'api/sks-ws/sks-proxy/api/v1/clusters/yangfeng-test/proxy',
         prefix: 'default',
+        plugins: ProviderPlugins,
       },
       ProviderPlugins
     );

diff --git a/packages/refine/src/Dovetail.tsx b/packages/refine/src/Dovetail.tsx
@@ -4,7 +4,13 @@ import {
   ModalStack,
   useMessage,
 } from '@cloudtower/eagle';
-import { NotificationProvider, Refine, AccessControlProvider } from '@refinedev/core';
+import {
+  NotificationProvider,
+  Refine,
+  AccessControlProvider,
+  DataProvider,
+  LiveProvider,
+} from '@refinedev/core';
 import { History } from 'history';
 import { dataProvider, liveProvider, GlobalStore } from 'k8s-api-provider';
 import { keyBy } from 'lodash-es';
@@ -29,6 +35,8 @@ type Props = {
   globalStore: GlobalStore;
   accessControlProvider?: AccessControlProvider;
   routerProvider?: any;
+  dataProvider?: DataProvider;
+  liveProvider?: LiveProvider;
   antdGetPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
 };
 
@@ -42,6 +50,8 @@ export const Dovetail: React.FC<Props> = props => {
     globalStore,
     accessControlProvider,
     routerProvider: customRouterProvider,
+    dataProvider: customDataProvider,
+    liveProvider: customLiveProvider,
     antdGetPopupContainer,
   } = props;
   const msg = useMessage();
@@ -104,10 +114,10 @@ export const Dovetail: React.FC<Props> = props => {
               <GlobalStoreContext.Provider value={{ globalStore }}>
                 <Refine
                   dataProvider={{
-                    default: dataProvider(globalStore),
+                    default: customDataProvider || dataProvider(globalStore),
                   }}
                   routerProvider={customRouterProvider || routerProvider}
-                  liveProvider={liveProvider(globalStore)}
+                  liveProvider={customLiveProvider || liveProvider(globalStore)}
                   notificationProvider={notificationProvider}
                   options={{
                     warnWhenUnsavedChanges: true,

diff --git a/packages/refine/src/components/EditMetadataForm/EditAnnotationForm.tsx b/packages/refine/src/components/EditMetadataForm/EditAnnotationForm.tsx
@@ -48,7 +48,7 @@ export const EditAnnotationForm = React.forwardRef<
           return {
             message: t('dovetail.edit_annotation_success_toast', {
               kind: resourceModel.kind,
-              name: resourceModel.metadata.name,
+              name: resourceModel.metadata?.name,
               interpolation: {
                 escapeValue: false,
               },

diff --git a/packages/refine/src/components/EditMetadataForm/EditLabelForm.tsx b/packages/refine/src/components/EditMetadataForm/EditLabelForm.tsx
@@ -45,7 +45,7 @@ export const EditLabelForm = React.forwardRef<EditLabelFormHandler, EditLabelFor
             return {
               message: t('dovetail.edit_label_success_toast', {
                 kind: resourceModel.kind,
-                name: resourceModel.metadata.name,
+                name: resourceModel.metadata?.name,
                 interpolation: {
                   escapeValue: false,
                 },

diff --git a/packages/refine/src/components/EditMetadataForm/EditNodeTaintForm.tsx b/packages/refine/src/components/EditMetadataForm/EditNodeTaintForm.tsx
@@ -67,7 +67,7 @@ export const EditNodeTaintForm = React.forwardRef<
           return {
             message: t('dovetail.edit_node_taint_success_toast', {
               kind: nodeModel.kind,
-              name: nodeModel.metadata.name,
+              name: nodeModel.metadata?.name,
               interpolation: {
                 escapeValue: false,
               },

diff --git a/packages/refine/src/components/Form/useRefineForm.ts b/packages/refine/src/components/Form/useRefineForm.ts
@@ -27,7 +27,7 @@ export const useRefineForm = (props: {
             id ? 'dovetail.edit_resource_success' : 'dovetail.create_success_toast',
             {
               kind: addSpaceBeforeLetter(config.displayName || config.kind),
-              name: formValue.metadata.name,
+              name: formValue.metadata?.name,
               interpolation: { escapeValue: false },
             }
           ).trim(),

diff --git a/packages/refine/src/components/ShowContent/ShowContent.tsx b/packages/refine/src/components/ShowContent/ShowContent.tsx
@@ -93,7 +93,7 @@ const GroupStyle = css`
   &:first-of-type {
     margin-top: 16px;
   }
-  
+
   .pagination-wrapper {
     padding-top: 12px;
     padding-bottom: 0;
@@ -232,6 +232,7 @@ export const ShowContent = <Model extends ResourceModel>(props: Props<Model>) =>
                     width: field.labelWidth || '165px',
                     marginRight: 8,
                     flexShrink: 0,
+                    color: '#2C385299',
                   }}
                 >
                   {field.title}
@@ -269,24 +270,28 @@ export const ShowContent = <Model extends ResourceModel>(props: Props<Model>) =>
           hoverSrc={ArrowChevronLeftSmall16BoldBlueIcon}
           style={{ marginRight: 4 }}
         >
-          <span className="button-text">{config?.displayName || resource?.meta?.kind}</span>
+          <span className="button-text">
+            {config?.displayName || resource?.meta?.kind}
+          </span>
         </Icon>
       </span>
       <Space className={TopBarStyle}>
         <div style={{ display: 'flex' }}>
           <span className={cx(Typo.Display.d2_regular_title, NameStyle)}>
             {record?.metadata?.name}
           </span>
-          {stateDisplay ? <StateTag state={stateDisplay} resourceKind={resource?.meta?.kind} /> : undefined}
+          {stateDisplay ? (
+            <StateTag
+              state={stateDisplay}
+              customResourceStateMap={showConfig.resourceStateMap}
+            />
+          ) : undefined}
         </div>
         <Space>
           {showConfig.renderExtraButton?.(record)}
           {!config.hideEdit ? (
             <CanAccess resource={resource?.name} action={AccessControlAuth.Edit}>
-              <Button
-                style={{ marginRight: 8 }}
-                onClick={openForm}
-              >
+              <Button style={{ marginRight: 8 }} onClick={openForm}>
                 {config.formConfig?.fields ? t('dovetail.edit') : t('dovetail.edit_yaml')}
               </Button>
             </CanAccess>

diff --git a/packages/refine/src/components/ShowContent/fields.tsx b/packages/refine/src/components/ShowContent/fields.tsx
@@ -1,4 +1,4 @@
-import { Units } from '@cloudtower/eagle';
+import { StatusCapsuleColor, Units } from '@cloudtower/eagle';
 import { useTable, CrudFilters } from '@refinedev/core';
 import { i18n as I18nType } from 'i18next';
 import { Unstructured } from 'k8s-api-provider';
@@ -93,6 +93,10 @@ export type ShowTab<Model extends ResourceModel> = {
 export interface ShowConfig<Model extends ResourceModel = ResourceModel> {
   tabs?: ShowTab<Model>[];
   renderExtraButton?: (record: Model) => React.ReactNode;
+  resourceStateMap?: {
+    color: Record<string, StatusCapsuleColor | 'loading'>;
+    text: Record<string, string>;
+  };
 }
 
 export const ImageField = <Model extends WorkloadBaseModel>(
@@ -265,7 +269,7 @@ export const ServicePodsField = <Model extends ResourceModel>(): ShowField<Model
               return r.kind === 'Pod' && r.type === 'selects';
             })?.selector
           }
-          namespace={record.metadata.namespace}
+          namespace={record.metadata?.namespace}
           hideToolbar
         />
       );
@@ -292,7 +296,7 @@ export const EventsTableTabField = <Model extends ResourceModel>(): ShowField<Mo
     renderContent: (_, record) => {
       return (
         <div style={{ padding: '0 24px', height: '100%' }}>
-          <EventsTable uid={record.metadata.uid as string} />
+          <EventsTable uid={record.metadata?.uid as string} />
         </div>
       );
     },
@@ -430,7 +434,7 @@ export const StorageClassPvField = <
                   field: '',
                   value: '',
                   fn(pv: PersistentVolumeModel) {
-                    return sc.filterPV(pv, sc.metadata.name);
+                    return sc.filterPV(pv, sc.metadata?.name);
                   },
                 },
               ] as unknown as CrudFilters,
@@ -476,11 +480,13 @@ export const PVRefField = <Model extends PersistentVolumeClaimModel>(
     path: ['pv'],
     title: i18n.t('dovetail.pv'),
     renderContent(value) {
-      return <ResourceLink
-        resourceKind="persistentvolumes"
-        namespace=""
-        name={value as string}
-      />;
+      return (
+        <ResourceLink
+          resourceKind="persistentvolumes"
+          namespace=""
+          name={value as string}
+        />
+      );
     },
   };
 };
@@ -496,11 +502,7 @@ export const PVStorageClassField = <
     title: i18n.t('dovetail.storage_class'),
     renderContent(value) {
       return (
-        <ResourceLink
-          resourceKind="storageclasses"
-          namespace=""
-          name={value as string}
-        />
+        <ResourceLink resourceKind="storageclasses" namespace="" name={value as string} />
       );
     },
   };
@@ -516,7 +518,7 @@ export const PVPhaseField = <
     path: ['stateDisplay'],
     title: i18n.t('dovetail.state'),
     renderContent(value) {
-      return <StateTag state={value as ResourceState} resourceKind="PersistentVolume" hideBackground />;
+      return <StateTag state={value as ResourceState} hideBackground />;
     },
   };
 };
@@ -547,19 +549,25 @@ export const PVAccessModeField = <
     title: i18n.t('dovetail.access_mode'),
     renderContent(value) {
       return (value as string[]).join(', ');
-    }
+    },
   };
 };
 
-export const PVCPodsField = <Model extends PersistentVolumeClaimModel>(): ShowField<Model> => {
+export const PVCPodsField = <
+  Model extends PersistentVolumeClaimModel,
+>(): ShowField<Model> => {
   return {
     key: 'pods',
     path: [],
     renderContent: (_, record) => {
       return (
         <WorkloadPodsTable
-          filter={item => !!item.spec?.volumes?.some(v => v.persistentVolumeClaim?.claimName === record.metadata.name)}
-          namespace={record.metadata.namespace}
+          filter={item =>
+            !!item.spec?.volumes?.some(
+              v => v.persistentVolumeClaim?.claimName === record.metadata?.name
+            )
+          }
+          namespace={record.metadata?.namespace}
           hideToolbar
         />
       );
@@ -575,12 +583,14 @@ export const PVCRefField = <Model extends PersistentVolumeModel>(
     path: ['pvc'],
     title: i18n.t('dovetail.pvc'),
     renderContent(value, pvc) {
-      return <ResourceLink
-        resourceKind="persistentvolumeclaims"
-        namespace={pvc.pvcNamespace || 'default'}
-        name={value as string}
-      />;
-    }
+      return (
+        <ResourceLink
+          resourceKind="persistentvolumeclaims"
+          namespace={pvc.pvcNamespace || 'default'}
+          name={value as string}
+        />
+      );
+    },
   };
 };
 

diff --git a/packages/refine/src/components/StateTag/StateTag.tsx b/packages/refine/src/components/StateTag/StateTag.tsx
@@ -7,13 +7,21 @@ import { ResourceState } from '../../constants';
 
 type Props = {
   state?: ResourceState;
-  resourceKind?: string;
   className?: string;
   hideBackground?: boolean;
+  customResourceStateMap?: {
+    color: Record<string, StatusCapsuleColor | 'loading'>;
+    text: Record<string, string>;
+  };
 };
 
-export const StateTag: React.FC<Props> = (props) => {
-  const { state = ResourceState.UPDATING, hideBackground, className, resourceKind } = props;
+export const StateTag: React.FC<Props> = props => {
+  const {
+    state = ResourceState.UPDATING,
+    hideBackground,
+    className,
+    customResourceStateMap,
+  } = props;
   const { t } = useTranslation();
 
   const defaultStateMap: Record<string, StatusCapsuleColor | 'loading'> = {
@@ -35,14 +43,20 @@ export const StateTag: React.FC<Props> = (props) => {
     [ResourceState.RELEASED]: 'gray',
     [ResourceState.LOST]: 'red',
   };
-  const resourceStateMap: Record<string, Record<string, StatusCapsuleColor | 'loading'>> = {};
-  const finalStateMap = resourceStateMap[resourceKind || ''] || defaultStateMap;
+  const finalColorMap = customResourceStateMap?.color || defaultStateMap;
+  const finalTextMap = customResourceStateMap?.text;
 
-  return <StatusCapsule
-    className={cx(className, StateTagStyle, hideBackground && 'no-background')}
-    color={finalStateMap[state] !== 'loading' ? finalStateMap[state] as StatusCapsuleColor : undefined}
-    loading={finalStateMap[state] === 'loading'}
-  >
-    {t(`dovetail.${state || 'updating'}_state`)}
-  </StatusCapsule>;
+  return (
+    <StatusCapsule
+      className={cx(className, StateTagStyle, hideBackground && 'no-background')}
+      color={
+        finalColorMap[state] !== 'loading'
+          ? (finalColorMap[state] as StatusCapsuleColor)
+          : undefined
+      }
+      loading={finalColorMap[state] === 'loading'}
+    >
+      {finalTextMap ? finalTextMap[state] : t(`dovetail.${state || 'updating'}_state`)}
+    </StatusCapsule>
+  );
 };