You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
8.3 KiB
346 lines
8.3 KiB
<template>
|
|
<div class="container-fluid content-row h-50">
|
|
|
|
<div class="row ">
|
|
|
|
<div class="col-sm-12 col-lg-6 text-center">
|
|
<v-wait for="stats_stats_imagescontainers">
|
|
<template slot="waiting">
|
|
<div>
|
|
<img src="@/assets/loading.gif" width="50" height="50" />
|
|
Build Stats...
|
|
</div>
|
|
</template>
|
|
</v-wait>
|
|
<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 text-center">
|
|
<v-wait for="wait_stats_stats_container">
|
|
<template slot="waiting">
|
|
<div>
|
|
<img src="@/assets/loading.gif" width="50" height="50" />
|
|
Build Stats...
|
|
</div>
|
|
</template>
|
|
</v-wait>
|
|
<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 () => {
|
|
this.$wait.start('stats_stats_imagescontainers');
|
|
this.$wait.start('wait_stats_stats_container');
|
|
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]
|
|
}
|
|
]
|
|
|
|
}
|
|
this.$wait.end('stats_stats_imagescontainers');
|
|
|
|
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
|
|
}
|
|
this.$wait.end('wait_stats_stats_container');
|
|
|
|
})();
|
|
|
|
},
|
|
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>
|
|
|