mirror of
https://gitee.com/dolphinscheduler/DolphinScheduler.git
synced 2024-12-03 12:48:46 +08:00
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
This commit is contained in:
break60
qiaozhanwei
parent
9545cb2008
commit
e058b58e01
@ -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"></i>
|
||||
<i class="iconfont error" v-else></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>
|
||||
@ -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"></i>
|
||||
<i class="iconfont error" v-else></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>
|
||||
@ -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`
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -236,8 +236,8 @@ let menu = {
|
||||
// disabled: true
|
||||
// },
|
||||
{
|
||||
name: 'Mysql',
|
||||
path: 'servers-mysql',
|
||||
name: 'DB',
|
||||
path: 'servers-db',
|
||||
id: 6,
|
||||
disabled: true
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user