zeus
3 years ago
7 changed files with 708 additions and 17 deletions
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<card class="card-user" style="max-height:100%"> |
||||
|
|
||||
|
<div class="row" > |
||||
|
<div class="col-12 order-first " > |
||||
|
<br> |
||||
|
<dashboard-view> |
||||
|
|
||||
|
</dashboard-view> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</card> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {mapState, mapGetters, mapActions} from 'vuex' |
||||
|
import card from '@/components/Card.vue' |
||||
|
import DashboardView from "./manageservices/view-dashboard.vue"; |
||||
|
//import CalendarView from "./manageservices/view-service.vue"; |
||||
|
//import CalendarViewEvents from "./manageservices/view-events.vue"; |
||||
|
export default { |
||||
|
components: { |
||||
|
card, |
||||
|
DashboardView |
||||
|
// CalendarViewEvents |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
hybridshowlog:1, |
||||
|
loading: false, |
||||
|
consoleView: 'off', |
||||
|
productIndex: 1 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$root.$on('hybrid_labobject_view', (v) => { |
||||
|
this.hybridshowlog=2 |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
created () { |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,326 @@ |
|||||
|
<template> |
||||
|
<div class="container-fluid content-row h-50"> |
||||
|
|
||||
|
<div class="row "> |
||||
|
|
||||
|
<div class="col-sm-12 col-lg-6"> |
||||
|
<div class="card h-50 shadow p-3 mb-5 bg-white rounded"> |
||||
|
<v-chart class="chart" :key="stats_stats_imagescontainers" style="min-width: 100%;" :option="optionsystem" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-sm-12 col-lg-6"> |
||||
|
<div class="card h-50 shadow p-3 mb-5 bg-white rounded"> |
||||
|
<v-chart class="chart" :key="stats_stats_container" :option="optiondocker" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import store from '@/store/index' |
||||
|
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' |
||||
|
import Vue from 'vue' |
||||
|
import card from '@/components/Card.vue' |
||||
|
import {ApiConfig} from "@/config/index"; |
||||
|
|
||||
|
|
||||
|
import { use } from "echarts/core"; |
||||
|
import { CanvasRenderer } from "echarts/renderers"; |
||||
|
import { PieChart, BarChart } from "echarts/charts"; |
||||
|
import { |
||||
|
TitleComponent, |
||||
|
TooltipComponent, |
||||
|
LegendComponent, |
||||
|
GridComponent |
||||
|
} from "echarts/components"; |
||||
|
import VChart, { THEME_KEY } from "vue-echarts"; |
||||
|
|
||||
|
use([ |
||||
|
CanvasRenderer, |
||||
|
PieChart, |
||||
|
TitleComponent, |
||||
|
TooltipComponent, |
||||
|
LegendComponent, |
||||
|
GridComponent, |
||||
|
BarChart |
||||
|
]); |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
card, |
||||
|
VChart |
||||
|
}, |
||||
|
provide: { |
||||
|
[THEME_KEY]: "white" |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// width/height get this for refresh charts |
||||
|
stats_stats_imagescontainers:0, |
||||
|
stats_stats_container:0, |
||||
|
width: document.documentElement.clientWidth, |
||||
|
height: document.documentElement.clientHeight, |
||||
|
|
||||
|
optiondocker: { |
||||
|
height: '100%', |
||||
|
width: '100%', |
||||
|
responsive: true, |
||||
|
maintainAspectRatio: false, |
||||
|
title: { |
||||
|
text: "Containers Memory", |
||||
|
left: "center" |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)" |
||||
|
}, |
||||
|
/* |
||||
|
legend: { |
||||
|
orient: "vertical", |
||||
|
left: "left", |
||||
|
data: [ |
||||
|
"Direct", |
||||
|
"Email", |
||||
|
"Ad Networks", |
||||
|
"Video Ads", |
||||
|
"Search Engines" |
||||
|
] |
||||
|
}, |
||||
|
*/ |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "Container Memory", |
||||
|
type: "pie", |
||||
|
radius: "55%", |
||||
|
center: ["50%", "60%"], |
||||
|
data: [ |
||||
|
// { value: 335, name: "Direct" }, |
||||
|
// { value: 310, name: "Email" }, |
||||
|
// { value: 234, name: "Ad Networks" }, |
||||
|
// { value: 135, name: "Video Ads" }, |
||||
|
// { value: 1548, name: "Search Engines" } |
||||
|
], |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: "rgba(0, 0, 0, 0.5)" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
/* |
||||
|
optiondocker: { |
||||
|
legend: { |
||||
|
top: 'bottom' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: true, |
||||
|
feature: { |
||||
|
mark: { show: true }, |
||||
|
dataView: { show: true, readOnly: false }, |
||||
|
restore: { show: true }, |
||||
|
saveAsImage: { show: true } |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Nightingale Chart', |
||||
|
type: 'pie', |
||||
|
radius: [50, 250], |
||||
|
center: ['50%', '50%'], |
||||
|
roseType: 'area', |
||||
|
itemStyle: { |
||||
|
borderRadius: 8 |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 40, name: 'rose 1' }, |
||||
|
{ value: 38, name: 'rose 2' }, |
||||
|
{ value: 32, name: 'rose 3' }, |
||||
|
{ value: 30, name: 'rose 4' }, |
||||
|
{ value: 28, name: 'rose 5' }, |
||||
|
{ value: 26, name: 'rose 6' }, |
||||
|
{ value: 22, name: 'rose 7' }, |
||||
|
{ value: 18, name: 'rose 8' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
*/ |
||||
|
optionsystem: { |
||||
|
title: { |
||||
|
text: 'Image/Containers' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
legend: {}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'value', |
||||
|
boundaryGap: [0, 0.01] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
data: ['Containers', 'Images'] |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'TOTAL', |
||||
|
type: 'bar', |
||||
|
data: [5, 20], |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: "rgba(0, 0, 0, 0.5)" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: 'ACTIVE', |
||||
|
type: 'bar', |
||||
|
data: [2, 3], |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: "rgba(0, 0, 0, 0.5)" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
window.addEventListener('resize', this.getDimensions); |
||||
|
}, |
||||
|
created() { |
||||
|
var url_string = window.location.href |
||||
|
var url = new URL(url_string); |
||||
|
this.token = url.searchParams.get("token"); |
||||
|
//console.log("token "+ this.token); |
||||
|
|
||||
|
(async () => { |
||||
|
var log = await store.dispatch("pipelineLLO/get_stats_imagescontainers",{ |
||||
|
token:this.token, |
||||
|
action:'images_containers' |
||||
|
}) |
||||
|
//console.log(log.data) |
||||
|
|
||||
|
var datajsonlength = log.data.data.length |
||||
|
var datajson = log.data.data |
||||
|
for(var i = 0; i < datajsonlength; i++) { |
||||
|
|
||||
|
if(datajson[i].Type == 'Images'){ |
||||
|
var Images_TotalCount = datajson[i].TotalCount |
||||
|
var Images_Active = datajson[i].Active |
||||
|
} |
||||
|
if(datajson[i].Type == 'Containers'){ |
||||
|
var Containers_TotalCount = datajson[i].TotalCount |
||||
|
var Containers_Active = datajson[i].Active |
||||
|
} |
||||
|
|
||||
|
this.optionsystem.series = [ |
||||
|
{ |
||||
|
name: 'TOTAL', |
||||
|
type: 'bar', |
||||
|
data: [Containers_TotalCount, Images_TotalCount] |
||||
|
}, |
||||
|
{ |
||||
|
name: 'ACTIVE', |
||||
|
type: 'bar', |
||||
|
data: [Containers_Active, Images_Active] |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
} |
||||
|
|
||||
|
var logcontainers = await store.dispatch("pipelineLLO/get_stats_containers",{ |
||||
|
token:this.token, |
||||
|
action:'containers' |
||||
|
}) |
||||
|
if(logcontainers.data.data){ |
||||
|
var containerslength = logcontainers.data.data.length |
||||
|
var datajson1 = logcontainers.data.data |
||||
|
this.optiondocker.series[0].data = [] |
||||
|
for(var i = 0; i < containerslength; i++) { |
||||
|
|
||||
|
if(datajson1[i].container){ |
||||
|
var memtmp = datajson1[i].memory.percent.split('%') |
||||
|
var obj = { |
||||
|
value: memtmp[0], name: datajson1[i].container |
||||
|
} |
||||
|
//console.log(obj) |
||||
|
//var container_cpu = datajson1[i].cpu |
||||
|
//var container_memory_raw = datajson1[i].memory.raw |
||||
|
//var container_memory_percent = datajson1[i].memory.percent |
||||
|
} |
||||
|
|
||||
|
this.optiondocker.series[0].data.push(obj) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
//console.log(logcontainers.data) |
||||
|
//console.log(this.optiondocker) |
||||
|
//this.stats_stats_container += 1 |
||||
|
} |
||||
|
|
||||
|
})(); |
||||
|
|
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
window.removeEventListener('resize', this.getDimensions); |
||||
|
}, |
||||
|
computed: { |
||||
|
httpOptions() { |
||||
|
var token = this.token |
||||
|
var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions" |
||||
|
return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions" |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
async getDimensions() { |
||||
|
this.width = document.documentElement.clientWidth; |
||||
|
this.height = document.documentElement.clientHeight; |
||||
|
//console.log( this.width + ' ' + this.height) |
||||
|
this.refresh() |
||||
|
}, |
||||
|
async refresh() { |
||||
|
this.stats_stats_imagescontainers += 1 |
||||
|
this.stats_stats_container += 1 |
||||
|
} |
||||
|
}, |
||||
|
actions: { |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.chart { |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
body { |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue