@allurereport/web-awesome 3.0.0-beta.12 → 3.0.0-beta.14

package/src/locales/it.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "Totale",
     "flaky": "Test instabili",
-    "retries": "Test ritentati",
+    "retries": "Test ripetuti",
     "new": "Nuovi test"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "Allegato non trovato"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Grafici"
+  },
+  "charts": {
+    "trend": {
+      "title": "Grafico di tendenza: {{type}}",
+      "type": {
+        "status": "Stato",
+        "severity": "Gravità"
+      }
+    },
+    "pie": {
+      "title": "Tasso di successo dei test"
+    }
   }
 }

package/src/locales/ja.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "合計",
     "flaky": "不安定なテスト",
-    "retries": "再試行されたテスト",
+    "retries": "再実行テスト",
     "new": "新しいテスト"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "添付ファイルが見つかりません"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "グラフ"
+  },
+  "charts": {
+    "trend": {
+      "title": "トレンドチャート: {{type}}",
+      "type": {
+        "status": "ステータス",
+        "severity": "重要度"
+      }
+    },
+    "pie": {
+      "title": "テスト成功率"
+    }
   }
 }

package/src/locales/ka.json

@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "დანართი ვერ მოიძებნა"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "გრაფიკები"
+  },
+  "charts": {
+    "trend": {
+      "title": "ტრენდის გრაფიკი: {{type}}",
+      "type": {
+        "status": "სტატუსი",
+        "severity": "სიმძიმე"
+      }
+    },
+    "pie": {
+      "title": "ტესტების წარმატების მაჩვენებელი"
+    }
   }
 }

package/src/locales/kr.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "총계",
     "flaky": "불안정한 테스트들",
-    "retries": "재시도 테스트들",
+    "retries": "재시도 테스트",
     "new": "새로운 테스트들"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "첨부파일을 찾을 수 없습니다"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "그래프"
+  },
+  "charts": {
+    "trend": {
+      "title": "트렌드 차트: {{type}}",
+      "type": {
+        "status": "상태",
+        "severity": "심각도"
+      }
+    },
+    "pie": {
+      "title": "테스트 성공률"
+    }
   }
 }

package/src/locales/nl.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "Totaal",
     "flaky": "Onstabiele tests",
-    "retries": "Opnieuw uitgevoerde tests",
+    "retries": "Herhaalde tests",
     "new": "Nieuwe tests"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "Bijlage niet gevonden"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Grafieken"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trendgrafiek: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Ernst"
+      }
+    },
+    "pie": {
+      "title": "Test slagingspercentage"
+    }
   }
 }

package/src/locales/pl.json

@@ -10,7 +10,7 @@
   "testSummary": {
     "total": "Wszystkie",
     "flaky": "Niestabilne testy",
-    "retries": "Powtórne testy",
+    "retries": "Powtórzone testy",
     "new": "Nowe testy"
   },
   "tabs": {
@@ -136,5 +136,21 @@
   },
   "errors": {
     "missedAttachment": "Nie znaleziono załącznika"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Wykresy"
+  },
+  "charts": {
+    "trend": {
+      "title": "Wykres trendu: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Ważność"
+      }
+    },
+    "pie": {
+      "title": "Wskaźnik powodzenia testów"
+    }
   }
 }

package/src/locales/pt.json

@@ -137,5 +137,21 @@
   },
   "errors": {
     "missedAttachment": "Anexo não encontrado"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Gráficos"
+  },
+  "charts": {
+    "trend": {
+      "title": "Gráfico de tendência: {{type}}",
+      "type": {
+        "status": "Estado",
+        "severity": "Severidade"
+      }
+    },
+    "pie": {
+      "title": "Taxa de sucesso dos testes"
+    }
   }
 }

package/src/locales/ru.json

@@ -136,5 +136,21 @@
   },
   "errors": {
     "missedAttachment": "Вложение не найдено"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Графики"
+  },
+  "charts": {
+    "trend": {
+      "title": "График тренда: {{type}}",
+      "type": {
+        "status": "Статус",
+        "severity": "Важность"
+      }
+    },
+    "pie": {
+      "title": "Успешность тестирования"
+    }
   }
 }

package/src/locales/sv.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "Totalt",
     "flaky": "Ostadiga tester",
-    "retries": "Omtestade tester",
+    "retries": "Omtagna tester",
     "new": "Nya tester"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "Bilaga hittades inte"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Grafer"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trenddiagram: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Allvarlighetsgrad"
+      }
+    },
+    "pie": {
+      "title": "Testframgångsfrekvens"
+    }
   }
 }

package/src/locales/tr.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "Toplam",
     "flaky": "İstikrarsız Testler",
-    "retries": "Tekrarlanan Testler",
+    "retries": "Yinelenen Testler",
     "new": "Yeni Testler"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "Ek bulunamadı"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Grafikler"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trend Grafiği: {{type}}",
+      "type": {
+        "status": "Durum",
+        "severity": "Önem Derecesi"
+      }
+    },
+    "pie": {
+      "title": "Test Başarı Oranı"
+    }
   }
 }

package/src/locales/zh.json

@@ -13,7 +13,7 @@
   "testSummary": {
     "total": "总计",
     "flaky": "不稳定的测试",
-    "retries": "重试的测试",
+    "retries": "重跑测试",
     "new": "新的测试"
   },
   "tabs": {
@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "未找到附件"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "图形"
+  },
+  "charts": {
+    "trend": {
+      "title": "趋势图表: {{type}}",
+      "type": {
+        "status": "状态",
+        "severity": "严重程度"
+      }
+    },
+    "pie": {
+      "title": "测试成功率"
+    }
   }
 }

package/src/stores/chart.ts

@@ -1,6 +1,8 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import type { StoreSignalState } from "@/stores/types";
+import type { ChartsData, ChartsResponse } from "@/utils/charts";
+import { createCharts } from "@/utils/charts";
 
 export const pieChartStore = signal<StoreSignalState<any>>({
   loading: true,
@@ -30,3 +32,33 @@ export const fetchPieChartData = async (env: string) => {
     };
   }
 };
+
+export const chartsStore = signal<StoreSignalState<ChartsData>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchChartsData = async () => {
+  chartsStore.value = {
+    ...chartsStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<ChartsResponse>("widgets/charts.json");
+
+    chartsStore.value = {
+      data: createCharts(res),
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    chartsStore.value = {
+      data: undefined,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/locale.ts

@@ -22,6 +22,8 @@ const namespaces = [
   "split",
   "modal",
   "environments",
+  "charts",
+  "sections",
 ];
 
 export const currentLocale = signal<LangLocale>("en" as LangLocale);

package/src/stores/router.ts

@@ -1,42 +1,101 @@
 import { computed, signal } from "@preact/signals";
 
-type NavigateToString = string;
 type NavigateToObject = {
-  id?: string | null;
+  category?: string;
   params?: {
-    tabName?: string | null;
+    testResultId?: string | null;
+    subTab?: string | null;
   };
 };
 
-const parseHash = () => {
-  const hash = globalThis.location.hash.slice(1);
-  const [id, params] = hash.split("/");
-  return {
-    id: id || null,
-    params: params ? { tabName: params } : {},
+type Route = {
+  category?: string;
+  params?: {
+    testResultId?: string | null;
+    subTab?: string | null;
   };
 };
 
-export const route = signal<NavigateToObject>(parseHash());
+export const parseHash = (): Route => {
+  const hash = globalThis.location.hash.replace(/^#/, "").trim();
+  const parts = hash.split("/").filter(Boolean);
+  const [first, second] = parts;
+
+  if (parts.length === 0) {
+    return {};
+  }
+
+  if (parts.length === 1) {
+    if (/^[a-f0-9]{32,}$/.test(first)) {
+      return { params: { testResultId: first } };
+    }
+    return { category: first || "", params: { testResultId: second } };
+  }
+
+  if (parts.length === 2) {
+    if (/^[a-f0-9]{32,}$/.test(first)) {
+      return {
+        params: {
+          testResultId: first,
+          subTab: second,
+        },
+      };
+    }
+
+    return {
+      category: first,
+      params: {
+        testResultId: second,
+      },
+    };
+  }
+
+  if (parts.length === 3) {
+    const [category, testResultId, subTab] = parts;
+    return { category, params: { testResultId, subTab } };
+  }
+
+  return {};
+};
+
+export const route = signal<Route>(parseHash());
 
 export const handleHashChange = () => {
   const newRoute = parseHash();
 
-  if (newRoute.id !== route.value.id || newRoute.params.tabName !== route.value.params.tabName) {
-    route.value = newRoute;
+  if (
+    newRoute.category !== route.value?.category ||
+    newRoute.params?.testResultId !== route.value.params?.testResultId ||
+    newRoute.params?.subTab !== route.value.params?.subTab
+  ) {
+    route.value = { ...newRoute };
   }
 };
 
-export const navigateTo = (path: NavigateToString | NavigateToObject) => {
+export const navigateTo = (path: NavigateToObject | string) => {
   let newHash = "";
 
   if (typeof path === "string") {
     newHash = path.startsWith("#") ? path.slice(1) : path;
   } else {
-    const { id, params = {} } = path;
+    const { category, params = {} } = path;
+    const parts: string[] = [];
 
-    newHash = `${id}/${params.tabName ?? ""}`;
+    if (category) {
+      parts.push(category);
+    }
+
+    if (params.testResultId) {
+      parts.push(params.testResultId);
+    }
+
+    if (params.subTab) {
+      parts.push(params.subTab);
+    }
+
+    newHash = parts.join("/");
   }
+
   history.pushState(null, "", `#${newHash}`);
   handleHashChange();
 };
@@ -45,4 +104,5 @@ export const openInNewTab = (path: string) => {
   window.open(`#${path}`, "_blank");
 };
 
-export const activeTab = computed(() => route.value.params?.tabName || "overview");
+export const activeTab = computed(() => route.value.category || "");
+export const activeSubTab = computed(() => route.value.params?.subTab || "overview");

package/src/stores/sections.ts

@@ -0,0 +1,63 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { effect, signal } from "@preact/signals";
+import { navigateTo, parseHash, route } from "@/stores/router";
+import type { AwesomeReportOptions } from "../../types.js";
+
+const DEFAULT_SECTION = "default";
+type Section = string;
+
+export const currentSection = signal<Section>("");
+export const availableSections = signal<Section[]>([]);
+
+const updateSectionState = (section: Section): void => {
+  currentSection.value = section;
+  document.documentElement.setAttribute("data-section", section);
+  globalThis.localStorage.setItem("chosenSection", section);
+};
+
+export const setSection = (chosenSection: Section): void => {
+  const isDefaultSection = chosenSection === DEFAULT_SECTION;
+  const isValidSection = availableSections.value?.includes(chosenSection);
+  const isSectionChanged = currentSection.value !== chosenSection;
+
+  updateSectionState(chosenSection);
+
+  if (isDefaultSection) {
+    navigateTo({ category: "" });
+    return;
+  }
+
+  if (isSectionChanged && isValidSection) {
+    navigateTo({ category: chosenSection });
+  }
+};
+
+export const getSection = () => {
+  const { category } = parseHash();
+  availableSections.value = getReportOptions<AwesomeReportOptions>()?.sections ?? [];
+  const defaultSectionFromReportOptions = getReportOptions<AwesomeReportOptions>()?.defaultSection ?? "";
+  const sectionFromUrl = parseHash().category;
+  const sectionFromLS =
+    globalThis.localStorage.getItem("chosenSection") === ""
+      ? ""
+      : globalThis.localStorage.getItem("chosenSection") || defaultSectionFromReportOptions;
+  currentSection.value = sectionFromUrl || sectionFromLS;
+
+  if (category) {
+    setSection(category);
+    return;
+  }
+
+  if (sectionFromLS) {
+    setSection(sectionFromLS);
+    return;
+  }
+
+  setSection("");
+};
+
+effect(() => {
+  const category = route.value.category;
+
+  setSection(category || "");
+});

package/src/stores/tree.ts

@@ -167,13 +167,16 @@ export const fetchEnvTreesData = async (envs: string[]) => {
       envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`)),
     );
 
+    const previous = treeStore.value.data;
     treeStore.value = {
-      data: envs.reduce(
-        (acc, env, index) => ({
-          ...acc,
-          [env]: data[index],
-        }),
-        {},
+      data: envsToFetch.reduce(
+        (acc, env, index) => {
+          return {
+            ...acc,
+            [env]: data[index],
+          };
+        },
+        { ...previous },
       ),
       loading: false,
       error: undefined,

package/src/styles.scss

@@ -2,6 +2,9 @@
   position: relative;
   max-width: 1920px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 
   &:hover {
     .split {
@@ -10,6 +13,16 @@
   }
 }
 
+.layout {
+  flex: 1 1 auto;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .split {
   opacity: 0;
   position: absolute;
@@ -43,3 +56,11 @@
     opacity: 1;
   }
 }
+
+.layout-base {
+  max-width: 920px;
+  margin: auto;
+}
+
+.layout-split {
+}