@allurereport/web-awesome 3.0.0-beta.9 → 3.0.1

package/src/stores/tree.ts

@@ -1,32 +1,25 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
+import type { RecursiveTree } from "@allurereport/web-components/global";
 import { computed, effect, signal } from "@preact/signals";
-import type { AllureAwesomeStatus, AllureAwesomeTree, AllureAwesomeTreeGroup } from "types";
+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";
 
-export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
-export type TreeDirection = "asc" | "desc";
-export type TreeFilters = "flaky" | "retry" | "new";
-
-export type TreeFiltersState = {
-  query: string;
-  status: AllureAwesomeStatus;
-  filter: Record<TreeFilters, boolean>;
-  sortBy: TreeSortBy;
-  direction: TreeDirection;
-};
-
-export const treeStore = signal<StoreSignalState<AllureAwesomeTree>>({
+export const treeStore = signal<StoreSignalState<Record<string, AwesomeTree>>>({
   loading: true,
   error: undefined,
   data: undefined,
 });
 
-export const noTests = computed(() => !Object.keys(treeStore?.value?.data?.leavesById).length);
+export const noTests = computed(() => {
+  return Object.values(treeStore?.value?.data ?? {}).every(
+    ({ leavesById }) => !leavesById || !Object.keys(leavesById).length,
+  );
+});
 
-const loadedFromLS = loadFromLocalStorage<string[]>("collapsedTrees", []);
-export const collapsedTrees = signal(new Set(loadedFromLS as string[]));
+export const collapsedTrees = signal(new Set(loadFromLocalStorage<string[]>("collapsedTrees", [])));
 
 effect(() => {
   localStorage.setItem("collapsedTrees", JSON.stringify([...collapsedTrees.value]));
@@ -42,98 +35,14 @@ export const toggleTree = (id: string) => {
   collapsedTrees.value = newSet;
 };
 
-export const selectedFilters = signal(new Set(loadFromLocalStorage("selectedFilters", []) as []));
-
-effect(() => {
-  localStorage.setItem("selectedFilters", JSON.stringify([...selectedFilters.value]));
-});
-
-export const treeFiltersStore = signal<TreeFiltersState>(
-  loadFromLocalStorage<TreeFiltersState>("treeFilters", {
-    query: "",
-    status: "total",
-    filter: {
-      flaky: false,
-      retry: false,
-      new: false,
-    },
-    sortBy: "order",
-    direction: "asc",
-  }) as TreeFiltersState,
-);
-
-effect(() => {
-  localStorage.setItem("treeFilters", JSON.stringify(treeFiltersStore.value));
-});
-
-export const filteredTree = computed(() => {
-  const { root, leavesById, groupsById } = treeStore.value.data;
-
-  return createRecursiveTree({
-    group: root as AllureAwesomeTreeGroup,
-    leavesById,
-    groupsById,
-    filterOptions: treeFiltersStore.value,
-  });
-});
-
-export const noTestsFound = computed(() => {
-  return isRecursiveTreeEmpty(filteredTree.value);
-});
-
-export const clearTreeFilters = () => {
-  treeFiltersStore.value = {
-    query: "",
-    status: "total",
-    filter: {
-      flaky: false,
-      retry: false,
-      new: false,
-    },
-    sortBy: "order",
-    direction: "asc",
-  };
-};
-
-export const setTreeQuery = (query: string) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    query,
-  };
-};
-
-export const setTreeStatus = (status: AllureAwesomeStatus) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    status,
-  };
-};
-
-export const setTreeSortBy = (sortBy: TreeSortBy) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    sortBy,
-  };
-};
-
-export const setTreeDirection = (direction: TreeDirection) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    direction,
-  };
-};
+export const fetchEnvTreesData = async (envs: string[]) => {
+  const envsToFetch = envs.filter((env) => !treeStore.value.data?.[env]);
 
-export const setTreeFilter = (filterKey: TreeFilters, value: boolean) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    filter: {
-      ...treeFiltersStore.value.filter,
-      [filterKey]: value,
-    },
-  };
-};
+  // all envs have already been fetched
+  if (envsToFetch.length === 0) {
+    return;
+  }
 
-export const fetchTreeData = async () => {
   treeStore.value = {
     ...treeStore.value,
     loading: true,
@@ -141,12 +50,23 @@ export const fetchTreeData = async () => {
   };
 
   try {
-    const res = await fetchReportJsonData<AllureAwesomeTree>("widgets/tree.json");
+    const data = await Promise.all(
+      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`, { bustCache: true })),
+    );
 
+    const previous = treeStore.value.data;
     treeStore.value = {
-      data: res,
-      error: undefined,
+      data: envsToFetch.reduce(
+        (acc, env, index) => {
+          return {
+            ...acc,
+            [env]: data[index],
+          };
+        },
+        { ...previous },
+      ),
       loading: false,
+      error: undefined,
     };
   } catch (e) {
     treeStore.value = {
@@ -156,3 +76,38 @@ export const fetchTreeData = async () => {
     };
   }
 };
+
+const treeEntries = computed(() => (treeStore.value.data ? Object.entries(treeStore.value.data) : []));
+
+export const filteredTree = computed(() => {
+  return treeEntries.value.reduce(
+    (acc, [key, value]) => {
+      if (!value) {
+        return acc;
+      }
+
+      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,
+        },
+      });
+
+      return Object.assign(acc, {
+        [key]: tree,
+      });
+    },
+    {} as Record<string, RecursiveTree>,
+  );
+});
+
+export const noTestsFound = computed(
+  () => !Object.values(filteredTree.value).some((tree) => !isRecursiveTreeEmpty(tree)),
+);

package/src/stores/treeFilters/actions.ts

@@ -0,0 +1,67 @@
+import type { TestStatusTransition } from "@allurereport/core-api";
+import { batch } from "@preact/signals";
+import type { AwesomeStatus } from "types";
+import { treeDirection, treeFilter, treeQuery, treeSortBy, treeStatus } from ".";
+import { transitionFiltersList } from "./constants";
+import type { TreeDirection, TreeSortBy } from "./types";
+
+export const clearTreeFilters = () => {
+  batch(() => {
+    treeQuery.value = "";
+    treeStatus.value = "total";
+    treeFilter.value = {
+      flaky: false,
+      retry: false,
+      new: false,
+      fixed: false,
+      regressed: false,
+      malfunctioned: false,
+    };
+  });
+};
+
+export const setTreeQuery = (query: string) => {
+  treeQuery.value = query;
+};
+
+export const setTreeStatus = (status: AwesomeStatus) => {
+  treeStatus.value = status;
+};
+
+export const setTreeSortBy = (sortBy: TreeSortBy) => {
+  treeSortBy.value = sortBy;
+};
+
+export const setTreeDirection = (direction: TreeDirection) => {
+  treeDirection.value = direction;
+};
+
+export const setFilters = (filters: Record<string, boolean>) => {
+  treeFilter.value = {
+    ...treeFilter.peek(),
+    ...filters,
+  };
+};
+
+export const setTestTypeFilter = (testType: "flaky" | "retry", value: boolean) => {
+  treeFilter.value = {
+    ...treeFilter.peek(),
+    [testType]: value,
+  };
+};
+
+export const setTransitionFilter = (transition: TestStatusTransition, value: boolean) => {
+  treeFilter.value = {
+    ...treeFilter.peek(),
+    ...transitionFiltersList.reduce(
+      (acc, t) => {
+        acc[t] = false;
+        if (t === transition) {
+          acc[t] = value;
+        }
+        return acc;
+      },
+      {} as Record<TestStatusTransition, boolean>,
+    ),
+  };
+};

package/src/stores/treeFilters/constants.ts

@@ -0,0 +1,7 @@
+import type { TestStatusTransition } from "@allurereport/core-api";
+
+export const testTypeFiltersList = ["flaky", "retry"];
+
+export const transitionFiltersList = ["new", "fixed", "regressed", "malfunctioned"] as TestStatusTransition[];
+
+export const filtersList = [...testTypeFiltersList, ...transitionFiltersList] as const;

package/src/stores/treeFilters/index.ts

@@ -0,0 +1,3 @@
+export * from "./store";
+export * from "./actions";
+export type * from "./types";

package/src/stores/treeFilters/store.ts

@@ -0,0 +1,73 @@
+import { batch, computed, effect, signal } from "@preact/signals";
+import type { AwesomeStatus } from "types";
+import { loadFromLocalStorage } from "@/utils/loadFromLocalStorage";
+import { persist } from "@/utils/persist";
+import { transitionFiltersList } from "./constants";
+import type { TreeDirection, TreeFilters, TreeFiltersState, TreeSortBy } from "./types";
+
+export const treeQuery = signal<string>("");
+export const treeStatus = signal<AwesomeStatus>("total");
+export const treeSortBy = signal<TreeSortBy>("order");
+export const treeDirection = signal<TreeDirection>("asc");
+export const treeFilter = signal<Record<TreeFilters, boolean>>({
+  flaky: false,
+  retry: false,
+  new: false,
+  fixed: false,
+  regressed: false,
+  malfunctioned: false,
+});
+
+const initialized = signal(false);
+
+const init = () => {
+  const initialState = loadFromLocalStorage<TreeFiltersState>("treeFilters", {
+    query: "",
+    status: "total",
+    filter: {
+      flaky: false,
+      retry: false,
+      new: false,
+      fixed: false,
+      regressed: false,
+      malfunctioned: false,
+    },
+    sortBy: "order",
+    direction: "asc",
+  });
+
+  batch(() => {
+    treeQuery.value = initialState.query;
+    treeStatus.value = initialState.status;
+    treeSortBy.value = initialState.sortBy;
+    treeDirection.value = initialState.direction;
+    treeFilter.value = initialState.filter;
+    initialized.value = true;
+  });
+};
+
+init();
+
+const treeFiltersState = computed(() => ({
+  query: treeQuery.value,
+  status: treeStatus.value,
+  sortBy: treeSortBy.value,
+  direction: treeDirection.value,
+  filter: treeFilter.value,
+}));
+
+effect(() => {
+  if (!initialized.value) {
+    return;
+  }
+
+  persist(["treeFilters", treeFiltersState.value]);
+});
+
+export const transitionFilters = computed(() =>
+  transitionFiltersList.map((transition) => [transition, treeFilter.value[transition]] as const),
+);
+
+export const testTypeFilters = computed(() =>
+  (["flaky", "retry"] as const).map((testType) => [testType, treeFilter.value[testType]] as const),
+);

package/src/stores/treeFilters/types.ts

@@ -0,0 +1,12 @@
+import type { AwesomeStatus } from "types";
+
+export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
+export type TreeDirection = "asc" | "desc";
+export type TreeFilters = "flaky" | "retry" | "new" | "fixed" | "regressed" | "malfunctioned";
+export type TreeFiltersState = {
+  query: string;
+  status: AwesomeStatus;
+  filter: Record<TreeFilters, boolean>;
+  sortBy: TreeSortBy;
+  direction: TreeDirection;
+};

package/src/stores/variables.ts

@@ -0,0 +1,40 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+export type Variables = Record<string, any>;
+
+export const variables = signal<StoreSignalState<Record<string, Variables>>>({
+  loading: false,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchVariables = async (env: string = "default") => {
+  variables.value = {
+    ...variables.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<string[]>(env ? `widgets/${env}/variables.json` : "widgets/variables.json", {
+      bustCache: true,
+    });
+
+    variables.value = {
+      data: {
+        ...variables.value.data,
+        [env]: res,
+      },
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    variables.value = {
+      ...variables.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};

package/src/styles.scss

@@ -0,0 +1,66 @@
+.main {
+  position: relative;
+  max-width: 1920px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  &:hover {
+    .split {
+      opacity: 1;
+    }
+  }
+}
+
+.layout {
+  flex: 1 1 auto;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.split {
+  opacity: 0;
+  position: absolute;
+  left: 128px;
+  top: 8px;
+}
+
+.loader {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-base-secondary);
+  background-blend-mode: saturation;
+  flex-direction: column;
+  gap: 16px;
+  transition:
+    opacity 100ms,
+    background-color 200ms;
+
+  visibility: hidden;
+  opacity: 0;
+
+  &.loading {
+    z-index: 10;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.layout-base {
+  max-width: 920px;
+  margin: auto;
+}
+
+.layout-split {
+}

package/src/utils/persist.ts

@@ -0,0 +1,23 @@
+class AllurePersistError extends Error {
+  constructor(
+    message: string,
+    public readonly originalError?: Error,
+  ) {
+    super(message);
+    this.name = "AllurePersistError";
+  }
+
+  get message(): string {
+    return `${this.name}: ${this.message}${this.originalError ? `\n${this.originalError.message}` : ""}`;
+  }
+}
+
+export const persist = <T>(pair: [string, T], storage: Storage = localStorage) => {
+  const [key, value] = pair;
+  try {
+    storage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(new AllurePersistError(`Failed to persist ${key} to ${storage.name}`, e as Error));
+  }
+};

package/src/utils/time.ts

@@ -13,5 +13,6 @@ const defaultOptions: Intl.DateTimeFormatOptions = {
 export const timestampToDate = (timestamp: number, options = defaultOptions) => {
   const date = new Date(timestamp);
   const { t } = useI18n("ui");
+
   return new Intl.DateTimeFormat("en-US", options).format(date).replace(",", ` ${t("at")}`);
 };

package/src/utils/tree.ts

@@ -0,0 +1,30 @@
+import type { RecursiveTree } from "@allurereport/web-components/global";
+import type { AwesomeTreeLeaf } from "types";
+
+type Localizer = (data: string, params?: Record<string, unknown>) => string;
+
+type Localizers = {
+  tooltip: Localizer;
+};
+
+export const createLeafLocalizer =
+  (t: Localizers) =>
+  (leaf: AwesomeTreeLeaf): AwesomeTreeLeaf => {
+    const tooltips = {
+      transition: t.tooltip(leaf.transition),
+      flaky: leaf.flaky && t.tooltip("flaky"),
+      retries: leaf.retriesCount && t.tooltip("retries", { count: leaf.retriesCount }),
+    };
+    return {
+      ...leaf,
+      tooltips,
+    };
+  };
+
+export const createTreeLocalizer =
+  (t: Localizers) =>
+  (tree: RecursiveTree): RecursiveTree => ({
+    ...tree,
+    leaves: tree.leaves.length ? tree.leaves.map(createLeafLocalizer(t)) : tree.leaves,
+    trees: tree.trees.length ? tree.trees.map(createTreeLocalizer(t)) : tree.trees,
+  });

package/src/utils/treeFilters.ts

@@ -11,28 +11,46 @@ import {
   ordinal,
   reverse,
 } from "@allurereport/core-api";
-import type { TreeFiltersState, TreeSortBy } from "@/stores/tree";
-import type {
-  AllureAwesomeRecursiveTree,
-  AllureAwesomeTree,
-  AllureAwesomeTreeGroup,
-  AllureAwesomeTreeLeaf,
-} from "../../types";
-
-export const isIncluded = (leaf: TreeLeaf<AllureAwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
-  const queryMatched = !filterOptions?.query || leaf.name.toLowerCase().includes(filterOptions.query.toLowerCase());
+import type { TreeFiltersState, TreeSortBy } from "@/stores/treeFilters";
+import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
+
+const matchesName = (name: string, query: string) => {
+  return name.toLocaleLowerCase().includes(query.toLocaleLowerCase());
+};
+
+const matchesNodeId = (nodeId: string, query: string) => {
+  return nodeId.toLowerCase() === query.toLocaleLowerCase();
+};
+
+export const isIncluded = (leaf: TreeLeaf<AwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
+  const queryMatched =
+    !filterOptions?.query ||
+    matchesName(leaf.name, filterOptions.query) ||
+    matchesNodeId(leaf.nodeId, filterOptions.query);
+
   const statusMatched =
     !filterOptions?.status || filterOptions?.status === "total" || leaf.status === filterOptions.status;
   const flakyMatched = !filterOptions?.filter?.flaky || leaf.flaky;
   const retryMatched = !filterOptions?.filter?.retry || leaf.retry;
-  // TODO: at this moment we don't have a new field implementation even in the generator
-  // const newMatched = !filterOptions?.filter?.new || leaf.new;
+  const newMatched = !filterOptions?.filter?.new || leaf.transition === "new";
+  const fixedMatched = !filterOptions?.filter?.fixed || leaf.transition === "fixed";
+  const regressedMatched = !filterOptions?.filter?.regressed || leaf.transition === "regressed";
+  const malfunctionedMatched = !filterOptions?.filter?.malfunctioned || leaf.transition === "malfunctioned";
 
-  return [queryMatched, statusMatched, flakyMatched, retryMatched].every(Boolean);
+  return [
+    queryMatched,
+    statusMatched,
+    flakyMatched,
+    retryMatched,
+    newMatched,
+    fixedMatched,
+    regressedMatched,
+    malfunctionedMatched,
+  ].every(Boolean);
 };
 
-const leafComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<TreeLeaf<AllureAwesomeTreeLeaf>> => {
-  const typedCompareBy = compareBy<TreeLeaf<AllureAwesomeTreeLeaf>>;
+const leafComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
+  const typedCompareBy = compareBy<TreeLeaf<AwesomeTreeLeaf>>;
   switch (sortBy) {
     case "order":
       return typedCompareBy("groupOrder", ordinal());
@@ -65,7 +83,7 @@ const groupComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<
   }
 };
 
-export const leafComparator = (filterOptions: TreeFiltersState): Comparator<TreeLeaf<AllureAwesomeTreeLeaf>> => {
+export const leafComparator = (filterOptions: TreeFiltersState): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
   const cmp = leafComparatorByTreeSortBy(filterOptions.sortBy);
   const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
   // apply fallback sorting by name
@@ -81,12 +99,12 @@ export const groupComparator = (filterOptions: TreeFiltersState): Comparator<Def
 
 export const filterLeaves = (
   leaves: string[] = [],
-  leavesById: AllureAwesomeTree["leavesById"],
+  leavesById: AwesomeTree["leavesById"],
   filterOptions: TreeFiltersState,
 ) => {
   const filteredLeaves = [...leaves]
     .map((leafId) => leavesById[leafId])
-    .filter((leaf: TreeLeaf<AllureAwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
+    .filter((leaf: TreeLeaf<AwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
 
   const comparator = leafComparator(filterOptions);
   return filteredLeaves.sort(comparator);
@@ -98,11 +116,11 @@ export const filterLeaves = (
  * @param payload
  */
 export const createRecursiveTree = (payload: {
-  group: AllureAwesomeTreeGroup;
-  groupsById: AllureAwesomeTree["groupsById"];
-  leavesById: AllureAwesomeTree["leavesById"];
+  group: AwesomeTreeGroup;
+  groupsById: AwesomeTree["groupsById"];
+  leavesById: AwesomeTree["leavesById"];
   filterOptions?: TreeFiltersState;
-}): AllureAwesomeRecursiveTree => {
+}): AwesomeRecursiveTree => {
   const { group, groupsById, leavesById, filterOptions } = payload;
   const groupLeaves: string[] = group.leaves ?? [];
 
@@ -120,7 +138,7 @@ export const createRecursiveTree = (payload: {
       ?.filter((rt) => !isRecursiveTreeEmpty(rt)) ?? [];
 
   const statistic: Statistic = emptyStatistic();
-  trees.forEach((rt: AllureAwesomeRecursiveTree) => {
+  trees.forEach((rt: AwesomeRecursiveTree) => {
     if (rt.statistic) {
       const additional: Statistic = rt.statistic;
       mergeStatistic(statistic, additional);
@@ -139,7 +157,7 @@ export const createRecursiveTree = (payload: {
   };
 };
 
-export const isRecursiveTreeEmpty = (tree: AllureAwesomeRecursiveTree): boolean => {
+export const isRecursiveTreeEmpty = (tree: AwesomeRecursiveTree): boolean => {
   if (!tree.trees?.length && !tree.leaves?.length) {
     return true;
   }