Add connection monitor

src/renderer/i18n/en_US.js

@@ -53,7 +53,8 @@ export default {
     query: 'Query',
     history: 'History',
     clear: 'Clear',
-    notification: 'Notification'
+    notification: 'Notification',
+    connection: 'Connection'
   },
   prompt: {
     component: {

src/renderer/i18n/zh_CN.js

@@ -53,7 +53,8 @@ export default {
     query: '查询',
     history: '历史',
     clear: '清除',
-    notification: '通知'
+    notification: '通知',
+    connection: '连接'
   },
   prompt: {
     component: {

src/renderer/router/index.js

@@ -85,9 +85,15 @@ export const constantRouterMap = [
       {
         path: 'processor',
         name: 'Processor',
-        new: true,
         component: () => import('@/views/monitor/processor'),
         meta: { title: i18n.t('common.processor'), icon: 'bullseye' }
+      },
+      {
+        path: 'connection',
+        name: 'Connection',
+        new: true,
+        component: () => import('@/views/monitor/connection'),
+        meta: { title: i18n.t('common.connection'), icon: 'compress' }
       }
     ]
   },

src/renderer/services/Common.js

@@ -0,0 +1,19 @@
+import { runExecute } from '@/api/query'
+import { getServerURL, getDataSource } from '@/utils/Utils'
+import Response from '@/store/modules/Response'
+
+export async function getResponse(server, sql) {
+  const dataSource = getDataSource(server)
+  const remoteServer = getServerURL(dataSource[0].host, dataSource[0].port, null)
+  const result = new Response()
+  await runExecute(remoteServer, sql).then(response => {
+    if (response.status === 200) {
+      result.columns = response.data.data
+      result.status = true
+    }
+  }).catch(response => {
+    result.message = response.data
+    result.status = false
+  })
+  return result
+}

src/renderer/services/Monitor.js

@@ -1,16 +1,11 @@
-import { runExecute } from '@/api/query'
-import { getServerURL, getDataSource } from '@/utils/Utils'
-import Response from '@/store/modules/Response'
+import { getResponse } from '@/services/Common'
 
 /**
  * Get processes from server
  * @param {*} server remote server
  * @returns common response
  */
 export async function getProcesses(server) {
-  const dataSource = getDataSource(server)
-  const remoteServer = getServerURL(dataSource[0].host, dataSource[0].port, null)
-  const result = new Response()
   const querySql = 'SELECT ' +
     'query_id AS id, ' +
     'now() AS time, ' +
@@ -26,14 +21,16 @@ export async function getProcesses(server) {
     'hostName() AS host ' +
     'FROM system.processes ' +
     'WHERE round(elapsed,1) > 0'
-  await runExecute(remoteServer, querySql).then(response => {
-    if (response.status === 200) {
-      result.columns = response.data.data
-      result.status = true
-    }
-  }).catch(response => {
-    result.message = response.data
-    result.status = false
-  })
-  return result
+  return await getResponse(server, querySql)
+}
+
+export async function getConnections(server) {
+  const querySql = 'SELECT ' +
+    'metric, ' +
+    'SUM(value) AS value ' +
+    'FROM system.metrics ' +
+    'WHERE metric LIKE \'%Connection\' ' +
+    'GROUP BY metric ' +
+    'ORDER BY metric DESC'
+  return await getResponse(server, querySql)
 }

src/renderer/views/monitor/connection/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-form :inline="true" :model="form" size="mini">
+        <el-form-item :label="this.$t('common.server')">
+          <data-source-select
+            v-if="getLengthGtZore(selectServers)"
+            :items="selectServers"
+            @getValue="handlerServer"
+            :placeholder="'ClickHouse Server'">
+          </data-source-select>
+          <span v-if="form.auto">
+            <i class="fa fa-spin fa-spinner"></i>
+            {{ this.$t('common.refresh') + this.$t('common.time') }} <el-tag size="mini"> {{ this.refreshTime }}</el-tag>
+          </span>
+        </el-form-item>
+        <el-form-item :label="this.$t('common.auto')" style="float: right;">
+          <el-switch v-model="form.auto" :disabled="disabled" @change="handlerAuto"></el-switch>
+        </el-form-item>
+        <el-form-item :label="this.$t('common.threshold')" style="float: right;">
+          <el-input-number v-model="form.threshold" :disabled="form.auto" :min="1" :max="10"></el-input-number>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row v-if="getLengthGtZore(tableDatas)" :gutter="20">
+      <div v-for="info in tableDatas" :key="info.metric">
+        <el-col :span="6">
+            <el-card class="box-card">
+              <div slot="header" class="clearfix">
+                {{ info.metric }}
+              </div>
+              <div style="font-size: 20px; text-align: center;">
+                {{ info.value }}
+              </div>
+            </el-card>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import DataSourceSelect from '@/views/components/data/datasource/DataSourceSelect'
+import { getDataSources } from '@/services/DataSource'
+import { getConnections } from '@/services/Monitor'
+
+export default {
+  components: {
+    DataSourceSelect
+  },
+  data() {
+    return {
+      tableDatas: [],
+      selectServerValue: null,
+      timer: 0,
+      refreshTime: 0,
+      form: {
+        threshold: 2,
+        auto: false
+      },
+      disabled: true
+    }
+  },
+  created() {
+    this._initialize()
+  },
+  methods: {
+    _initialize() {
+      this.selectServers = getDataSources(null).columns
+    },
+    async handlerServer(value) {
+      this.selectServerValue = value
+      const response = await getConnections(this.selectServerValue)
+      if (!response.status) {
+        this.$notify.error({
+          title: 'Error',
+          message: response.message
+        })
+      } else {
+        this.tableDatas = response.columns
+      }
+      this.disabled = false
+    },
+    handlerAuto() {
+      if (this.form.auto) {
+        this.timer = setInterval(() => {
+          this.handlerServer(this.selectServerValue)
+          this.refreshTime = (new Date()).valueOf()
+        }, this.form.threshold * 1000)
+      } else {
+        clearInterval(this.timer)
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+  watch: {
+    chartOptions: {}
+  }
+}
+</script>