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-06-02 15:59:29 +00:00
parent 857644fada
commit 583fde9fd0
2 changed files with 52 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,9 +55,10 @@
/>
</v-sheet>
</v-col>
<v-col cols="12" class="my-1">
<v-col cols="3" class="my-1">
{{ dbTopTablesChartData }}
<v-sheet elevation="4">
<gz-chart-pie :chartData="dbTopTenChartData" />
<gz-chart-pie :chartData="dbTopTablesChartData" />
</v-sheet>
</v-col>
</v-tab-item>
@@ -102,7 +103,7 @@ import relativeDatefilterCalculator from "../api/relative-date-filter-calculator
const FORM_KEY = "ops-metrics";
//Pleasing combo of contrasting colors for lines
//from http://perceptualedge.com/articles/b-eye/choosing_colors.pdf
const CHART_COLOR = {
const CHART_PALETTE = {
blue: "#1f77b4",
red: "#d62728",
orange: "#fe7f0e",
@@ -291,7 +292,7 @@ export default {
datasets: [
{
label: "CPU %",
borderColor: CHART_COLOR.teal,
borderColor: CHART_PALETTE.teal,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -306,7 +307,7 @@ export default {
datasets: [
{
label: "DB Size (MB)",
borderColor: CHART_COLOR.blue,
borderColor: CHART_PALETTE.blue,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -316,27 +317,22 @@ export default {
]
};
},
dbTopTenChartData() {
dbTopTablesChartData() {
// debugger;
return {
// These labels appear in the legend and in the tooltips when hovering different arcs
//_.map(users, 'user');
labels: window.$gz._.map(this.db.topTables, "name"),
datasets: [
{
data: [10, 20, 30]
label: "Table size (MB)",
data: window.$gz._.map(this.db.topTables, "value"),
backgroundColor: getPalette(
this.db.topTables ? this.db.topTables.length : 3
)
// getPalette( this.db.topTables ? this.db.topTables.length : 3 )
}
],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: ["Red", "Yellow", "Blue"]
// datasets: [
// {
// label: "Table size (MB)",
// borderColor: CHART_COLOR.blue,
// fill: false,
// radius: 0,
// hoverRadius: 10,
// hitRadius: 4,
// data: this.db.topTen
// }
// ]
]
};
},
gcAllChartData() {
@@ -344,7 +340,7 @@ export default {
datasets: [
{
label: "GC Gen0",
borderColor: CHART_COLOR.blue,
borderColor: CHART_PALETTE.blue,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -353,7 +349,7 @@ export default {
},
{
label: "GC Gen1",
borderColor: CHART_COLOR.red,
borderColor: CHART_PALETTE.red,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -362,7 +358,7 @@ export default {
},
{
label: "GC Gen2",
borderColor: CHART_COLOR.green,
borderColor: CHART_PALETTE.green,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -377,7 +373,7 @@ export default {
datasets: [
{
label: "Allocated (MB)",
borderColor: CHART_COLOR.purple,
borderColor: CHART_PALETTE.purple,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -386,7 +382,7 @@ export default {
},
{
label: "Working set (MB)",
borderColor: CHART_COLOR.green,
borderColor: CHART_PALETTE.green,
//borderWidth:4,
// pointStyle: "rectRot",
radius: 0,
@@ -398,7 +394,7 @@ export default {
},
{
label: "Private (MB)",
borderColor: CHART_COLOR.orange,
borderColor: CHART_PALETTE.orange,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -413,7 +409,7 @@ export default {
datasets: [
{
label: "Attachments (MB)",
borderColor: CHART_COLOR.purple,
borderColor: CHART_PALETTE.purple,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -423,7 +419,7 @@ export default {
{
label: "Available space (MB)",
borderColor: CHART_COLOR.green,
borderColor: CHART_PALETTE.green,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -438,7 +434,7 @@ export default {
datasets: [
{
label: "Backup (MB)",
borderColor: CHART_COLOR.orange,
borderColor: CHART_PALETTE.orange,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -448,7 +444,7 @@ export default {
{
label: "Available space (MB)",
borderColor: CHART_COLOR.green,
borderColor: CHART_PALETTE.green,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -463,7 +459,7 @@ export default {
datasets: [
{
label: "Attachment files",
borderColor: CHART_COLOR.purple,
borderColor: CHART_PALETTE.purple,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -473,7 +469,7 @@ export default {
{
label: "Backup files",
borderColor: CHART_COLOR.orange,
borderColor: CHART_PALETTE.orange,
fill: false,
radius: 0,
hoverRadius: 10,
@@ -486,6 +482,27 @@ export default {
}
};
///////////////////////
//
function getPalette(size) {
let palette = [
CHART_PALETTE.blue,
CHART_PALETTE.red,
CHART_PALETTE.green,
CHART_PALETTE.orange,
CHART_PALETTE.purple,
CHART_PALETTE.cyan,
CHART_PALETTE.teal,
CHART_PALETTE.black
];
let paletteLength = palette.length;
let ret = [];
for (let i = 0; i < size; i++) {
ret.push(palette[i % paletteLength]);
}
return ret;
}
//////////////////////
//
//

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

@@ -8,7 +8,7 @@
</v-col>
<v-col cols="12">
<v-card elevation="4">
<v-card :height="cardHeight" >
<v-card :height="cardHeight">
<iframe
id="profileFrame"
style="width:100%;height:100%"