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在 egress 详情中，每个 egress 用一个 tab 展示。渲染每个 egress 时，根据 egress.to 中各条规则的类型分别渲染：\r\n- IP block 类型，展示 CIDR 和 exceptions 字段；\r\n将 egress.ports 展示出来，包含 port 和 protocol 信息。\r\n\r\nnetwork policy spec 部分的数据示例如下：\r\n```yaml\r\nspec:\r\n podSelector:\r\n matchLabels:\r\n role: db\r\n ingress:\r\n - ports:\r\n - protocol: TCP\r\n port: 6379\r\n from:\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 egress:\r\n - ports:\r\n - protocol: TCP\r\n port: 5978\r\n to:\r\n - ipBlock:\r\n cidr: 10.0.0.0/24\r\n policyTypes:\r\n - Ingress\r\n - Egress\r\n```\n> \r\n> 在详情区域，增加对 ingress 和 egress 的展示。\r\n> \r\n> 在 ingress 详情中，每个 ingress 用一个 tab 展示。渲染每个 ingress 时，根据 ingress.from 中各条规则的类型分别渲染：\r\n> \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> \r\n> ```yaml\r\n> from:\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> \r\n> * IP block 类型，展示 CIDR 和 exceptions 字段；\r\n> 将 egress.ports 展示出来，包含 port 和 protocol 信息。\r\n> \r\n> 详情中 egress.to 的数据示例如下：\r\n> \r\n> ```yaml\r\n> to:\r\n> - ipBlock:\r\n> cidr: 10.0.0.0/24\r\n> ```\r\n\r\n这个是给 AI 的指令，还是关于PR的描述？", "images": [ "https://github.com/webzard-io/dovetail-v2/assets/13651389/a4976e91-fd81-4560-8fc9-fa7695b25a92", "https://private-user-images.githubusercontent.com/13651389/290609115-a4976e91-fd81-4560-8fc9-fa7695b25a92.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDI2MDgzODEsIm5iZiI6MTcwMjYwODA4MSwicGF0aCI6Ii8xMzY1MTM4OS8yOTA2MDkxMTUtYTQ5NzZlOTEtZmQ4MS00NTYwLThmYzktZmE3Njk1YjI1YTkyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzEyMTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMjE1VDAyNDEyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2ODQ1Y2Q0MDg0OTAwYzUwYTE1NTUxNzI1YzEzMDM3Njg1ZjI3ZGZkNDE5MmUwZjY5Mjc3OTVlNmRkMzI3MjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.mft9n4H2B91YJQGrhcKaVA-QKv_LBcuJHnrwuSR1B2c" ] }
webzard-io · Dec 15, 2023 · 10408ee · 10408ee
1 parent db50e60
commit 10408ee
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 0 deletions.
diff --git a/packages/refine/src/App.tsx b/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,
     ];
   }, []);
 

diff --git a/packages/refine/src/components/ShowContent/fields.tsx b/packages/refine/src/components/ShowContent/fields.tsx
@@ -164,3 +164,90 @@ export const ServicePodsField = (_: i18n): ShowField<ResourceModel> => {
     },
   };
 };
+import { Tabs, List } from 'antd';
+import { get } from 'lodash';
+
+const IngressEgressRenderer: React.FC<{ data: any; type: string }> = ({ data, type }) => {
+  const renderIPBlock = (ipBlock: any) => (
+    <>
+      <div>CIDR: {ipBlock.cidr}</div>
+      {ipBlock.except?.length > 0 && (
+        <div>
+          Exceptions:
+          <List
+            bordered
+            dataSource={ipBlock.except}
+            renderItem={except => <List.Item>{except}</List.Item>}
+          />
+        </div>
+      )}
+    </>
+  );
+
+  const renderSelector = (selector: any, resourceName: string, count: number) => (
+    <List
+      bordered
+      dataSource={Object.entries(selector.matchLabels)}
+      renderItem={([key, value]) => (
+        <List.Item>
+          <span>Key: {key}</span>
+          <span>Operator: In</span>
+          <span>Value: {value}</span>
+        </List.Item>
+      )}
+    >
+      <div>
+        {resourceName} Count: {count}
+      </div>
+    </List>
+  );
+
+  const renderPorts = (ports: any) => (
+    <List
+      bordered
+      dataSource={ports}
+      renderItem={port => (
+        <List.Item>
+          Port: {port.port}, Protocol: {port.protocol || 'TCP'}
+        </List.Item>
+      )}
+    />
+  );
+
+  return (
+    <Tabs defaultActiveKey="0" tabPosition="top">
+      {data.map((rule: any, index: number) => (
+        <Tabs.TabPane tab={`${type} ${index + 1}`} key={index}>
+          {rule.ipBlock && renderIPBlock(rule.ipBlock)}
+          {rule.namespaceSelector &&
+            renderSelector(
+              rule.namespaceSelector,
+              'Namespaces',
+              /* TODO: Calculate namespace count */ 0
+            )}
+          {rule.podSelector &&
+            renderSelector(rule.podSelector, 'Pods', /* TODO: Calculate pod count */ 0)}
+          {renderPorts(rule.ports || [])}
+        </Tabs.TabPane>
+      ))}
+    </Tabs>
+  );
+};
+
+export const NetworkPolicyIngressField = (i18n: i18n): ShowField<ResourceModel> => {
+  return {
+    key: 'ingress',
+    title: i18n.t('Ingress'),
+    path: ['rawYaml', 'spec', 'ingress'],
+    render: ingress => <IngressEgressRenderer data={ingress} type="Ingress" />,
+  };
+};
+
+export const NetworkPolicyEgressField = (i18n: i18n): ShowField<ResourceModel> => {
+  return {
+    key: 'egress',
+    title: i18n.t('Egress'),
+    path: ['rawYaml', 'spec', 'egress'],
+    render: egress => <IngressEgressRenderer data={egress} type="Egress" />,
+  };
+};
diff --git a/packages/refine/src/hooks/useEagleTable/columns.tsx b/packages/refine/src/hooks/useEagleTable/columns.tsx
@@ -219,3 +219,47 @@ export const ServiceTypeColumnRenderer = <Model extends ResourceModel>(
     sorter: CommonSorter(dataIndex),
   };
 };
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+
+const PolicyRuleCount: React.FC<{ rules: any[] | undefined }> = ({ rules }) => (
+  <span>{rules?.length || 0}</span>
+);
+
+export const RuleCountColumnRenderer = (i18n: i18n): Column<NetworkPolicy> => {
+  return {
+    key: 'ruleCount',
+    display: true,
+    dataIndex: ['rawYaml'],
+    title: i18n.t('rule_count'),
+    render: value => {
+      const ingress = get(value, 'spec.ingress', []);
+      const egress = get(value, 'spec.egress', []);
+      return <PolicyRuleCount rules={[...ingress, ...egress]} />;
+    },
+  };
+};
+
+const PodSelector: React.FC<{ selector: any }> = ({ selector }) => {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {Object.entries(selector || {}).map(([key, val]) => (
+        <span className="bg-blue-100 text-blue-800 px-2 py-1 text-xs font-semibold rounded-full">
+          {key}: {val}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export const PodSelectorColumnRenderer = (i18n: i18n): Column<NetworkPolicy> => {
+  return {
+    key: 'podSelector',
+    display: true,
+    dataIndex: ['rawYaml'],
+    title: i18n.t('pod_selector'),
+    render: value => {
+      const selector = get(value, 'spec.podSelector.matchLabels');
+      return <PodSelector selector={selector} />;
+    },
+  };
+};
diff --git a/packages/refine/src/pages/networkpolicies/index.ts b/packages/refine/src/pages/networkpolicies/index.ts
@@ -0,0 +1,42 @@
+import { RuleCountColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { PodSelectorColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { NetworkPolicyIngressField } from '../../components/ShowContent/fields';
+import { NetworkPolicyEgressField } from '../../components/ShowContent/fields';
+import { i18n } from 'i18next';
+import { NETWORK_GROUP, ResourceConfig, WithId } from '../../types';
+import { ResourceModel } from '../../model';
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
+
+const NETWORKPOLICY_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: NETWORK_GROUP.NETWORK,
+  label: 'Network Policies',
+  columns: (i18n: i18n) => [
+    RuleCountColumnRenderer(i18n),
+    PodSelectorColumnRenderer(i18n),
+  ],
+  showFields: (i18n: i18n) => [
+    [],
+    [],
+    [NetworkPolicyIngressField(i18n), NetworkPolicyEgressField(i18n)],
+  ],
+  initValue: NETWORKPOLICY_INIT_VALUE,
+};