@allurereport/web-awesome 3.0.1 → 3.2.0

package/src/stores/layout.ts

@@ -2,7 +2,26 @@ import { getReportOptions } from "@allurereport/web-commons";
 import { computed, signal } from "@preact/signals";
 import type { AwesomeReportOptions, Layout } from "types";
 
-export const layoutStore = signal<Layout>("base");
+const reportOptions = getReportOptions<AwesomeReportOptions>();
+
+const DEFAULT_LAYOUT = "base";
+
+const getInitialLayout = (): Layout => {
+  if (typeof window === "undefined") {
+    return DEFAULT_LAYOUT;
+  }
+
+  const lsLayout = localStorage.getItem("layout") as Layout | null;
+
+  if (lsLayout !== null) {
+    return lsLayout;
+  }
+
+  return lsLayout ?? reportOptions?.layout ?? DEFAULT_LAYOUT;
+};
+
+export const layoutStore = signal<Layout>(getInitialLayout());
+
 export const isLayoutLoading = signal(false);
 
 export const setLayout = (newLayout: Layout): void => {
@@ -24,13 +43,3 @@ export const toggleLayout = () => {
 };
 
 export const isSplitMode = computed(() => layoutStore.value === "split");
-
-export const getLayout = () => {
-  const { layout } = getReportOptions<AwesomeReportOptions>() ?? {};
-  const layoutFromLS = window.localStorage.getItem("layout") || (layout as Layout) || "base";
-
-  if (layoutFromLS) {
-    setLayout(layoutFromLS as Layout);
-    return;
-  }
-};

package/src/stores/locale.ts

@@ -1,5 +1,11 @@
 import { formatDuration } from "@allurereport/core-api";
-import { DEFAULT_LOCALE, LANG_LOCALE, type LangLocale, getReportOptions } from "@allurereport/web-commons";
+import {
+  DEFAULT_LOCALE,
+  LANG_LOCALE,
+  type LangLocale,
+  getLocaleDateTimeOverride,
+  getReportOptions,
+} from "@allurereport/web-commons";
 import { computed, signal } from "@preact/signals";
 import i18next, { type TOptions } from "i18next";
 import type { AwesomeReportOptions } from "types";
@@ -8,7 +14,6 @@ const namespaces = [
   "empty",
   "execution",
   "filters",
-  "filters.description",
   "search",
   "severity",
   "sort-by",
@@ -28,6 +33,8 @@ const namespaces = [
   "sections",
   "timeline",
   "transitions",
+  "trHistory",
+  "attachments",
 ] as const;
 
 export const currentLocale = signal<LangLocale>("en" as LangLocale);
@@ -49,7 +56,8 @@ export const waitForI18next = i18next
       namespace: string,
       callback: (errorValue: unknown, translations: null) => void,
     ) => {
-      await import(`@/locales/${language}.json`)
+      const loadLocale = language === "en-iso" ? "en" : language;
+      await import(`@/locales/${loadLocale}.json`)
         .then((resources: Record<string, null>) => {
           callback(null, resources[namespace]);
         })
@@ -65,43 +73,68 @@ export const waitForI18next = i18next
     interpolation: { escapeValue: false },
   })
   .then(() => {
-    i18next.services.formatter.add("capitalize", (value) => {
+    i18next.services.formatter.add("capitalize", (value: string) => {
       return value.charAt(0).toLocaleUpperCase() + value.slice(1);
     });
-    i18next.services.formatter.add("timestamp_date", (value: number, lng, options) => {
-      const formatter = new Intl.DateTimeFormat(lng, {
-        ...options,
-        month: "numeric",
-        day: "numeric",
-        year: "numeric",
-      });
-      return formatter.format(value);
-    });
-    i18next.services.formatter.add("timestamp_long", (value: number, lng, options) => {
-      const formatter = new Intl.DateTimeFormat(lng, {
-        ...options,
-        month: "numeric",
-        day: "numeric",
-        year: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric",
-        hour12: false,
-      });
-      return formatter.format(value).replace(",", ` ${i18next.t("ui:at")}`);
-    });
-    i18next.services.formatter.add("timestamp_long_no_seconds", (value: number, lng, options) => {
-      const formatter = new Intl.DateTimeFormat(lng, {
-        ...options,
-        month: "numeric",
-        day: "numeric",
-        year: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        hour12: false,
-      });
-      return formatter.format(value).replace(",", ` ${i18next.t("ui:at")}`);
-    });
+    i18next.services.formatter.add(
+      "timestamp_date",
+      (value: number, lng: string, options?: Intl.DateTimeFormatOptions) => {
+        const override = getLocaleDateTimeOverride(lng, "date");
+        const formatter = new Intl.DateTimeFormat(override?.locale ?? lng, {
+          ...options,
+          month: "numeric",
+          day: "numeric",
+          year: "numeric",
+          ...(override?.options ?? {}),
+        });
+        const formatted = formatter.format(value);
+        return override?.stripComma ? formatted.replace(",", "") : formatted;
+      },
+    );
+
+    i18next.services.formatter.add(
+      "timestamp_long",
+      (value: number, lng: string, options?: Intl.DateTimeFormatOptions) => {
+        const override = getLocaleDateTimeOverride(lng, "dateTime");
+        const formatter = new Intl.DateTimeFormat(override?.locale ?? lng, {
+          ...options,
+          month: "numeric",
+          day: "numeric",
+          year: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+          hour12: false,
+          ...(override?.options ?? {}),
+        });
+        const formatted = formatter.format(value);
+        if (override?.includeAtSeparator === false || override?.stripComma) {
+          return formatted.replace(",", "");
+        }
+        return formatted.replace(",", ` ${i18next.t("ui:at")}`);
+      },
+    );
+    i18next.services.formatter.add(
+      "timestamp_long_no_seconds",
+      (value: number, lng: string, options?: Intl.DateTimeFormatOptions) => {
+        const override = getLocaleDateTimeOverride(lng, "dateTimeNoSeconds");
+        const formatter = new Intl.DateTimeFormat(override?.locale ?? lng, {
+          ...options,
+          month: "numeric",
+          day: "numeric",
+          year: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+          hour12: false,
+          ...(override?.options ?? {}),
+        });
+        const formatted = formatter.format(value);
+        if (override?.includeAtSeparator === false || override?.stripComma) {
+          return formatted.replace(",", "");
+        }
+        return formatted.replace(",", ` ${i18next.t("ui:at")}`);
+      },
+    );
     i18next.services.formatter.add("format_duration", (value: number) => {
       return formatDuration(value);
     });

package/src/stores/qualityGate.ts

@@ -1,9 +1,9 @@
-import { QualityGateValidationResult } from "@allurereport/plugin-api";
+import type { QualityGateValidationResult } from "@allurereport/plugin-api";
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import { type StoreSignalState } from "./types";
 
-export const qualityGateStore = signal<StoreSignalState<QualityGateValidationResult[]>>({
+export const qualityGateStore = signal<StoreSignalState<Record<string, QualityGateValidationResult[]>>>({
   loading: true,
   error: undefined,
   data: undefined,
@@ -11,7 +11,7 @@ export const qualityGateStore = signal<StoreSignalState<QualityGateValidationRes
 
 export const fetchQualityGateResults = async () => {
   try {
-    const data = await fetchReportJsonData<QualityGateValidationResult[]>("widgets/quality-gate.json");
+    const data = await fetchReportJsonData<Record<string, QualityGateValidationResult[]>>("widgets/quality-gate.json");
 
     qualityGateStore.value = {
       data,
@@ -20,7 +20,7 @@ export const fetchQualityGateResults = async () => {
     };
   } catch (err) {
     qualityGateStore.value = {
-      ...qualityGateStore.value,
+      ...qualityGateStore.peek(),
       error: err.message,
       loading: false,
     };

package/src/stores/router.ts

@@ -1,108 +1,42 @@
-import { computed, signal } from "@preact/signals";
+import { createRoute, navigateTo as routerNavigateTo } from "@allurereport/web-commons";
+import { computed } from "@preact/signals";
 
-type NavigateToObject = {
-  category?: string;
-  params?: {
-    testResultId?: string | null;
-    subTab?: string | null;
-  };
+export const navigateToTestResult = (params: { testResultId: string; tab?: string }) => {
+  routerNavigateTo({ path: "/:testResultId/:tab?", params, keepSearchParams: true });
 };
 
-type Route = {
-  category?: string;
-  params?: {
-    testResultId?: string | null;
-    subTab?: string | null;
-  };
+export const navigateToTestResultTab = (params: { testResultId: string; tab: string }) => {
+  routerNavigateTo({ path: "/:testResultId/:tab?", params, keepSearchParams: true, replace: true });
 };
 
-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 navigateToRoot = () => {
+  routerNavigateTo({ path: "/", keepSearchParams: true });
 };
 
-export const route = signal<Route>(parseHash());
-
-export const handleHashChange = () => {
-  const newRoute = parseHash();
-
-  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 navigateToSection = (params: { section: "timeline" | "charts" }) => {
+  routerNavigateTo({ path: "/:section", params, keepSearchParams: true, replace: false });
 };
 
-export const navigateTo = (path: NavigateToObject | string) => {
-  let newHash = "";
+const sections = ["charts", "timeline"];
 
-  if (typeof path === "string") {
-    newHash = path.startsWith("#") ? path.slice(1) : path;
-  } else {
-    const { category, params = {} } = path;
-    const parts: string[] = [];
+export const testResultRoute = computed(() =>
+  createRoute<{ testResultId: string; tab?: string }>("/:testResultId/:tab?", ({ params }) => {
+    return params.testResultId && !sections.includes(params.testResultId);
+  }),
+);
 
-    if (category) {
-      parts.push(category);
-    }
+export const rootRoute = computed(() => createRoute<{}>("/"));
 
-    if (params.testResultId) {
-      parts.push(params.testResultId);
-    }
+export const sectionRoute = computed(() =>
+  createRoute<{ section: "timeline" | "charts" }>("/:section", ({ params }) => {
+    return sections.includes(params.section);
+  }),
+);
 
-    if (params.subTab) {
-      parts.push(params.subTab);
-    }
-
-    newHash = parts.join("/");
+export const openInNewTab = (path: string) => {
+  if (typeof window === "undefined") {
+    return;
   }
 
-  history.pushState(null, "", `#${newHash}`);
-  handleHashChange();
-};
-
-export const openInNewTab = (path: string) => {
   window.open(`#${path}`, "_blank");
 };
-
-export const activeTab = computed(() => route.value.category || "");
-export const activeSubTab = computed(() => route.value.params?.subTab || "overview");

package/src/stores/sections.ts

@@ -1,63 +1,50 @@
 import { getReportOptions } from "@allurereport/web-commons";
-import { effect, signal } from "@preact/signals";
-import { navigateTo, parseHash, route } from "@/stores/router";
+import { computed, effect } from "@preact/signals";
 import type { AwesomeReportOptions } from "../../types.js";
+import { navigateToRoot, navigateToSection, sectionRoute } from "./router";
 
 const DEFAULT_SECTION = "default";
-type Section = string;
 
-export const currentSection = signal<Section>("");
-export const availableSections = signal<Section[]>([]);
+type Section = "timeline" | "charts" | "default";
 
-const updateSectionState = (section: Section): void => {
-  currentSection.value = section;
-  document.documentElement.setAttribute("data-section", section);
-  globalThis.localStorage.setItem("chosenSection", section);
-};
+const reportOptions = getReportOptions<AwesomeReportOptions>();
+const defaultSectionFromReportOptions: Section = (reportOptions?.defaultSection as Section) ?? "default";
 
-export const setSection = (chosenSection: Section): void => {
-  const isDefaultSection = chosenSection === DEFAULT_SECTION;
-  const isValidSection = availableSections.value?.includes(chosenSection);
-  const isSectionChanged = currentSection.value !== chosenSection;
+export const availableSections = (reportOptions?.sections ?? []) as Section[];
 
-  updateSectionState(chosenSection);
+const onInit = () => {
+  const isSectionRoute = sectionRoute.peek().matches;
+  const isDefaultSection = defaultSectionFromReportOptions === DEFAULT_SECTION;
+  const isValidSection = availableSections.includes(defaultSectionFromReportOptions);
 
-  if (isDefaultSection) {
-    navigateTo({ category: "" });
-    return;
-  }
-
-  if (isSectionChanged && isValidSection) {
-    navigateTo({ category: chosenSection });
+  if (!isSectionRoute && !isDefaultSection && isValidSection) {
+    navigateToSection({ section: defaultSectionFromReportOptions });
   }
 };
 
-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;
+onInit();
+
+export const currentSection = computed(() => sectionRoute.value.params.section ?? "default");
+
+effect(() => {
+  const section = currentSection.value;
+
+  if (section) {
+    document.documentElement.setAttribute("data-section", section);
   }
+});
+
+export const setSection = (chosenSection: Section | string): void => {
+  const isDefaultSection = chosenSection === DEFAULT_SECTION;
+  const isValidSection = availableSections.includes(chosenSection as Section);
+  const isSectionChanged = currentSection.peek() !== chosenSection;
 
-  if (sectionFromLS) {
-    setSection(sectionFromLS);
+  if (isDefaultSection) {
+    navigateToRoot();
     return;
   }
 
-  setSection("");
+  if (isSectionChanged && isValidSection) {
+    navigateToSection({ section: chosenSection as "timeline" | "charts" });
+  }
 };
-
-effect(() => {
-  const category = route.value.category;
-
-  setSection(category || "");
-});

package/src/stores/stats.ts

@@ -20,7 +20,7 @@ export const statsByEnvStore = signal<StoreSignalState<Record<string, Statistic>
 
 export const fetchReportStats = async () => {
   reportStatsStore.value = {
-    ...reportStatsStore.value,
+    ...reportStatsStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -43,7 +43,7 @@ export const fetchReportStats = async () => {
 };
 
 export const fetchEnvStats = async (envs: string[]) => {
-  const envsToFetch = envs.filter((env) => !statsByEnvStore.value.data?.[env]);
+  const envsToFetch = envs.filter((env) => !statsByEnvStore.peek().data?.[env]);
 
   // all envs have already been fetched
   if (envsToFetch.length === 0) {
@@ -51,7 +51,7 @@ export const fetchEnvStats = async (envs: string[]) => {
   }
 
   statsByEnvStore.value = {
-    ...statsByEnvStore.value,
+    ...statsByEnvStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -73,7 +73,7 @@ export const fetchEnvStats = async (envs: string[]) => {
     };
   } catch (err) {
     statsByEnvStore.value = {
-      ...statsByEnvStore.value,
+      ...statsByEnvStore.peek(),
       error: err.message,
       loading: false,
     };

package/src/stores/testResult.ts

@@ -0,0 +1,5 @@
+import { computed } from "@preact/signals";
+import { testResultRoute } from "./router";
+
+export const trCurrentTab = computed(() => testResultRoute.value.params.tab ?? "overview");
+export const currentTrId = computed(() => testResultRoute.value.params.testResultId);

package/src/stores/testResults.ts

@@ -32,7 +32,7 @@ export const fetchTestResultNav = async (env?: string) => {
     };
   } catch (err) {
     testResultNavStore.value = {
-      ...testResultNavStore.value,
+      ...testResultNavStore.peek(),
       error: err.message,
       loading: false,
     };
@@ -40,12 +40,14 @@ export const fetchTestResultNav = async (env?: string) => {
 };
 
 export const fetchTestResult = async (testResultId: string) => {
-  if (!testResultId || (testResultStore.value.data && testResultId in testResultStore.value.data)) {
+  const trData = testResultStore.peek().data;
+
+  if (!testResultId || (trData && testResultId in trData)) {
     return;
   }
 
   testResultStore.value = {
-    ...testResultStore.value,
+    ...testResultStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -56,13 +58,13 @@ export const fetchTestResult = async (testResultId: string) => {
     });
 
     testResultStore.value = {
-      data: { ...testResultStore.value.data, [testResultId]: data },
+      data: { ...testResultStore.peek().data, [testResultId]: data },
       error: undefined,
       loading: false,
     };
   } catch (err) {
     testResultStore.value = {
-      ...testResultStore.value,
+      ...testResultStore.peek(),
       error: err.message,
       loading: false,
     };

package/src/stores/timeline.ts

@@ -5,8 +5,11 @@ import type { StoreSignalState } from "@/stores/types";
 
 export type TimlineTr = Pick<
   TestResult,
-  "id" | "name" | "status" | "flaky" | "hidden" | "labels" | "environment" | "start" | "stop" | "duration"
->;
+  "id" | "name" | "status" | "flaky" | "hidden" | "environment" | "start" | "duration"
+> & {
+  host: string;
+  thread: string;
+};
 
 export const timelineStore = signal<StoreSignalState<TimlineTr[]>>({
   loading: true,

package/src/stores/tree.ts

@@ -1,11 +1,12 @@
-import { fetchReportJsonData } from "@allurereport/web-commons";
+import { buildFilterPredicate, fetchReportJsonData } from "@allurereport/web-commons";
 import type { RecursiveTree } from "@allurereport/web-components/global";
 import { computed, effect, signal } from "@preact/signals";
 import type { AwesomeTree, AwesomeTreeGroup } from "types";
 import type { StoreSignalState } from "@/stores/types";
 import { loadFromLocalStorage } from "@/utils/loadFromLocalStorage";
 import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
-import { treeDirection, treeFilter, treeQuery, treeSortBy, treeStatus } from "./treeFilters";
+import { treeFilters } from "./treeFilters/store";
+import { sortBy } from "./treeSort";
 
 export const treeStore = signal<StoreSignalState<Record<string, AwesomeTree>>>({
   loading: true,
@@ -36,7 +37,7 @@ export const toggleTree = (id: string) => {
 };
 
 export const fetchEnvTreesData = async (envs: string[]) => {
-  const envsToFetch = envs.filter((env) => !treeStore.value.data?.[env]);
+  const envsToFetch = envs.filter((env) => !treeStore.peek().data?.[env]);
 
   // all envs have already been fetched
   if (envsToFetch.length === 0) {
@@ -44,7 +45,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
   }
 
   treeStore.value = {
-    ...treeStore.value,
+    ...treeStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -54,7 +55,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
       envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`, { bustCache: true })),
     );
 
-    const previous = treeStore.value.data;
+    const previous = treeStore.peek().data;
     treeStore.value = {
       data: envsToFetch.reduce(
         (acc, env, index) => {
@@ -70,7 +71,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
     };
   } catch (e) {
     treeStore.value = {
-      ...treeStore.value,
+      ...treeStore.peek(),
       error: e.message,
       loading: false,
     };
@@ -79,6 +80,16 @@ export const fetchEnvTreesData = async (envs: string[]) => {
 
 const treeEntries = computed(() => (treeStore.value.data ? Object.entries(treeStore.value.data) : []));
 
+const alwaysTruePredicate = () => true;
+
+const filterPredicate = computed(() => {
+  if (treeFilters.value.length === 0) {
+    return alwaysTruePredicate;
+  }
+
+  return buildFilterPredicate(treeFilters.value);
+});
+
 export const filteredTree = computed(() => {
   return treeEntries.value.reduce(
     (acc, [key, value]) => {
@@ -87,17 +98,13 @@ export const filteredTree = computed(() => {
       }
 
       const { root, leavesById, groupsById } = value;
+
       const tree = createRecursiveTree({
         group: root as AwesomeTreeGroup,
         leavesById,
         groupsById,
-        filterOptions: {
-          query: treeQuery.value,
-          status: treeStatus.value,
-          filter: treeFilter.value,
-          sortBy: treeSortBy.value,
-          direction: treeDirection.value,
-        },
+        filterPredicate: filterPredicate.value,
+        sortBy: sortBy.value,
       });
 
       return Object.assign(acc, {