d2-AI prompt:

{
  "prompt": "开发 K8s 中 NetworkPolicy 资源的 UI，它在菜单中的名字为“Network Policies”，父级菜单是网络。\r\n\n在列表中，增加一列展示 ingress 和 egress rules 的总量，以及一列用于展示出 pod selector 规则。",
  "images": []
}

packages/refine/src/App.tsx

@@ -5,6 +5,7 @@ import { Route, Router } from 'react-router-dom';
 import { Layout } from './components';
 import { Dovetail } from './Dovetail';
 import { ConfigMapConfig } from './pages/configmaps';
+import { NetworkPolicyConfig } from './pages/networkpolicies';
 import { CronJobForm, CronJobList, CronJobShow } from './pages/cronjobs';
 import { DaemonSetForm, DaemonSetList, DaemonSetShow } from './pages/daemonsets';
 import { DeploymentForm, DeploymentList, DeploymentShow } from './pages/deployments';
@@ -66,6 +67,7 @@ function App() {
       ConfigMapConfig,
       SecretsConfig,
       ServicesConfig,
+      NetworkPolicyConfig,
     ];
   }, []);
 

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

@@ -164,3 +164,34 @@ export const ServicePodsField = (_: i18n): ShowField<ResourceModel> => {
     },
   };
 };
+import { List } from 'antd';
+
+const KeyValueList: React.FC<{ data: Record<string, string | undefined> }> = ({
+  data,
+}) => {
+  return (
+    <List
+      bordered
+      dataSource={Object.entries(data)}
+      renderItem={([key, value]) => (
+        <List.Item className="flex flex-col p-2 border-b border-gray-200">
+          <span className="font-medium text-gray-700">{key}:</span>
+          <span className="text-gray-600">{value ?? i18n.t('notAvailable')}</span>
+        </List.Item>
+      )}
+      className="bg-white shadow overflow-hidden sm:rounded-lg"
+    />
+  );
+};
+
+export const DataField = (i18n: i18n): ShowField<ResourceModel> => {
+  return {
+    key: 'data',
+    title: i18n.t('data'),
+    path: ['rawYaml', 'data'],
+    render: data => {
+      const keyValueData = data ? data : {};
+      return <KeyValueList data={keyValueData} />;
+    },
+  };
+};

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

@@ -219,3 +219,54 @@ export const ServiceTypeColumnRenderer = <Model extends ResourceModel>(
     sorter: CommonSorter(dataIndex),
   };
 };
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+
+export const PolicyRulesColumnRenderer = (i18n: i18n): Column<ResourceModel> => {
+  return {
+    key: 'policyRules',
+    display: true,
+    dataIndex: ['rawYaml'],
+    title: i18n.t('policy_rules'),
+    sortable: true,
+    sorter: (a, b) =>
+      get(a, 'rawYaml.spec.ingress.length', 0) +
+      get(a, 'rawYaml.spec.egress.length', 0) -
+      get(b, 'rawYaml.spec.ingress.length', 0) -
+      get(b, 'rawYaml.spec.egress.length', 0),
+    render: value => {
+      const ingressRules = get(value, 'spec.ingress.length', 0);
+      const egressRules = get(value, 'spec.egress.length', 0);
+      return (
+        <div className="flex space-x-2 items-center">
+          <div className="text-sm text-gray-500">
+            {i18n.t('ingress')}: {ingressRules}
+          </div>
+          <div className="text-sm text-gray-500">
+            {i18n.t('egress')}: {egressRules}
+          </div>
+        </div>
+      );
+    },
+  };
+};
+
+export const PodSelectorColumnRenderer = (i18n: i18n): Column<ResourceModel> => {
+  return {
+    key: 'podSelector',
+    display: true,
+    dataIndex: ['rawYaml'],
+    title: i18n.t('pod_selector'),
+    render: value => {
+      const selector = get(value, 'spec.podSelector.matchLabels', {});
+      return (
+        <div className="flex flex-wrap">
+          {Object.entries(selector).map(([key, val]) => (
+            <div key={key} className="m-1 p-2 bg-blue-100 rounded text-sm text-blue-700">
+              {key}: {val}
+            </div>
+          ))}
+        </div>
+      );
+    },
+  };
+};

packages/refine/src/pages/networkpolicies/index.ts

@@ -0,0 +1,40 @@
+import { PolicyRulesColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { PodSelectorColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { DataField } from '../../components/ShowContent/fields';
+import { i18n } from 'i18next';
+import { RESOURCE_GROUP, ResourceConfig, WithId } from '../../types';
+import { ResourceModel } from '../../model';
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+
+// a example k8s yaml for the network policy resource
+const NETWORKPOLICY_INIT_VALUE = {
+  apiVersion: 'networking.k8s.io/v1',
+  kind: 'NetworkPolicy',
+  metadata: {
+    name: '',
+    namespace: 'default',
+    annotations: {},
+    labels: {},
+  },
+  spec: {
+    podSelector: {},
+    ingress: [],
+    egress: [],
+    policyTypes: [],
+  },
+};
+
+export const NetworkPolicyConfig: ResourceConfig<WithId<NetworkPolicy>, ResourceModel> = {
+  name: 'networkpolicies',
+  kind: 'NetworkPolicy',
+  basePath: '/apis/networking.k8s.io/v1',
+  apiVersion: 'v1',
+  parent: RESOURCE_GROUP.NETWORK,
+  label: 'Network Policies',
+  columns: (i18n: i18n) => [
+    PolicyRulesColumnRenderer(i18n),
+    PodSelectorColumnRenderer(i18n),
+  ],
+  showFields: (i18n: i18n) => [[], [], [DataField(i18n)]],
+  initValue: NETWORKPOLICY_INIT_VALUE,
+};