feat(ui): Better empty chart view + default view to documentation

relates to #6982
kestra-io · Jan 28, 2025 · 5f8a453 · 5f8a453
1 parent 60f96da
commit 5f8a453
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 13 deletions.
diff --git a/ui/src/components/dashboard/components/DashboardEditor.vue b/ui/src/components/dashboard/components/DashboardEditor.vue
@@ -139,6 +139,15 @@
                         <div v-else-if="chartError" class="text-container">
                             <span>{{ chartError }}</span>
                         </div>
+                        <div v-else>
+                            <el-empty :image="EmptyVisualDashboard" :image-size="200">
+                                <template #description>
+                                    <h5>
+                                        {{ $t('dashboard.click_chart_preview') }}
+                                    </h5>
+                                </template>
+                            </el-empty>
+                        </div>
                     </div>
                 </div>
             </section>
@@ -152,6 +161,7 @@
     import ChartBar from "vue-material-design-icons/ChartBar.vue";
     import FileDocumentEditOutline from "vue-material-design-icons/FileDocumentEditOutline.vue";
     import ViewDashboard from "vue-material-design-icons/ViewDashboard.vue";
+    import EmptyVisualDashboard from "../../../assets/empty_visuals/Visuals_empty_dashboard.svg"
 
     // avoid an eslint warning about missing declaration
     defineEmits(["save"])
@@ -294,7 +304,7 @@
                     NONE: "none",
                     DASHBOARD: "dashboard"
                 },
-                currentView: "chart",
+                currentView: "documentation",
                 selectedChart: null,
                 charts: [],
                 chartError: null,
@@ -326,6 +336,14 @@
     @import "@kestra-io/ui-libs/src/scss/variables";
     $spacing: 20px;
 
+    .el-empty {
+        background-color: transparent;
+
+        .el-empty__description {
+            font-size: var(--el-font-size-small);
+        }
+    }
+
     .custom {
         padding: 24px 32px;
 

diff --git a/ui/src/translations/de.json b/ui/src/translations/de.json
@@ -870,7 +870,8 @@
       "see_all": "Alle anzeigen",
       "success_ratio_tooltip": "Erfolgsquote ist die Summe der SUCCESS, CANCELLED und WARNING Ausführungen, geteilt durch die Gesamtanzahl der Ausführungen in einem beendeten Zustand.",
       "failure_ratio_tooltip": "Der Fehlerrate ist die Summe der FAILED, KILLED und RETRIED Ausführungen, geteilt durch die Gesamtanzahl der Ausführungen in einem beendeten Zustand.",
-      "preview": "Dashboard-Vorschau"
+      "preview": "Dashboard-Vorschau",
+      "click_chart_preview": "Klicken Sie auf einen Chart-Quellcode, um die Vorschau zu sehen."
     },
     "delete_log": "Sind Sie sicher, dass Sie das Log löschen möchten?",
     "docs": "Dokumentation",

diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -933,7 +933,8 @@
       "description": "Description",
       "no_flow_description": "This flow has no description.",
       "not_auth": "You don't have the necessary permissions to view this widget.",
-      "preview": "Dashboard preview"
+      "preview": "Dashboard preview",
+      "click_chart_preview": "Click on a chart source code to see the preview"
     },
     "docs": "Docs",
     "active-slots": "Active slots",

diff --git a/ui/src/translations/es.json b/ui/src/translations/es.json
@@ -870,7 +870,8 @@
       "see_all": "Ver todo",
       "success_ratio_tooltip": "La Tasa de Éxito es la suma de ejecuciones en estado SUCCESS, CANCELLED y WARNING dividida por el número total de ejecuciones en un estado terminado.",
       "failure_ratio_tooltip": "La proporción de Failed es la suma de ejecuciones FAILED, KILLED y RETRIED dividida por el número total de ejecuciones en un estado terminado.",
-      "preview": "Vista previa del dashboard"
+      "preview": "Vista previa del dashboard",
+      "click_chart_preview": "Haz clic en un código fuente del gráfico para ver la vista previa"
     },
     "delete_log": "¿Está seguro de que desea eliminar el log?",
     "docs": "Documentos",

diff --git a/ui/src/translations/fr.json b/ui/src/translations/fr.json
@@ -870,7 +870,8 @@
       "see_all": "Voir tout",
       "success_ratio_tooltip": "Le ratio de succès est la somme des exécutions en état SUCCESS, CANCELLED et WARNING divisée par le nombre total d'exécutions dans un état terminé.",
       "failure_ratio_tooltip": "Le ratio d'échec est la somme des exécutions en état FAILED, KILLED et RETRIED divisée par le nombre total d'exécutions dans un état terminé.",
-      "preview": "Aperçu du tableau de bord"
+      "preview": "Aperçu du tableau de bord",
+      "click_chart_preview": "Cliquez sur un code source de graphique pour voir l'aperçu"
     },
     "delete_log": "Êtes-vous sûr de vouloir supprimer le log ?",
     "docs": "Documentation",

diff --git a/ui/src/translations/hi.json b/ui/src/translations/hi.json
@@ -870,7 +870,8 @@
       "see_all": "सभी देखें",
       "success_ratio_tooltip": "सफलता अनुपात SUCCESS, CANCELLED और WARNING निष्पादन का योग है, जिसे समाप्त स्थिति में कुल निष्पादन की संख्या से विभाजित किया जाता है।",
       "failure_ratio_tooltip": "असफल अनुपात, FAILED, KILLED और RETRIED निष्पादन का योग है, जिसे समाप्त स्थिति में कुल निष्पादन की संख्या से विभाजित किया जाता है।",
-      "preview": "डैशबोर्ड पूर्वावलोकन"
+      "preview": "डैशबोर्ड पूर्वावलोकन",
+      "click_chart_preview": "चार्ट के स्रोत कोड पर क्लिक करें ताकि पूर्वावलोकन देखा जा सके।"
     },
     "delete_log": "क्या आप वाकई log को हटाना चाहते हैं?",
     "docs": "डॉक्स",

diff --git a/ui/src/translations/it.json b/ui/src/translations/it.json
@@ -870,7 +870,8 @@
       "see_all": "Vedi tutto",
       "success_ratio_tooltip": "Il Rapporto di Successo è la somma delle esecuzioni in stato SUCCESS, CANCELLED e WARNING divisa per il numero totale di esecuzioni in uno stato terminato.",
       "failure_ratio_tooltip": "Il rapporto di errore è la somma delle esecuzioni FAILED, KILLED e RETRIED divisa per il numero totale di esecuzioni in uno stato terminato.",
-      "preview": "Anteprima dashboard"
+      "preview": "Anteprima dashboard",
+      "click_chart_preview": "Fai clic sul codice sorgente di un grafico per vedere l'anteprima"
     },
     "delete_log": "Sei sicuro di voler eliminare il log?",
     "docs": "Documenti",

diff --git a/ui/src/translations/ja.json b/ui/src/translations/ja.json
@@ -870,7 +870,8 @@
       "see_all": "すべて表示",
       "success_ratio_tooltip": "成功率は、SUCCESS、CANCELLED、WARNINGの実行の合計を、終了状態にある実行の総数で割ったものです。",
       "failure_ratio_tooltip": "失敗率は、FAILED、KILLED、および RETRIED の実行の合計を、終了状態にある実行の総数で割ったものです。",
-      "preview": "ダッシュボードプレビュー"
+      "preview": "ダッシュボードプレビュー",
+      "click_chart_preview": "チャートのソースコードをクリックしてプレビューを表示"
     },
     "delete_log": "ログを削除してもよろしいですか？",
     "docs": "ドキュメント",

diff --git a/ui/src/translations/ko.json b/ui/src/translations/ko.json
@@ -870,7 +870,8 @@
       "see_all": "모두 보기",
       "success_ratio_tooltip": "성공 비율은 SUCCESS, CANCELLED 및 WARNING 실행의 합계를 종료된 상태의 총 실행 수로 나눈 값입니다.",
       "failure_ratio_tooltip": "실패 비율은 FAILED, KILLED, RETRIED 실행의 합을 종료된 상태의 전체 실행 수로 나눈 값입니다.",
-      "preview": "대시보드 미리보기"
+      "preview": "대시보드 미리보기",
+      "click_chart_preview": "차트 소스 코드를 클릭하여 미리보기를 확인하세요."
     },
     "delete_log": "로그를 삭제하시겠습니까?",
     "docs": "문서",

diff --git a/ui/src/translations/pl.json b/ui/src/translations/pl.json
@@ -870,7 +870,8 @@
       "see_all": "Zobacz wszystkie",
       "success_ratio_tooltip": "Wskaźnik Sukcesu to suma wykonań w stanach SUCCESS, CANCELLED i WARNING podzielona przez całkowitą liczbę wykonań w stanie zakończonym.",
       "failure_ratio_tooltip": "Stosunek niepowodzeń to suma wykonań w stanach FAILED, KILLED i RETRIED podzielona przez całkowitą liczbę wykonań w stanie zakończonym.",
-      "preview": "Podgląd Dashboardu"
+      "preview": "Podgląd Dashboardu",
+      "click_chart_preview": "Kliknij kod źródłowy wykresu, aby zobaczyć podgląd"
     },
     "delete_log": "Czy na pewno chcesz usunąć log?",
     "docs": "Dokumentacja",

diff --git a/ui/src/translations/pt.json b/ui/src/translations/pt.json
@@ -870,7 +870,8 @@
       "see_all": "Ver todos",
       "success_ratio_tooltip": "A Taxa de Sucesso é a soma das execuções em estados SUCCESS, CANCELLED e WARNING dividida pelo número total de execuções em um estado terminado.",
       "failure_ratio_tooltip": "A proporção de falhas é a soma das execuções FAILED, KILLED e RETRIED dividida pelo número total de execuções em um estado terminado.",
-      "preview": "Pré-visualização do Dashboard"
+      "preview": "Pré-visualização do Dashboard",
+      "click_chart_preview": "Clique no código-fonte do gráfico para ver a pré-visualização"
     },
     "delete_log": "Tem certeza de que deseja excluir o log?",
     "docs": "Documentos",

diff --git a/ui/src/translations/ru.json b/ui/src/translations/ru.json
@@ -870,7 +870,8 @@
       "see_all": "Посмотреть все",
       "success_ratio_tooltip": "Коэффициент успеха — это сумма выполнений в состояниях SUCCESS, CANCELLED и WARNING, деленная на общее количество выполнений в завершенном состоянии.",
       "failure_ratio_tooltip": "Отношение Failed — это сумма выполнений в состояниях FAILED, KILLED и RETRIED, деленная на общее количество выполнений в завершенном состоянии.",
-      "preview": "Предварительный просмотр Dashboard"
+      "preview": "Предварительный просмотр Dashboard",
+      "click_chart_preview": "Нажмите на исходный код диаграммы, чтобы увидеть предварительный просмотр"
     },
     "delete_log": "Вы уверены, что хотите удалить log?",
     "docs": "Документы",

diff --git a/ui/src/translations/zh_CN.json b/ui/src/translations/zh_CN.json
@@ -870,7 +870,8 @@
       "see_all": "查看全部",
       "success_ratio_tooltip": "成功率是SUCCESS、CANCELLED和WARNING执行次数之和除以终止状态下执行总次数的结果。",
       "failure_ratio_tooltip": "失败率是FAILED、KILLED和RETRIED执行次数之和除以终止状态下执行总次数的结果。",
-      "preview": "仪表板预览"
+      "preview": "仪表板预览",
+      "click_chart_preview": "单击图表源代码以查看预览"
     },
     "delete_log": "您确定要删除这个log吗？",
     "docs": "文档",