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/mysql.vue → dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue

@@ -15,11 +15,15 @@
  * limitations under the License.
  */
 <template>
-  <m-list-construction :title="'Mysql ' + $t('Manage')">
-    <template slot="content">
+  <div>
     <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="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>
@@ -30,9 +34,7 @@
                 <i class="iconfont error" v-else>&#xe626;</i>
               </span>
             </div>
-              <div class="text-1">
-                {{$t('Health status')}}
-              </div>
+            <div class="text-1">{{$t('Health status')}}</div>
           </div>
         </div>
         <div class="col-md-3">
@@ -43,9 +45,7 @@
             <div class="value-p">
               <b :style="{color:color[0]}">{{item.maxConnections}}</b>
             </div>
-              <div class="text-1">
-                {{$t('Max connections')}}
-              </div>
+            <div class="text-1">{{$t('Max connections')}}</div>
           </div>
         </div>
         <div class="col-md-3">
@@ -56,12 +56,10 @@
             <div class="value-p">
               <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
             </div>
-              <div class="text-1">
-                {{$t('Threads connections')}}
-              </div>
+            <div class="text-1">{{$t('Threads connections')}}</div>
           </div>
         </div>
-          <div class="col-md-2">
+        <!-- <div class="col-md-2">
             <div class="text-num-model text">
               <div class="title">
                 <span>{{$t('Max used connections')}}</span>
@@ -73,8 +71,8 @@
                 {{$t('Max used connections')}}
               </div>
             </div>
-          </div>
-          <div class="col-md-2">
+        </div>-->
+        <div class="col-md-3">
           <div class="text-num-model text">
             <div class="title">
               <span>{{$t('Threads running connections')}}</span>
@@ -82,9 +80,7 @@
             <div class="value-p">
               <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
             </div>
-              <div class="text-1">
-                {{$t('Threads running connections')}}
-              </div>
+            <div class="text-1">{{$t('Threads running connections')}}</div>
           </div>
         </div>
       </div>
@@ -92,46 +88,59 @@
     <div v-if="!mysqlList.length">
       <m-no-data></m-no-data>
     </div>
-      <m-spin :is-spin="isLoading" ></m-spin>
-    </template>
-  </m-list-construction>
+    <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'
+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 () {
+export default {
+  name: "servers-mysql",
+  data() {
     return {
       isLoading: false,
       mysqlList: [],
       color: themeData.color
-      }
+    };
   },
   props: {},
   methods: {
-      ...mapActions('monitor', ['getDatabaseData'])
+    ...mapActions("monitor", ["getDatabaseData"])
   },
   watch: {},
-    created () {
-      this.isLoading = true
-      this.getDatabaseData().then(res => {
-        this.mysqlList = res
-        this.isLoading = false
-      }).catch(() => {
-        this.isLoading = false
+  created() {
+    this.isLoading = true;
+    this.getDatabaseData()
+      .then(res => {
+        this.mysqlList = res;
+        this.isLoading = false;
       })
+      .catch(() => {
+        this.isLoading = false;
+      });
   },
-    mounted () {
-    },
+  mounted() {},
   components: { mList, mListConstruction, mSpin, mNoData }
-  }
+};
 </script>
 <style lang="scss" rel="stylesheet/scss">
-  @import "./servers";
+@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>
\ No newline at end of file

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
         }