From e3a7ca1c4222328a0a4044ab232a720209754a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E7=94=9C?= <759644414@qq.com>
Date: Thu, 12 Dec 2024 10:16:40 +0800
Subject: [PATCH] improve:  update zone topo from in cluster new

---
 ui/src/pages/Cluster/New/Topo.tsx | 741 +++++++++++++++---------------
 1 file changed, 359 insertions(+), 382 deletions(-)

diff --git a/ui/src/pages/Cluster/New/Topo.tsx b/ui/src/pages/Cluster/New/Topo.tsx
index 136f01c0..c2e29688 100644
--- a/ui/src/pages/Cluster/New/Topo.tsx
+++ b/ui/src/pages/Cluster/New/Topo.tsx
@@ -9,11 +9,9 @@ import {
   Button,
   Card,
   Col,
-  Dropdown,
   Form,
   Input,
   InputNumber,
-  Menu,
   Popconfirm,
   Row,
   Select,
@@ -23,20 +21,216 @@ import {
 import { RULER_ZONE } from '@/constants/rules';
 import { useState } from 'react';
 
-export default function Topo() {
-  // const { getFieldValue } = form;
-
-  const [topologyConfiguration, setTopologyConfiguration] =
-    useState<string>('');
+export default function Topo({ form }) {
   const [showTopology, setShowTopology] = useState<boolean>(false);
+  const [formsubIndex, setFromSubIndex] = useState({});
+
+  const basicFrom = (topologyConfiguration, name) => (
+    <>
+      <Col
+        span={topologyConfiguration === 'nodeSelector' ? 7 : 5}
+        style={{ paddingBottom: 24 }}
+      >
+        <Form.Item label={'Key'} name={[name, 'key']}>
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
+              defaultMessage: '请输入',
+            })}
+          />
+        </Form.Item>
+      </Col>
+      <Col span={topologyConfiguration === 'nodeSelector' ? 8 : 6}>
+        <Form.Item label={'Operator'} name={[name, 'operator']}>
+          <Select
+            options={[
+              ...(topologyConfiguration !== 'Pod Affinity'
+                ? [
+                    {
+                      value: 'Equal',
+                      label: 'Equal',
+                    },
+                  ]
+                : []),
+              ...(topologyConfiguration !== 'Toleration'
+                ? [
+                    {
+                      value: 'In',
+                      label: 'In',
+                    },
+                    {
+                      value: 'NotIn',
+                      label: 'NotIn',
+                    },
+                    {
+                      value: 'Exist',
+                      label: 'Exist',
+                    },
+                  ]
+                : []),
+              {
+                value: 'DoesNoExist',
+                label: 'DoesNoExist',
+              },
+            ]}
+          />
+        </Form.Item>
+      </Col>
+      <Col span={topologyConfiguration === 'nodeSelector' ? 8 : 6}>
+        <Form.Item label={'Value'} name={[name, 'value']}>
+          {topologyConfiguration === 'Toleration' ? (
+            <Input
+              placeholder={intl.formatMessage({
+                id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
+                defaultMessage: '请输入',
+              })}
+            />
+          ) : (
+            <Select maxTagCount={5} />
+          )}
+        </Form.Item>
+      </Col>
+    </>
+  );
+
+  const NodeSelectorFrom: React.FC = ({ fieldName }) => (
+    <Form.Item label="nodeSelector">
+      <Form.List name={[fieldName, 'nodeSelector']}>
+        {(subFields, { add, remove }) => (
+          <>
+            {subFields.map(({ key, name }) => {
+              return (
+                <div key={key}>
+                  <Row gutter={8}>
+                    {basicFrom('nodeSelector', name)}
+                    <DeleteOutlined onClick={() => remove(name)} />
+                  </Row>
+                </div>
+              );
+            })}
+            <Form.Item noStyle>
+              <Button
+                style={{ marginBottom: 24 }}
+                type="dashed"
+                onClick={() => add()}
+                block
+                icon={<PlusOutlined />}
+              >
+                Add nodeSelector
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </Form.Item>
+  );
+
+  const PodAffinityFrom: React.FC = ({ fieldName }) => (
+    <Form.Item label="PodAffinity">
+      <Form.List name={[fieldName, 'affinities']}>
+        {(Podfields, { add, remove }) => (
+          <>
+            {Podfields.map(({ key, name }) => (
+              <div key={key}>
+                <Row gutter={8}>
+                  {basicFrom('PodAffinity', name)}
+                  <Col span={6}>
+                    <Form.Item label={'Type'} name={[name, 'type']}>
+                      <Select
+                        options={[
+                          {
+                            value: 'Affinity',
+                            label: 'Affinity',
+                          },
+                          {
+                            value: 'AntiAffinity',
+                            label: 'AntiAffinity',
+                          },
+                        ]}
+                      />
+                    </Form.Item>
+                  </Col>
+
+                  <DeleteOutlined onClick={() => remove(name)} />
+                </Row>
+              </div>
+            ))}
+            <Form.Item noStyle>
+              <Button
+                style={{ marginBottom: 24 }}
+                type="dashed"
+                onClick={() => add()}
+                block
+                icon={<PlusOutlined />}
+              >
+                Add PodAffinity
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </Form.Item>
+  );
 
-  // const getNowNodeSelector = (zoneIdx: number) => {
-  //   return () => {
-  //     const topologyData = getFieldValue('topology');
-  //     const { nodeSelector } = topologyData[zoneIdx];
-  //     return nodeSelector;
-  //   };
-  // };
+  const TolerationFrom: React.FC = ({ fieldName }) => (
+    <Form.Item label="Tolerations">
+      <Form.List name={[fieldName, 'tolerations']}>
+        {(tolerationfields, { add, remove }) => (
+          <>
+            {tolerationfields.map(({ key, name }) => (
+              <div key={key}>
+                <Row gutter={8}>
+                  {basicFrom('Toleration', name)}
+                  <Col span={4}>
+                    <Form.Item label={'Effect'} name={[name, 'Effect']}>
+                      <Select
+                        options={[
+                          {
+                            value: 'NoSchedule',
+                            label: 'NoSchedule',
+                          },
+                          {
+                            value: 'PerferNoSchedule',
+                            label: 'PerferNoSchedule',
+                          },
+                          {
+                            value: 'NoExecute',
+                            label: 'NoExecute',
+                          },
+                        ]}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={2}>
+                    <Form.Item label={'Seconds'} name={[name, 'seconds']}>
+                      <InputNumber
+                        min={1}
+                        placeholder={intl.formatMessage({
+                          id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
+                          defaultMessage: '请输入',
+                        })}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <DeleteOutlined onClick={() => remove(name)} />
+                </Row>
+              </div>
+            ))}
+            <Form.Item>
+              <Button
+                type="dashed"
+                onClick={() => add()}
+                block
+                icon={<PlusOutlined />}
+              >
+                Add Toleration
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </Form.Item>
+  );
 
   return (
     <Col span={24}>
@@ -47,380 +241,163 @@ export default function Topo() {
         })}
       >
         <Form.List name="topology">
-          {(fields, { add, remove }) => {
-            return (
-              <>
-                {fields.map(({ key, name }, index) => (
-                  <Card style={{ marginBottom: 16 }}>
-                    <div key={key}>
-                      <Row gutter={8}>
-                        <Col span={12}>
-                          <Form.Item
-                            label={
-                              // index === 0 &&
-                              intl.formatMessage({
-                                id: 'OBDashboard.Cluster.New.Topo.ZoneName',
-                                defaultMessage: 'Zone名称',
-                              })
-                            }
-                            validateFirst
-                            name={[name, 'zone']}
-                            rules={RULER_ZONE}
-                          >
-                            <Input
-                              placeholder={intl.formatMessage({
-                                id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
-                                defaultMessage: '请输入',
-                              })}
-                            />
-                          </Form.Item>
-                        </Col>
-                        {/* <Col span={12}>
-                          <NodeSelector
-                            formName={[name, 'nodeSelector']}
-                            showLabel={index === 0}
-                            getNowNodeSelector={getNowNodeSelector(index)}
-                          />
-                        </Col> */}
-                        <Col span={6}>
-                          <Form.Item
-                            label={
-                              // index === 0 &&
-                              intl.formatMessage({
-                                id: 'OBDashboard.Cluster.New.Topo.NumberOfServers',
-                                defaultMessage: 'server数',
-                              })
-                            }
-                            name={[name, 'replicas']}
-                          >
-                            <InputNumber
-                              placeholder={intl.formatMessage({
-                                id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
-                                defaultMessage: '请输入',
-                              })}
-                              min={1}
-                            />
-                          </Form.Item>
-                        </Col>
-                        <Col span={5}>
-                          <Form.Item label={'Topology summary'}>-</Form.Item>
-                        </Col>
-                        <Col span={1}>
-                          {fields.length > 1 && (
-                            <Form.Item
-                              label={index === 0 && ' '}
-                              style={{ marginBottom: 8 }}
-                              name={[name, ' ']}
-                            >
-                              <Popconfirm
-                                placement="left"
-                                title={intl.formatMessage({
-                                  id: 'OBDashboard.Cluster.New.Topo.AreYouSureYouWant',
-                                  defaultMessage: '确定要删除该配置项吗？',
-                                })}
-                                onConfirm={() => {
-                                  remove(index);
-                                }}
-                                okText={intl.formatMessage({
-                                  id: 'OBDashboard.Cluster.New.Topo.Delete',
-                                  defaultMessage: '删除',
-                                })}
-                                cancelText={intl.formatMessage({
-                                  id: 'OBDashboard.Cluster.New.Topo.Cancel',
-                                  defaultMessage: '取消',
-                                })}
-                                okButtonProps={{
-                                  danger: true,
-                                  ghost: true,
-                                }}
-                              >
-                                <DeleteOutlined
-                                  style={{ color: 'rgba(0, 0, 0, .45)' }}
-                                />
-                              </Popconfirm>
-                            </Form.Item>
-                          )}
-                        </Col>
-                        <Space
-                          onClick={() => {
-                            setShowTopology(!showTopology);
-                          }}
-                        >
-                          {showTopology ? <DownOutlined /> : <RightOutlined />}
-                          Topology
-                        </Space>
-                      </Row>
-                      {/* 
-                      TOdo 
-                      表单存在两个问题：
-                      1 点击新增 Topology 按钮，多个card 会同时展示下拉标志
-                      2 点击新增 Topology 按钮，原有选择nodeselector 时，后选择pod affinity 时，pod affinity 会覆盖 nodeselector 的选择的UI
-                       */}
-                      {showTopology && (
-                        <>
-                          <div
-                            style={{
-                              paddingTop: '16px',
-                              paddingBottom: '16px',
-                            }}
-                          >
-                            {topologyConfiguration}
-                          </div>
-                          <Form.Item>
-                            <Form.List name={[name, 'list']}>
-                              {(subFields, subOpt) => (
-                                <div
-                                  style={{
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    rowGap: 16,
-                                  }}
-                                >
-                                  {subFields.map((subField) => (
-                                    <div key={subField.key}>
-                                      <Row gutter={8}>
-                                        {topologyConfiguration ===
-                                          'Pod Affinity' && (
-                                          <Col span={6}>
-                                            <Form.Item
-                                              label={'Type'}
-                                              name={[name, 'type']}
-                                            >
-                                              <Select
-                                                options={[
-                                                  {
-                                                    value: 'Affinity',
-                                                    label: 'Affinity',
-                                                  },
-                                                  {
-                                                    value: 'AntiAffinity',
-                                                    label: 'AntiAffinity',
-                                                  },
-                                                ]}
-                                              />
-                                            </Form.Item>
-                                          </Col>
-                                        )}
-
-                                        {topologyConfiguration ===
-                                          'Toleration' && (
-                                          <Col span={4}>
-                                            <Form.Item
-                                              label={'Effect'}
-                                              name={[name, 'Effect']}
-                                            >
-                                              <Select
-                                                options={[
-                                                  {
-                                                    value: 'NoSchedule',
-                                                    label: 'NoSchedule',
-                                                  },
-                                                  {
-                                                    value: 'PerferNoSchedule',
-                                                    label: 'PerferNoSchedule',
-                                                  },
-                                                  {
-                                                    value: 'NoExecute',
-                                                    label: 'NoExecute',
-                                                  },
-                                                ]}
-                                              />
-                                            </Form.Item>
-                                          </Col>
-                                        )}
-                                        <Col
-                                          span={
-                                            topologyConfiguration ===
-                                            'nodeSelector'
-                                              ? 7
-                                              : 5
-                                          }
-                                        >
-                                          <Form.Item
-                                            label={'Key'}
-                                            name={[name, 'key']}
-                                          >
-                                            <Input
-                                              placeholder={intl.formatMessage({
-                                                id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
-                                                defaultMessage: '请输入',
-                                              })}
-                                            />
-                                          </Form.Item>
-                                        </Col>
-                                        <Col
-                                          span={
-                                            topologyConfiguration ===
-                                            'nodeSelector'
-                                              ? 8
-                                              : 6
-                                          }
-                                        >
-                                          <Form.Item
-                                            label={'Operator'}
-                                            name={[name, 'operator']}
-                                          >
-                                            <Select
-                                              options={[
-                                                ...(topologyConfiguration !==
-                                                'Pod Affinity'
-                                                  ? [
-                                                      {
-                                                        value: 'Equal',
-                                                        label: 'Equal',
-                                                      },
-                                                    ]
-                                                  : []),
-                                                ...(topologyConfiguration !==
-                                                'Toleration'
-                                                  ? [
-                                                      {
-                                                        value: 'In',
-                                                        label: 'In',
-                                                      },
-                                                      {
-                                                        value: 'NotIn',
-                                                        label: 'NotIn',
-                                                      },
-                                                      {
-                                                        value: 'Exist',
-                                                        label: 'Exist',
-                                                      },
-                                                    ]
-                                                  : []),
-                                                {
-                                                  value: 'DoesNoExist',
-                                                  label: 'DoesNoExist',
-                                                },
-                                              ]}
-                                            />
-                                          </Form.Item>
-                                        </Col>
-                                        <Col
-                                          span={
-                                            topologyConfiguration ===
-                                            'nodeSelector'
-                                              ? 8
-                                              : 6
-                                          }
-                                        >
-                                          <Form.Item
-                                            label={'Value'}
-                                            name={[name, 'value']}
-                                          >
-                                            {topologyConfiguration ===
-                                            'Toleration' ? (
-                                              <Input
-                                                placeholder={intl.formatMessage(
-                                                  {
-                                                    id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
-                                                    defaultMessage: '请输入',
-                                                  },
-                                                )}
-                                              />
-                                            ) : (
-                                              <Select maxTagCount={5} />
-                                            )}
-                                          </Form.Item>
-                                        </Col>
+          {(fields, { add, remove }) => (
+            <div>
+              {fields.map((field) => (
+                <Card style={{ marginBottom: 16 }} key={field.key}>
+                  <Row gutter={8}>
+                    <Col span={12}>
+                      <Form.Item
+                        label={intl.formatMessage({
+                          id: 'OBDashboard.Cluster.New.Topo.ZoneName',
+                          defaultMessage: 'Zone名称',
+                        })}
+                        validateFirst
+                        name={[field.name, 'zone']}
+                        rules={RULER_ZONE}
+                      >
+                        <Input
+                          placeholder={intl.formatMessage({
+                            id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
+                            defaultMessage: '请输入',
+                          })}
+                        />
+                      </Form.Item>
+                    </Col>
+                    <Col span={6}>
+                      <Form.Item
+                        label={intl.formatMessage({
+                          id: 'OBDashboard.Cluster.New.Topo.NumberOfServers',
+                          defaultMessage: 'server数',
+                        })}
+                        name={[field.name, 'replicas']}
+                      >
+                        <InputNumber
+                          placeholder={intl.formatMessage({
+                            id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
+                            defaultMessage: '请输入',
+                          })}
+                          min={1}
+                        />
+                      </Form.Item>
+                    </Col>
+                    <Col span={5}>
+                      <Form.Item label={'Topology summary'} shouldUpdate>
+                        {() => {
+                          const { topology } = form.getFieldsValue();
 
-                                        {topologyConfiguration ===
-                                          'Toleration' && (
-                                          <Col span={2}>
-                                            <Form.Item
-                                              label={'Seconds'}
-                                              name={[name, 'seconds']}
-                                            >
-                                              <InputNumber
-                                                min={1}
-                                                placeholder={intl.formatMessage(
-                                                  {
-                                                    id: 'OBDashboard.Cluster.New.Topo.PleaseEnter',
-                                                    defaultMessage: '请输入',
-                                                  },
-                                                )}
-                                              />
-                                            </Form.Item>
-                                          </Col>
-                                        )}
+                          const content =
+                            topology?.length > 0 ? topology[field.name] : null;
 
-                                        <DeleteOutlined
-                                          style={{
-                                            color: 'rgba(0, 0, 0, .45)',
-                                            paddingRight: 8,
-                                          }}
-                                          onClick={() => {
-                                            subOpt.remove(subField.name);
-                                          }}
-                                        />
-                                      </Row>
-                                    </div>
-                                  ))}
+                          const { nodeSelector, affinities, tolerations } =
+                            content || {};
 
-                                  <Dropdown
-                                    overlay={
-                                      <Menu
-                                        onClick={({ key }) => {
-                                          setTopologyConfiguration(key);
-                                          subOpt.add();
-                                        }}
-                                      >
-                                        <Menu.Item key="nodeSelector">
-                                          <span>nodeSelector</span>
-                                        </Menu.Item>
-                                        <Menu.Item key="Pod Affinity">
-                                          <span>Pod Affinity</span>
-                                        </Menu.Item>
-                                        <Menu.Item key="Toleration">
-                                          <span>Toleration</span>
-                                        </Menu.Item>
-                                      </Menu>
-                                    }
-                                  >
-                                    <Button
-                                      type="dashed"
-                                      block
-                                      icon={<PlusOutlined />}
-                                    >
-                                      Click to add topology configuration
-                                      <DownOutlined />
-                                    </Button>
-                                  </Dropdown>
-                                </div>
+                          return (
+                            <div>
+                              {!!nodeSelector ||
+                              !!affinities ||
+                              !!tolerations ? (
+                                <>
+                                  <div>
+                                    {!!nodeSelector && '- nodeSelector'}
+                                  </div>
+                                  <div>{!!affinities && '- affinities'}</div>
+                                  <div>{!!tolerations && '- tolerations'}</div>
+                                </>
+                              ) : (
+                                '-'
                               )}
-                            </Form.List>
-                          </Form.Item>
-                        </>
+                            </div>
+                          );
+                        }}
+                      </Form.Item>
+                    </Col>
+                    <Col span={1}>
+                      {fields.length > 1 && (
+                        <Form.Item
+                          label={<></>}
+                          style={{ marginBottom: 0 }}
+                          name={[field.name, ' ']}
+                        >
+                          <Popconfirm
+                            placement="left"
+                            title={intl.formatMessage({
+                              id: 'OBDashboard.Cluster.New.Topo.AreYouSureYouWant',
+                              defaultMessage: '确定要删除该配置项吗？',
+                            })}
+                            onConfirm={() => {
+                              remove(field.name);
+                            }}
+                            okText={intl.formatMessage({
+                              id: 'OBDashboard.Cluster.New.Topo.Delete',
+                              defaultMessage: '删除',
+                            })}
+                            cancelText={intl.formatMessage({
+                              id: 'OBDashboard.Cluster.New.Topo.Cancel',
+                              defaultMessage: '取消',
+                            })}
+                            okButtonProps={{
+                              danger: true,
+                              ghost: true,
+                            }}
+                          >
+                            <DeleteOutlined
+                              style={{ color: 'rgba(0, 0, 0, .45)' }}
+                            />
+                          </Popconfirm>
+                        </Form.Item>
                       )}
+                    </Col>
+                  </Row>
+                  <Space
+                    onClick={() => {
+                      setShowTopology(!showTopology);
+                      setFromSubIndex({
+                        ...formsubIndex,
+                        [field.index]: !showTopology,
+                      });
+                    }}
+                  >
+                    {formsubIndex[field.index] ? (
+                      <DownOutlined />
+                    ) : (
+                      <RightOutlined />
+                    )}
+                    Topology
+                  </Space>
+                  {formsubIndex[field.index] && (
+                    <div style={{ marginTop: 16 }}>
+                      <NodeSelectorFrom fieldName={field.name} />
+                      <PodAffinityFrom fieldName={field.name} />
+                      <TolerationFrom fieldName={field.name} />
                     </div>
-                  </Card>
-                ))}
-                <Row gutter={8}>
-                  <Col span={20}>
-                    <Form.Item>
-                      <Button
-                        type="dashed"
-                        onClick={() =>
-                          add({
-                            zone: `zone${fields.length + 1}`,
-                            nodeSelector: [],
-                            replicas: 1,
-                          })
-                        }
-                        block
-                        icon={<PlusOutlined />}
-                      >
-                        {intl.formatMessage({
-                          id: 'OBDashboard.Cluster.New.Topo.AddZone',
-                          defaultMessage: '添加Zone',
-                        })}
-                      </Button>
-                    </Form.Item>
-                  </Col>
-                </Row>
-              </>
-            );
-          }}
+                  )}
+                </Card>
+              ))}
+              <Row gutter={8}>
+                <Col span={20}>
+                  <Form.Item>
+                    <Button
+                      type="dashed"
+                      onClick={() =>
+                        add({
+                          zone: `zone${fields.length + 1}`,
+                          replicas: 1,
+                        })
+                      }
+                      block
+                      icon={<PlusOutlined />}
+                    >
+                      {intl.formatMessage({
+                        id: 'OBDashboard.Cluster.New.Topo.AddZone',
+                        defaultMessage: '添加Zone',
+                      })}
+                    </Button>
+                  </Form.Item>
+                </Col>
+              </Row>
+            </div>
+          )}
         </Form.List>
       </Card>
     </Col>