优化配置中心展示效果

spug_web/src/pages/config/app/Rel.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Transfer, message, Tabs, Alert } from 'antd';
+import { Modal, Form, Transfer, message, Tabs } from 'antd';
 import { http, hasPermission } from 'libs';
 import serviceStore from '../service/store';
 import store from './store';

spug_web/src/pages/config/setting/DiffConfig.js

@@ -76,9 +76,8 @@ class Record extends React.Component {
                 onClick={() => this.handleEnvCheck(item)}
                 style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
                 <Col span={2}><Checkbox checked={envs.map(x => x.id).includes(item.id)}/></Col>
-                <Col span={4} className={styles.ellipsis}>{item.key}</Col>
-                <Col span={9} className={styles.ellipsis}>{item.name}</Col>
-                <Col span={9} className={styles.ellipsis}>{item.desc}</Col>
+                <Col span={10} className={styles.ellipsis}>{item.key}</Col>
+                <Col span={10} className={styles.ellipsis}>{item.name}</Col>
               </Row>
             ))}
           </Form.Item>

spug_web/src/pages/config/setting/Form.js

@@ -77,23 +77,25 @@ export default observer(function () {
             name="is_public"
             valuePropName="checked"
             initialValue={store.record.is_public === undefined || store.record.is_public}
-            tooltip={<a target="_blank" rel="noopener noreferrer" href="https://spug.cc/docs/conf-app">什么是公共/私有配置？</a>}>
+            tooltip={<a target="_blank" rel="noopener noreferrer"
+                        href="https://spug.cc/docs/conf-app">什么是公共/私有配置？</a>}>
             <Switch checkedChildren="公共" unCheckedChildren="私有"/>
           </Form.Item>
         )}
-        <Form.Item label="选择环境" style={{lineHeight: '40px'}}>
-          {envStore.records.map((item, index) => (
-            <Row
-              key={item.id}
-              onClick={() => handleEnvCheck(item.id)}
-              style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
-              <Col span={2}><Checkbox disabled={isModify} checked={envs.includes(item.id)}/></Col>
-              <Col span={4} className={styles.ellipsis}>{item.key}</Col>
-              <Col span={9} className={styles.ellipsis}>{item.name}</Col>
-              <Col span={9} className={styles.ellipsis}>{item.desc}</Col>
-            </Row>
-          ))}
-        </Form.Item>
+        {isModify ? null : (
+          <Form.Item label="选择环境" style={{lineHeight: '40px'}}>
+            {envStore.records.map((item, index) => (
+              <Row
+                key={item.id}
+                onClick={() => handleEnvCheck(item.id)}
+                style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
+                <Col span={2}><Checkbox checked={envs.includes(item.id)}/></Col>
+                <Col span={10} className={styles.ellipsis}>{item.key}</Col>
+                <Col span={10} className={styles.ellipsis}>{item.name}</Col>
+              </Row>
+            ))}
+          </Form.Item>
+        )}
       </Form>
     </Modal>
   )

spug_web/src/pages/config/setting/index.js

@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Menu, Input, Button, PageHeader, Modal, Space, Radio, Form } from 'antd';
+import { Menu, Input, Button, PageHeader, Modal, Space, Radio, Form, Alert } from 'antd';
 import {
   DiffOutlined,
   HistoryOutlined,
@@ -24,8 +24,6 @@ import TextView from './TextView';
 import JSONView from './JSONView';
 import Record from './Record';
 import store from './store';
-import appStore from '../app/store';
-import srcStore from '../service/store';
 
 @observer
 class Index extends React.Component {
@@ -40,22 +38,23 @@ class Index extends React.Component {
 
   componentDidMount() {
     const {type, id} = this.props.match.params;
-    store.type = type;
-    store.id = id;
-    if (envStore.records.length === 0) {
-      envStore.fetchRecords().then(() => {
+    store.initial(type, id)
+      .then(() => {
         if (envStore.records.length === 0) {
-          Modal.error({
-            title: '无可用环境',
-            content: <div>配置依赖应用的运行环境，请在 <a href="/config/environment">环境管理</a> 中创建环境。</div>
+          envStore.fetchRecords().then(() => {
+            if (envStore.records.length === 0) {
+              Modal.error({
+                title: '无可用环境',
+                content: <div>配置依赖应用的运行环境，请在 <a href="/config/environment">环境管理</a> 中创建环境。</div>
+              })
+            } else {
+              this.updateEnv()
+            }
           })
         } else {
           this.updateEnv()
         }
       })
-    } else {
-      this.updateEnv()
-    }
   }
 
   updateEnv = (env) => {
@@ -73,13 +72,12 @@ class Index extends React.Component {
   render() {
     const {view} = this.state;
     const isApp = store.type === 'app';
-    const record = isApp ? appStore.record : srcStore.record;
     return (
       <AuthDiv auth={`config.${store.type}.view_config`}>
-        <Breadcrumb>
+        <Breadcrumb extra={<Alert message="4.0将移除公共/私有配置概念，所有配置将被视为公共配置。" banner/>}>
           <Breadcrumb.Item>配置中心</Breadcrumb.Item>
           <Breadcrumb.Item onClick={() => history.goBack()}>{isApp ? '应用配置' : '服务配置'}</Breadcrumb.Item>
-          <Breadcrumb.Item>{record.name}</Breadcrumb.Item>
+          <Breadcrumb.Item>{store.obj.name}</Breadcrumb.Item>
         </Breadcrumb>
         <div className={styles.container}>
           <div className={styles.left}>
@@ -108,7 +106,8 @@ class Index extends React.Component {
                 </Radio.Group>
               </Form.Item>
               <Form.Item label="Key">
-                <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
+                <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value}
+                       placeholder="请输入"/>
               </Form.Item>
               <Space style={{flex: 1, justifyContent: 'flex-end'}}>
                 <AuthButton

spug_web/src/pages/config/setting/store.js

@@ -10,6 +10,7 @@ class Store {
   @observable records = [];
   @observable record = {};
   @observable env = {};
+  @observable obj = {};
   @observable type;
   @observable id;
   @observable isFetching = false;
@@ -19,6 +20,15 @@ class Store {
 
   @observable f_name;
 
+  initial = (type, id) => {
+    this.type = type
+    this.id = id
+    const url = type === 'app' ? '/api/app/' : '/api/config/service/'
+    this.isFetching = true
+    return http.get(url, {params: {id}})
+      .then(res => this.obj = res)
+  }
+
   fetchRecords = () => {
     const params = {type: this.type, id: this.id, env_id: this.env.id};
     this.isFetching = true;