Modify MySQL page of monitoring center (#1138)

* Dependency workflow add dependency correction value

* Download workflow instance map width adjustment and change "desc" field to "description"

* The third-party library that builds the dependency is recommended to be placed in 'devDependencies'

* Tree chart and Gantt chart style modification

* The workflow instance can be deleted only when its status is success, failure, stop and pause.

* change desc to description

* Maximum width of tooltip is set to 500px, note the copyright number of login page

* Delete copyright number

* No tenant in the list of selected tenants the default is default, and the status not shown in the repair page

* repair

* Repair security center module prompt

* Remove blank character during verification

* Remove blank character during verification

* Non admin users cannot create users, tenants, alarm groups, queues and worker groups

* Remove CI windows detection

* The value of loadaverage should be two decimal places

* Add license

* delete docs

* update package.json

* delete LICENSE

* Display icon when there is no data in process definition

* Worker group add IP format verification

* Modify MySQL page of monitoring center

dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue

@@ -0,0 +1,146 @@
+/*
+ * 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>
+    <div class="servers-wrapper mysql-model" v-show="mysqlList.length">
+      <div class="row" v-for="(item,$index) in mysqlList">
+        <div class="col-md-12">
+          <div class="content-title">
+            <span>{{item.dbType}}</span>
+          </div>
+        </div>
+        <div class="col-md-3">
+          <div class="text-num-model text">
+            <div class="title">
+              <span>{{$t('Health status')}}</span>
+            </div>
+            <div class="value-p">
+              <span class="state">
+                <i class="iconfont success" v-if="item.state">&#xe607;</i>
+                <i class="iconfont error" v-else>&#xe626;</i>
+              </span>
+            </div>
+            <div class="text-1">{{$t('Health status')}}</div>
+          </div>
+        </div>
+        <div class="col-md-3">
+          <div class="text-num-model text">
+            <div class="title">
+              <span>{{$t('Max connections')}} - {{item.date | formatDate}}</span>
+            </div>
+            <div class="value-p">
+              <b :style="{color:color[0]}">{{item.maxConnections}}</b>
+            </div>
+            <div class="text-1">{{$t('Max connections')}}</div>
+          </div>
+        </div>
+        <div class="col-md-3">
+          <div class="text-num-model text">
+            <div class="title">
+              <span>{{$t('Threads connections')}}</span>
+            </div>
+            <div class="value-p">
+              <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
+            </div>
+            <div class="text-1">{{$t('Threads connections')}}</div>
+          </div>
+        </div>
+        <!-- <div class="col-md-2">
+            <div class="text-num-model text">
+              <div class="title">
+                <span>{{$t('Max used connections')}}</span>
+              </div>
+              <div class="value-p">
+                <b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
+              </div>
+              <div class="text-1">
+                {{$t('Max used connections')}}
+              </div>
+            </div>
+        </div>-->
+        <div class="col-md-3">
+          <div class="text-num-model text">
+            <div class="title">
+              <span>{{$t('Threads running connections')}}</span>
+            </div>
+            <div class="value-p">
+              <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
+            </div>
+            <div class="text-1">{{$t('Threads running connections')}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="!mysqlList.length">
+      <m-no-data></m-no-data>
+    </div>
+    <m-spin :is-spin="isLoading"></m-spin>
+  </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+import mList from "./_source/zookeeperList";
+import mSpin from "@/module/components/spin/spin";
+import mNoData from "@/module/components/noData/noData";
+import themeData from "@/module/echarts/themeData.json";
+import mListConstruction from "@/module/components/listConstruction/listConstruction";
+
+export default {
+  name: "servers-mysql",
+  data() {
+    return {
+      isLoading: false,
+      mysqlList: [],
+      color: themeData.color
+    };
+  },
+  props: {},
+  methods: {
+    ...mapActions("monitor", ["getDatabaseData"])
+  },
+  watch: {},
+  created() {
+    this.isLoading = true;
+    this.getDatabaseData()
+      .then(res => {
+        this.mysqlList = res;
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+      });
+  },
+  mounted() {},
+  components: { mList, mListConstruction, mSpin, mNoData }
+};
+</script>
+<style lang="scss" rel="stylesheet/scss">
+@import "./servers";
+.content-title {
+  height: 48px;
+  background: #f8fbfe;
+  border-radius: 3px 3px 0 0;
+  margin-bottom: 10px;
+  span {
+    font-size: 22px;
+    padding-left: 18px;
+    padding-top: 10px;
+    display: inline-block;
+    color: #2a455b;
+  }
+}
+</style>

dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue

@@ -1,137 +0,0 @@
-/*
- * 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>
-  <m-list-construction :title="'Mysql ' + $t('Manage')">
-    <template slot="content">
-      <div class="servers-wrapper mysql-model" v-show="mysqlList.length">
-        <div class="row" v-for="(item,$index) in mysqlList">
-          <div class="col-md-2">
-            <div class="text-num-model text">
-              <div class="title">
-                <span>{{$t('Health status')}}</span>
-              </div>
-              <div class="value-p">
-                <span class="state">
-                  <i class="iconfont success" v-if="item.state">&#xe607;</i>
-                  <i class="iconfont error" v-else>&#xe626;</i>
-                </span>
-              </div>
-              <div class="text-1">
-                {{$t('Health status')}}
-              </div>
-            </div>
-          </div>
-          <div class="col-md-3">
-            <div class="text-num-model text">
-              <div class="title">
-                <span>{{$t('Max connections')}} - {{item.date | formatDate}}</span>
-              </div>
-              <div class="value-p">
-                <b :style="{color:color[0]}">{{item.maxConnections}}</b>
-              </div>
-              <div class="text-1">
-                {{$t('Max connections')}}
-              </div>
-            </div>
-          </div>
-          <div class="col-md-3">
-            <div class="text-num-model text">
-              <div class="title">
-                <span>{{$t('Threads connections')}}</span>
-              </div>
-              <div class="value-p">
-                <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
-              </div>
-              <div class="text-1">
-                {{$t('Threads connections')}}
-              </div>
-            </div>
-          </div>
-          <div class="col-md-2">
-            <div class="text-num-model text">
-              <div class="title">
-                <span>{{$t('Max used connections')}}</span>
-              </div>
-              <div class="value-p">
-                <b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
-              </div>
-              <div class="text-1">
-                {{$t('Max used connections')}}
-              </div>
-            </div>
-          </div>
-          <div class="col-md-2">
-            <div class="text-num-model text">
-              <div class="title">
-                <span>{{$t('Threads running connections')}}</span>
-              </div>
-              <div class="value-p">
-                <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
-              </div>
-              <div class="text-1">
-                {{$t('Threads running connections')}}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-if="!mysqlList.length">
-        <m-no-data></m-no-data>
-      </div>
-      <m-spin :is-spin="isLoading" ></m-spin>
-    </template>
-  </m-list-construction>
-</template>
-<script>
-  import { mapActions } from 'vuex'
-  import mList from './_source/zookeeperList'
-  import mSpin from '@/module/components/spin/spin'
-  import mNoData from '@/module/components/noData/noData'
-  import themeData from '@/module/echarts/themeData.json'
-  import mListConstruction from '@/module/components/listConstruction/listConstruction'
-
-  export default {
-    name: 'servers-mysql',
-    data () {
-      return {
-        isLoading: false,
-        mysqlList: [],
-        color: themeData.color
-      }
-    },
-    props: {},
-    methods: {
-      ...mapActions('monitor', ['getDatabaseData'])
-    },
-    watch: {},
-    created () {
-      this.isLoading = true
-      this.getDatabaseData().then(res => {
-        this.mysqlList = res
-        this.isLoading = false
-      }).catch(() => {
-        this.isLoading = false
-      })
-    },
-    mounted () {
-    },
-    components: { mList, mListConstruction, mSpin, mNoData }
-  }
-</script>
-<style lang="scss" rel="stylesheet/scss">
-  @import "./servers";
-</style>

dolphinscheduler-ui/src/js/conf/home/router/index.js

@@ -433,11 +433,11 @@ const router = new Router({
           }
         },
         {
-          path: '/monitor/servers/mysql',
-          name: 'servers-mysql',
-          component: resolve => require(['../pages/monitor/pages/servers/mysql'], resolve),
+          path: '/monitor/servers/db',
+          name: 'servers-db',
+          component: resolve => require(['../pages/monitor/pages/servers/db'], resolve),
           meta: {
-            title: `Mysql`
+            title: `DB`
           }
         },
         {

dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js

@@ -236,8 +236,8 @@ let menu = {
         //   disabled: true
         // },
         {
-          name: 'Mysql',
-          path: 'servers-mysql',
+          name: 'DB',
+          path: 'servers-db',
           id: 6,
           disabled: true
         }