mirror of
https://github.com/ClickHouse/ClickHouse.git
synced 2024-09-20 00:30:49 +00:00
Add mass editor
This commit is contained in:
parent
fe610d0394
commit
b2462a1bb7
@ -230,8 +230,8 @@
|
|||||||
filter: contrast(125%);
|
filter: contrast(125%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#add, #reload {
|
#add, #reload, #edit {
|
||||||
padding: .25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -244,13 +244,10 @@
|
|||||||
margin-right: 1rem !important;
|
margin-right: 1rem !important;
|
||||||
margin-left: 0rem;
|
margin-left: 0rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
height: 3ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .unconnected #reload {
|
#add:hover, #reload:hover, #edit:hover {
|
||||||
margin-left: 3px;
|
|
||||||
} */
|
|
||||||
|
|
||||||
#add:hover, #reload:hover {
|
|
||||||
background: var(--button-background-color);
|
background: var(--button-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -333,18 +330,21 @@
|
|||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.query-editor textarea {
|
textarea {
|
||||||
grid-row: 1;
|
|
||||||
grid-column: 1 / span 2;
|
|
||||||
z-index: 11;
|
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
border-bottom: 1px solid var(--edit-title-border);
|
|
||||||
background: var(--chart-background);
|
background: var(--chart-background);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
resize: none;
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-editor textarea {
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 1 / span 2;
|
||||||
|
z-index: 11;
|
||||||
|
border-bottom: 1px solid var(--edit-title-border);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -367,10 +367,41 @@
|
|||||||
filter: contrast(125%);
|
filter: contrast(125%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.edit-cancel {
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--new-chart-background-color);
|
||||||
|
}
|
||||||
|
.edit-cancel:hover {
|
||||||
|
filter: contrast(125%);
|
||||||
|
}
|
||||||
|
|
||||||
.nowrap {
|
.nowrap {
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#mass-editor {
|
||||||
|
display: none;
|
||||||
|
grid-template-columns: auto fit-content(10%) fit-content(10%);
|
||||||
|
grid-template-rows: auto fit-content(10%);
|
||||||
|
row-gap: 1rem;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mass-editor-textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 1 / span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mass-editor input {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mass-editor-message {
|
||||||
|
color: var(--auth-error-color);
|
||||||
|
}
|
||||||
|
|
||||||
/* Source: https://cdn.jsdelivr.net/npm/uplot@1.6.21/dist/uPlot.min.css
|
/* Source: https://cdn.jsdelivr.net/npm/uplot@1.6.21/dist/uPlot.min.css
|
||||||
* It is copy-pasted to lower the number of requests.
|
* It is copy-pasted to lower the number of requests.
|
||||||
*/
|
*/
|
||||||
@ -398,6 +429,12 @@
|
|||||||
<div id="auth-error"></div>
|
<div id="auth-error"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="charts"></div>
|
<div id="charts"></div>
|
||||||
|
<div id="mass-editor">
|
||||||
|
<textarea id="mass-editor-textarea" spellcheck="false"></textarea>
|
||||||
|
<span id="mass-editor-message"> </span>
|
||||||
|
<input type="submit" id="mass-editor-cancel" class="edit-cancel" value="Cancel">
|
||||||
|
<input type="submit" id="mass-editor-confirm" class="edit-confirm" value="Apply">
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
/** Implementation note: it might be more natural to use some reactive framework.
|
/** Implementation note: it might be more natural to use some reactive framework.
|
||||||
@ -816,6 +853,66 @@ document.getElementById('reload').addEventListener('click', e => {
|
|||||||
reloadAll();
|
reloadAll();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
let mass_editor_active = false;
|
||||||
|
|
||||||
|
function showMassEditor() {
|
||||||
|
document.getElementById('charts').style.display = 'none';
|
||||||
|
|
||||||
|
let editor_div = document.getElementById('mass-editor');
|
||||||
|
editor_div.style.display = 'grid';
|
||||||
|
|
||||||
|
let editor = document.getElementById('mass-editor-textarea');
|
||||||
|
editor.value = JSON.stringify(queries, null, 2);
|
||||||
|
|
||||||
|
mass_editor_active = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMassEditor() {
|
||||||
|
document.getElementById('mass-editor').style.display = 'none';
|
||||||
|
document.getElementById('charts').style.display = 'flex';
|
||||||
|
|
||||||
|
mass_editor_active = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function massEditorApplyChanges() {
|
||||||
|
let editor = document.getElementById('mass-editor-textarea');
|
||||||
|
queries = JSON.parse(editor.value);
|
||||||
|
hideMassEditor();
|
||||||
|
regenerate();
|
||||||
|
drawAll();
|
||||||
|
saveState();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('edit').addEventListener('click', e => {
|
||||||
|
if (mass_editor_active) {
|
||||||
|
massEditorApplyChanges();
|
||||||
|
hideMassEditor();
|
||||||
|
} else {
|
||||||
|
showMassEditor();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('mass-editor-confirm').addEventListener('click', e => {
|
||||||
|
massEditorApplyChanges();
|
||||||
|
hideMassEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('mass-editor-cancel').addEventListener('click', e => {
|
||||||
|
hideMassEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('mass-editor-textarea').addEventListener('input', e => {
|
||||||
|
let message = document.getElementById('mass-editor-message').firstChild;
|
||||||
|
message.data = '';
|
||||||
|
if (e.target.value != '') {
|
||||||
|
try { JSON.parse(e.target.value) } catch (e) {
|
||||||
|
message.data = e.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
function legendAsTooltipPlugin({ className, style = { background: "var(--legend-background)" } } = {}) {
|
function legendAsTooltipPlugin({ className, style = { background: "var(--legend-background)" } } = {}) {
|
||||||
let legendEl;
|
let legendEl;
|
||||||
|
|
||||||
@ -984,8 +1081,8 @@ function showAuthError(message) {
|
|||||||
const charts = document.getElementById('charts');
|
const charts = document.getElementById('charts');
|
||||||
charts.style.height = '0px';
|
charts.style.height = '0px';
|
||||||
charts.style.opacity = '0';
|
charts.style.opacity = '0';
|
||||||
const add = document.getElementById('add');
|
document.getElementById('add').style.display = 'none';
|
||||||
add.style.display = 'none';
|
document.getElementById('edit').style.display = 'none';
|
||||||
|
|
||||||
const authError = document.getElementById('auth-error');
|
const authError = document.getElementById('auth-error');
|
||||||
authError.textContent = message;
|
authError.textContent = message;
|
||||||
@ -1028,8 +1125,8 @@ async function drawAll() {
|
|||||||
if (results.includes(true)) {
|
if (results.includes(true)) {
|
||||||
const element = document.querySelector('.inputs');
|
const element = document.querySelector('.inputs');
|
||||||
element.classList.remove('unconnected');
|
element.classList.remove('unconnected');
|
||||||
const add = document.getElementById('add');
|
document.getElementById('add').style.display = 'inline-block';
|
||||||
add.style.display = 'block';
|
document.getElementById('edit').style.display = 'inline-block';
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
const charts = document.getElementById('charts')
|
const charts = document.getElementById('charts')
|
||||||
@ -1051,14 +1148,14 @@ new ResizeObserver(resize).observe(document.body);
|
|||||||
|
|
||||||
function disableReloadButton() {
|
function disableReloadButton() {
|
||||||
const reloadButton = document.getElementById('reload')
|
const reloadButton = document.getElementById('reload')
|
||||||
reloadButton.value = 'Reloading...'
|
reloadButton.value = 'Reloading…'
|
||||||
reloadButton.disabled = true
|
reloadButton.disabled = true
|
||||||
reloadButton.classList.add('disabled')
|
reloadButton.classList.add('disabled')
|
||||||
}
|
}
|
||||||
|
|
||||||
function disableRunButton() {
|
function disableRunButton() {
|
||||||
const runButton = document.getElementById('run')
|
const runButton = document.getElementById('run')
|
||||||
runButton.value = 'Reloading...'
|
runButton.value = 'Reloading…'
|
||||||
runButton.disabled = true
|
runButton.disabled = true
|
||||||
runButton.classList.add('disabled')
|
runButton.classList.add('disabled')
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user