admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2020-05-29 19:24:57 +00:00
parent ab56b404e5
commit 3098e31266
1 changed files with 194 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
ayanova/src/views/ops-metrics.vue
View File

@@ -16,14 +16,14 @@
<!-- {{ $vuetify.breakpoint.name }} -->
</v-col>
<v-tabs v-model="tab" color="primary" fixed-tabs>
<v-tabs v-model="tab" color="primary" fixed-tabs @change="tabChanged">
<v-tabs-slider></v-tabs-slider>
<v-tab key="routes">routes</v-tab>
<v-tab key="storage">storage</v-tab>
<v-tab key="memcpu">cpu & memory</v-tab>
<v-tab>routes</v-tab>
<v-tab>storage</v-tab>
<v-tab>cpu & memory</v-tab>
<v-tabs-items v-model="tab">
<v-tab-item key="routes"> </v-tab-item>
<v-tab-item key="storage">
<v-tab-item> </v-tab-item>
<v-tab-item>
attachment size and available space utility size and available space
filecounts
<v-col cols="12" class="my-1">
@@ -51,7 +51,8 @@
</v-sheet>
</v-col>
</v-tab-item>
<v-tab-item key="cpu">
<v-tab-item>
<v-col cols="12" class="my-1">
<v-sheet elevation="4">
<gz-chart-line
@@ -125,8 +126,9 @@ export default {
},
data() {
return {
storage: null,
memcpu: null,
storage: { isnew: true },
memcpu: { isnew: true },
routes: { isnew: true },
timeLineChartOptions: {
responsive: true,
maintainAspectRatio: false,
@@ -144,7 +146,7 @@ export default {
dateFilterTokens: []
},
lastFetchBreakPoint: null,
tab: null,
tab: 2,
formState: {
ready: false,
loading: false,
@@ -154,92 +156,6 @@ export default {
}
};
},
computed: {
cpuChartData() {
return {
datasets: [
{
label: "CPU %",
borderColor: CHART_COLOR.teal,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.obj.metricMM.cpu
}
]
};
},
gcAllChartData() {
return {
datasets: [
{
label: "GC Gen0",
borderColor: CHART_COLOR.blue,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.obj.metricMM.gen0
},
{
label: "GC Gen1",
borderColor: CHART_COLOR.red,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.obj.metricMM.gen1
},
{
label: "GC Gen2",
borderColor: CHART_COLOR.green,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.obj.metricMM.gen2
}
]
};
},
memAllChartData() {
return {
datasets: [
{
label: "Allocated (MB)",
borderColor: CHART_COLOR.purple,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.obj.metricMM.allocated
},
{
label: "Working set (MB)",
borderColor: CHART_COLOR.green,
//borderWidth:4,
// pointStyle: "rectRot",
radius: 0,
hoverRadius: 10,
hitRadius: 4,
// borderDash: [20, 3, 3, 3, 3, 3, 3, 3],
fill: false,
data: this.obj.metricMM.workingSet
},
{
label: "Private (MB)",
borderColor: CHART_COLOR.orange,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.obj.metricMM.privateBytes
}
]
};
}
},
methods: {
onResize() {
@@ -263,9 +179,13 @@ export default {
timePeriodChanged: function() {
this.getDataFromApi();
},
form() {
return window.$gz.form;
tabChanged: function(tab) {
let vm = this;
if (vm[tabIndexToRoute(vm.tab)].isnew) {
vm.getDataFromApi();
}
},
getDataFromApi(breakPoint) {
let vm = this;
if (vm.formState.loading) {
@@ -310,7 +230,7 @@ export default {
let url =
"server-metric/" +
vm.tab +
tabIndexToRoute(vm.tab) +
"?maxRecords=" +
max +
"&tsStart=" +
@@ -335,7 +255,7 @@ export default {
vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm);
} else {
vm[vm.tab] = res.data;
vm[tabIndexToRoute(vm.tab)] = res.data;
vm.lastFetchBreakPoint = breakPoint;
window.$gz.form.setFormState({
vm: vm,
@@ -355,9 +275,183 @@ export default {
window.$gz.errorHandler.handleFormError(error, vm);
});
}
},
computed: {
cpuChartData() {
return {
datasets: [
{
label: "CPU %",
borderColor: CHART_COLOR.teal,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.memcpu.cpu
}
]
};
},
gcAllChartData() {
return {
datasets: [
{
label: "GC Gen0",
borderColor: CHART_COLOR.blue,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.memcpu.gen0
},
{
label: "GC Gen1",
borderColor: CHART_COLOR.red,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.memcpu.gen1
},
{
label: "GC Gen2",
borderColor: CHART_COLOR.green,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.memcpu.gen2
}
]
};
},
memAllChartData() {
return {
datasets: [
{
label: "Allocated (MB)",
borderColor: CHART_COLOR.purple,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.memcpu.allocated
},
{
label: "Working set (MB)",
borderColor: CHART_COLOR.green,
//borderWidth:4,
// pointStyle: "rectRot",
radius: 0,
hoverRadius: 10,
hitRadius: 4,
// borderDash: [20, 3, 3, 3, 3, 3, 3, 3],
fill: false,
data: this.memcpu.workingSet
},
{
label: "Private (MB)",
borderColor: CHART_COLOR.orange,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.memcpu.privateBytes
}
]
};
},
attachSizeChartData() {
return {
datasets: [
{
label: "Attachments (MB)",
borderColor: CHART_COLOR.purple,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.storage.attachmentFileSize
},
{
label: "Available space (MB)",
borderColor: CHART_COLOR.orange,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.storage.attachmentFilesAvailableSpace
}
]
};
},
utilitySizeChartData() {
return {
datasets: [
{
label: "Backups / utility (MB)",
borderColor: CHART_COLOR.purple,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.storage.utilityFileSize
},
{
label: "Available space (MB)",
borderColor: CHART_COLOR.orange,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.storage.utilityFilesAvailableSpace
}
]
};
},
fileCountChartData() {
return {
datasets: [
{
label: "Attachments",
borderColor: CHART_COLOR.purple,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.storage.attachmentFileCount
},
{
label: "Backup / utility",
borderColor: CHART_COLOR.orange,
fill: false,
radius: 0,
hoverRadius: 10,
hitRadius: 4,
data: this.storage.utilityFileCount
}
]
};
}
}
};
//////////////////////
//
//
function tabIndexToRoute(tabIndex) {
switch (tabIndex) {
case 0:
return "routes";
case 1:
return "storage";
case 2:
return "memcpu";
}
}
//////////////////////
//
//