Merge pull request #166 from webzard-io/bowen/pvc

feat: add more pvc columns and fields

packages/refine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.0.66",
+  "version": "0.1.0",
   "type": "module",
   "files": [
     "dist",

packages/refine/src/App.tsx

@@ -22,6 +22,7 @@ import { IngressConfig } from './pages/ingresses';
 import { JobConfig } from './pages/jobs';
 import { NetworkPolicyConfig } from './pages/networkPolicies';
 import { NodeList, NodeShow } from './pages/nodes';
+import { PersistentVolumeClaimConfig } from './pages/persistentvolumeclaims';
 import { PersistentVolumeConfig } from './pages/persistentvolumes';
 import { PodShow, PodList, PodForm } from './pages/pods';
 import { SecretsConfig } from './pages/secrets';
@@ -93,6 +94,7 @@ function App() {
       },
       StorageClassConfig(i18n),
       PersistentVolumeConfig(i18n),
+      PersistentVolumeClaimConfig(i18n),
       {
         name: 'serverinstances',
         basePath: '/apis/kubesmart.smtx.io/v1alpha1',

packages/refine/src/components/ResourceFiledDisplays.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  value: string;
+}
+
+export function PVPhaseDisplay(props: Props) {
+  const {value} = props;
+  const i18n = useTranslation();
+
+  const map = {
+    Available: i18n.t('dovetail.pv_phase_available'),
+    Bound: i18n.t('dovetail.pv_phase_bound'),
+    Failed: i18n.t('dovetail.pv_phase_released'),
+    Pending: i18n.t('dovetail.pv_phase_failed'),
+    Released: i18n.t('dovetail.pv_phase_pending'),
+  };
+
+  return <div>{map[value as keyof typeof map] || value}</div>;
+}
+
+export function PVVolumeModeDisplay(props: Props) {
+  const {value} = props;
+  const i18n = useTranslation();
+
+  const map = {
+    Block: i18n.t('dovetail.block'),
+    Filesystem: i18n.t('dovetail.file_system'), 
+  };
+
+  return <div>{map[value as keyof typeof map] || value}</div>;
+}
+

packages/refine/src/components/ShowContent/fields.tsx

@@ -1,3 +1,4 @@
+import { Units } from '@cloudtower/eagle';
 import { i18n as I18nType } from 'i18next';
 import { Unstructured } from 'k8s-api-provider';
 import { Condition } from 'kubernetes-types/meta/v1';
@@ -26,14 +27,17 @@ import {
   ServiceType,
   StorageClassModel,
   PersistentVolumeModel,
+  PersistentVolumeClaimModel,
 } from '../../models';
 import { ExtendObjectMeta } from '../../plugins/relation-plugin';
+import { parseSi } from '../../utils/unit';
 import { ConditionsTable } from '../ConditionsTable';
 import { CronjobJobsTable } from '../CronjobJobsTable';
 import { EventsTable } from '../EventsTable';
 import { ImageNames } from '../ImageNames';
 import { IngressRulesTable } from '../IngressRulesTable';
 import { KeyValue, KeyValueAnnotation, KeyValueSecret } from '../KeyValue';
+import { PVPhaseDisplay, PVVolumeModeDisplay } from '../ResourceFiledDisplays';
 import { ResourceLink } from '../ResourceLink';
 import { Time } from '../Time';
 import { WorkloadPodsTable } from '../WorkloadPodsTable';
@@ -393,16 +397,6 @@ export const StorageClassProvisionerField = <Model extends StorageClassModel>(
   };
 };
 
-export const StorageClassFsTypeField = <Model extends StorageClassModel>(
-  i18n: I18nType
-): ShowField<Model> => {
-  return {
-    key: 'fstype',
-    path: ['parameters', 'csi.storage.k8s.io/fstype'],
-    title: i18n.t('dovetail.file_system'),
-  };
-};
-
 export const StorageClassPvField = <
   Model extends StorageClassModel,
 >(): ShowField<Model> => {
@@ -422,3 +416,88 @@ export const StorageClassPvField = <
     },
   };
 };
+
+export const PVCapacityField = <Model extends PersistentVolumeModel>(
+  i18n: I18nType
+): ShowField<Model> => {
+  return {
+    key: 'capacity',
+    path: ['spec', 'capacity', 'storage'],
+    title: i18n.t('dovetail.capacity'),
+    renderContent(value) {
+      return <Units.Byte rawValue={parseSi(value as string)} decimals={1} />;
+    },
+  };
+};
+
+export const PVCStorageField = <Model extends PersistentVolumeClaimModel>(
+  i18n: I18nType
+): ShowField<Model> => {
+  return {
+    key: 'storage',
+    path: ['spec', 'resources', 'requests', 'storage'],
+    title: i18n.t('dovetail.capacity'),
+    renderContent(value) {
+      return <Units.Byte rawValue={parseSi(value as string)} decimals={1} />;
+    },
+  };
+};
+
+export const PVStorageClassField = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
+  i18n: I18nType
+): ShowField<Model> => {
+  return {
+    key: 'storageClass',
+    path: ['spec', 'storageClassName'],
+    title: i18n.t('dovetail.storage_class'),
+    renderContent(value) {
+      return (
+        <ResourceLink resourceName="storageclasses" namespace="" resourceId={value as string} />
+      );
+    },
+  };
+};
+
+export const PVPhaseField = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
+  i18n: I18nType
+): ShowField<Model> => {
+  return {
+    key: 'phase',
+    path: ['status', 'phase'],
+    title: i18n.t('dovetail.phase'),
+    renderContent(value) {
+      return <PVPhaseDisplay value={value as string} />;
+    },
+  };
+};
+
+export const PVVolumeModeField = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
+  i18n: I18nType
+): ShowField<Model> => {
+  return {
+    key: 'mode',
+    path: ['spec', 'volumeMode'],
+    title: i18n.t('dovetail.volume_mode'),
+    renderContent(value) {
+      return <PVVolumeModeDisplay value={value as string} />;
+    },
+  };
+};
+
+export const PVAccessModeField = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
+  i18n: I18nType
+): ShowField<Model> => {
+  return {
+    key: 'accessMode',
+    path: ['spec', 'accessModes'],
+    title: i18n.t('dovetail.access_mode'),
+  };
+};

packages/refine/src/components/ShowContent/groups.tsx

@@ -234,7 +234,7 @@ export const NetworkPolicyEgressRulesGroup = <Model extends ResourceModel>(
 export const StorageClassPvGroup = <Model extends StorageClassModel>(
   i18n: I18nType
 ): ShowGroup<Model> => ({
-  title: i18n.t('dovetail.persistent_volumn'),
+  title: i18n.t('dovetail.persistent_volume'),
   areas: [
     {
       fields: [StorageClassPvField()],

packages/refine/src/components/index.ts

@@ -38,6 +38,7 @@ export * from './Tags';
 export * from './TextTags';
 export * from './PodLog';
 export * from './NetworkPolicyRulesViewer';
+export * from './ResourceFiledDisplays';
 export * from './Tabs';
 export * as ValueDisplay from './ValueDisplay';
 export * from './ResourceSelect';

packages/refine/src/hooks/useEagleTable/columns.tsx

@@ -1,4 +1,12 @@
-import { Button, Time as BaseTime, Tooltip, OverflowTooltip, Divider, Link } from '@cloudtower/eagle';
+import {
+  Button,
+  Time as BaseTime,
+  Tooltip,
+  OverflowTooltip,
+  Divider,
+  Link,
+  Units,
+} from '@cloudtower/eagle';
 import { css } from '@linaria/core';
 import { useGo, useNavigation, useParsed } from '@refinedev/core';
 import { i18n as I18nType } from 'i18next';
@@ -11,6 +19,9 @@ import { useTranslation } from 'react-i18next';
 import { DurationTime } from 'src/components/DurationTime';
 import ValueDisplay from 'src/components/ValueDisplay';
 import {
+  PVPhaseDisplay,
+  PVVolumeModeDisplay,
+  ResourceLink,
   ServiceInClusterAccessComponent,
   ServiceOutClusterAccessComponent,
 } from '../../components';
@@ -31,8 +42,10 @@ import {
   ServiceModel,
   DaemonSetModel,
   StorageClassModel,
-  PersistentVolumeModel
+  PersistentVolumeModel,
+  PersistentVolumeClaimModel,
 } from '../../models';
+import { parseSi } from '../../utils/unit';
 
 const DashedTitleStyle = css`
   border-bottom: 1px dashed rgba(107, 128, 167, 0.6);
@@ -135,12 +148,12 @@ export const NameSpaceColumnRenderer = <Model extends ResourceModel>(
 
 export const StateDisplayColumnRenderer = <
   Model extends
-  | WorkloadModel
-  | CronJobModel
-  | PodModel
-  | ServiceModel
-  | DaemonSetModel
-  | JobModel,
+    | WorkloadModel
+    | CronJobModel
+    | PodModel
+    | ServiceModel
+    | DaemonSetModel
+    | JobModel,
 >(
   i18n: I18nType
 ): Column<Model> => {
@@ -614,7 +627,6 @@ export const PortMappingColumnRenderer = <Model extends ServiceModel>(
   };
 };
 
-
 export const ProvisionerColumnRenderer = <Model extends StorageClassModel>(
   i18n: I18nType
 ): Column<Model> => {
@@ -628,33 +640,43 @@ export const ProvisionerColumnRenderer = <Model extends StorageClassModel>(
   };
 };
 
-export const FsTypeColumnRenderer = <Model extends StorageClassModel>(
+export const PVCapacityColumnRenderer = <Model extends PersistentVolumeModel>(
   i18n: I18nType
 ): Column<Model> => {
   return {
-    key: 'fstype',
+    key: 'capacity',
     display: true,
-    dataIndex: ['parameters', 'csi.storage.k8s.io/fstype'],
-    title: i18n.t('dovetail.file_system'),
+    dataIndex: ['spec', 'capacity', 'storage'],
+    title: i18n.t('dovetail.capacity'),
     width: 120,
     sortable: true,
+    align:'right',
+    render(value) {
+      return <Units.Byte rawValue={parseSi(value)} decimals={1} />;
+    },
   };
 };
 
-export const PVCapacityColumnRenderer = <Model extends PersistentVolumeModel>(
+export const PVCStorageColumnRenderer = <Model extends PersistentVolumeClaimModel>(
   i18n: I18nType
 ): Column<Model> => {
   return {
-    key: 'capacity',
+    key: 'storage',
     display: true,
-    dataIndex: ['spec', 'capacity', 'storage'],
+    dataIndex: ['spec', 'resources', 'requests', 'storage'],
     title: i18n.t('dovetail.capacity'),
     width: 120,
     sortable: true,
+    align:'right',
+    render(value) {
+      return <Units.Byte rawValue={parseSi(value)} decimals={1} />;
+    },
   };
 };
 
-export const PVStorageClassColumnRenderer = <Model extends PersistentVolumeModel>(
+export const PVStorageClassColumnRenderer = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
   i18n: I18nType
 ): Column<Model> => {
   return {
@@ -664,10 +686,17 @@ export const PVStorageClassColumnRenderer = <Model extends PersistentVolumeModel
     title: i18n.t('dovetail.storage_class'),
     width: 120,
     sortable: true,
+    render(value) {
+      return (
+        <ResourceLink resourceName="storageclasses" namespace="" resourceId={value} />
+      );
+    },
   };
 };
 
-export const PVPhaseColumnRenderer = <Model extends PersistentVolumeModel>(
+export const PVPhaseColumnRenderer = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
   i18n: I18nType
 ): Column<Model> => {
   return {
@@ -677,10 +706,15 @@ export const PVPhaseColumnRenderer = <Model extends PersistentVolumeModel>(
     title: i18n.t('dovetail.phase'),
     width: 120,
     sortable: true,
+    render(value) {
+      return <PVPhaseDisplay value={value} />;
+    },
   };
 };
 
-export const PVModeColumnRenderer = <Model extends PersistentVolumeModel>(
+export const PVVolumeModeColumnRenderer = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
   i18n: I18nType
 ): Column<Model> => {
   return {
@@ -690,10 +724,15 @@ export const PVModeColumnRenderer = <Model extends PersistentVolumeModel>(
     title: i18n.t('dovetail.volume_mode'),
     width: 120,
     sortable: true,
+    render(value) {
+      return <PVVolumeModeDisplay value={value} />;
+    },
   };
 };
 
-export const PVAccessModeColumnRenderer = <Model extends PersistentVolumeModel>(
+export const PVAccessModeColumnRenderer = <
+  Model extends PersistentVolumeModel | PersistentVolumeClaimModel,
+>(
   i18n: I18nType
 ): Column<Model> => {
   return {

packages/refine/src/locales/en-US/dovetail.json

@@ -153,5 +153,19 @@
   "only_support_one_yaml": "Only one YAML configuration is supported at a time.",
   "not_support": "Not supported",
   "stopped": "Stopped",
-  "any_node_ip": "Any node IP"
+  "any_node_ip": "Any node IP",
+  "storage_class": "Storage class",
+  "persistent_volume": "Persistent volume",
+  "provisioner": "Provisioner",
+  "file_system": "File system",
+  "capacity": "Capacity",
+  "phase": "Phase",
+  "volume_mode": "Volume mode",
+  "access_mode": "Access mode",
+  "block": "Block",
+  "pv_phase_available": "Available",
+  "pv_phase_bound": "Bound",
+  "pv_phase_released": "Released",
+  "pv_phase_failed": "Failed",
+  "pv_phase_pending": "Pending"
 }