@allurereport/web-awesome 3.0.0 → 3.1.0

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/tree.ts

@@ -1,21 +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 { AwesomeStatus, AwesomeTree, AwesomeTreeGroup } 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";
-
-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;
-};
+import { treeFilters } from "./treeFilters/store";
+import { sortBy } from "./treeSort";
 
 export const treeStore = signal<StoreSignalState<Record<string, AwesomeTree>>>({
   loading: true,
@@ -45,117 +36,8 @@ 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,
-      fixed: false,
-      regressed: false,
-      malfunctioned: false,
-    },
-    sortBy: "order",
-    direction: "asc",
-  }) as TreeFiltersState,
-);
-
-effect(() => {
-  localStorage.setItem("treeFilters", JSON.stringify(treeFiltersStore.value));
-});
-
-export const filteredTree = computed(() => {
-  return Object.entries(treeStore.value.data).reduce(
-    (acc, [key, value]) => {
-      if (!value) {
-        return acc;
-      }
-
-      const { root, leavesById, groupsById } = value;
-      const tree = createRecursiveTree({
-        group: root as AwesomeTreeGroup,
-        leavesById,
-        groupsById,
-        filterOptions: treeFiltersStore.value,
-      });
-
-      return Object.assign(acc, {
-        [key]: tree,
-      });
-    },
-    {} as Record<string, RecursiveTree>,
-  );
-});
-
-export const noTestsFound = computed(() => {
-  return Object.values(filteredTree.value).every(isRecursiveTreeEmpty);
-});
-
-export const clearTreeFilters = () => {
-  treeFiltersStore.value = {
-    query: "",
-    status: "total",
-    filter: {
-      flaky: false,
-      retry: false,
-      new: false,
-      fixed: false,
-      regressed: false,
-      malfunctioned: false,
-    },
-    sortBy: "order",
-    direction: "asc",
-  };
-};
-
-export const setTreeQuery = (query: string) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    query,
-  };
-};
-
-export const setTreeStatus = (status: AwesomeStatus) => {
-  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 setTreeFilter = (filterKey: TreeFilters, value: boolean) => {
-  treeFiltersStore.value = {
-    ...treeFiltersStore.value,
-    filter: {
-      ...treeFiltersStore.value.filter,
-      [filterKey]: value,
-    },
-  };
-};
-
 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) {
@@ -163,7 +45,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
   }
 
   treeStore.value = {
-    ...treeStore.value,
+    ...treeStore.peek(),
     loading: true,
     error: undefined,
   };
@@ -173,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) => {
@@ -189,9 +71,50 @@ export const fetchEnvTreesData = async (envs: string[]) => {
     };
   } catch (e) {
     treeStore.value = {
-      ...treeStore.value,
+      ...treeStore.peek(),
       error: e.message,
       loading: false,
     };
   }
 };
+
+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]) => {
+      if (!value) {
+        return acc;
+      }
+
+      const { root, leavesById, groupsById } = value;
+
+      const tree = createRecursiveTree({
+        group: root as AwesomeTreeGroup,
+        leavesById,
+        groupsById,
+        filterPredicate: filterPredicate.value,
+        sortBy: sortBy.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,63 @@
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import { ReportFetchError, fetchReportJsonData, setParams } from "@allurereport/web-commons";
+import { PARAMS } from "./constants";
+import type { TreeFiltersData } from "./model";
+import { treeTags } from "./store";
+
+export const setQueryFilter = (query?: string) => {
+  setParams({
+    key: PARAMS.QUERY,
+    value: query?.trim() === "" ? undefined : query,
+  });
+};
+
+export const setStatusFilter = (status?: TestStatus) => {
+  setParams({
+    key: PARAMS.STATUS,
+    value: status,
+  });
+};
+
+export const setFlakyFilter = (flaky?: boolean) => {
+  setParams({
+    key: PARAMS.FLAKY,
+    value: flaky ? "true" : undefined,
+  });
+};
+
+export const setRetryFilter = (retry?: boolean) => {
+  setParams({
+    key: PARAMS.RETRY,
+    value: retry ? "true" : undefined,
+  });
+};
+
+export const setTransitionFilter = (transitions: TestStatusTransition[]) => {
+  setParams({
+    key: PARAMS.TRANSITION,
+    value: transitions,
+  });
+};
+
+export const setTagsFilter = (tags: string[]) => {
+  setParams({
+    key: PARAMS.TAGS,
+    value: tags,
+  });
+};
+
+export const fetchTreeFiltersData = async () => {
+  try {
+    const response = await fetchReportJsonData<TreeFiltersData>("widgets/tree-filters.json", { bustCache: true });
+
+    treeTags.value = response.tags;
+  } catch (error) {
+    if (error instanceof ReportFetchError && error.response.status === 404) {
+      treeTags.value = [];
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.error("Failed to fetch tree filters data:\n\n", error);
+  }
+};

package/src/stores/treeFilters/constants.ts

@@ -0,0 +1,13 @@
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+
+export const TRANSITIONS: TestStatusTransition[] = ["new", "fixed", "regressed", "malfunctioned"];
+export const STATUSES: TestStatus[] = ["passed", "failed", "skipped", "broken", "unknown"];
+
+export const PARAMS = {
+  QUERY: "query",
+  STATUS: "status",
+  FLAKY: "flaky",
+  RETRY: "retry",
+  TRANSITION: "transition",
+  TAGS: "tags",
+} as const;

package/src/stores/treeFilters/model.ts

@@ -0,0 +1,51 @@
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import type {
+  ArrayField,
+  BooleanField,
+  Field,
+  FieldFilter,
+  FieldFilterGroup,
+  StringField,
+} from "@allurereport/web-commons";
+import type { AwesomeTreeLeaf } from "types";
+
+export type Filters = {
+  query?: string;
+  status?: TestStatus;
+  flaky?: boolean;
+  retry?: boolean;
+  transition?: TestStatusTransition[];
+  tags?: string[];
+};
+
+export type AwesomeFieldFilter = FieldFilter<keyof AwesomeTreeLeaf>;
+
+export type AwesomeFieldFilterGroup = FieldFilterGroup<keyof AwesomeTreeLeaf> & {
+  fieldKey?: keyof AwesomeTreeLeaf;
+};
+
+export type AwesomeFilterGroupSimple = AwesomeFieldFilterGroup & {
+  value: AwesomeFieldFilter[];
+};
+
+export type AwesomeFilter = AwesomeFieldFilter | AwesomeFilterGroupSimple;
+
+export type AwesomeField = Field<keyof AwesomeTreeLeaf>;
+
+export type AwesomeBooleanField = BooleanField<keyof AwesomeTreeLeaf>;
+
+export type AwesomeStringFieldFilter = AwesomeFieldFilter & {
+  value: StringField<keyof AwesomeTreeLeaf>;
+};
+
+export type AwesomeArrayFieldFilter = AwesomeFieldFilter & {
+  value: ArrayField<keyof AwesomeTreeLeaf>;
+};
+
+export type AwesomeBooleanFieldFilter = AwesomeFieldFilter & {
+  value: AwesomeBooleanField;
+};
+
+export type TreeFiltersData = {
+  tags: string[];
+};

package/src/stores/treeFilters/store.ts

@@ -0,0 +1,273 @@
+import type { TestStatus, TestStatusTransition } from "@allurereport/core-api";
+import { getParamValue, getParamValues } from "@allurereport/web-commons";
+import { computed, signal } from "@preact/signals";
+import type { AwesomeStatus } from "types";
+import {
+  setFlakyFilter,
+  setQueryFilter,
+  setRetryFilter,
+  setStatusFilter,
+  setTagsFilter,
+  setTransitionFilter,
+} from "./actions";
+import { PARAMS } from "./constants";
+import type {
+  AwesomeArrayFieldFilter,
+  AwesomeBooleanFieldFilter,
+  AwesomeFilter,
+  AwesomeFilterGroupSimple,
+  AwesomeStringFieldFilter,
+} from "./model";
+import {
+  isFlakyFilter,
+  isRetryFilter,
+  isTagFilter,
+  isTransitionFilter,
+  validateStatus,
+  validateTransition,
+} from "./utils";
+
+export const treeTags = signal<string[]>([]);
+
+const hasTreeTags = computed(() => treeTags.value.length > 0);
+
+const urlQueryFilter = computed<string | undefined>(() => {
+  const queryValue = getParamValue(PARAMS.QUERY) ?? "";
+
+  if (queryValue.trim() === "") {
+    return undefined;
+  }
+
+  return queryValue;
+});
+
+const urlStatusFilter = computed<TestStatus | undefined>(() => {
+  const status = getParamValue(PARAMS.STATUS) ?? undefined;
+
+  if (status && validateStatus(status)) {
+    return status;
+  }
+
+  return undefined;
+});
+
+const urlFlakyFilter = computed(() => getParamValue(PARAMS.FLAKY) === "true");
+const urlRetryFilter = computed(() => getParamValue(PARAMS.RETRY) === "true");
+
+const EMPTY_TRANSITIONS: TestStatusTransition[] = [];
+
+const urlTransitionFilter = computed(() => {
+  const transitions = getParamValues(PARAMS.TRANSITION) ?? EMPTY_TRANSITIONS;
+
+  if (transitions.length === 0) {
+    return EMPTY_TRANSITIONS;
+  }
+
+  return transitions.filter((transition) => validateTransition(transition));
+});
+
+const EMPTY_TAGS: string[] = [];
+
+const urlTagsFilter = computed<string[]>(() => {
+  const tags = getParamValues(PARAMS.TAGS) ?? EMPTY_TAGS;
+
+  if (tags.length === 0) {
+    return EMPTY_TAGS;
+  }
+
+  if (treeTags.value.length === 0) {
+    return tags;
+  }
+
+  return tags.filter((tag) => treeTags.value.includes(tag));
+});
+
+const treeStatusFilter = computed<AwesomeStringFieldFilter>(() => ({
+  type: "field",
+  logicalOperator: "AND",
+  value: {
+    key: "status",
+    value: urlStatusFilter.value,
+    type: "string",
+    strict: false,
+  },
+}));
+
+export const treeQueryFilter = computed<AwesomeFilterGroupSimple>(() => {
+  return {
+    type: "group",
+    logicalOperator: "AND",
+    value: [
+      {
+        type: "field",
+        logicalOperator: "OR",
+        value: {
+          key: "name",
+          value: urlQueryFilter.value,
+          type: "string",
+          strict: false,
+        },
+      },
+      {
+        type: "field",
+        logicalOperator: "OR",
+        value: {
+          key: "id",
+          value: urlQueryFilter.value,
+          type: "string",
+          strict: false,
+        },
+      },
+    ],
+  };
+});
+
+export const treeQueryFilterValue = computed(() => treeQueryFilter.value.value[0].value.value as string);
+
+export const setTreeQueryFilter = (query: string) => {
+  setQueryFilter(query);
+};
+
+const treeRetryFilter = computed<AwesomeBooleanFieldFilter>(() => {
+  return {
+    type: "field",
+    logicalOperator: "OR",
+    value: {
+      key: "retry",
+      value: !!urlRetryFilter.value,
+      type: "boolean",
+    },
+  };
+});
+
+const treeFlakyFilter = computed<AwesomeBooleanFieldFilter>(() => ({
+  type: "field",
+  logicalOperator: "OR",
+  value: {
+    key: "flaky",
+    value: !!urlFlakyFilter.value,
+    type: "boolean",
+  },
+}));
+
+const treeTransitionFilter = computed<AwesomeFilterGroupSimple>(() => ({
+  type: "group",
+  logicalOperator: "AND",
+  fieldKey: "transition",
+  value: urlTransitionFilter.value.map((transition) => ({
+    type: "field",
+    value: {
+      key: "transition",
+      value: transition,
+      type: "string",
+      logicalOperator: "OR",
+      strict: true,
+    },
+  })),
+}));
+
+const treeTagsFilter = computed<AwesomeArrayFieldFilter>(() => ({
+  type: "field",
+  logicalOperator: "AND",
+  value: {
+    key: "tags",
+    value: urlTagsFilter.value,
+    type: "array",
+    strict: false,
+  },
+}));
+
+export const treeQuickFilters = computed<AwesomeFilter[]>(() => [
+  treeRetryFilter.value,
+  treeFlakyFilter.value,
+  treeTransitionFilter.value,
+  treeTagsFilter.value,
+]);
+
+export const treeFilters = computed(() => {
+  const filters: AwesomeFilter[] = [];
+
+  if (treeQueryFilterValue.value) {
+    filters.push(treeQueryFilter.value);
+  }
+
+  const hasBothRetryAndFlaky = urlRetryFilter.value && urlFlakyFilter.value;
+
+  if (hasBothRetryAndFlaky) {
+    filters.push({
+      type: "group",
+      logicalOperator: "AND",
+      value: [
+        { ...treeRetryFilter.value, logicalOperator: "OR" },
+        { ...treeFlakyFilter.value, logicalOperator: "OR" },
+      ],
+    });
+  }
+
+  if (!hasBothRetryAndFlaky && urlRetryFilter.value) {
+    filters.push({ ...treeRetryFilter.value, logicalOperator: "AND" });
+  }
+
+  if (!hasBothRetryAndFlaky && urlFlakyFilter.value) {
+    filters.push({ ...treeFlakyFilter.value, logicalOperator: "AND" });
+  }
+
+  if (urlTransitionFilter.value.length > 0) {
+    filters.push(treeTransitionFilter.value);
+  }
+
+  if (urlTagsFilter.value.length > 0) {
+    filters.push(treeTagsFilter.value);
+  }
+
+  if (urlStatusFilter.value) {
+    filters.push(treeStatusFilter.value);
+  }
+
+  return filters;
+});
+
+export const setTreeFilter = (filter: AwesomeFilter) => {
+  if (isTransitionFilter(filter)) {
+    const transitions: TestStatusTransition[] = [];
+
+    for (const v of filter.value) {
+      if (v.type === "field" && v.value.type === "string" && v.value.key === "transition") {
+        transitions.push(v.value.value as TestStatusTransition);
+      }
+    }
+
+    setTransitionFilter(transitions);
+  }
+
+  if (isRetryFilter(filter)) {
+    setRetryFilter(filter.value.value);
+  }
+
+  if (isFlakyFilter(filter)) {
+    setFlakyFilter(filter.value.value);
+  }
+
+  if (
+    isTagFilter(filter) &&
+    // Apply tags filter only if there are tags to filter by
+    hasTreeTags.peek()
+  ) {
+    setTagsFilter(filter.value.value);
+  }
+};
+
+export const treeStatus = computed<AwesomeStatus>(() => urlStatusFilter.value ?? "total");
+
+export const setTreeStatus = (status: AwesomeStatus) => {
+  setStatusFilter(status === "total" ? undefined : status);
+};
+
+export const clearTreeFilters = () => {
+  setQueryFilter("");
+  setRetryFilter(false);
+  setFlakyFilter(false);
+  setTransitionFilter([]);
+  setTagsFilter([]);
+  setStatusFilter();
+};