thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-15 20:24:07 +00:00
Code Issues Packages Projects Releases Wiki Activity
a918f88c74
ClickHouse/programs/server/dashboard.html

1125 lines
36 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ClickHouse Dashboard</title>
<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDkgOCI+PHN0eWxlPi5ve2ZpbGw6I2ZjMH0ucntmaWxsOnJlZH08L3N0eWxlPjxwYXRoIGQ9Ik0wLDcgaDEgdjEgaC0xIHoiIGNsYXNzPSJyIi8+PHBhdGggZD0iTTAsMCBoMSB2NyBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNMiwwIGgxIHY4IGgtMSB6IiBjbGFzcz0ibyIvPjxwYXRoIGQ9Ik00LDAgaDEgdjggaC0xIHoiIGNsYXNzPSJvIi8+PHBhdGggZD0iTTYsMCBoMSB2OCBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNOCwzLjI1IGgxIHYxLjUgaC0xIHoiIGNsYXNzPSJvIi8+PC9zdmc+">
<script src="https://cdn.jsdelivr.net/npm/uplot@1.6.21/dist/uPlot.iife.min.js"></script>
<style>
:root {
--color: black;
--background: linear-gradient(to bottom, #00CCFF, #00D0D0);
--chart-background: white;
--shadow-color: rgba(0, 0, 0, 0.25);
--input-shadow-color: rgba(0, 255, 0, 1);
--error-color: white;
--legend-background: rgba(255, 255, 255, 0.75);
--title-color: #666;
--text-color: black;
--edit-title-background: #FEE;
--edit-title-border: #F88;
--button-background-color: #FFCB80;
--button-text-color: black;
--new-chart-background-color: #EEE;
--new-chart-text-color: black;
--param-background-color: #EEE;
--param-text-color: black;
--input-background: white;
--chart-button-hover-color: red;
}
[data-theme="dark"] {
--color: white;
--background: #151C2C;
--chart-background: #1b2834;
--shadow-color: rgba(0, 0, 0, 0);
--input-shadow-color: rgba(255, 128, 0, 0.25);
--error-color: #F66;
--legend-background: rgba(255, 255, 255, 0.25);
--title-color: white;
--text-color: white;
--edit-title-background: #364f69;
--edit-title-border: #333;
--button-background-color: orange;
--button-text-color: black;
--new-chart-background-color: #666;
--new-chart-text-color: white;
--param-background-color: #666;
--param-text-color: white;
--input-background: #364f69;
--chart-button-hover-color: #F40;
}
* {
box-sizing: border-box;
}
html, body {
color: var(--color);
height: 100%;
overflow: auto;
margin: 0;
}
body {
font-family: Liberation Sans, DejaVu Sans, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji;
padding: 1rem;
overflow-x: hidden;
background: var(--background);
display: grid;
grid-template-columns: auto;
grid-template-rows: fit-content(10%) auto;
}
input {
/* iPad, Safari */
border-radius: 0;
margin: 0;
}
#charts
{
height: 100%;
display: flex;
flex-flow: row wrap;
gap: 1rem;
}
.chart {
flex: 1 40%;
min-width: 20rem;
min-height: 16rem;
background: var(--chart-background);
box-shadow: 0 0 1rem var(--shadow-color);
overflow: hidden;
position: relative;
}
.chart div { position: absolute; }
.inputs {
height: auto;
width: 100%;
font-size: 14pt;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.inputs.unconnected {
height: 100vh;
}
.unconnected #params {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.unconnected #connection-params {
width: 50%;
display: flex;
flex-flow: column nowrap;
}
.unconnected #url {
width: 100%;
}
.unconnected #button-options {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0.3rem;
}
.unconnected #user {
margin-right: 0;
width: auto;
}
.unconnected #password {
width: auto;
}
#user {
margin-right: 0.25rem;
width: 50%;
}
#password {
width: 49.5%;
}
.unconnected input {
margin-bottom: 5px;
}
#username-password {
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.unconnected #username-password {
width: 100%;
gap: 0.3rem;
display: grid;
grid-template-columns: 1fr 1fr;
}
.inputs #chart-params {
display: block;
}
.inputs.unconnected #chart-params {
display: none;
}
#connection-params {
margin-bottom: 0.5rem;
display: grid;
grid-template-columns: 69.77% 30%;
column-gap: 0.25rem;
}
.inputs input {
box-shadow: 0 0 1rem var(--shadow-color);
padding: 0.25rem;
}
#chart-params input {
margin-right: 0.25rem;
}
input {
font-family: Liberation Sans, DejaVu Sans, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji;
outline: none;
border: none;
font-size: 14pt;
background-color: var(--input-background);
color: var(--text-color);
}
.u-legend th { display: none; }
.themes {
float: right;
font-size: 20pt;
gap: 0.3rem;
display: flex;
justify-content: center;
}
#toggle-dark, #toggle-light {
padding-right: 0.5rem;
user-select: none;
cursor: pointer;
}
#toggle-dark:hover, #toggle-light:hover {
display: inline-block;
transform: translate(1px, 1px);
filter: brightness(125%);
}
#run {
background: var(--button-background-color);
color: var(--button-text-color);
font-weight: bold;
user-select: none;
cursor: pointer;
margin-bottom: 1rem;
}
#run:hover {
filter: contrast(125%);
}
#add, #reload {
padding: .25rem 0.5rem;
text-align: center;
font-weight: bold;
user-select: none;
cursor: pointer;
padding-left: 0.5rem;
padding-right: 0.5rem;
background: var(--new-chart-background-color);
color: var(--new-chart-text-color);
float: right;
margin-right: 1rem !important;
margin-left: 0rem;
margin-bottom: 1rem;
}
/* .unconnected #reload {
margin-left: 3px;
} */
#add:hover, #reload:hover {
background: var(--button-background-color);
}
#auth-error {
align-self: center;
width: 60%;
padding: .5rem;
color: var(--error-color);
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
form {
display: inline;
}
form .param_name {
font-size: 14pt;
padding: 0.25rem;
background: var(--param-background-color);
color: var(--param-text-color);
display: inline-block;
box-shadow: 0 0 1rem var(--shadow-color);
margin-bottom: 1rem;
}
input:focus {
box-shadow: 0 0 1rem var(--input-shadow-color);
}
.title {
left: 50%;
top: 0.25em;
transform: translate(-50%, 0);
font-size: 16pt;
font-weight: bold;
color: var(--title-color);
z-index: 10;
}
.chart-buttons {
cursor: pointer;
display: none;
position: absolute;
top: 0.25rem;
right: 0.25rem;
font-size: 200%;
color: #888;
z-index: 10;
}
.chart-buttons a {
margin-right: 0.25rem;
}
.chart-buttons a:hover {
color: var(--chart-button-hover-color);
}
.disabled {
opacity: 0.5;
}
.query-editor {
display: none;
grid-template-columns: auto fit-content(10%);
grid-template-rows: auto fit-content(10%);
z-index: 11;
position: absolute;
width: 100%;
height: 100%;
}
.query-error {
display: none;
z-index: 10;
position: absolute;
color: var(--error-color);
padding: 2rem;
}
.query-editor textarea {
grid-row: 1;
grid-column: 1 / span 2;
z-index: 11;
padding: 0.5rem;
outline: none;
border: none;
font-size: 12pt;
border-bottom: 1px solid var(--edit-title-border);
background: var(--chart-background);
color: var(--text-color);
resize: none;
margin: 0;
}
.query-editor input {
grid-row: 2;
padding: 0.5rem;
}
.edit-title {
background: var(--edit-title-background);
}
.edit-confirm {
background: var(--button-background-color);
color: var(--button-text-color);
font-weight: bold;
cursor: pointer;
}
.edit-confirm:hover {
filter: contrast(125%);
}
.nowrap {
white-space: pre;
}
/* Source: https://cdn.jsdelivr.net/npm/uplot@1.6.21/dist/uPlot.min.css
* It is copy-pasted to lower the number of requests.
*/
.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;z-index: 100;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;z-index: 100;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
</style>
</head>
<body>
<div class="inputs unconnected">
<form id="params">
<div id="connection-params">
<input spellcheck="false" id="url" type="text" value="" placeholder="URL" />
<div id="username-password">
<input spellcheck="false" id="user" type="text" value="" placeholder="user" />
<input spellcheck="false" id="password" type="password" placeholder="password" />
</div>
</div>
<div id="button-options">
<span class="nowrap themes"><span id="toggle-dark">🌚</span><span id="toggle-light">🌞</span></span>
<input id="add" type="button" value="Add chart" style="display: none;">
<input id="reload" type="button" value="Reload">
<div id="chart-params"></div>
</div>
</form>
<div id="auth-error"></div>
</div>
<div id="charts"></div>
<script>
/** Implementation note: it might be more natural to use some reactive framework.
* But for now it is small enough to avoid it. As a bonus we have less number of dependencies,
* which is better for maintainability.
*
* TODO:
* - zoom on the graphs should work on touch devices;
* - add mass edit capability (edit the JSON config as a whole);
* - compress the state for URL's #hash;
* - save/load JSON configuration;
* - footer with "about" or a link to source code;
* - allow to configure a table on a server to save the dashboards;
* - multiple lines on chart;
* - if a query returned one value, display this value instead of a diagram;
* - if a query returned something unusual, display the table;
*/
let host = 'https://play.clickhouse.com/';
let user = 'explorer';
let password = '';
/// If it is hosted on server, assume that it is the address of ClickHouse.
if (location.protocol != 'file:') {
host = location.origin;
user = 'default';
}
const errorCodeMessageMap = {
516: 'Error authenticating with database. Please check your connection params and try again.'
}
const errorMessages = [
{
regex: /TypeError: Failed to fetch/,
messageFunc: () => 'Error authenticating with database. Please check your connection url and try again.',
},
{
regex: /Code: (\d+)/,
messageFunc: (match) => {
return errorCodeMessageMap[match[1]]
}
}
]
/// This is just a demo configuration of the dashboard.
let queries = [
{
"title": "Queries/second",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_Query)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "CPU Usage (cores)",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_OSCPUVirtualTimeMicroseconds) / 1000000
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Queries Running",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(CurrentMetric_Query)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Merges Running",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(CurrentMetric_Merge)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Selected Bytes/second",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_SelectedBytes)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "IO Wait",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_OSIOWaitMicroseconds) / 1000000
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "CPU Wait",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_OSCPUWaitMicroseconds) / 1000000
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "OS CPU Usage (Userspace)",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(value)
FROM system.asynchronous_metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
AND metric = 'OSUserTimeNormalized'
GROUP BY t
ORDER BY t`
},
{
"title": "OS CPU Usage (Kernel)",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(value)
FROM system.asynchronous_metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
AND metric = 'OSSystemTimeNormalized'
GROUP BY t
ORDER BY t`
},
{
"title": "Read From Disk",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_OSReadBytes)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Read From Filesystem",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_OSReadChars)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Memory (tracked)",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(CurrentMetric_MemoryTracking)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Load Average (15 minutes)",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(value)
FROM system.asynchronous_metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
AND metric = 'LoadAverage15'
GROUP BY t
ORDER BY t`
},
{
"title": "Selected Rows/second",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_SelectedRows)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Inserted Rows/second",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(ProfileEvent_InsertedRows)
FROM system.metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
GROUP BY t
ORDER BY t`
},
{
"title": "Total MergeTree Parts",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, avg(value)
FROM system.asynchronous_metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
AND metric = 'TotalPartsOfMergeTreeTables'
GROUP BY t
ORDER BY t`
},
{
"title": "Max Parts For Partition",
"query": `SELECT toStartOfInterval(event_time, INTERVAL {rounding:UInt32} SECOND)::INT AS t, max(value)
FROM system.asynchronous_metric_log
WHERE event_date >= toDate(now() - {seconds:UInt32}) AND event_time >= now() - {seconds:UInt32}
AND metric = 'MaxPartCountForPartition'
GROUP BY t
ORDER BY t`
}
];
/// Query parameters with predefined default values.
/// All other parameters will be automatically found in the queries.
let params = {
"rounding": "60",
"seconds": "86400"
};
let theme = 'light';
function setTheme(new_theme) {
theme = new_theme;
document.documentElement.setAttribute('data-theme', theme);
window.localStorage.setItem('theme', theme);
drawAll();
}
document.getElementById('toggle-light').addEventListener('click', e => setTheme('light'));
document.getElementById('toggle-dark').addEventListener('click', e => setTheme('dark'));
/// uPlot objects will go here.
let plots = [];
/// chart div's will be here.
let charts = document.getElementById('charts');
/// This is not quite correct (we cannot really parse SQL with regexp) but tolerable.
const query_param_regexp = /\{(\w+):[^}]+\}/g;
/// Automatically parse more parameters from the queries.
function findParamsInQuery(query, new_params) {
for (let match of query.matchAll(query_param_regexp)) {
const name = match[1];
new_params[name] = params[name] || '';
}
}
function findParamsInQueries() {
let new_params = {}
queries.forEach(q => findParamsInQuery(q.query, new_params));
params = new_params;
}
function insertParam(name, value) {
let param_wrapper = document.createElement('span');
param_wrapper.className = 'nowrap';
let param_name = document.createElement('span');
param_name.className = 'param_name';
let param_name_text = document.createTextNode(`${name}: `);
param_name.appendChild(param_name_text);
let param_value = document.createElement('input');
param_value.className = 'param';
param_value.name = `${name}`;
param_value.type = 'text';
param_value.value = value;
param_value.spellcheck = false;
param_wrapper.appendChild(param_name);
param_wrapper.appendChild(param_value);
document.getElementById('chart-params').appendChild(param_wrapper);
}
function buildParams() {
let params_elem = document.getElementById('chart-params');
while (params_elem.firstChild) {
params_elem.removeChild(params_elem.lastChild);
}
for (let [name, value] of Object.entries(params)) {
insertParam(name, value);
}
let run = document.createElement('input');
run.id = 'run';
run.type = 'submit';
run.value = 'Ok';
document.getElementById('chart-params').appendChild(run);
}
function updateParams() {
[...document.getElementsByClassName('param')].forEach(e => { params[e.name] = e.value });
}
function getParamsForURL() {
let url = '';
for (let [name, value] of Object.entries(params)) {
url += `&param_${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
};
return url;
}
function insertChart(i) {
let q = queries[i];
let chart = document.createElement('div');
chart.className = 'chart';
let chart_title = document.createElement('div');
let title_text = document.createTextNode('');
chart_title.appendChild(title_text);
chart_title.className = 'title';
chart.appendChild(chart_title);
let query_error = document.createElement('div');
query_error.className = 'query-error';
query_error.appendChild(document.createTextNode(''));
chart.appendChild(query_error);
let query_editor = document.createElement('div');
query_editor.className = 'query-editor';
let query_editor_textarea = document.createElement('textarea');
query_editor_textarea.spellcheck = false;
query_editor_textarea.value = q.query;
query_editor_textarea.placeholder = 'Query';
query_editor.appendChild(query_editor_textarea);
let query_editor_title = document.createElement('input');
query_editor_title.type = 'text';
query_editor_title.value = q.title;
query_editor_title.placeholder = 'Chart title';
query_editor_title.className = 'edit-title';
query_editor.appendChild(query_editor_title);
let query_editor_confirm = document.createElement('input');
query_editor_confirm.type = 'submit';
query_editor_confirm.value = 'Ok';
query_editor_confirm.className = 'edit-confirm';
function getCurrentIndex() {
/// Indices may change after deletion of other element, hence captured "i" may become incorrect.
return [...charts.querySelectorAll('.chart')].findIndex(child => chart == child);
}
function editConfirm() {
query_editor.style.display = 'none';
query_error.style.display = 'none';
q.title = query_editor_title.value;
q.query = query_editor_textarea.value;
title_text.data = '';
findParamsInQuery(q.query, params);
buildParams();
const idx = getCurrentIndex();
draw(idx, chart, getParamsForURL(), q.query);
saveState();
}
query_editor_confirm.addEventListener('click', editConfirm);
/// Ctrl+Enter (or Cmd+Enter on Mac) will also confirm editing.
query_editor.addEventListener('keydown', e => {
if ((event.metaKey || event.ctrlKey) && (event.keyCode == 13 || event.keyCode == 10)) {
editConfirm();
}
});
query_editor.addEventListener('keyup', e => {
if (e.key == 'Escape') {
query_editor.style.display = 'none';
}
});
query_editor.appendChild(query_editor_confirm);
chart.appendChild(query_editor);
let edit_buttons = document.createElement('div');
edit_buttons.className = 'chart-buttons';
let edit = document.createElement('a');
let edit_text = document.createTextNode('✎');
edit.appendChild(edit_text);
function editStart() {
query_editor.style.display = 'grid';
query_editor_textarea.focus();
}
edit.addEventListener('click', e => editStart());
if (!q.query) {
editStart();
}
let trash = document.createElement('a');
let trash_text = document.createTextNode('✕');
trash.appendChild(trash_text);
trash.addEventListener('click', e => {
const idx = getCurrentIndex();
if (plots[idx]) {
plots[idx].destroy();
plots[idx] = null;
}
plots.splice(idx, 1);
charts.removeChild(chart);
queries.splice(idx, 1);
findParamsInQueries();
buildParams();
resize();
saveState();
});
edit_buttons.appendChild(edit);
edit_buttons.appendChild(trash);
chart.appendChild(edit_buttons);
chart.addEventListener('mouseenter', e => { edit_buttons.style.display = 'block'; });
chart.addEventListener('mouseleave', e => { edit_buttons.style.display = 'none'; });
charts.appendChild(chart);
return {chart: chart, textarea: query_editor_textarea};
};
document.getElementById('add').addEventListener('click', e => {
queries.push({ title: '', query: '' });
const {chart, textarea} = insertChart(plots.length);
chart.scrollIntoView();
textarea.focus();
plots.push(null);
resize();
});
document.getElementById('reload').addEventListener('click', e => {
reloadAll();
});
function legendAsTooltipPlugin({ className, style = { background: "var(--legend-background)" } } = {}) {
let legendEl;
function init(u, opts) {
legendEl = u.root.querySelector(".u-legend");
legendEl.classList.remove("u-inline");
className && legendEl.classList.add(className);
uPlot.assign(legendEl.style, {
textAlign: "left",
pointerEvents: "none",
display: "none",
position: "absolute",
left: 0,
top: 0,
zIndex: 100,
boxShadow: "2px 2px 10px rgba(0,0,0,0.1)",
...style
});
// hide series color markers
const idents = legendEl.querySelectorAll(".u-marker");
for (let i = 0; i < idents.length; i++)
idents[i].style.display = "none";
const overEl = u.over;
overEl.appendChild(legendEl);
overEl.addEventListener("mouseenter", () => {legendEl.style.display = null;});
overEl.addEventListener("mouseleave", () => {legendEl.style.display = "none";});
}
function update(u) {
let { left, top } = u.cursor;
left -= legendEl.clientWidth / 2;
top -= legendEl.clientHeight / 2;
legendEl.style.transform = "translate(" + left + "px, " + top + "px)";
}
return {
hooks: {
init: init,
setCursor: update,
}
};
}
let add_http_cors_header = false;
async function draw(idx, chart, url_params, query) {
if (plots[idx]) {
plots[idx].destroy();
plots[idx] = null;
}
host = document.getElementById('url').value;
user = document.getElementById('user').value;
password = document.getElementById('password').value;
let url = `${host}?default_format=JSONCompactColumns`
if (add_http_cors_header) {
// For debug purposes, you may set add_http_cors_header from a browser console
url += '&add_http_cors_header=1';
}
if (user) {
url += `&user=${encodeURIComponent(user)}`;
}
if (password) {
url += `&password=${encodeURIComponent(password)}`;
}
let response, data, error;
try {
response = await fetch(url + url_params, { method: "POST", body: query });
data = await response.text();
if (response.ok) {
data = JSON.parse(data);
} else {
error = data;
}
} catch (e) {
console.log(e);
error = e.toString();
}
if (error) {
const errorMatch = errorMessages.find(({ regex }) => error.match(regex))
if (errorMatch) {
const match = error.match(errorMatch.regex)
const message = errorMatch.messageFunc(match)
const authError = new Error(message)
throw authError
}
}
if (!error) {
if (!Array.isArray(data)) {
error = "Query should return an array.";
} else if (data.length == 0) {
error = "Query returned empty result.";
} else if (data.length != 2) {
error = "Query should return exactly two columns: unix timestamp and value.";
} else if (!Array.isArray(data[0]) || !Array.isArray(data[1]) || data[0].length != data[1].length) {
error = "Wrong data format of the query.";
}
}
let error_div = chart.querySelector('.query-error');
let title_div = chart.querySelector('.title');
if (error) {
error_div.firstChild.data = error;
title_div.style.display = 'none';
error_div.style.display = 'block';
return false;
} else {
error_div.firstChild.data = '';
error_div.style.display = 'none';
title_div.style.display = 'block';
}
const [line_color, fill_color, grid_color, axes_color] = theme != 'dark'
? ["#F88", "#FEE", "#EED", "#2c3235"]
: ["#864", "#045", "#2c3235", "#c7d0d9"];
let sync = uPlot.sync("sync");
const max_value = Math.max(...data[1]);
const opts = {
width: chart.clientWidth,
height: chart.clientHeight,
axes: [ { stroke: axes_color,
grid: { width: 1 / devicePixelRatio, stroke: grid_color },
ticks: { width: 1 / devicePixelRatio, stroke: grid_color } },
{ stroke: axes_color,
grid: { width: 1 / devicePixelRatio, stroke: grid_color },
ticks: { width: 1 / devicePixelRatio, stroke: grid_color } } ],
series: [ { label: "x" },
{ label: "y", stroke: line_color, fill: fill_color } ],
padding: [ null, null, null, (Math.round(max_value * 100) / 100).toString().length * 6 - 10 ],
plugins: [ legendAsTooltipPlugin() ],
cursor: {
sync: {
key: "sync",
}
}
};
plots[idx] = new uPlot(opts, data, chart);
sync.sub(plots[idx]);
/// Set title
const title = queries[idx] && queries[idx].title ? queries[idx].title.replaceAll(/\{(\w+)\}/g, (_, name) => params[name] ) : '';
chart.querySelector('.title').firstChild.data = title;
return true
}
function showAuthError(message) {
const charts = document.querySelector('#charts');
charts.style.height = '0px';
charts.style.opacity = '0';
const add = document.querySelector('#add');
add.style.display = 'none';
const authError = document.querySelector('#auth-error');
authError.textContent = message;
authError.style.display = 'flex';
}
function hideAuthError() {
const charts = document.querySelector('#charts');
charts.style.height = 'auto';
charts.style.opacity = '1';
const authError = document.querySelector('#auth-error');
authError.textContent = '';
authError.style.display = 'none';
}
let firstLoad = true;
async function drawAll() {
let params = getParamsForURL();
const chartsArray = document.getElementsByClassName('chart');
if (!firstLoad) {
hideAuthError();
}
await Promise.all([...Array(queries.length)].map(async (_, i) => {
return draw(i, chartsArray[i], params, queries[i].query).catch((e) => {
if (!firstLoad) {
showAuthError(e.message);
}
return false;
});
})).then((results) => {
if (firstLoad) {
firstLoad = false;
} else {
enableReloadButton();
}
if (!results.includes(false)) {
const element = document.querySelector('.inputs');
element.classList.remove('unconnected');
const add = document.querySelector('#add');
add.style.display = 'block';
} else {
const charts = document.querySelector('#charts')
charts.style.height = '0px';
}
})
}
function resize() {
plots.forEach(plot => {
if (plot) {
let chart = plot.over.closest('.chart');
plot.setSize({ width: chart.clientWidth, height: chart.clientHeight });
}
});
}
new ResizeObserver(resize).observe(document.body);
function disableReloadButton() {
const reloadButton = document.getElementById('reload')
reloadButton.value = 'Reloading...'
reloadButton.disabled = true
reloadButton.classList.add('disabled')
}
function enableReloadButton() {
const reloadButton = document.getElementById('reload')
reloadButton.value = 'Reload'
reloadButton.disabled = false
reloadButton.classList.remove('disabled')
}
function reloadAll() {
updateParams();
drawAll();
saveState();
disableReloadButton()
}
document.getElementById('params').onsubmit = function(event) {
reloadAll();
event.preventDefault();
}
function saveState() {
const state = { host: host, user: user, queries: queries, params: params };
history.pushState(state, '',
window.location.pathname + (window.location.search || '') + '#' + btoa(JSON.stringify(state)));
}
function regenerate() {
document.getElementById('url').value = host;
document.getElementById('user').value = user;
document.getElementById('password').value = password;
findParamsInQueries();
buildParams();
plots.forEach(elem => elem && elem.destroy());
plots = queries.map(e => null);
while (charts.firstChild) {
charts.removeChild(charts.lastChild);
}
for (let i = 0; i < queries.length; ++i) {
insertChart(i);
}
}
window.onpopstate = function(event) {
if (!event.state) { return; }
({host, user, queries, params} = event.state);
regenerate();
drawAll();
};
if (window.location.hash) {
try {
({host, user, queries, params} = JSON.parse(atob(window.location.hash.substring(1))));
} catch {}
}
regenerate();
let new_theme = window.localStorage.getItem('theme');
if (new_theme && new_theme != theme) {
setTheme(new_theme);
} else {
drawAll();
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink