thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-22 15:42:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

move database credential inputs to the center on initial load

Browse Source
This commit is contained in:
Kevin Zhang 2023-02-15 15:09:36 -05:00
parent 1c0c662fe1
commit c8d7b72e5d
1 changed files with 83 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
programs/server/dashboard.html
View File

@ -92,7 +92,52 @@
.chart div { position: absolute; }
.inputs { font-size: 14pt; }
.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: row wrap;
}
.unconnected #url {
width: 100%;
}
.unconnected #user {
width: 50%;
}
.unconnected #password {
width: 49.5%;
}
.unconnected input {
margin-bottom: 5px;
}
.inputs #chart-params {
display: block;
}
.inputs.unconnected #chart-params {
display: none;
}
#connection-params {
margin-bottom: 0.5rem;
@ -223,6 +268,10 @@
color: var(--chart-button-hover-color);
}
.disabled {
opacity: 0.5;
}
.query-editor {
display: none;
grid-template-columns: auto fit-content(10%);
@ -286,7 +335,7 @@
</style>
</head>
<body>
<div class="inputs">
<div class="inputs unconnected">
<form id="params">
<div id="connection-params">
<input spellcheck="false" id="url" type="text" value="" placeholder="URL" />
@ -294,8 +343,8 @@
<input spellcheck="false" id="password" type="password" placeholder="password" />
</div>
<div>
<input id="reload" type="button" value="Reload" style="display: none;">
<input id="add" type="button" value="Add chart">
<input id="reload" type="button" value="Reload">
<input id="add" type="button" value="Add chart" style="display: none;">
<span class="nowrap themes"><span id="toggle-dark">🌚</span><span id="toggle-light">🌞</span></span>
<div id="chart-params"></div>
</div>
@ -845,7 +894,7 @@ async function draw(idx, chart, url_params, query) {
error_div.firstChild.data = error;
title_div.style.display = 'none';
error_div.style.display = 'block';
return;
return false;
} else {
error_div.firstChild.data = '';
error_div.style.display = 'none';
@ -886,6 +935,7 @@ async function draw(idx, chart, url_params, query) {
/// 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) {
@ -902,8 +952,6 @@ function showAuthError(message) {
function hideAuthError() {
const charts = document.querySelector('#charts');
charts.style.display = 'flex';
const add = document.querySelector('#add');
add.style.display = 'block';
const authError = document.querySelector('#auth-error');
authError.textContent = '';
@ -924,9 +972,20 @@ async function drawAll() {
if (!firstLoad) {
showAuthError(e.message);
}
return false;
});
})).then(() => {
firstLoad = 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';
}
})
}
@ -941,11 +1000,25 @@ function resize() {
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();
document.getElementById('reload').style.display = 'none';
disableReloadButton()
}
document.getElementById('params').onsubmit = function(event) {