fix(dashboard): things in panel’s queryStateMessages need to be unqiue

merico-dev · Aug 17, 2023 · 73c8775 · 73c8775
1 parent b01ca42
commit 73c8775
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/dashboard/src/components/panel/panel-render/viz/panel-error-or-state-message.tsx b/dashboard/src/components/panel/panel-render/viz/panel-error-or-state-message.tsx
@@ -6,16 +6,14 @@ export const PanelErrorOrStateMessage = observer(({ panel }: { panel: PanelRende
   return (
     <Stack>
       {panel.queryErrors.map((err, i) => (
-        <Text key={`${i}-${err}`} color="red" size="md" align="center" sx={{ fontFamily: 'monospace' }}>
+        <Text key={`${i}-${err}`} color="red" size="sm" align="center" sx={{ fontFamily: 'monospace' }}>
           {err}
         </Text>
       ))}
 
-      {panel.queryStateMessages.map((msg, i) => (
-        <Text key={`${i}-${msg}`} color="gray" align="center">
-          {msg}
-        </Text>
-      ))}
+      <Text color="gray" align="center" size="sm">
+        {panel.queryStateMessages}
+      </Text>
     </Stack>
   );
 });
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/panel-editor.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/panel-editor.tsx
@@ -60,7 +60,7 @@ export const PanelEditor = observer(({ panel }: { panel: PanelModelInstance }) =
   const panelNeedData = doesVizRequiresData(panel.viz.type);
   const loading = panelNeedData && panel.dataLoading;
   const dataNotReady =
-    loading || panel.queryErrors.length > 0 || panel.queryStateMessages.length > 0 || queries.length === 0;
+    loading || panel.queryErrors.length > 0 || panel.queryStateMessages !== '' || queries.length === 0;
 
   const viewID = model.editor.path[1];
   useEffect(() => {

diff --git a/dashboard/src/model/render-model/dashboard/content/panels/panel.ts b/dashboard/src/model/render-model/dashboard/content/panels/panel.ts
@@ -24,13 +24,36 @@ export const PanelRenderModel = PanelMeta.views((self) => ({
       return this.queries.some((q) => q.state === 'loading');
     },
     get queryStateMessages() {
-      return this.queries.map((q) => q.stateMessage).filter((m) => !!m);
+      const queries = this.queries.filter((q) => !q.runByConditionsMet);
+      if (queries.length === 0) {
+        return '';
+      }
+      const context = new Set();
+      const filters = new Set();
+      queries.forEach((q) => {
+        const names = q.conditionNames;
+        names.context.forEach((c) => context.add(c));
+        names.filters.forEach((f) => filters.add(f));
+      });
+      const arr = [];
+      if (context.size > 0) {
+        console.log(context);
+        arr.push(`context: ${Array.from(context).join(', ')}`);
+      }
+      if (filters.size > 0) {
+        arr.push(`filter${filters.size > 1 ? 's' : ''}: ${Array.from(filters).join(', ')}`);
+      }
+      if (arr.length === 2) {
+        arr.splice(1, 0, 'and');
+      }
+      arr.unshift('Waiting for');
+      return arr.join(' ');
     },
     get queryErrors() {
       return this.queries.map((q) => q.error).filter((e) => !!e);
     },
     get canRenderViz() {
-      return this.queryErrors.length === 0 && this.queryStateMessages.length === 0 && !this.dataLoading;
+      return this.queryErrors.length === 0 && this.queryStateMessages === '' && !this.dataLoading;
     },
   }))
   .actions((self) => ({