Add EmptyState

getredash · Jan 19, 2020 · 6576476 · 6576476
1 parent 0968358
commit 6576476
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 55 deletions.
diff --git a/client/app/assets/images/illustrations/no-query-results.svg b/client/app/assets/images/illustrations/no-query-results.svg
diff --git a/client/app/pages/queries/QueryView.jsx b/client/app/pages/queries/QueryView.jsx
@@ -4,6 +4,7 @@ import { react2angular } from "react2angular";
 import cx from "classnames";
 import { has } from "lodash";
 import useMedia from "use-media";
+import Button from "antd/lib/button";
 
 import EditInPlace from "@/components/EditInPlace";
 import Parameters from "@/components/Parameters";
@@ -172,61 +173,71 @@ function QueryView(props) {
               />
             </div>
           )}
+          {(!queryResult || queryResultData.status === "done") && (
+            <QueryVisualizationTabs
+              queryResult={queryResult}
+              visualizations={query.visualizations}
+              showNewVisualizationButton={queryFlags.canEdit && !!queryResult}
+              canDeleteVisualizations={queryFlags.canEdit}
+              selectedTab={selectedVisualization}
+              onChangeTab={setSelectedVisualization}
+              onAddVisualization={addVisualization}
+              onDeleteVisualization={deleteVisualization}
+              refreshButton={
+                <Button
+                  type="primary"
+                  disabled={!queryFlags.canExecute || areParametersDirty}
+                  loading={isQueryExecuting}
+                  onClick={doExecuteQuery}>
+                  {!isQueryExecuting && <i className="zmdi zmdi-refresh m-r-5" aria-hidden="true" />}
+                  Refresh Now
+                </Button>
+              }
+            />
+          )}
           {queryResultData.status === "done" && (
-            <>
-              <QueryVisualizationTabs
-                queryResult={queryResult}
-                visualizations={query.visualizations}
-                showNewVisualizationButton={queryFlags.canEdit}
-                canDeleteVisualizations={queryFlags.canEdit}
-                selectedTab={selectedVisualization}
-                onChangeTab={setSelectedVisualization}
-                onAddVisualization={addVisualization}
-                onDeleteVisualization={deleteVisualization}
-              />
-              <div className="query-results-footer d-flex align-items-center">
-                <span className="m-r-5">
-                  <QueryControlDropdown
-                    query={query}
-                    queryResult={queryResult}
-                    queryExecuting={isQueryExecuting}
-                    showEmbedDialog={openEmbedDialog}
-                    embed={false}
-                    apiKey={query.api_key}
-                    selectedTab={selectedVisualization}
-                    openAddToDashboardForm={openAddToDashboardDialog}
-                  />
-                </span>
-                <QueryViewButton
-                  className="icon-button m-r-5 hidden-xs"
-                  title="Toggle Fullscreen"
-                  type={fullscreen ? "primary" : "default"}
-                  shortcut="alt+f"
-                  onClick={toggleFullscreen}>
-                  <i className="zmdi zmdi-fullscreen" />
-                </QueryViewButton>
-                {queryFlags.canEdit && (
-                  <EditVisualizationButton
-                    openVisualizationEditor={editVisualization}
-                    selectedTab={selectedVisualization}
-                  />
-                )}
-                <span className="m-l-5">
-                  <strong>{queryResultData.rows.length}</strong> {pluralize("row", queryResultData.rows.length)}
-                </span>
-                <span className="m-l-10">
-                  <strong>{durationHumanize(queryResult.getRuntime())}</strong>
-                  <span className="hidden-xs"> runtime</span>
-                </span>
-                <span className="flex-fill" />
-                <span className="m-r-10 hidden-xs">
-                  Refreshed{" "}
-                  <strong>
-                    <TimeAgo date={queryResult.query_result.retrieved_at} />
-                  </strong>
-                </span>
-              </div>
-            </>
+            <div className="query-results-footer d-flex align-items-center">
+              <span className="m-r-5">
+                <QueryControlDropdown
+                  query={query}
+                  queryResult={queryResult}
+                  queryExecuting={isQueryExecuting}
+                  showEmbedDialog={openEmbedDialog}
+                  embed={false}
+                  apiKey={query.api_key}
+                  selectedTab={selectedVisualization}
+                  openAddToDashboardForm={openAddToDashboardDialog}
+                />
+              </span>
+              <QueryViewButton
+                className="icon-button m-r-5 hidden-xs"
+                title="Toggle Fullscreen"
+                type={fullscreen ? "primary" : "default"}
+                shortcut="alt+f"
+                onClick={toggleFullscreen}>
+                <i className="zmdi zmdi-fullscreen" />
+              </QueryViewButton>
+              {queryFlags.canEdit && (
+                <EditVisualizationButton
+                  openVisualizationEditor={editVisualization}
+                  selectedTab={selectedVisualization}
+                />
+              )}
+              <span className="m-l-5">
+                <strong>{queryResultData.rows.length}</strong> {pluralize("row", queryResultData.rows.length)}
+              </span>
+              <span className="m-l-10">
+                <strong>{durationHumanize(queryResult.getRuntime())}</strong>
+                <span className="hidden-xs"> runtime</span>
+              </span>
+              <span className="flex-fill" />
+              <span className="m-r-10 hidden-xs">
+                Refreshed{" "}
+                <strong>
+                  <TimeAgo date={queryResult.query_result.retrieved_at} />
+                </strong>
+              </span>
+            </div>
           )}
         </div>
         <div className={cx("p-t-15 p-r-15 p-l-15", { hidden: fullscreen })}>

diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -12,6 +12,27 @@ import "./QueryVisualizationTabs.less";
 
 const { TabPane } = Tabs;
 
+function EmptyState({ onRefresh, refreshButton }) {
+  return (
+    <div className="query-results-empty-state">
+      <div className="empty-state-content">
+        <img src="/static/images/illustrations/no-query-results.svg" alt="No Query Results Illustration" />
+        <h3>No results found!</h3>
+        <div className="m-b-20">Please update your query or refresh the results using the button below.</div>
+        {refreshButton}
+      </div>
+    </div>
+  );
+}
+
+EmptyState.propTypes = {
+  refreshButton: PropTypes.node,
+};
+
+EmptyState.defaultProps = {
+  refreshButton: null,
+};
+
 function TabWithDeleteButton({ visualizationName, canDelete, onDelete, ...props }) {
   const handleDelete = useCallback(
     e => {
@@ -65,6 +86,7 @@ export default function QueryVisualizationTabs({
   onChangeTab,
   onAddVisualization,
   onDeleteVisualization,
+  refreshButton,
   ...props
 }) {
   const visualizations = useMemo(
@@ -116,8 +138,10 @@ export default function QueryVisualizationTabs({
               onDelete={() => onDeleteVisualization(visualization.id)}
             />
           }>
-          {queryResult && (
+          {queryResult ? (
             <VisualizationRenderer visualization={visualization} queryResult={queryResult} context="query" />
+          ) : (
+            <EmptyState refreshButton={refreshButton} />
           )}
         </TabPane>
       ))}
@@ -134,6 +158,7 @@ QueryVisualizationTabs.propTypes = {
   onChangeTab: PropTypes.func,
   onAddVisualization: PropTypes.func,
   onDeleteVisualization: PropTypes.func,
+  refreshButton: PropTypes.node,
 };
 
 QueryVisualizationTabs.defaultProps = {
@@ -145,4 +170,5 @@ QueryVisualizationTabs.defaultProps = {
   onChangeTab: () => {},
   onAddVisualization: () => {},
   onDeleteVisualization: () => {},
+  refreshButton: null,
 };
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.less b/client/app/pages/queries/components/QueryVisualizationTabs.less
@@ -1,4 +1,22 @@
 .query-visualization-tabs {
+  .query-results-empty-state {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 15px;
+
+    .empty-state-content {
+      max-width: 280px;
+      text-align: center;
+    }
+
+    img {
+      max-width: 100%;
+    }
+  }
+
   .ant-tabs-bar {
     display: flex;