better query view initial state (#10431)
diff --git a/web-console/src/views/query-view/query-view.scss b/web-console/src/views/query-view/query-view.scss
index f1e2774..d5e6a77 100644
--- a/web-console/src/views/query-view/query-view.scss
+++ b/web-console/src/views/query-view/query-view.scss
@@ -99,6 +99,17 @@
width: 100%;
height: 100%;
}
+
+ .init-state {
+ background: #232d35;
+ text-align: center;
+
+ p {
+ position: relative;
+ top: 38%;
+ font-size: 14px;
+ }
+ }
}
}
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
index 0e8b489..3effd4e 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import { Intent, Switch, Tooltip } from '@blueprintjs/core';
+import { Code, Intent, Switch, Tooltip } from '@blueprintjs/core';
import axios from 'axios';
import classNames from 'classnames';
import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
@@ -295,9 +295,11 @@
}
componentDidMount(): void {
+ const { liveQueryMode, queryString } = this.state;
+
this.metadataQueryManager.runQuery(null);
- if (this.state.liveQueryMode !== 'off') {
+ if (liveQueryMode !== 'off' && queryString) {
this.handleRun();
}
}
@@ -522,6 +524,13 @@
}}
/>
)}
+ {queryResultState.isInit() && (
+ <div className="init-state">
+ <p>
+ Enter a query and click <Code>Run</Code>
+ </p>
+ </div>
+ )}
</div>
</SplitterLayout>
);
