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-28 21:16:49 +00:00
parent 261940ba5f
commit 8b390cda16
2 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ayanova/src/views/ops-log.vue
View File

@@ -14,7 +14,7 @@
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-card> <v-card elevation="4">
<v-card <v-card
:height="logCardHeight" :height="logCardHeight"
style="overflow:auto;" style="overflow:auto;"

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

@@ -1,7 +1,7 @@
<template> <template>
<v-row v-if="this.formState.ready"> <v-row v-if="this.formState.ready" v-resize="onResize">
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error> <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
<v-col cols="12"> <v-col cols="3">
<v-select <v-select
v-model="selectedTimePeriod" v-model="selectedTimePeriod"
:items="selectLists.dateFilterTokens" :items="selectLists.dateFilterTokens"
@@ -13,16 +13,22 @@
<v-btn @click="getDataFromApi"> <v-btn @click="getDataFromApi">
<v-icon>fa-sync</v-icon> <v-icon>fa-sync</v-icon>
</v-btn> </v-btn>
{{ $vuetify.breakpoint.name }} <!-- {{ $vuetify.breakpoint.name }} -->
</v-col> </v-col>
<v-col cols="12" class="my-1"> <v-col cols="12" class="my-1">
<gz-chart-line :chartData="memAllChartData" :options="mmChartOptions" /> <v-sheet elevation="4">
<gz-chart-line :chartData="memAllChartData" :options="mmChartOptions" />
</v-sheet>
</v-col> </v-col>
<v-col cols="12" class="my-1"> <v-col cols="12" class="my-1">
<gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" /> <v-sheet elevation="4">
<gz-chart-line :chartData="cpuChartData" :options="mmChartOptions" />
</v-sheet>
</v-col> </v-col>
<v-col cols="12" class="my-1"> <v-col cols="12" class="my-1">
<gz-chart-line :chartData="gcAllChartData" :options="mmChartOptions" /> <v-sheet elevation="4">
<gz-chart-line :chartData="gcAllChartData" :options="mmChartOptions" />
</v-sheet>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
@@ -37,13 +43,18 @@ import relativeDatefilterCalculator from "../api/relative-date-filter-calculator
const FORM_KEY = "ops-metrics"; const FORM_KEY = "ops-metrics";
//Pleasing combo of contrasting colors for lines //Pleasing combo of contrasting colors for lines
//from http://perceptualedge.com/articles/b-eye/choosing_colors.pdf //from http://perceptualedge.com/articles/b-eye/choosing_colors.pdf
const CHART_LINE_COLOR = { const CHART_COLOR = {
blue: "#1f77b4", blue: "#1f77b4",
red: "#d62728", red: "#d62728",
orange: "#fe7f0e", orange: "#fe7f0e",
green: "#2ca02c", green: "#2ca02c",
purple: "#9c27b0", purple: "#9c27b0",
yellow: "#ffeb3b" black: "#000000",
cyan: "#00BCD4",
teal: "#009688",
primary: "#00205B", //APP Canucks dark blue
secondary: "#00843D", //APP canucks green
accent: "#db7022" //APP lighter orangey red, more friendly looking though not as much clarity it seems
}; };
export default { export default {
@@ -97,7 +108,7 @@ export default {
datasets: [ datasets: [
{ {
label: "CPU %", label: "CPU %",
borderColor: "indigo", borderColor: CHART_COLOR.teal,
fill: false, fill: false,
data: this.obj.metricMM.cpu data: this.obj.metricMM.cpu
} }
@@ -109,19 +120,19 @@ export default {
datasets: [ datasets: [
{ {
label: "GC Gen0", label: "GC Gen0",
borderColor: "#972426", borderColor: CHART_COLOR.blue,
fill: false, fill: false,
data: this.obj.metricMM.gen0 data: this.obj.metricMM.gen0
}, },
{ {
label: "GC Gen1", label: "GC Gen1",
borderColor: "#2a4158", borderColor: CHART_COLOR.red,
fill: false, fill: false,
data: this.obj.metricMM.gen1 data: this.obj.metricMM.gen1
}, },
{ {
label: "GC Gen2", label: "GC Gen2",
borderColor: "#40817a", borderColor: CHART_COLOR.green,
fill: false, fill: false,
data: this.obj.metricMM.gen2 data: this.obj.metricMM.gen2
} }
@@ -133,19 +144,19 @@ export default {
datasets: [ datasets: [
{ {
label: "Allocated (MB)", label: "Allocated (MB)",
borderColor: "#fe7f0e", borderColor: CHART_COLOR.purple,
fill: false, fill: false,
data: this.obj.metricMM.allocated data: this.obj.metricMM.allocated
}, },
{ {
label: "Working set (MB)", label: "Working set (MB)",
borderColor: "#2ca02c", borderColor: CHART_COLOR.green,
fill: false, fill: false,
data: this.obj.metricMM.workingSet data: this.obj.metricMM.workingSet
}, },
{ {
label: "Private (MB)", label: "Private (MB)",
borderColor: "#1f77b4", borderColor: CHART_COLOR.orange,
fill: false, fill: false,
data: this.obj.metricMM.privateBytes data: this.obj.metricMM.privateBytes
} }
@@ -156,6 +167,7 @@ export default {
methods: { methods: {
onResize() { onResize() {
this.getDataFromApi(); this.getDataFromApi();
}, },
timePeriodChanged: function() { timePeriodChanged: function() {