fix: fix style

app/components/Breadcrumb/index.less

@@ -32,7 +32,6 @@
 				align-items: center;
 			}
 			a, .ant-breadcrumb-link span {
-				font-weight: 300;
 				word-break: break-all;
 				text-overflow: ellipsis;
 				overflow: hidden;

app/components/CSVPreviewLink/index.tsx

@@ -50,6 +50,7 @@ const CSVPreviewLink = (props: IProps) => {
       overlayClassName="popover-preview"
       visible={visible}
       trigger="click"
+      arrowPointAtCenter
       onVisibleChange={visible => setVisible(visible)}
       content={<div className="csv-preview">
         <Table

app/components/ForceGraph/force-graph.js

@@ -115,7 +115,7 @@ function clearCanvas(ctx, width, height) {
 
 export default Kapsule({
   props: {
-    width: { default: 1060, onChange: (_, state) => adjustCanvasSize(state), triggerUpdate: false },
+    width: { default: 1100, onChange: (_, state) => adjustCanvasSize(state), triggerUpdate: false },
     height: { default: 400, onChange: (_, state) => adjustCanvasSize(state), triggerUpdate: false },
     graphData: {
       default: { nodes: [], links: [] },

app/config/locale/en-US.json

@@ -161,7 +161,7 @@
     "fileUploadRequired": "1. Please make sure all CSV data files are uploaded before import the YAML file. If not, please go to ",
     "fileUploadRequired2": " first.",
     "exampleDownload": "2. An example for the configuration file: ",
-    "uploadTemplateTip": "3. 3. Configure the Yaml file: please keep only the file name (retain the file extension) for all file paths (path, failDataPath, logPath) in the template, e.g. logPath: config.csv",
+    "uploadTemplateTip": "3. Configure the Yaml file: please keep only the file name (retain the file extension) for all file paths (path, failDataPath, logPath) in the template, e.g. logPath: config.csv",
     "reUpload": "Re-upload",
     "fileNotExist": "{name} file does not exist！",
     "importYaml": "Import the YAML file"

app/config/locale/zh-CN.json

@@ -161,7 +161,7 @@
     "fileUploadRequired": "1. 请确保在导入 YAML 文件之前上传所有 CSV 数据文件。 如果没有，请先前往",
     "fileUploadRequired2": "数据文件",
     "exampleDownload": "2. 配置文件示例:",
-    "uploadTemplateTip": "3.配置Yaml文件：模板中所有文件路径（path、failDataPath、logPath）请只保留文件名（保留文件扩展名），例如： 日志路径：config.csv",
+    "uploadTemplateTip": "3. 配置Yaml文件：模板中所有文件路径（path、failDataPath、logPath）请只保留文件名（保留文件扩展名），例如： 日志路径：config.csv",
     "reUpload": "重新上传",
     "fileNotExist": "文件 {name} 不存在",
     "importYaml": "导入 YAML 文件"

app/pages/Console/OutputBox/ForceGraph/Menu/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment } from 'react';
 import './index.less';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
@@ -13,26 +13,15 @@ const Menu = (props: IProps) => {
   const {
     pointer: { left: x, top: y, showContextMenu },
   } = graph;
+  if(!showContextMenu) {
+    return null;
+  } 
   const hide = () => {
     graph.setPointer({
       showContextMenu: false,
     });
   };
-  useEffect(() => {
-    const close = e => {
-      const path = e.path || (e.composedPath && e.composedPath());  // safari has no e.path
-      const isMenu = path.find(each => each.className === 'context-menu');
-      if (isMenu) return;
-      hide();
-    };
-    const container = document.getElementById(id);
-    container?.addEventListener('click', close);
-    container?.addEventListener('contextmenu', close);
-    return () => {
-      container?.removeEventListener('click', close);
-      container?.removeEventListener('contextmenu', close);
-    };
-  }, []);
+
   const menuConfig = [
     {
       component: <ColorChangeBtn graph={graph} onClose={hide} />,
@@ -43,8 +32,8 @@ const Menu = (props: IProps) => {
   const width = document.getElementById(id)!.clientWidth;
   const height = document.getElementById(id)!.clientHeight;
   const style = { left: 0, top: 0, display: 'block' };
-  style.left = width - x - 30 > containerWidth ? x + 30 : x - containerWidth;
-  style.top = height - y - 30 > containerHeight ? y + 30 : y - containerHeight;
+  style.left = width - x > containerWidth ? x : x - containerWidth;
+  style.top = height - y > containerHeight ? y : y - containerHeight;
   if (!showContextMenu) {
     style.display = 'none';
   }

app/pages/Console/OutputBox/index.less

@@ -46,10 +46,6 @@
 				&:not(:last-child) {
 					margin-right: 22px;
 				}
-				&.icon-toggle svg{
-					width: 18px;
-					height: 18px;
-				}
 			}
 			span.btn-yellow svg{
 				fill: #F2C94C;
@@ -88,6 +84,10 @@
 						color: @darkGray;
 						.anticon {
 							margin-right: 0;
+							svg {
+								width: 22px;
+								height: 22px;
+							}
 						}
 					}
 					&.ant-tabs-tab-active {
@@ -103,7 +103,7 @@
 				background-color: @lightBlue;
 			}
 			.ant-tabs-content {
-				.ant-table {
+				.ant-table, .ant-pagination {
 					margin: 20px;
 				}
 				.ant-tabs-tabpane {
@@ -133,7 +133,7 @@
 		width: 100%;
 		height: 65px;
 		border-top: 1px solid #E0E0E0;
-		font-family: Roboto-Regular, serif;
+		font-family: Roboto-Regular, sans-serif;
 		font-size: 16px;
 		color: @darkBlue;
 		letter-spacing: 1.48px;

app/pages/Console/OutputBox/index.tsx

@@ -264,7 +264,6 @@ const OutputBox = (props: IProps) => {
           <Icon className="btn-export" type="icon-studio-btn-output" />
         </Popover>
         <Icon
-          className="icon-toggle"
           type={visible ? 'icon-studio-btn-up' : 'icon-studio-btn-down'}
           onClick={() => setVisible(!visible)}
         />

app/pages/Console/index.less

@@ -125,6 +125,7 @@
       }
     }
     .CodeMirror {
+      font-family: Roboto-Regular, sans-serif;
       .CodeMirror-gutters {
         background: @lightBlue;
       }
@@ -135,6 +136,7 @@
       }
       .CodeMirror-scroll {
         padding-bottom: 0;
+        margin-right: 0;
         overflow: auto !important;
       }
     }

app/pages/Doc/index.less

@@ -57,6 +57,7 @@
       padding: 20px;
       .doc-group {
         display: flex !important;
+        margin-bottom: 30px
       }
       .doc-item {
         height: 295px;

app/pages/Import/FileUpload/index.less

@@ -16,12 +16,11 @@
 	}
 	.operation {
 		button {
-			width: 70px;
-			padding-left: 0;
+			padding: 0;
 			justify-content: flex-start;
 		}
 		button:not(:last-child) {
-			margin-right: 15px;
+			margin-right: 30px;
 		}
 	}
 }

app/pages/Import/TaskList/TaskItem/LogModal/index.less

@@ -29,7 +29,7 @@
     height: 91%;
   }
   .log-container {
-    width: 100%;
+    width: calc(100% - 200px);
     height: 100%;
     overflow: auto;
     padding: 10px 20px 120px;
@@ -41,12 +41,18 @@
   }
 }
 .log-tab {
-  max-height: 65vh;
+  height: 100%;
   .ant-tabs-nav {
     width: 200px;
     .ant-tabs-tab {
       background-color: @lightGray;
       color: @darkBlue;
+      .ant-tabs-tab-btn {
+        word-break: break-all;
+        width: 100%;
+        white-space: initial;
+        text-align: left;
+      }
     }
     .ant-tabs-tab-active {
       background-color: #0091FF;

app/pages/Import/TaskList/TemplateModal/index.less

@@ -23,6 +23,7 @@
       .btn-add-file svg{
         width: 95px;
         height: 95px;
+        padding: 24px;
         fill: @darkBlue;
       }
       .drag-tip {

app/pages/MainPage/Header/index.less

@@ -15,7 +15,7 @@
   }
   .main-menu {
     flex: auto;
-    font-family: Roboto-Regular, serif;
+    font-family: Roboto-Regular, sans-serif;
     font-style: normal;
     font-size: 16px;
     .nav-link {

app/pages/Schema/SchemaConfig/Edit/CommonEdit/PropertiesRow.tsx

@@ -59,6 +59,7 @@ export const DisplayRow = (props: IProps) => {
         cancelText={intl.get('common.cancel')}
       >
         <Button
+          danger
           type="link"
           disabled={disabled}
         >
@@ -168,6 +169,7 @@ export const EditRow = (props: IEditProps) => {
                 </Button>
                 <Button
                   type="link"
+                  danger
                   onClick={onEditCancel}
                 >
                   {intl.get('common.cancel')}

app/pages/Schema/SchemaConfig/Edit/CommonEdit/TTLForm.tsx

@@ -242,6 +242,7 @@ const formRef = ((props: IProps) => {
                 </Button>
                 <Button
                   type="link"
+                  danger
                   onClick={handleEditCancel}
                 >
                   {intl.get('common.cancel')}

app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.less

@@ -6,6 +6,9 @@
     margin-bottom: 30px;
     border-bottom: 1px solid @gray;
     word-break: break-word;
+    .input-comment {
+      width: 250px;
+    }
   }
   .box-container {
     margin-bottom: 28px;

app/pages/Schema/SchemaConfig/Edit/CommonEdit/index.tsx

@@ -16,7 +16,7 @@ const formItemLayout = {
     span: 6,
   },
   wrapperCol: {
-    span: 20,
+    span: 16,
   },
 };
 
@@ -117,6 +117,7 @@ const ConfigEdit = (props: IProps) => {
         duration
       }
     });
+    setTempComment(comment);
   };
 
   const handleCommentEditStart = () => {
@@ -147,6 +148,10 @@ const ConfigEdit = (props: IProps) => {
     setLoading(false);
   };
 
+  const handleCommentCancel = () => {
+    setEditKey(null);
+    setTempComment(data.comment);
+  };
   const checkIndex = async () => {
     setLoading(true);
     const res = (await getIndexTree(editType)) || [];
@@ -165,14 +170,20 @@ const ConfigEdit = (props: IProps) => {
             <Row className="form-item">
               <Col span={12}>
                 <Form.Item label={intl.get('common.name')}>
-                  {editName}
+                  <Input value={editName} disabled />
                 </Form.Item>
               </Col>
               <Col span={12}>
                 <Form.Item label={intl.get('common.comment')}>
+                  <Input
+                    disabled={editKey !== 'comment'}
+                    className="input-comment"
+                    defaultValue={data.comment}
+                    value={tempComment}
+                    onChange={e => setTempComment(e.target.value)}
+                  />
                   {editKey !== 'comment' ? (
                     <>
-                      <span>{data.comment}</span>
                       <Button
                         disabled={editKey !== null}
                         type="link"
@@ -183,11 +194,6 @@ const ConfigEdit = (props: IProps) => {
                     </>
                   ) : (
                     <>
-                      <Input
-                        className="input-comment"
-                        defaultValue={data.comment}
-                        onChange={e => setTempComment(e.target.value)}
-                      />
                       <Button
                         type="link"
                         onClick={handleCommentUpdate}
@@ -196,7 +202,8 @@ const ConfigEdit = (props: IProps) => {
                       </Button>
                       <Button
                         type="link"
-                        onClick={() => setEditKey(null)}
+                        danger
+                        onClick={handleCommentCancel}
                       >
                         {intl.get('common.cancel')}
                       </Button>

app/pages/Schema/SchemaConfig/List/Index/index.tsx

@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
 import { sortByFieldAndFilter } from '@app/utils/function';
 import { IIndexList, IndexType, IJobStatus } from '@app/interfaces/schema';
-import { partition, groupBy } from 'lodash';
+import { groupBy } from 'lodash';
 import Cookie from 'js-cookie';
 import CommonLayout from '../CommonLayout';
 

app/pages/Schema/SchemaConfig/List/SpaceStats/index.tsx

@@ -63,24 +63,24 @@ const SpaceStats = () => {
       } else if (stat) {
         const jobId = stat['Job Id'];
         setJobId(jobId);
-        getStatStatus(jobId);
+        getStatStatus(jobId, true);
       }
     }
   };
 
-  const getStatStatus = async id => {
+  const getStatStatus = async (id, isInit?: boolean) => {
     const { code, data } = await getJobStatus(id);
     if (code === 0) {
       const job = data.tables[0];
       if (job.Status === IJobStatus.Finished) {
         getData();
         setUpdateTime(job['Stop Time']);
         setJobId(null);
-        message.success(intl.get('schema.statFinished'));
+        !isInit && message.success(intl.get('schema.statFinished'));
       } else if ([IJobStatus.Running, IJobStatus.Queue].includes(job.Status)) {
         timer.current = setTimeout(() => getStatStatus(id), 2000);
       } else if (job.Status === 'FAILED') {
-        message.warning(intl.get('schema.statError'));
+        !isInit && message.warning(intl.get('schema.statError'));
         setJobId(null);
       }
     }

app/stores/twoGraph.ts

@@ -44,7 +44,7 @@ class TwoGraph {
     Graph.d3Force('link')!.distance((d) => {
       return d.lineLength || LINE_LENGTH;
     });
-    Graph.width(1060).height(400);
+    Graph.width(1100).height(400);
     Graph.onZoom((v) => {
       this.setTransform(v);
       graph.setPointer({

app/utils/http.ts

@@ -40,10 +40,11 @@ service.interceptors.request.use(config => {
 service.interceptors.response.use(
   (response: any) => {
     const { code, message: errMsg } = response.data;
+    const isConnectReq = /api-nebula\/db\/connect$/.test(response.config?.url);
     // if connection refused, login again
     if (code === -1 && new RegExp(subErrMsgStr.join('|')).test(errMsg)) {
-      message.warning(intl.get('warning.connectError'));
-      getRootStore().global.logout();
+      message.warning(errMsg);
+      !isConnectReq && getRootStore().global.logout();
     } else if (code === -1 && errMsg) {
       message.warning(errMsg);
     }