mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2025-01-20 07:19:17 +01:00
vmui: setup predefined dashboards without build (#2541)
vmui: support predefined dashboards in json format See https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/app/vmselect/vmui/dashboards
This commit is contained in:
Yury Molodov
Aliaksandr Valialkin
parent
ee1f8bae2e
commit
d13437afd0
@ -1,14 +1,12 @@
|
||||
{
|
||||
"files": {
|
||||
"main.css": "./static/css/main.d8362c27.css",
|
||||
"main.js": "./static/js/main.f64c8675.js",
|
||||
"static/js/362.1f16598a.chunk.js": "./static/js/362.1f16598a.chunk.js",
|
||||
"main.js": "./static/js/main.a54e3212.js",
|
||||
"static/js/27.939f971b.chunk.js": "./static/js/27.939f971b.chunk.js",
|
||||
"static/media/README.md": "./static/media/README.40ebc3a1f4adae949154.md",
|
||||
"index.html": "./index.html"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.d8362c27.css",
|
||||
"static/js/main.f64c8675.js"
|
||||
"static/js/main.a54e3212.js"
|
||||
]
|
||||
}
|
||||
@ -1,3 +1,8 @@
|
||||
### Setup
|
||||
1. Create `.json` config file in a folder `dashboards`
|
||||
2. Import your config file into the `dashboards/index.js`
|
||||
3. Add imported variable into the array `window.__VMUI_PREDEFINED_DASHBOARDS__`
|
||||
|
||||
### Configuration options
|
||||
|
||||
<br/>
|
||||
5
app/vmselect/vmui/dashboards/index.js
Normal file
5
app/vmselect/vmui/dashboards/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import perJob from "./perJobUsage.json" assert { type: "json" };
|
||||
|
||||
window.__VMUI_PREDEFINED_DASHBOARDS__ = [
|
||||
perJob
|
||||
];
|
||||
@ -17,12 +17,12 @@
|
||||
"title": "Per-job disk read",
|
||||
"width": 6,
|
||||
"expr": ["sum(rate(process_io_storage_read_bytes_total)) by (job)"]
|
||||
},{
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk write",
|
||||
"width": 6,
|
||||
"expr": ["sum(rate(process_io_storage_written_bytes_total)) by (job)"]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -1 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.f64c8675.js"></script><link href="./static/css/main.d8362c27.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link href="./favicon.ico" rel="icon"/><meta content="width=device-width,initial-scale=1" name="viewport"/><meta content="#000000" name="theme-color"/><meta content="VM-UI is a metric explorer for Victoria Metrics" name="description"/><link href="./apple-touch-icon.png" rel="apple-touch-icon"/><link href="./favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="./manifest.json" rel="manifest"/><title>VM UI</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/><script src="./dashboards/index.js" type="module"></script><script defer="defer" src="./static/js/main.a54e3212.js"></script><link href="./static/css/main.d8362c27.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[362],{8362:function(e,a,s){e.exports=s.p+"static/media/README.40ebc3a1f4adae949154.md"}}]);
|
||||
2
app/vmselect/vmui/static/js/main.a54e3212.js
Normal file
2
app/vmselect/vmui/static/js/main.a54e3212.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,3 +1,8 @@
|
||||
### Setup
|
||||
1. Create `.json` config file in a folder `dashboards`
|
||||
2. Import your config file into the `dashboards/index.js`
|
||||
3. Add imported variable into the array `window.__VMUI_PREDEFINED_DASHBOARDS__`
|
||||
|
||||
### Configuration options
|
||||
|
||||
<br/>
|
||||
5
app/vmui/packages/vmui/public/dashboards/index.js
Normal file
5
app/vmui/packages/vmui/public/dashboards/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import perJob from "./perJobUsage.json" assert { type: "json" };
|
||||
|
||||
window.__VMUI_PREDEFINED_DASHBOARDS__ = [
|
||||
perJob
|
||||
];
|
||||
29
app/vmui/packages/vmui/public/dashboards/perJobUsage.json
Normal file
29
app/vmui/packages/vmui/public/dashboards/perJobUsage.json
Normal file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"title": "per-job resource usage",
|
||||
"rows": [
|
||||
{
|
||||
"panels": [
|
||||
{
|
||||
"title": "Per-job CPU usage",
|
||||
"width": 6,
|
||||
"expr": ["sum(rate(process_cpu_seconds_total)) by (job)"]
|
||||
},
|
||||
{
|
||||
"title": "Per-job RSS usage",
|
||||
"width": 6,
|
||||
"expr": ["sum(process_resident_memory_bytes) by (job)"]
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk read",
|
||||
"width": 6,
|
||||
"expr": ["sum(rate(process_io_storage_read_bytes_total)) by (job)"]
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk write",
|
||||
"width": 6,
|
||||
"expr": ["sum(rate(process_io_storage_written_bytes_total)) by (job)"]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -27,6 +27,7 @@
|
||||
-->
|
||||
<title>VM UI</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
||||
<script src="%PUBLIC_URL%/dashboards/index.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -20,7 +20,7 @@ const DashboardLayout: FC = () => {
|
||||
}, [dashboards, tab]);
|
||||
|
||||
useEffect(() => {
|
||||
getDashboardSettings().then(d => d.length && setDashboards(d));
|
||||
setDashboards(getDashboardSettings());
|
||||
}, []);
|
||||
|
||||
return <>
|
||||
|
||||
@ -1,14 +1,6 @@
|
||||
import {DashboardSettings} from "../../types";
|
||||
|
||||
const importModule = async (filename: string) => {
|
||||
const module = await import(`../../dashboards/${filename}`);
|
||||
module.default.filename = filename;
|
||||
return module.default as DashboardSettings;
|
||||
};
|
||||
|
||||
export default async () => {
|
||||
const context = require.context("../../dashboards", true, /\.json$/);
|
||||
const filenames = context.keys().map(r => r.replace("./", ""));
|
||||
return await Promise.all(filenames.map(async f => importModule(f)));
|
||||
export default (): DashboardSettings[] => {
|
||||
return window.__VMUI_PREDEFINED_DASHBOARDS__ || [];
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
import {MetricBase} from "../api/types";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__VMUI_PREDEFINED_DASHBOARDS__: DashboardSettings[];
|
||||
}
|
||||
}
|
||||
|
||||
export interface TimeParams {
|
||||
start: number; // timestamp in seconds
|
||||
end: number; // timestamp in seconds
|
||||
|
||||
Loading…
Reference in New Issue
Block a user