github
/
DolphinScheduler
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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
pull/2/head
break60 5 years ago committed by qiaozhanwei
parent
9545cb2008
commit
e058b58e01
4 changed files with 152 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
  2. 137
      dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
  3. 8
      dolphinscheduler-ui/src/js/conf/home/router/index.js
  4. 4
      dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js

146
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
Unescape View File

@ -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>

137
dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
Unescape View File

@ -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>

8
dolphinscheduler-ui/src/js/conf/home/router/index.js
Unescape View File

@ -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`
} }
}, },
{ {

4
dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
Unescape View File

@ -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
} }

Write Preview
Loading…
Cancel
Save