feature: add schema module

sharding-ui-frontend/src/lang/en-US.js

@@ -18,7 +18,8 @@ export default {
       conSucMessage: 'Connection succeeded',
       conFailMessage: 'Connection failed',
       delSucMessage: 'Delete succeeded',
-      delFailMessage: 'Delete failed'
+      delFailMessage: 'Delete failed',
+      updateCompletedMessage: 'Update completed'
     }
   },
   login: {

sharding-ui-frontend/src/lang/zh-CN.js

@@ -18,7 +18,8 @@ export default {
       conSucMessage: '连接成功',
       conFailMessage: '连接失败',
       delSucMessage: '删除成功',
-      delFailMessage: '删除失败'
+      delFailMessage: '删除失败',
+      updateCompletedMessage: '更新成功'
     }
   },
   login: {

sharding-ui-frontend/src/utils/api.js

 import axios from 'axios'
 import jsonp from 'jsonp'
-import qs from 'qs'
+// import qs from 'qs'
 // import {
 //   Message
 // } from 'element-ui'
@@ -15,10 +15,11 @@ const configData = (type, params) => {
     // params = qs.stringify(params)
     return params
   } else if (type === 'put') {
-    return qs.stringify({
-      ...params,
-      _method: 'put'
-    })
+    // return qs.stringify({
+    //   ...params,
+    //   _method: 'put'
+    // })
+    return params
   } else if (type === 'delete') {
     // return qs.stringify({
     //   ...params,

sharding-ui-frontend/src/views/config-manage/api.js

+import API from '@/utils/api'
+
+export default {
+  // schema start
+  getSchema: (params = {}) => API.get(`/api/schema`, params),
+  getSchemaRule: (schemaName) => API.get(`/api/schema/rule/${schemaName}`),
+  putSchemaRule: (schemaName, params = {}) => API.put(`/api/schema/rule/${schemaName}`, params),
+  getSchemaDataSource: (schemaName) => API.get(`/api/schema/datasource/${schemaName}`),
+  putSchemaDataSource: (schemaName, params = {}) => API.put(`/api/schema/datasource/${schemaName}`, params)
+}

sharding-ui-frontend/src/views/config-manage/index.vue

@@ -7,218 +7,24 @@
         <el-radio-button label="configmap"/>
         <el-radio-button label="props"/>
       </el-radio-group>
-      <el-tree :data="data" :props="defaultProps" class="tree-wrap" @node-click="handleNodeClick"/>
-    </el-card>
-    <el-card>
-      <el-row>
-        <el-col :span="12">
-          <el-input
-            :rows="50"
-            v-model="textarea"
-            type="textarea"
-            placeholder="请输入内容"/>
-        </el-col>
-        <el-col :span="12">
-          <el-input
-            :rows="50"
-            v-model="textarea2"
-            type="textarea"
-            readonly
-            placeholder="请输入内容"/>
-        </el-col>
-      </el-row>
+      <m-schema/>
     </el-card>
   </s-container>
 </template>
 <script>
 import yaml from 'js-yaml'
 import SContainer from '@/components/Container/index.vue'
+import MSchema from './module/schema'
 
 export default {
   name: 'ConfigManage',
   components: {
-    SContainer
+    SContainer,
+    MSchema
   },
   data() {
     return {
-      radioValue: 'schema',
-      data: [],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      textarea: `---
-# Collection Types #############################################################
-################################################################################
-
-# http://yaml.org/type/map.html -----------------------------------------------#
-
-map:
-  # Unordered set of key: value pairs.
-  Block style: !!map
-    Clark : Evans
-    Ingy  : döt Net
-    Oren  : Ben-Kiki
-  Flow style: !!map { Clark: Evans, Ingy: döt Net, Oren: Ben-Kiki }
-
-# http://yaml.org/type/omap.html ----------------------------------------------#
-
-omap:
-  # Explicitly typed ordered map (dictionary).
-  Bestiary: !!omap
-    - aardvark: African pig-like ant eater. Ugly.
-    - anteater: South-American ant eater. Two species.
-    - anaconda: South-American constrictor snake. Scaly.
-    # Etc.
-  # Flow style
-  Numbers: !!omap [ one: 1, two: 2, three : 3 ]
-
-# http://yaml.org/type/pairs.html ---------------------------------------------#
-
-pairs:
-  # Explicitly typed pairs.
-  Block tasks: !!pairs
-    - meeting: with team.
-    - meeting: with boss.
-    - break: lunch.
-    - meeting: with client.
-  Flow tasks: !!pairs [ meeting: with team, meeting: with boss ]
-
-# http://yaml.org/type/set.html -----------------------------------------------#
-
-set:
-  # Explicitly typed set.
-  baseball players: !!set
-    ? Mark McGwire
-    ? Sammy Sosa
-    ? Ken Griffey
-  # Flow style
-  baseball teams: !!set { Boston Red Sox, Detroit Tigers, New York Yankees }
-
-# http://yaml.org/type/seq.html -----------------------------------------------#
-
-seq:
-  # Ordered sequence of nodes
-  Block style: !!seq
-  - Mercury   # Rotates - no light/dark sides.
-  - Venus     # Deadliest. Aptly named.
-  - Earth     # Mostly dirt.
-  - Mars      # Seems empty.
-  - Jupiter   # The king.
-  - Saturn    # Pretty.
-  - Uranus    # Where the sun hardly shines.
-  - Neptune   # Boring. No rings.
-  - Pluto     # You call this a planet?
-  Flow style: !!seq [ Mercury, Venus, Earth, Mars,      # Rocks
-                      Jupiter, Saturn, Uranus, Neptune, # Gas
-                      Pluto ]                           # Overrated
-
-
-# Scalar Types #################################################################
-################################################################################
-
-# http://yaml.org/type/bool.html ----------------------------------------------#
-
-bool:
-  - true
-  - True
-  - TRUE
-  - false
-  - False
-  - FALSE
-
-# http://yaml.org/type/float.html ---------------------------------------------#
-
-float:
-  canonical: 6.8523015e+5
-  exponentioal: 685.230_15e+03
-  fixed: 685_230.15
-  sexagesimal: 190:20:30.15
-  negative infinity: -.inf
-  not a number: .NaN
-
-# http://yaml.org/type/int.html -----------------------------------------------#
-
-int:
-  canonical: 685230
-  decimal: +685_230
-  octal: 02472256
-  hexadecimal: 0x_0A_74_AE
-  binary: 0b1010_0111_0100_1010_1110
-  sexagesimal: 190:20:30
-
-# http://yaml.org/type/merge.html ---------------------------------------------#
-
-merge:
-  - &CENTER { x: 1, y: 2 }
-  - &LEFT { x: 0, y: 2 }
-  - &BIG { r: 10 }
-  - &SMALL { r: 1 }
-  
-  # All the following maps are equal:
-  
-  - # Explicit keys
-    x: 1
-    y: 2
-    r: 10
-    label: nothing
-  
-  - # Merge one map
-    << : *CENTER
-    r: 10
-    label: center
-  
-  - # Merge multiple maps
-    << : [ *CENTER, *BIG ]
-    label: center/big
-  
-  - # Override
-    << : [ *BIG, *LEFT, *SMALL ]
-    x: 1
-    label: big/left/small
-
-# http://yaml.org/type/null.html ----------------------------------------------#
-
-null:
-  # This mapping has four keys,
-  # one has a value.
-  empty:
-  canonical: ~
-  english: null
-  ~: null key
-  # This sequence has five
-  # entries, two have values.
-  sparse:
-    - ~
-    - 2nd entry
-    -
-    - 4th entry
-    - Null
-
-# http://yaml.org/type/str.html -----------------------------------------------#
-
-string: abcd
-
-# http://yaml.org/type/timestamp.html -----------------------------------------#
-
-timestamp:
-  canonical:        2001-12-15T02:59:43.1Z
-  valid iso8601:    2001-12-14t21:59:43.10-05:00
-  space separated:  2001-12-14 21:59:43.10 -5
-  no time zone (Z): 2001-12-15 2:59:43.10
-  date (00:00:00Z): 2002-12-14
-
-`
-    }
-  },
-  computed: {
-    textarea2() {
-      return JSON.stringify(yaml.safeLoad(this.textarea), null, '\t')
-    }
-  },
-  methods: {
-    handleNodeClick(data) {
-      console.log(data)
+      radioValue: 'schema'
     }
   }
 }

sharding-ui-frontend/src/views/config-manage/module/schema.vue

+<template>
+  <div class="schema">
+    <el-row :gutter="10">
+      <el-col v-for="(item, index) in schemaData" :key="index" :span="Math.ceil(24 / schemaData.length)">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>{{ item.title }}</span>
+          </div>
+          <div v-for="(itm, idex) in item.children" :key="idex" class="coll-item" >
+            <div :class="'itm icon-' + idex"/>
+            <div class="txt">{{ itm }}</div>
+            <el-button
+              type="primary"
+              icon="el-icon-edit"
+              size="mini"
+              circle
+              class="edit-btn"
+              @click="handlerClick(item.title, itm)"/>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-dialog
+      :visible.sync="centerDialogVisible"
+      :title="type + '编辑'"
+      width="80%">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <span style="font-size: 18px; font-weight: bold;">Edit source here:</span>
+          <el-input
+            :rows="20"
+            v-model="textarea"
+            type="textarea"
+            placeholder="请输入内容"
+            class="edit-text"/>
+        </el-col>
+        <el-col :span="12">
+          <span style="font-size: 18px; font-weight: bold;">Result (JS object dump):</span>
+          <el-input
+            :rows="20"
+            v-model="textarea2"
+            type="textarea"
+            readonly
+            placeholder="请输入内容"
+            class="show-text"/>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import yaml from 'js-yaml'
+import API from '../api'
+
+export default {
+  name: 'Schema',
+  data() {
+    return {
+      treeData: [],
+      textarea: ``,
+      schemaData: [],
+      centerDialogVisible: false,
+      type: null,
+      sname: '',
+      scname: ''
+    }
+  },
+  computed: {
+    textarea2() {
+      return JSON.stringify(yaml.safeLoad(this.textarea), null, '\t')
+    }
+  },
+  created() {
+    this.getSchema()
+  },
+  methods: {
+    handlerClick(parent, child) {
+      if (child === 'rule') {
+        API.getSchemaRule(parent).then((res) => {
+          this.sname = parent
+          this.scname = child
+          this.textarea = res.model
+          this.type = `${parent}-${child}`
+          this.centerDialogVisible = true
+        })
+      } else {
+        API.getSchemaDataSource(parent).then((res) => {
+          this.sname = parent
+          this.scname = child
+          this.textarea = res.model
+          this.type = `${parent}-${child}`
+          this.centerDialogVisible = true
+        })
+      }
+    },
+    getSchema() {
+      API.getSchema().then((res) => {
+        const data = res.model
+        const base = ['rule', 'datasource']
+        const newData = []
+        for (const v of data) {
+          newData.push({
+            title: v,
+            children: base
+          })
+        }
+        this.schemaData = newData
+      })
+    },
+    onConfirm() {
+      if (this.scname === 'rule') {
+        API.putSchemaRule(this.sname, { ruleConfig: this.textarea }).then((res) => {
+          if (res.success) {
+            this.$notify({
+              title: this.$t('common').notify.title,
+              message: this.$t('common').notify.updateCompletedMessage,
+              type: 'success'
+            })
+            this.centerDialogVisible = false
+          }
+        })
+      } else {
+        API.putSchemaDataSource(this.sname, { dataSourceConfig: this.textarea }).then((res) => {
+          if (res.success) {
+            this.$notify({
+              title: this.$t('common').notify.title,
+              message: this.$t('common').notify.updateCompletedMessage,
+              type: 'success'
+            })
+            this.centerDialogVisible = false
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang='scss'>
+  .schema {
+    margin-top: 20px;
+    .coll-item {
+      height: 32px;
+      line-height: 32px;
+      width: 100%;
+      float: left;
+      margin-bottom: 10px;
+      .txt {
+        color: rgb(51, 51, 51);
+        font-size: 14px;
+        padding-left: 10px;
+        float: left;
+        margin-right: 10px;
+      }
+      .itm {
+        float: left;
+        width: 32px;
+        height: 32px;
+      }
+      .icon-0 {
+        background: url('../../../assets/img/rules.png') no-repeat left center;
+      }
+      .icon-1 {
+        background: url('../../../assets/img/data-source.png') no-repeat left center;
+      }
+      .edit-btn {
+        float: right;
+      }
+    }
+    .el-collapse-item__header {
+      font-size: 16px
+    }
+    .edit-text {
+      margin-top: 5px;
+      textarea {
+        background: #fffffb;
+      }
+    }
+    .show-text {
+      margin-top: 5px;
+      textarea {
+        background: rgb(246, 246, 246);
+      }
+    }
+  }
+</style>