feat: optimize env (#80)

* style: remove radio reset style * ci: ts ignore * feat: optimize env management
DTStack · Dec 4, 2024 · 8a36438 · 8a36438
1 parent 4aafa57
commit 8a36438
Show file tree

Hide file tree

Showing 21 changed files with 367 additions and 268 deletions.
diff --git a/app/controller/envManagement.js b/app/controller/envManagement.js
@@ -12,12 +12,14 @@ class EnvManagementController extends Controller {
     // 新增环境
     async addEnv() {
         const { ctx, app } = this;
-        const { envName, hostIp, url, remark, tagIds } = ctx.request.body;
+        const { envName, hostIp, uicUsername, uicPasswd, url, remark, tagIds } = ctx.request.body;
         if (_.isNil(envName)) throw new Error('缺少必要参数 envName');
         if (_.isNil(url)) throw new Error('缺少必要参数 url');
         const result = await ctx.service.envManagement.addEnv({
             envName,
             hostIp,
+            uicUsername,
+            uicPasswd,
             url,
             remark,
             tags: tagIds.join(','),
@@ -32,11 +34,14 @@ class EnvManagementController extends Controller {
     // 编辑环境
     async editEnv() {
         const { ctx, app } = this;
-        const { id, envName, hostIp, url, remark, tagIds } = ctx.request.body;
+        const { id, envName, hostIp, uicUsername, uicPasswd, url, remark, tagIds } =
+            ctx.request.body;
         if (_.isNil(id)) throw new Error('缺少必要参数id');
         await ctx.service.envManagement.editEnv({
             id,
             envName,
+            uicUsername,
+            uicPasswd,
             hostIp,
             url,
             remark,

diff --git a/app/model/env_management.js b/app/model/env_management.js
@@ -6,6 +6,8 @@ module.exports = (app) => {
             id: { type: INTEGER, primaryKey: true, autoIncrement: true },
             envName: { type: STRING(255), field: 'env_name' },
             hostIp: { type: STRING(20), field: 'host_ip' },
+            uicUsername: { type: STRING(255), field: 'uic_username' },
+            uicPasswd: { type: STRING(255), field: 'uic_passwd' },
             url: { type: STRING(2048), field: 'url' },
             remark: STRING(255),
             tags: { type: STRING(60), field: 'tag_ids' },

diff --git a/app/service/envManagement.js b/app/service/envManagement.js
@@ -6,7 +6,16 @@ class EnvManagementService extends Service {
         const { ctx } = this;
         const { tags = '', search = '' } = params;
         const envResult = await ctx.model.EnvManagement.findAll({
-            attributes: ['id', 'envName', 'hostIp', 'url', 'remark', 'tags'],
+            attributes: [
+                'id',
+                'envName',
+                'hostIp',
+                'uicUsername',
+                'uicPasswd',
+                'url',
+                'remark',
+                'tags',
+            ],
             where: {
                 status: 1,
                 $or: [
@@ -43,10 +52,12 @@ class EnvManagementService extends Service {
     }
     editEnv(env) {
         const { ctx } = this;
-        const { id, envName, hostIp, url, remark, tags } = env;
+        const { id, envName, hostIp, uicUsername, uicPasswd, url, remark, tags } = env;
         const newEnv = {};
         if (!_.isNil(envName)) newEnv.envName = envName;
         if (!_.isNil(hostIp)) newEnv.hostIp = hostIp;
+        if (!_.isNil(uicUsername)) newEnv.uicUsername = uicUsername;
+        if (!_.isNil(uicPasswd)) newEnv.uicPasswd = uicPasswd;
         if (!_.isNil(url)) newEnv.url = url;
         if (!_.isNil(remark)) newEnv.remark = remark;
         if (!_.isNil(tags)) newEnv.tags = tags;

diff --git a/app/web/components/dtCodemirror/index.tsx b/app/web/components/dtCodemirror/index.tsx
@@ -91,6 +91,7 @@ function DtCodemirror(props: any) {
     }, []);
     return (
         <div className="dt-codemirror">
+            {/* @ts-ignore */}
             <CodeMirror {...props} />
             <Select
                 showSearch

diff --git a/app/web/layouts/header/header.tsx b/app/web/layouts/header/header.tsx
@@ -80,6 +80,7 @@ const HeaderComponent = (props: any) => {
     return (
         <Header className="dt-layout-header header_component">
             <div className="dt-header-log-wrapper logo">
+                {/* @ts-ignore */}
                 <Link to="/page/toolbox">
                     <img className="logo_img" src={logo} />
                     <span className="system-title">Doraemon</span>
@@ -107,6 +108,7 @@ const HeaderComponent = (props: any) => {
                                 >
                                     {children.map((navChild: any) => (
                                         <Menu.Item key={navChild.path}>
+                                            {/* @ts-ignore */}
                                             <Link to={navChild.path}>
                                                 {navChild.icon}
                                                 <span>{navChild.name}</span>
@@ -118,6 +120,7 @@ const HeaderComponent = (props: any) => {
                         } else {
                             return (
                                 <Menu.Item key={path}>
+                                    {/* @ts-ignore */}
                                     <Link to={path}>
                                         {icon}
                                         <span>{name}</span>

diff --git a/app/web/layouts/sider/index.tsx b/app/web/layouts/sider/index.tsx
@@ -67,6 +67,7 @@ const SiderComponent = (props: any) => {
                             >
                                 {children.map((navChild) => (
                                     <Menu.Item key={navChild.path}>
+                                        {/* @ts-ignore */}
                                         <Link to={navChild.path}>
                                             {navChild.icon}
                                             <span>{navChild.name}</span>
@@ -78,6 +79,7 @@ const SiderComponent = (props: any) => {
                     } else {
                         return (
                             <Menu.Item key={path}>
+                                {/* @ts-ignore */}
                                 <Link to={path}>
                                     {icon}
                                     <span>{name}</span>

diff --git a/app/web/main.tsx b/app/web/main.tsx
@@ -30,6 +30,7 @@ const clientRender = () => {
     const render = (Page: any) => {
         ReactDOM.hydrate(
             EASY_ENV_IS_DEV ? (
+                // @ts-ignore
                 <AppContainer>
                     <Page />
                 </AppContainer>

diff --git a/app/web/pages/configCenter/index.tsx b/app/web/pages/configCenter/index.tsx
@@ -42,6 +42,7 @@ const ConfigCenter = () => {
                 dataIndex: 'filename',
                 width: 200,
                 render: (value: any, row: any) => (
+                    // @ts-ignore
                     <Link to={`/page/config-detail/${row.id}`}>{value}</Link>
                 ),
             },

diff --git a/app/web/pages/configDetail/index.tsx b/app/web/pages/configDetail/index.tsx
@@ -105,6 +105,7 @@ const ConfigDetail = (props: any) => {
                     <Col span={18}>
                         <Breadcrumb>
                             <Breadcrumb.Item>
+                                {/* @ts-ignore */}
                                 <Link to="/page/config-center">配置中心</Link>
                             </Breadcrumb.Item>
                             <Breadcrumb.Item>配置详情</Breadcrumb.Item>
@@ -124,6 +125,7 @@ const ConfigDetail = (props: any) => {
                 <div className="page-content">
                     <Row gutter={16}>
                         <Col span={18}>
+                            {/* @ts-ignore */}
                             <CodeMirror
                                 ref={codeEditorRef}
                                 value={config}
@@ -147,6 +149,7 @@ const ConfigDetail = (props: any) => {
                                     <QuestionCircleOutlined />
                                 </Tooltip>
                             </Title>
+                            {/* @ts-ignore */}
                             <CodeMirror
                                 ref={shellEditorRef}
                                 value={shell}

diff --git a/app/web/pages/envManagement/components/envModal/index.tsx b/app/web/pages/envManagement/components/envModal/index.tsx
@@ -3,13 +3,14 @@ import { Form, Input, message as Message, Modal, Select, Spin } from 'antd';
 import { isEmpty, isFunction, isNull } from 'lodash';
 
 import { API } from '@/api';
+import { urlReg } from '@/utils/reg';
 const FormItem = Form.Item;
 const { TextArea } = Input;
 const { Option } = Select;
 
 const EnvForm = (props: any) => {
     const { value, tagList = [], forwardRef } = props;
-    const { envName, hostIp, url, remark, tags = [] } = value;
+    const { envName, hostIp, uicUsername, uicPasswd, url, remark, tags = [] } = value;
     const tagIds = tags.map((item: any) => Number(item.id));
     return (
         <Form
@@ -19,6 +20,8 @@ const EnvForm = (props: any) => {
             initialValues={{
                 envName,
                 hostIp,
+                uicUsername,
+                uicPasswd,
                 url,
                 tagIds,
                 remark,
@@ -30,24 +33,37 @@ const EnvForm = (props: any) => {
                 rules={[{ required: true, message: '请输入环境名称' }]}
                 hasFeedback
             >
-                <Input placeholder="请输入环境名称" />
+                <Input placeholder="请输入环境名称" maxLength={255} />
             </FormItem>
             <FormItem
                 label="主机IP"
                 name="hostIp"
                 rules={[{ required: true, message: '请输入主机IP' }]}
                 hasFeedback
             >
-                <Input placeholder="请输入主机IP" />
+                <Input placeholder="请输入主机IP" maxLength={255} />
+            </FormItem>
+            <FormItem label="UIC用户名" name="uicUsername" hasFeedback>
+                <Input placeholder="请输入UIC用户名" maxLength={255} />
+            </FormItem>
+            <FormItem label="UIC密码" name="uicPasswd" hasFeedback>
+                <Input type="password" placeholder="请输入UIC密码" maxLength={255} />
             </FormItem>
             <Fragment>
                 <FormItem
                     label="访问地址"
                     name="url"
-                    rules={[{ required: true, message: '请输入访问地址' }]}
+                    rules={[
+                        { required: true, message: '请输入访问地址' },
+                        {
+                            required: true,
+                            pattern: urlReg,
+                            message: '请输入正确格式的访问地址，以 http(s):// 开头',
+                        },
+                    ]}
                     hasFeedback
                 >
-                    <TextArea placeholder="请输入访问地址" rows={2} maxLength={2000} />
+                    <Input placeholder="请输入访问地址" maxLength={2000} />
                 </FormItem>
             </Fragment>
             <FormItem
@@ -59,6 +75,14 @@ const EnvForm = (props: any) => {
                         required: true,
                         message: '请选择标签',
                     },
+                    {
+                        validator: (rule, value = [], callback) => {
+                            if (value?.length > 3) {
+                                callback('最多选择三个标签');
+                            }
+                            callback();
+                        },
+                    },
                 ]}
                 hasFeedback
             >

diff --git a/app/web/pages/envManagement/index.tsx b/app/web/pages/envManagement/index.tsx
@@ -1,6 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { PlusCircleOutlined } from '@ant-design/icons';
-import { Button, Divider, Input, message as Message, Popconfirm, Table, Typography } from 'antd';
+import {
+    Button,
+    Divider,
+    Input,
+    message as Message,
+    Popconfirm,
+    Table,
+    Tooltip,
+    Typography,
+} from 'antd';
 
 import { API } from '@/api';
 import DtTag from '@/components/dtTag';
@@ -50,15 +59,42 @@ export default (props: any) => {
             {
                 title: '环境名称',
                 key: 'envName',
-                width: 220,
                 dataIndex: 'envName',
             },
             {
                 title: '主机IP',
                 key: 'hostIp',
-                width: 160,
                 dataIndex: 'hostIp',
             },
+            {
+                title: 'UIC用户名密码',
+                key: 'hostIp',
+                dataIndex: 'hostIp',
+                ellipsis: true,
+                render: (value: any, record: any) => {
+                    const { uicUsername, uicPasswd } = record;
+                    return !uicUsername && !uicPasswd ? (
+                        '--'
+                    ) : (
+                        <>
+                            {uicUsername ? (
+                                <Paragraph copyable ellipsis>
+                                    {uicUsername}
+                                </Paragraph>
+                            ) : (
+                                '--'
+                            )}
+                            {uicPasswd ? (
+                                <Paragraph copyable ellipsis>
+                                    {uicPasswd}
+                                </Paragraph>
+                            ) : (
+                                '--'
+                            )}
+                        </>
+                    );
+                },
+            },
             {
                 title: '访问地址',
                 key: 'url',
@@ -81,7 +117,6 @@ export default (props: any) => {
                 title: '标签',
                 key: 'tags',
                 dataIndex: 'tags',
-                width: 160,
                 filterMultiple: true,
                 filters: tagList.map((item: any) => {
                     return {
@@ -102,7 +137,11 @@ export default (props: any) => {
                 key: 'remark',
                 dataIndex: 'remark',
                 ellipsis: true,
-                render: (text) => <pre className="remark-content">{text || '--'}</pre>,
+                render: (text) => (
+                    <Tooltip title={text} placement="top">
+                        <pre className="remark-content">{text || '--'}</pre>
+                    </Tooltip>
+                ),
             },
             {
                 title: '操作',
@@ -179,7 +218,7 @@ export default (props: any) => {
         <div className="page-env-management">
             <div className="title_wrap">
                 <Search
-                    placeholder="请输入环境名称或IP搜索"
+                    placeholder="请输入环境名称或主机IP搜索"
                     value={searchStr}
                     onChange={(e) => setSearchStr(e.target.value)}
                     onSearch={() => loadTableData({ search: searchStr })}
@@ -192,6 +231,7 @@ export default (props: any) => {
             </div>
             <Table
                 rowKey="id"
+                size="middle"
                 columns={getColumns()}
                 className="dt-table-fixed-base"
                 scroll={{ y: 'calc(100vh - 64px - 40px - 44px - 44px)' }}

diff --git a/app/web/pages/envManagement/style.scss b/app/web/pages/envManagement/style.scss
@@ -10,10 +10,11 @@
 }
 
 .remark-content {
+    margin-bottom: 0;
     // white-space: normal;
     overflow: hidden; // 超出的文本隐藏
     text-overflow: ellipsis;    // 溢出用省略号显示
     display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
     -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-    -webkit-line-clamp: 3; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
+    -webkit-line-clamp: 4; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
 }
diff --git a/app/web/pages/proxyServer/index.tsx b/app/web/pages/proxyServer/index.tsx
@@ -845,4 +845,5 @@ function mapStateToProps(state: any) {
         localIp: state.global.localIp,
     };
 }
+// @ts-ignore
 export default connect(mapStateToProps)(ProxyServer);
diff --git a/app/web/pages/switchHosts/editHosts/index.tsx b/app/web/pages/switchHosts/editHosts/index.tsx
@@ -97,6 +97,7 @@ const EditHosts = (props: any) => {
                 <Col span={18}>
                     <Breadcrumb>
                         <Breadcrumb.Item>
+                            {/* @ts-ignore */}
                             <Link to="/page/switch-hosts-list">hosts管理</Link>
                         </Breadcrumb.Item>
                         <Breadcrumb.Item>{isCreate ? '创建' : '编辑'}hosts</Breadcrumb.Item>
@@ -124,6 +125,7 @@ const EditHosts = (props: any) => {
             <div style={{ flex: 1 }}>
                 <Row gutter={16}>
                     <Col span={16}>
+                        {/* @ts-ignore */}
                         <CodeMirror
                             value={hosts}
                             options={{

diff --git a/app/web/pages/toolbox/index.tsx b/app/web/pages/toolbox/index.tsx
@@ -163,6 +163,7 @@ const Toolbox = () => {
                                 {componentContent}
                             </a>
                         ) : (
+                            // @ts-ignore
                             <Link to={appUrl} className="navigation-item">
                                 {componentContent}
                             </Link>

diff --git a/app/web/scss/reset.scss b/app/web/scss/reset.scss
@@ -205,11 +205,3 @@ body,
 .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
     background-color: transparent;
 }
-
-.ant-radio {
-    top: 0.1em;
-    .ant-radio-inner::after {
-        margin-top: 0;
-        margin-left: 0;
-    }
-}
diff --git a/docs/docsify/imgs/add_env.png b/docs/docsify/imgs/add_env.png
diff --git a/docs/docsify/imgs/env_management.png b/docs/docsify/imgs/env_management.png