Merge pull request #22 from wd94/v1.3pr

Author: Jialin Qiao

frontend/package-lock.json

@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta http-equiv="pragram" content="no-cache">
+    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="expires" content="0">
     <link rel="icon" href="<%= BASE_URL %>iotdb.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script type="text/javascript" src="<%= BASE_URL %>iconfont.js"></script>

frontend/public/index.html

@@ -18,9 +18,50 @@
 -->
 
 <template>
-  <router-view />
+  <el-config-provider :locale="language">
+    <router-view />
+  </el-config-provider>
 </template>
 
+<script>
+import { ref, watch, nextTick } from 'vue';
+import { ElConfigProvider } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import enLocale from 'element-plus/lib/locale/lang/en';
+import deLocale from 'element-plus/lib/locale/lang/de';
+import zhLocale from 'element-plus/lib/locale/lang/zh-cn';
+
+export default {
+  name: 'App',
+  components: {
+    ElConfigProvider,
+  },
+  setup() {
+    const map = {
+      [enLocale.name]: enLocale,
+      [deLocale.name]: deLocale,
+      [zhLocale.name]: zhLocale,
+    };
+    let { locale } = useI18n();
+    let language = ref(map[locale.value]);
+    function useLanguageWatch(refValue, callback) {
+      let { locale } = useI18n();
+      watch(locale, () => {
+        refValue.value = map[locale.value];
+        nextTick(() => {
+          refValue.value = callback();
+        });
+      });
+    }
+    useLanguageWatch(language, () => {
+      return map[locale.value];
+    });
+    return {
+      language,
+    };
+  },
+};
+</script>
 <style lang="scss">
 #app {
   -webkit-font-smoothing: antialiased;

frontend/src/App.vue

@@ -23,7 +23,7 @@ IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or imp
         :suffix-icon="item.suffixIcon"
         :prefix-icon="item.prefixIcon"
       >
-        <template #prepend v-if="item.inputHeader">{{ formData[item.inputHeaderText] }}</template>
+        <template #prepend v-if="item.inputHeader">{{ typeof item.inputHeaderText === 'function' ? item.inputHeaderText(formData, item) : formData[item.inputHeaderText] }}</template>
       </el-input>
       <el-select
         v-if="item.type === 'SELECT'"

frontend/src/components/FormTable.vue

@@ -30,7 +30,10 @@ IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or imp
             <svg v-if="iconArr.icon[item.icon]" :class="['icon', { 'icon-time': item.icon === 'TIME' }]" @click="sqlClick" aria-hidden="true">
               <use :xlink:href="`#icon-${iconArr.icon[item.icon]}`"></use>
             </svg>
-            <span :style="{ 'margin-left': iconArr.icon[item.icon] ? '5px' : '' }">{{ $t(item.label) }}</span>
+            <span :style="{ 'margin-left': iconArr.icon[item.icon] ? '5px' : '' }" :class="[{ closable: !!item.closable }]" :title="$t(item.label)"
+              >{{ $t(item.label) }}
+              <span class="el-icon-close" v-on:click="item.closable(item)"></span>
+            </span>
             <i :class="item.icon" style="margin-left: 4px" @click="iconEvent(item.iconNum)"></i>
           </template>
           <template #default="scope">
@@ -40,7 +43,7 @@ IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or imp
               :size="item.size"
               :class="{ borderRed: (scope.row.namecopy || !scope.row[item.prop]) && scope.row.border && item.border }"
               :placeholder="$t('device.inputTip') + $t(item.label)"
-              @blur="item.event(scope, scope.row, scope.row[item.prop], $event)"
+              @blur="item.event(scope, scope.row, scope.row[item.prop], $event, item)"
             >
             </el-input>
             <el-input
@@ -382,6 +385,23 @@ export default {
   line-height: 0px;
   min-height: 0 !important;
 }
+.el-icon-close {
+  display: none;
+  position: absolute;
+  top: 5px;
+  cursor: pointer;
+}
+.closable {
+  &:hover > .el-icon-close {
+    display: inline-block;
+    position: absolute;
+    top: 5px;
+    cursor: pointer;
+  }
+}
+:deep(.el-table) th > .cell {
+  white-space: nowrap;
+}
 </style>
 <style lang="scss">
 .borderRed {

frontend/src/components/StandTable.vue

@@ -1,3 +1,21 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+-->
 <template>
   <div class="tree-select-wraper">
     <el-select v-model="mineStatus" :placeholder="placeholder" multiple collapse-tags @change="changeSelect" style="width: 100%">

frontend/src/components/TreeSelect.vue

@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+function useLanguageWatch(refValue, callback) {
+  let { locale } = useI18n();
+  watch(locale, () => {
+    refValue.value = [];
+    nextTick(() => {
+      refValue.value = callback();
+    });
+  });
+}
+
+export default useLanguageWatch;

…iews/DataBaseM/hooks/useElementResize.js frontend/src/hooks/useElementResize.js.jsfrontend/src/views/DataBaseM/hooks/useElementResize.js renamed to frontend/src/hooks/useElementResize.js.js frontend/src/views/DataBaseM/hooks/useElementResize.js renamed to frontend/src/hooks/useElementResize.js.js

@@ -25,9 +25,9 @@ const cn = {
     about: {
       'line-2': '关于我们',
       'line-3': 'IoTDB的可视化管理工具',
-      'line-4': 'IoTDB Admin是IoTDB的可视化管理工具，可对IoTDB的数据进行增删改查、权限控制等，简化IoTDB的使用及学习成本。',
+      'line-4': 'IoTDB WorkBench是IoTDB的可视化管理工具，可对IoTDB的数据进行增删改查、权限控制等，简化IoTDB的使用及学习成本。',
       'line-5': `在我们心中IoTDB是最棒的时序数据库之一，我们将一直不遗余力地推动国产时序数据库IoTDB的应用和发展，为本土开源能力的提高、开源生态的发展，贡献自己的力量，欢迎大家加入IoTDB
-      Admin的开发及维护，期待你的加入：`,
+      WorkBench的开发及维护，期待你的加入：`,
       'line-6-text': '微信扫一扫',
       'line-7': '版本号: V0.12',
       'back-btn': '返回工作页面',
@@ -45,6 +45,18 @@ const cn = {
       tip: '提示',
       deleteSuccess: '删除成功',
       add: '新增',
+      placeHolder: '请输入',
+      selectPlaceholder: '请选择',
+      survival: '存活',
+      death: '死机',
+      port: '端口',
+      refresh: '刷新',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      all: '全部',
+      success: '成功',
+      fail: '失败',
+      query: '查询',
     },
     databasem: {
       newStoreGroup: '新建存储组',
@@ -65,6 +77,7 @@ const cn = {
       nodatasource: '目前还没有数据连接，请',
       newQueryWindow: '查询',
       feedback: '问题反馈',
+      monitorManagement: '监控管理',
     },
     loginPage: {
       account: '账号',
@@ -74,13 +87,13 @@ const cn = {
       forgetPassWord: '忘记密码',
       signIn: '登录',
       forgetPassword: '忘记密码',
-      forgetPasswordTip: '请联系系统管理员',
+      forgetPasswordTip: '请联系系统管理员 WeChat:loveher147',
       accountEmptyTip: '账号不能为空',
       accountContentTip: '用户名必须由字母、数字、下划线组成，不能以数字和下划线开始',
       accountLengthTip: '用户名必须大于等于3个字符，小于等于32字符',
       passwordEmptyTip: '密码不能为空',
       passwordLenghtTip: '密码必须大于等于6位，请检查密码位数',
-      welcomeLogin: '欢迎登录IoTDB数据库管理系统',
+      welcomeLogin: '欢迎登录 IoTDB WorkBench',
       loginErrorTip: '用户名或密码不正确，请重新输入',
     },
 
@@ -415,6 +428,80 @@ const cn = {
       deleteArry: '批量删除',
       importTip: '导入成功',
     },
+    controlPage: {
+      dataList: '数据列表',
+      address: '主机或 IP 地址',
+      storage: '存储组数量',
+      entity: '实体数量',
+      physics: '物理量数量',
+      total: '数据总量',
+      monitor: '监控指标',
+      search: '查询统计',
+      allMode: '全部模式',
+      devMode: '开发者模式',
+      opeMode: '运维者模式',
+      chartBtn: '图表面板',
+      listBtn: '列表面板',
+      jvm: 'JVM指标',
+      cpu: 'CPU指标',
+      memory: '内存指标',
+      store: '存储指标',
+      write: '写入指标',
+      isearch: '查询指标',
+      iName: '指标名称',
+      iType: '指标类型',
+      zxjg: '最新结果发生时间',
+      zxzb: '最新指标结果',
+      sql: 'SQL语句',
+      runTime: '运行时间',
+      exeTime: '执行时间(s)',
+      slowSearch: '慢查询',
+      lastTime: '最近一次运行时间',
+      runCount: '运行次数',
+      querySentence: '查询语句',
+      exeResult: '执行结果',
+      downloadLog: '日志下载',
+      totalUseTime: '总耗时 (ms)',
+      garmmarUseTime: '语法耗时 (ms)',
+      ybyUseTime: '预编译耗时 (ms)',
+      yhbyUseTime: '优化编译耗时 (ms)',
+      exeUseTime: '执行耗时 (ms)',
+
+      JVMThread: 'JVM 指标-线程',
+      JVMRecycle: 'JVM 指标-垃圾回收',
+      JVMMemory: 'JVM 指标-内存',
+      JVMClasses: 'JVM 指标-classes',
+
+      selectMetrics: '请选择指标类型',
+
+      GCEchart: 'GC发生次数及耗时(以分钟计算最近15分钟)',
+      JVMClassEchart: 'JVM卸载/加载的class数量',
+      YGCEchart: 'YGC发生原因及耗时',
+      FGCEchart: 'FGC发生原因及耗时',
+      JAVATypeEchart: 'java各类型线程数',
+      JAVATimeEchart: 'java各时间段线程数',
+      MemoryEchart: '内存使用大小',
+      BufferEchart: '缓冲区使用大小',
+      CPUEchart: 'CPU time占比',
+      IOEchart: '磁盘 IO 吞吐',
+      FileCountEchart: '文件数量统计',
+      FileSizeEchart: '文件大小统计',
+      WriteEchart: '写入成功失败统计及耗时',
+      SearchEchart: '查询成功失败统计',
+      ApiEchart: '接口耗时',
+      ApiQPSEchart: '接口 QPS',
+
+      fgcCount: 'fgc次数',
+      ygcCount: 'ygc次数',
+      fgcTime: 'fgc耗时',
+      ygcTime: 'ygc耗时',
+
+      Ptotal: '共',
+      Pentries: '条',
+      EachPage: '每页',
+      slow: '慢',
+      nodata: '无数据',
+    },
   },
 };