Merge pull request #39 from qianmoQ/1.7.0-SNAPSHOT

[Bug] Fix build table not verified

src/renderer/utils/ConvertUtils.js

@@ -5,10 +5,11 @@ const tab = '    '
 export function buildDdl(element) {
   let response = null
   if (StringUtils.isNotEmpty(element)) {
-    response = StringUtils.format('CREATE TABLE {0}.{1} (\n', [element.database, element.table.name])
-    response += StringUtils.format('{0}\n', [builderColumnsToString(element.table.columns)])
-    const engineProperty = builderEngineProperty(element.table.engine, element.table.property)
-    if (element.table.engine !== 'HDFS') {
+    response = StringUtils.format('CREATE TABLE {0}.{1} (\n',
+      [element.configure.database, element.configuration.name])
+    response += StringUtils.format('{0}\n', [builderColumnsToString(element.configuration.columns)])
+    const engineProperty = builderEngineProperty(element.configuration.engine, element.configuration.property)
+    if (element.configuration.engine !== 'HDFS') {
       if (StringUtils.isNotEmpty(engineProperty)) {
         response += StringUtils.format(') ENGINE = {0}\n SETTINGS\n', [element.type])
         response += engineProperty

src/renderer/views/Data/Metadata/index.vue

@@ -69,13 +69,12 @@
     <table-ddl :loading="ddl.visible" :title="ddl.title" :ddl="ddl.context" @close="ddl.visible = false"/>
     <delete-table :loading="loading.deleteTable" :server="treeValue.server" :database="treeValue.database"
                   :table="treeValue.table" @close="loading.deleteTable = false"/>
-    <create-table :loading="loading.createTable" :server="treeValue.server" :database="treeValue.database"
-                  @close="loading.createTable = false"/>
     <table-preview :loading="loading.tablePreview" :configuration="treeValue" @close="loading.tablePreview = false"/>
     <table-column :loading="loading.tableColumn" :configuration="treeValue"
                   @close="loading.tableColumn = false"></table-column>
     <table-rename :loading="loading.tableRename" :configuration="treeValue"
                   @close="loading.tableRename = false"></table-rename>
+    <create-table v-if="loading.createTable" :visible.sync="loading.createTable" :configure="treeValue"/>
     <add-column v-if="loading.addColumn" :visible.sync="loading.addColumn" :configure="treeValue"/>
     <delete-column v-if="loading.deleteColumn" :visible.sync="loading.deleteColumn" :configure="treeValue"/>
     <modify-column v-if="loading.modifyColumn" :visible.sync="loading.modifyColumn" :configure="treeValue"/>
@@ -93,7 +92,7 @@ import MonitorDisk from '../../components/monitor/disk'
 
 import { getQuery } from '@/services/Metadata'
 import { getDiskUsedAndRatio } from '@/services/Disk'
-import CreateTable from '../../components/table/TableCreate'
+import CreateTable from '../../components/Table/Create'
 import TablePreview from '../../components/Table/Preview'
 import TableDdl from '../../components/Table/Ddl'
 import TableColumn from '../../components/Column/Info'

src/renderer/views/components/Table/TableConfiguration.vue → src/renderer/views/components/Table/Configuration/index.vue

@@ -11,7 +11,7 @@
             <el-tag size="mini">{{ form.engine }}</el-tag>
           </el-form-item>
           <el-form-item :label="this.stringFormat('{0}{1}', [this.$t('common.table'), this.$t('common.name')])">
-            <el-input v-model="form.name"/>
+            <el-input v-model="form.name" @change="handlerValidate"/>
           </el-form-item>
           <el-divider content-position="left">{{ this.$t('common.column') }}</el-divider>
           <el-row :gutter="20">
@@ -64,8 +64,10 @@
 </template>
 
 <script>
-import TableEngineKafka from './Engines/Kafka'
-import TableEngineHdfs from './Engines/HDFS'
+import TableEngineKafka from '../Engines/Kafka'
+import TableEngineHdfs from '../Engines/HDFS'
+
+const StringUtils = require('../../../../utils/StringUtils')
 
 export default {
   name: 'TableConfiguration',
@@ -88,7 +90,8 @@ export default {
         labelWidth: '120px',
         name: null,
         engine: null,
-        columns: []
+        columns: [],
+        validate: false
       }
     }
   },
@@ -108,20 +111,39 @@ export default {
         this.form.columns.splice(index, 1)
       }
     },
-    closeDialog() {
-      this.$emit('close')
-    },
     handlerChange() {
-      this.$emit('getValue', this.form.columns)
+      this.$emit('getValue', this.form)
     },
     handlerTableEngineConfiguration(event) {
       this.form.property = event
+      this.handlerValidate()
+    },
+    handlerValidate() {
+      if (StringUtils.isNotEmpty(this.form.name) && this.form.columns.length > 0) {
+        const empty = this.form.columns.filter(column => StringUtils.isEmpty(column.name))
+        if (empty.length <= 0) {
+          if (StringUtils.isNotEmpty(this.form.property)) {
+            if (this.form.property.validate) {
+              this.form.validate = true
+            } else {
+              this.form.validate = false
+            }
+          } else {
+            this.form.validate = true
+          }
+        } else {
+          this.form.validate = false
+        }
+      } else {
+        this.form.validate = false
+      }
     }
   },
   watch: {
     form: {
       deep: true,
       handler() {
+        this.handlerValidate()
         this.$emit('change', this.form)
       }
     }

src/renderer/views/components/Table/TableCreate.vue → src/renderer/views/components/Table/Create/index.vue

@@ -1,11 +1,12 @@
 <template>
   <el-dialog
-      v-if="body.loading"
       :title="this.stringFormat('{0} {1}', [this.$t('common.add'), this.$t('common.table')])"
-      :visible.sync="body.loading" @close="closeDialog" :width="'85%'">
+      :visible.sync="visible"
+      :before-close="closeDialog"
+      :width="'85%'">
     <el-steps :active="body.step" process-status="process" finish-status="success" simple>
       <el-step :title="this.stringFormat('{0} {1}', [this.$t('common.table'), this.$t('common.type')])"/>
-      <el-step :title="this.stringFormat('{0} {1}', [this.$t('common.table'), this.$t('common.configuration')])"/>
+      <el-step :title="this.$t('common.configuration')"/>
       <el-step :title="this.stringFormat('{0} {1}', [this.$t('common.table'), this.$t('common.preview')])"/>
     </el-steps>
     <el-row v-if="body.step === 1" v-for="engineType in this.TableEngine.ENGINES" :gutter="20">
@@ -41,17 +42,17 @@
         </el-col>
         <el-col :span="16">
           <el-form size="mini">
-            <el-form-item :label-width="form.table.labelWidth">
+            <el-form-item :label-width="form.configuration.labelWidth">
               <template slot="label">
                 {{ stringFormat('{0}{1}', [this.$t('common.table'), this.$t('common.name')]) }}
               </template>
-              <el-tag size="mini">{{ form.table.name }}</el-tag>
+              <el-tag size="mini">{{ form.configuration.name }}</el-tag>
             </el-form-item>
-            <el-form-item :label-width="form.table.labelWidth"
+            <el-form-item :label-width="form.configuration.labelWidth"
                           :label="this.stringFormat('{0}{1}', [this.$t('common.table'), this.$t('common.engine')])">
-              <el-tag size="mini">{{ form.table.engine }}</el-tag>
+              <el-tag size="mini">{{ form.configuration.engine }}</el-tag>
             </el-form-item>
-            <el-form-item :label-width="form.table.labelWidth">
+            <el-form-item :label-width="form.configuration.labelWidth">
               <template slot="label">
                 {{ stringFormat('{0}{1}', [this.$t('common.table'), this.$t('common.ddl')]) }}
               </template>
@@ -65,12 +66,11 @@
       </el-row>
     </el-row>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="closeDialog" size="mini">{{ this.$t('common.cancel') }}</el-button>
       <el-button v-if="body.previous" plain type="primary" size="mini" @click="handlerPrevious"> {{
           this.$t('common.previous')
         }}
       </el-button>
-      <el-button v-if="body.next" plain type="primary" size="mini" @click="handlerNext"> {{
+      <el-button v-if="body.next" :disabled="body.disabled" plain type="primary" size="mini" @click="handlerNext"> {{
           this.$t('common.next')
         }}
       </el-button>
@@ -83,30 +83,27 @@
 </template>
 
 <script>
-import TableConfiguration from './TableConfiguration'
+import TableConfiguration from '../Configuration'
 import { createTable } from '@/services/Table'
-import { buildDdl } from '../../../utils/ConvertUtils'
+import { buildDdl } from '../../../../utils/ConvertUtils'
 
 export default {
   name: 'CreateTable',
   components: {
     TableConfiguration
   },
   props: {
-    loading: {
+    visible: {
       type: Boolean,
       default: false
     },
-    server: {
-      type: String,
-      default: ''
-    },
-    database: {
-      type: String,
-      default: ''
+    configure: {
+      type: Object,
+      default: {}
     }
   },
   created() {
+    this.form.configure = this.configure
   },
   data() {
     return {
@@ -116,15 +113,15 @@ export default {
         next: true,
         previous: false,
         complete: false,
+        disabled: false,
         ddl: '',
         create: false
       },
       form: {
         type: 'Log',
-        database: null,
-        table: null
-      },
-      remoteServer: null
+        configure: {},
+        configuration: {}
+      }
     }
   },
   methods: {
@@ -136,6 +133,11 @@ export default {
         this.body.complete = true
         this.body.ddl = buildDdl(this.form)
       }
+      if (this.form.configuration && !this.form.configuration.validate) {
+        this.body.disabled = true
+      } else {
+        this.body.disabled = false
+      }
     },
     handlerPrevious() {
       this.body.step--
@@ -145,14 +147,20 @@ export default {
       }
       if (this.body.step === 1) {
         this.body.previous = false
+        this.body.disabled = false
       }
     },
     handlerGetConfiguration(event) {
-      this.form.table = event
+      this.form.configuration = event
+      if (this.form.configuration && !this.form.configuration.validate) {
+        this.body.disabled = true
+      } else {
+        this.body.disabled = false
+      }
     },
     handlerComplete() {
       this.body.create = true
-      createTable(this.remoteServer, this.body.ddl).then(response => {
+      createTable(this.configure.server, this.body.ddl).then(response => {
         if (response.status) {
           this.$notify.success({
             title: this.$t('common.success'),
@@ -169,28 +177,9 @@ export default {
       })
     },
     closeDialog() {
-      this.$emit('close')
+      this.$emit('update:visible', false)
     }
   },
-  watch: {
-    loading: {
-      deep: true,
-      handler() {
-        this.body.loading = this.loading
-      }
-    },
-    server: {
-      deep: true,
-      handler() {
-        this.remoteServer = this.server
-      }
-    },
-    database: {
-      deep: true,
-      handler() {
-        this.form.database = this.database
-      }
-    }
-  }
+  watch: {}
 }
 </script>

src/renderer/views/components/Table/Engines/HDFS/index.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+const StringUtils = require('../../../../../utils/StringUtils')
+
 export default {
   name: 'TableEngineHdfs',
   components: {},
@@ -20,15 +22,26 @@ export default {
     return {
       hdfs: {
         uri: '',
-        format: 'Parquet' // Current Only support Parquet file
+        format: 'Parquet', // Current Only support Parquet file
+        validate: false
+      }
+    }
+  },
+  methods: {
+    handlerValidate() {
+      const empty = Object.keys(this.hdfs).filter(item => StringUtils.isEmpty(this.hdfs[item]))
+      if (empty.length <= 0) {
+        this.hdfs.validate = true
+      } else {
+        this.hdfs.validate = false
       }
     }
   },
-  methods: {},
   watch: {
     hdfs: {
       deep: true,
       handler() {
+        this.handlerValidate()
         this.$emit('change', this.hdfs)
       }
     }

src/renderer/views/components/Table/Engines/Kafka/index.vue

@@ -16,6 +16,8 @@
 </template>
 
 <script>
+const StringUtils = require('../../../../../utils/StringUtils')
+
 export default {
   name: 'TableEngineKafka',
   components: {},
@@ -28,15 +30,26 @@ export default {
         broker: null,
         topic: null,
         group: null,
-        format: 'JSONEachRow'
+        format: 'JSONEachRow',
+        validate: false
+      }
+    }
+  },
+  methods: {
+    handlerValidate() {
+      const empty = Object.keys(this.kafka).filter(item => StringUtils.isEmpty(this.kafka[item]))
+      if (empty.length <= 0) {
+        this.kafka.validate = true
+      } else {
+        this.kafka.validate = false
       }
     }
   },
-  methods: {},
   watch: {
     kafka: {
       deep: true,
       handler() {
+        this.handlerValidate()
         this.$emit('change', this.kafka)
       }
     }