This is an automated email from the ASF dual-hosted git repository.
liujun pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dubbo-kubernetes.git
The following commit(s) were added to refs/heads/master by this push:
new b9dac479 feat(echarts): Build homepage dashboard using ECharts.
new e39d7bbb Merge pull request #106 from
Helltab/feature/ui/dashboard/echarts
b9dac479 is described below
commit b9dac479531a3a22ec79ef57af39b40e8554dafd
Author: Helltab <hell...@163.com>
AuthorDate: Tue Dec 12 02:56:27 2023 +0800
feat(echarts): Build homepage dashboard using ECharts.
---
ui/package.json | 2 +-
ui/src/components/Home.vue | 101 ++++++++++++------------
ui/src/components/dashboard/homeEcharts.vue | 117 ++++++++++++++++++++++++++++
ui/src/components/public/Drawer.vue | 2 +-
ui/src/mock/mockCluster.js | 19 +++--
5 files changed, 178 insertions(+), 63 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index 3ddf3d69..c81915c4 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,7 +15,7 @@
"axios": "^0.18.1",
"brace": "^0.11.1",
"core-js": "^3.33.3",
- "echarts": "^4.2.1",
+ "echarts": "^5.4.3",
"http-status": "^1.2.0",
"js-yaml": "^3.12.0",
"jsoneditor": "^9.1.5",
diff --git a/ui/src/components/Home.vue b/ui/src/components/Home.vue
index 06bcf7c7..b5b2698d 100644
--- a/ui/src/components/Home.vue
+++ b/ui/src/components/Home.vue
@@ -15,60 +15,59 @@
~ limitations under the License.
-->
<template>
- <v-container grid-list-xl fluid>
- <v-layout row wrap>
- <v-flex lg12>
+ <v-container grid-list-xl fluid>
+ <v-layout row wrap>
+ <v-flex lg12>
<Breadcrumb title="homePage" :items="breads"></breadcrumb>
- </v-flex>
- </v-layout>
- <v-container fluid grid-list-md>
- <v-data-iterator
- :items=clusterData
- content-tag="v-layout"
- hide-actions
- row
- wrap
- >
- <template v-slot:header>
- <v-toolbar
- class="mb-2"
- color="indigo darken-5"
- dark
- flat
- >
- <v-toolbar-title>ClusterOverview</v-toolbar-title>
- </v-toolbar>
- </template>
- <template v-slot:item="props">
- <v-flex
- xs12
- sm6
- md4
- lg4
- >
- <v-card>
- <v-card-title class="subheading font-weight-bold">{{
props.item.name }}</v-card-title>
+ </v-flex>
+ </v-layout>
+ <v-container fluid grid-list-md>
+ <v-data-iterator
+ :items=clusterData
+ content-tag="v-layout"
+ hide-actions
+ row
+ wrap
+ >
+ <template v-slot:header>
+ <v-toolbar
+ class="mb-2"
+ color="indigo darken-5"
+ dark
+ flat
+ >
+ <v-toolbar-title>ClusterOverview</v-toolbar-title>
+ </v-toolbar>
+ </template>
+ <template v-slot:item="props">
+ <v-flex
+ xs12
+ sm6
+ md4
+ lg4
+ >
- <v-divider></v-divider>
+ <v-card>
+ <v-card-title class="subheading font-weight-bold">{{
props.item.name }}</v-card-title>
- <v-list dense>
- <v-list-tile>
- <v-list-tile-content>Number:</v-list-tile-content>
- <v-list-tile-content class="align-end">{{ props.item.number
}}</v-list-tile-content>
- </v-list-tile>
- </v-list>
- </v-card>
- </v-flex>
- </template>
- </v-data-iterator>
- </v-container>
+ <v-divider></v-divider>
+ <v-list dense>
+ <home-echarts style="width: 100%; height: 25vh"
:value="props.item"></home-echarts>
+ </v-list>
+ </v-card>
+ </v-flex>
+ </template>
+ </v-data-iterator>
</v-container>
+ </v-container>
</template>
<script>
import Breadcrumb from './public/Breadcrumb.vue'
+import HomeEcharts from "./dashboard/homeEcharts.vue";
+
export default {
name: 'ClusterOverview',
- components: { Breadcrumb },
+ components: {HomeEcharts, Breadcrumb},
data: () => ({
breads: [
{
@@ -76,21 +75,21 @@ export default {
href: ''
}
],
- clusterData:[],
+ clusterData: [],
}),
- methods:{
- getCluster () {
+ methods: {
+ getCluster() {
this.$axios.get('/metrics/cluster').then(response => {
console.log(response)
- this.clusterData = Object.entries(response.data.data).map(([name,
number]) => ({ name, number }));
+ this.clusterData = Object.entries(response.data.data).map(([name,
number]) => ({name, number}));
})
},
joinArray(arr) {
return arr.join(', ');
}
},
- mounted(){
- this.getCluster();
+ mounted() {
+ this.getCluster();
}
}
</script>
diff --git a/ui/src/components/dashboard/homeEcharts.vue
b/ui/src/components/dashboard/homeEcharts.vue
new file mode 100644
index 00000000..fb500976
--- /dev/null
+++ b/ui/src/components/dashboard/homeEcharts.vue
@@ -0,0 +1,117 @@
+<!--
+ ~ 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 class="__dashboard_echarts_container">
+ <div class="__gauge_for_home" :id="`__gauge_for_home_${value.name}`"></div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+ name: 'home-echarts',
+ props: {
+ value: {
+ type: Object,
+ default: {
+ number: 0,
+ name: 'demo'
+ }
+ },
+
+ },
+ data() {
+ return {
+ option: {
+ tooltip: {
+ trigger: 'item'
+ },
+ // legend: {
+ // top: '5%',
+ // left: 'center'
+ // },
+ series: [
+ {
+ name: 'Cluster',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ //文本样式
+ normal: {
+ textStyle: {
+ fontSize: 28,
+ fontWeight: 'bolder',
+ color: '#FC6679'
+ },
+ formatter: "{c}",
+ position: "center",
+ show: true,
+ },
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ color:[
+ new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#FC6679 " },
+ { offset: 0.4, color: "#FCC581 " },
+ { offset: 1, color: "#FDC581 " }
+ ])
+ ],
+ data: [
+ { value: 100, name: 'demo' },
+ ]
+ }
+ ]
+ }
+ }
+ },
+ mounted() {
+ const chartDom =
document.getElementById(`__gauge_for_home_${this.value.name}`);
+ const myChart = echarts.init(chartDom);
+ this.option.series[0].data[0].value = this.value.number
+ this.option.series[0].data[0].name = this.value.name
+ console.log(this.option.series[0])
+ myChart.setOption(this.option);
+ }
+}
+</script>
+
+<style lang="css">
+
+.__dashboard_echarts_container .__gauge_for_home {
+ height: 100%;
+ width: 100%;
+
+}
+
+</style>
diff --git a/ui/src/components/public/Drawer.vue
b/ui/src/components/public/Drawer.vue
index cd91935b..abfdcee1 100644
--- a/ui/src/components/public/Drawer.vue
+++ b/ui/src/components/public/Drawer.vue
@@ -85,7 +85,7 @@ export default {
window.getApp.$on('DRAWER_TOGGLED', () => {
this.drawer = (!this.drawer)
})
- axios.get('/dubbo-admin-info.json').then(response => {
+ axios.get('/admin/dubbo-admin-info.json').then(response => {
this.config = response.data
})
},
diff --git a/ui/src/mock/mockCluster.js b/ui/src/mock/mockCluster.js
index e4dd07a8..41a03e6a 100644
--- a/ui/src/mock/mockCluster.js
+++ b/ui/src/mock/mockCluster.js
@@ -1,4 +1,3 @@
-
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -25,13 +24,13 @@ console.log(random) // 简单使用就不操作了，需要操作的可以去看
// 3、基本用法 Mock.mock(url, type, data) // 参数文档
https://github.com/nuysoft/Mock/wiki
Mock.mock('/mock/metrics/cluster', 'get', {
- code: 200,
- message: '成功',
- data: {
- all:0,
- application:0,
- consumers:0,
- providers:0,
- services:0
- }
+ code: 200,
+ message: '成功',
+ data: {
+ all: Mock.mock('@integer(100, 500)'),
+ application: Mock.mock('@integer(20, 39)'),
+ consumers: Mock.mock('@integer(20, 39)'),
+ providers: Mock.mock('@integer(20, 39)'),
+ services: Mock.mock('@integer(20, 39)'),
+ }
})
