提交 e058b58e 编写于 作者: B break60 提交者: qiaozhanwei

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
上级 9545cb20
...@@ -15,53 +15,51 @@ ...@@ -15,53 +15,51 @@
* limitations under the License. * limitations under the License.
*/ */
<template> <template>
<m-list-construction :title="'Mysql ' + $t('Manage')"> <div>
<template slot="content"> <div class="servers-wrapper mysql-model" v-show="mysqlList.length">
<div class="servers-wrapper mysql-model" v-show="mysqlList.length"> <div class="row" v-for="(item,$index) in mysqlList">
<div class="row" v-for="(item,$index) in mysqlList"> <div class="col-md-12">
<div class="col-md-2"> <div class="content-title">
<div class="text-num-model text"> <span>{{item.dbType}}</span>
<div class="title"> </div>
<span>{{$t('Health status')}}</span> </div>
</div> <div class="col-md-3">
<div class="value-p"> <div class="text-num-model text">
<span class="state"> <div class="title">
<i class="iconfont success" v-if="item.state">&#xe607;</i> <span>{{$t('Health status')}}</span>
<i class="iconfont error" v-else>&#xe626;</i>
</span>
</div>
<div class="text-1">
{{$t('Health status')}}
</div>
</div> </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>
<div class="text-num-model text"> <div class="col-md-3">
<div class="title"> <div class="text-num-model text">
<span>{{$t('Max connections')}} - {{item.date | formatDate}}</span> <div class="title">
</div> <span>{{$t('Max connections')}} - {{item.date | formatDate}}</span>
<div class="value-p"> </div>
<b :style="{color:color[0]}">{{item.maxConnections}}</b> <div class="value-p">
</div> <b :style="{color:color[0]}">{{item.maxConnections}}</b>
<div class="text-1">
{{$t('Max connections')}}
</div>
</div> </div>
<div class="text-1">{{$t('Max connections')}}</div>
</div> </div>
<div class="col-md-3"> </div>
<div class="text-num-model text"> <div class="col-md-3">
<div class="title"> <div class="text-num-model text">
<span>{{$t('Threads connections')}}</span> <div class="title">
</div> <span>{{$t('Threads connections')}}</span>
<div class="value-p"> </div>
<b :style="{color:color[8]}">{{item.threadsConnections}}</b> <div class="value-p">
</div> <b :style="{color:color[8]}">{{item.threadsConnections}}</b>
<div class="text-1">
{{$t('Threads connections')}}
</div>
</div> </div>
<div class="text-1">{{$t('Threads connections')}}</div>
</div> </div>
<div class="col-md-2"> </div>
<!-- <div class="col-md-2">
<div class="text-num-model text"> <div class="text-num-model text">
<div class="title"> <div class="title">
<span>{{$t('Max used connections')}}</span> <span>{{$t('Max used connections')}}</span>
...@@ -73,65 +71,76 @@ ...@@ -73,65 +71,76 @@
{{$t('Max used connections')}} {{$t('Max used connections')}}
</div> </div>
</div> </div>
</div> </div>-->
<div class="col-md-2"> <div class="col-md-3">
<div class="text-num-model text"> <div class="text-num-model text">
<div class="title"> <div class="title">
<span>{{$t('Threads running connections')}}</span> <span>{{$t('Threads running connections')}}</span>
</div> </div>
<div class="value-p"> <div class="value-p">
<b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b> <b :style="{color:color[4]}">{{item.threadsRunningConnections}}</b>
</div>
<div class="text-1">
{{$t('Threads running connections')}}
</div>
</div> </div>
<div class="text-1">{{$t('Threads running connections')}}</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="!mysqlList.length"> </div>
<m-no-data></m-no-data> <div v-if="!mysqlList.length">
</div> <m-no-data></m-no-data>
<m-spin :is-spin="isLoading" ></m-spin> </div>
</template> <m-spin :is-spin="isLoading"></m-spin>
</m-list-construction> </div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from "vuex";
import mList from './_source/zookeeperList' import mList from "./_source/zookeeperList";
import mSpin from '@/module/components/spin/spin' import mSpin from "@/module/components/spin/spin";
import mNoData from '@/module/components/noData/noData' import mNoData from "@/module/components/noData/noData";
import themeData from '@/module/echarts/themeData.json' import themeData from "@/module/echarts/themeData.json";
import mListConstruction from '@/module/components/listConstruction/listConstruction' import mListConstruction from "@/module/components/listConstruction/listConstruction";
export default { export default {
name: 'servers-mysql', name: "servers-mysql",
data () { data() {
return { return {
isLoading: false, isLoading: false,
mysqlList: [], mysqlList: [],
color: themeData.color color: themeData.color
} };
}, },
props: {}, props: {},
methods: { methods: {
...mapActions('monitor', ['getDatabaseData']) ...mapActions("monitor", ["getDatabaseData"])
}, },
watch: {}, watch: {},
created () { created() {
this.isLoading = true this.isLoading = true;
this.getDatabaseData().then(res => { this.getDatabaseData()
this.mysqlList = res .then(res => {
this.isLoading = false this.mysqlList = res;
}).catch(() => { this.isLoading = false;
this.isLoading = false
}) })
}, .catch(() => {
mounted () { this.isLoading = false;
}, });
components: { mList, mListConstruction, mSpin, mNoData } },
} mounted() {},
components: { mList, mListConstruction, mSpin, mNoData }
};
</script> </script>
<style lang="scss" rel="stylesheet/scss"> <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> </style>
\ No newline at end of file
...@@ -433,11 +433,11 @@ const router = new Router({ ...@@ -433,11 +433,11 @@ const router = new Router({
} }
}, },
{ {
path: '/monitor/servers/mysql', path: '/monitor/servers/db',
name: 'servers-mysql', name: 'servers-db',
component: resolve => require(['../pages/monitor/pages/servers/mysql'], resolve), component: resolve => require(['../pages/monitor/pages/servers/db'], resolve),
meta: { meta: {
title: `Mysql` title: `DB`
} }
}, },
{ {
......
...@@ -236,8 +236,8 @@ let menu = { ...@@ -236,8 +236,8 @@ let menu = {
// disabled: true // disabled: true
// }, // },
{ {
name: 'Mysql', name: 'DB',
path: 'servers-mysql', path: 'servers-db',
id: 6, id: 6,
disabled: true disabled: true
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册