Initialize the page for creating an obproxy cluster and handle some d…

…etails (#414)
oceanbase · May 30, 2024 · 1b54d37 · 1b54d37
1 parent 5f031a3
commit 1b54d37
Show file tree

Hide file tree

Showing 13 changed files with 291 additions and 113 deletions.
diff --git a/ui/src/components/AlertDrawer/index.tsx b/ui/src/components/AlertDrawer/index.tsx
@@ -13,7 +13,13 @@ export default function AlertDrawer({
   ...props
 }: AlertRuleDrawerProps) {
   return (
-    <Drawer closable={false} onClose={onClose} {...props}>
+    <Drawer
+      style={{ paddingBottom: 60 }}
+      closeIcon={false}
+      onClose={onClose}
+      maskClosable={false}
+      {...props}
+    >
       {props.children}
       <div className={styles.drawerFooter}>
         {footer ? (

diff --git a/ui/src/components/PreText/index.less b/ui/src/components/PreText/index.less
@@ -0,0 +1,9 @@
+.preText {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
+.tooltipContent {
+  max-height: 400px;
+}
diff --git a/ui/src/components/PreText/index.tsx b/ui/src/components/PreText/index.tsx
@@ -0,0 +1,26 @@
+import { Tooltip } from 'antd';
+import styles from './index.less';
+
+interface PreTextProps {
+  cols?: number;
+  value: object | string;
+}
+
+export default function PreText({ cols, value }: PreTextProps) {
+  return (
+    <Tooltip
+      title={
+        <pre className={styles.tooltipContent}>
+          {typeof value === 'string' ? value : JSON.stringify(value, null, 4)}
+        </pre>
+      }
+    >
+      <pre
+        className={cols ? styles.preText : ''}
+        style={{ WebkitLineClamp: cols }}
+      >
+        {typeof value === 'string' ? value : JSON.stringify(value, null, 4)}
+      </pre>
+    </Tooltip>
+  );
+}
diff --git a/ui/src/components/SelectNSFromItem/index.tsx b/ui/src/components/SelectNSFromItem/index.tsx
@@ -0,0 +1,91 @@
+import { intl } from '@/utils/intl';
+import { PlusOutlined } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
+import { Divider, Form, Select } from 'antd';
+import type { FormInstance } from 'antd/lib/form';
+
+import AddNSModal from '@/components/customModal/AddNSModal';
+import { resourceNameRule } from '@/constants/rules';
+import { getNameSpaces } from '@/services';
+import { useState } from 'react';
+export default function SelectNSFromItem({
+  form,
+}: {
+  form: FormInstance<API.CreateClusterData>;
+}) {
+  // control the modal for adding a new namespace
+  const [visible, setVisible] = useState(false);
+  const { data, run: getNS } = useRequest(getNameSpaces);
+
+  const filterOption = (
+    input: string,
+    option: { label: string; value: string },
+  ) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase());
+  const DropDownComponent = (menu: any) => {
+    return (
+      <div>
+        {menu}
+        <Divider style={{ margin: '10px 0' }} />
+        <div
+          onClick={() => setVisible(true)}
+          style={{ padding: '8px', cursor: 'pointer' }}
+        >
+          <PlusOutlined />
+          <span style={{ marginLeft: '6px' }}>
+            {intl.formatMessage({
+              id: 'OBDashboard.Cluster.New.BasicInfo.AddNamespace',
+              defaultMessage: '新增命名空间',
+            })}
+          </span>
+        </div>
+      </div>
+    );
+  };
+  const addNSCallback = (newNS: string) => {
+    form.setFieldValue('namespace', newNS);
+    form.validateFields(['namespace']);
+    getNS();
+  };
+
+  return (
+    <>
+      <Form.Item
+        label={intl.formatMessage({
+          id: 'OBDashboard.Cluster.New.BasicInfo.Namespace',
+          defaultMessage: '命名空间',
+        })}
+        name="namespace"
+        validateTrigger="onBlur"
+        validateFirst
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage({
+              id: 'OBDashboard.Cluster.New.BasicInfo.EnterANamespace',
+              defaultMessage: '请输入命名空间',
+            }),
+            validateTrigger: 'onChange',
+          },
+          resourceNameRule,
+        ]}
+      >
+        <Select
+          showSearch
+          placeholder={intl.formatMessage({
+            id: 'OBDashboard.Cluster.New.BasicInfo.PleaseSelect',
+            defaultMessage: '请选择',
+          })}
+          optionFilterProp="label"
+          filterOption={filterOption}
+          dropdownRender={DropDownComponent}
+          options={data}
+        />
+      </Form.Item>
+      <AddNSModal
+        visible={visible}
+        setVisible={setVisible}
+        successCallback={addNSCallback}
+      />
+    </>
+  );
+}
diff --git a/ui/src/pages/Alert/Channel/ChannelDrawer.tsx b/ui/src/pages/Alert/Channel/ChannelDrawer.tsx
@@ -1,6 +1,5 @@
 import { alert } from '@/api';
 import AlertDrawer from '@/components/AlertDrawer';
-import { CHANNEL_TYPE_OPTIONS } from '@/constants';
 import { Alert } from '@/type/alert';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
@@ -38,14 +37,17 @@ export default function ChannelDrawer({
       }
     },
   });
+  const { data: listReceiverTemplatesRes } = useRequest(
+    alert.listReceiverTemplates,
+  );
   const { data: listReceiversRes, run: getListReceivers } = useRequest(
     alert.listReceivers,
     {
       manual: true,
     },
   );
   const receiverNames = listReceiversRes?.data.map((receiver) => receiver.name);
-
+  const listReceiverTemplates = listReceiverTemplatesRes?.data;
   const Footer = () => {
     return (
       <div>
@@ -127,20 +129,22 @@ export default function ChannelDrawer({
           {status === 'display' ? (
             <p>{form.getFieldValue('type') || '-'} </p>
           ) : (
-            <Select placeholder="请选择" options={CHANNEL_TYPE_OPTIONS} />
+            <Select
+              placeholder="请选择"
+              options={listReceiverTemplates?.map((template) => ({
+                value: template.type,
+                label: template.type,
+              }))}
+            />
           )}
         </Form.Item>
         <Form.Item noStyle dependencies={['type']}>
           {({ setFieldValue, getFieldValue }) => {
             const type = getFieldValue('type');
-            if (type) {
-              alert.getReceiverTemplate(type).then(({ successful, data }) => {
-                if (successful) {
-                  setFieldValue('config', data.template);
-                }
-              });
-            }
-
+            const template = listReceiverTemplates?.find(
+              (item) => item.type === type,
+            );
+            if (template) setFieldValue('config', template.template);
             return (
               <Form.Item
                 name={'config'}
@@ -158,9 +162,9 @@ export default function ChannelDrawer({
                 }
               >
                 {status === 'display' ? (
-                  <p>{form.getFieldValue('config') || '-'}</p>
+                  <pre>{form.getFieldValue('config') || '-'}</pre>
                 ) : (
-                  <TextArea rows={4} placeholder="请输入" />
+                  <TextArea rows={18} placeholder="请输入" />
                 )}
               </Form.Item>
             );

diff --git a/ui/src/pages/Alert/Channel/index.less b/ui/src/pages/Alert/Channel/index.less
@@ -0,0 +1,7 @@
+.text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 7;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
diff --git a/ui/src/pages/Alert/Channel/index.tsx b/ui/src/pages/Alert/Channel/index.tsx
@@ -1,13 +1,14 @@
 import { alert } from '@/api';
 import type { ReceiverReceiver } from '@/api/generated';
+import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
+import { Alert } from '@/type/alert';
 import { useSearchParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import { Button, Card, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useState } from 'react';
 import ChannelDrawer from './ChannelDrawer';
-import { Alert } from '@/type/alert';
 
 export default function Channel() {
   const [searchParams] = useSearchParams();
@@ -59,6 +60,7 @@ export default function Channel() {
       title: '通道配置',
       dataIndex: 'config',
       key: 'config',
+      render: (value) => <PreText value={value} />,
     },
     {
       title: '操作',

diff --git a/ui/src/pages/Alert/Rules/index.tsx b/ui/src/pages/Alert/Rules/index.tsx
@@ -52,6 +52,7 @@ export default function Rules() {
     {
       title: '触发规则',
       dataIndex: 'description',
+      width:'30%',
       key: 'description',
     },
     {

diff --git a/ui/src/pages/Alert/Shield/index.tsx b/ui/src/pages/Alert/Shield/index.tsx
@@ -1,10 +1,10 @@
 import { alert } from '@/api';
 import type {
-  AlarmMatcher,
   OceanbaseOBInstance,
   SilenceSilencerResponse,
   SilenceStatus,
 } from '@/api/generated';
+import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
 import { SHILED_STATUS_MAP } from '@/constants';
 import { Alert } from '@/type/alert';
@@ -50,29 +50,26 @@ export default function Shield() {
   const columns: ColumnsType<SilenceSilencerResponse> = [
     {
       title: '屏蔽应用/对象类型',
-      dataIndex: 'instance',
+      dataIndex: 'instances',
       key: 'type',
-      render: (instance: OceanbaseOBInstance) => <Text>{instance.type}</Text>,
+      render: (instances: OceanbaseOBInstance) => (
+        <Text>{instances.type || '-'}</Text>
+      ),
     },
     {
       title: '屏蔽对象',
-      dataIndex: 'instance',
+      dataIndex: 'instances',
       key: 'targetObj',
-      render: (instance: OceanbaseOBInstance) => (
-        <Text>{instance[instance.type]}</Text>
+      render: (instances: OceanbaseOBInstance) => (
+        <Text>{instances[instances.type] || '-'}</Text>
       ),
     },
     {
       title: '屏蔽告警规则',
       dataIndex: 'matchers',
       key: 'matchers',
-      render: (rules) => (
-        <p>
-          {rules
-            .map((rule: AlarmMatcher) => rule.name! + rule.value!)
-            .join(',')}
-        </p>
-      ),
+      width: 400,
+      render: (rules) => <PreText value={rules} cols={7} />,
     },
     {
       title: '屏蔽结束时间',
@@ -149,8 +146,8 @@ export default function Shield() {
     },
   ];
   const initialValues: Alert.ShieldDrawerInitialValues = {};
-  if (searchParams.get('instance')) {
-    initialValues.instance = JSON.parse(searchParams.get('instance')!);
+  if (searchParams.get('instances')) {
+    initialValues.instances = JSON.parse(searchParams.get('instances')!);
   }
   if (searchParams.get('label')) {
     initialValues.matchers = JSON.parse(searchParams.get('label')!);

diff --git a/ui/src/pages/Alert/Subscriptions/index.tsx b/ui/src/pages/Alert/Subscriptions/index.tsx
@@ -1,5 +1,6 @@
 import { alert } from '@/api';
 import type { RouteRouteResponse } from '@/api/generated';
+import PreText from '@/components/PreText';
 import showDeleteConfirm from '@/components/customModal/showDeleteConfirm';
 import { Link } from '@umijs/max';
 import { useRequest } from 'ahooks';
@@ -48,7 +49,7 @@ export default function Subscriptions() {
       title: '匹配配置',
       dataIndex: 'matchers',
       key: 'matchers',
-      render: (matcher) => <p>{matcher.value}</p>,
+      render: (matchers) => <PreText cols={7} value={matchers} />,
     },
     {
       title: '聚合配置',
@@ -103,7 +104,7 @@ export default function Subscriptions() {
       <Table
         columns={columns}
         dataSource={listRoutes}
-        rowKey="fingerprint"
+        rowKey="id"
         pagination={{ simple: true }}
       />
       <SubscripDrawerForm