d2-AI prompt:

{
  "prompt": "开发 K8s 中 NetworkPolicy 资源的 UI，它在菜单中的名字为“Network Policies”，父级菜单是网络。\n在列表中，增加一列展示 ingress 和 egress rules 的总量，以及一列用于展示出 pod selector 规则。\n\r\n\r\n\r\n在详情区域，增加对 ingress 和 egress 的展示。\r\n\r\n在 ingress 详情中，每个 ingress 用一个 tab 展示。渲染每个 ingress 时，根据 ingress.from 中各条规则的类型分别渲染：\r\n- IP block 类型，展示 CIDR 和 exceptions 字段；\r\n- Namespace Selector 类型，展示 key、operator、value，并统计选中了多少个 namespace；\r\n- Pod selector 类型，展示 key、operator、value，并统计选中了多少个 pod。\r\n最后再将 ingress.ports 展示出来，包含 port 和 protocol 信息。\r\n\r\n详情中 ingress.from 的数据示例如下：\r\n```yaml\r\nfrom:\r\n  - ipBlock:\r\n      cidr: 172.17.0.0/16\r\n      except:\r\n        - 172.17.1.0/24\r\n  - namespaceSelector:\r\n      matchLabels:\r\n        project: myproject\r\n  - podSelector:\r\n      matchLabels:\r\n        role: frontend\r\n```\r\n\r\n在 egress 详情中，每个 egress 用一个 tab 展示。渲染每个 egress 时，根据 egress.to 中各条规则的类型分别渲染：\r\n- IP block 类型，展示 CIDR 和 exceptions 字段；\r\n将 egress.ports 展示出来，包含 port 和 protocol 信息。\r\n\r\n详情中 egress.to 的数据示例如下：\r\n```yaml\r\n      to:\r\n        - ipBlock:\r\n            cidr: 10.0.0.0/24\r\n``` ",
  "images": [
    "https://github.com/webzard-io/dovetail-v2/assets/13651389/a4976e91-fd81-4560-8fc9-fa7695b25a92"
  ]
}

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,64 @@ export const ServicePodsField = (_: i18n): ShowField<ResourceModel> => {
     },
   };
 };
+import { Card, List, Tabs, Tag } from 'antd';
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+
+const { TabPane } = Tabs;
+
+const RuleList: React.FC<{
+  title: string;
+  rules: any[];
+  resourceType: 'ingress' | 'egress';
+}> = ({ title, rules, resourceType }) => {
+  // Helper function to determine the type of the rule
+  const getRuleType = (rule: any): string => {
+    if (rule.ipBlock) return 'IPBlock';
+    if (rule.namespaceSelector) return 'NamespaceSelector';
+    if (rule.podSelector) return 'PodSelector';
+    return 'Unknown';
+  };
+
+  return (
+    <Tabs defaultActiveKey="1" type="card">
+      {rules.map((rule, index) => (
+        <TabPane tab={title + ` ${index + 1}`} key={String(index)}>
+          <List
+            dataSource={rule[resourceType].from || rule[resourceType].to || []}
+            renderItem={item => (
+              <List.Item>
+                <Card title={getRuleType(item)}>{JSON.stringify(item)}</Card>
+              </List.Item>
+            )}
+          />
+        </TabPane>
+      ))}
+    </Tabs>
+  );
+};
+
+export const IngressDetailsField = (i18n: i18n): ShowField<ResourceModel> => {
+  return {
+    key: 'ingressDetail',
+    title: i18n.t('ingressDetail'),
+    path: ['spec', 'ingress'],
+    render: ingressRules => {
+      return (
+        <RuleList title={i18n.t('Ingress')} rules={ingressRules} resourceType="ingress" />
+      );
+    },
+  };
+};
+
+export const EgressDetailsField = (i18n: i18n): ShowField<ResourceModel> => {
+  return {
+    key: 'egressDetail',
+    title: i18n.t('egressDetail'),
+    path: ['spec', 'egress'],
+    render: egressRules => {
+      return (
+        <RuleList title={i18n.t('Egress')} rules={egressRules} resourceType="egress" />
+      );
+    },
+  };
+};

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

@@ -219,3 +219,41 @@ export const ServiceTypeColumnRenderer = <Model extends ResourceModel>(
     sorter: CommonSorter(dataIndex),
   };
 };
+
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+
+const RulesCount: React.FC<{ ingress: any[]; egress: any[] }> = ({ ingress, egress }) => {
+  const ingressCount = ingress?.length || 0;
+  const egressCount = egress?.length || 0;
+  return <span>{ingressCount + egressCount}</span>;
+};
+
+export const PolicyRulesCountColumnRenderer = (i18n: i18n): Column<ResourceModel> => {
+  return {
+    key: 'rulesCount',
+    display: true,
+    dataIndex: ['rawYaml'],
+    title: i18n.t('rules_count'),
+    render: (value: NetworkPolicy) => {
+      const ingressRules = get(value, 'spec.ingress', []);
+      const egressRules = get(value, 'spec.egress', []);
+      return <RulesCount ingress={ingressRules} egress={egressRules} />;
+    },
+  };
+};
+
+const PodSelectors: React.FC<{ podSelector: any }> = ({ podSelector }) => {
+  return <span>{JSON.stringify(podSelector)}</span>;
+};
+
+export const PodSelectorColumnRenderer = (i18n: i18n): Column<ResourceModel> => {
+  return {
+    key: 'podSelectors',
+    display: true,
+    dataIndex: ['rawYaml'],
+    title: i18n.t('pod_selectors'),
+    render: (value: NetworkPolicy) => {
+      return <PodSelectors podSelector={value.spec.podSelector} />;
+    },
+  };
+};

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

@@ -0,0 +1,42 @@
+import { PolicyRulesCountColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { PodSelectorColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { IngressDetailsField } from '../../components/ShowContent/fields';
+import { EgressDetailsField } 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';
+
+const NETWORK_POLICY_INIT_VALUE = {
+  apiVersion: 'networking.k8s.io/v1',
+  kind: 'NetworkPolicy',
+  metadata: {
+    name: '',
+    namespace: 'default',
+    annotations: {},
+    labels: {},
+  },
+  spec: {
+    podSelector: {},
+    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) => [
+    PolicyRulesCountColumnRenderer(i18n),
+    PodSelectorColumnRenderer(i18n),
+  ],
+  showFields: (i18n: i18n) => [
+    [],
+    [],
+    [IngressDetailsField(i18n), EgressDetailsField(i18n)],
+  ],
+  initValue: NETWORK_POLICY_INIT_VALUE,
+};