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