@allurereport/web-classic 3.0.0-beta.10

package/src/utils/navigate.ts

@@ -0,0 +1,7 @@
+export const navigateTo = (path: string) => {
+  globalThis.location.hash = path;
+};
+
+export const openInNewTab = (path: string) => {
+  window.open(`#${path}`, "_blank");
+};

package/src/utils/statuses.js

@@ -0,0 +1 @@
+export const values = ["failed", "broken", "passed", "skipped", "unknown"];

package/src/utils/statuses.ts

@@ -0,0 +1,55 @@
+import type { DefaultTreeGroup, DefaultTreeLeaf, TestStatus, TreeData } from "@allurereport/core-api";
+
+export type Stats = Record<TestStatus, number> & { total?: number };
+
+const emptyStat: Stats = { failed: 0, broken: 0, passed: 0, skipped: 0, unknown: 0 };
+
+const statisticByIds = (tree: TreeData<DefaultTreeLeaf, DefaultTreeGroup>, ids: string[]): Stats => {
+  return ids
+    .map((id) => tree.leavesById[id])
+    .filter((v) => v)
+    .reduce(
+      (prev, current) => {
+        prev[current.status]++;
+        return prev;
+      },
+      { ...emptyStat },
+    );
+};
+
+const mergeStats = (stat1: Stats, stat2: Stats): Stats => {
+  Object.keys(stat1).forEach((key) => {
+    stat1[key as TestStatus] += stat2[key as TestStatus];
+  });
+  return stat1;
+};
+
+export const getGroupStatistics = (
+  tree: TreeData<DefaultTreeLeaf, DefaultTreeGroup>,
+  groupId: string,
+  statusFilter?: string,
+): Stats => {
+  const group = tree.groupsById[groupId];
+  let stat: Stats = { ...emptyStat };
+
+  if (group?.leaves?.length) {
+    stat = mergeStats(stat, statisticByIds(tree, group.leaves));
+  }
+
+  if (group?.groups?.length) {
+    for (const subGroupId of group.groups) {
+      const subGroupStat = getGroupStatistics(tree, subGroupId, statusFilter);
+      stat = mergeStats(stat, subGroupStat);
+    }
+  }
+
+  return stat;
+};
+
+export const getStatistics = (tree: TreeData<DefaultTreeLeaf, DefaultTreeGroup>) =>
+  tree.root.groups
+    ?.map((groupId) => {
+      const stat = getGroupStatistics(tree, groupId);
+      return { name: tree.groupsById[groupId].name, statistic: stat };
+    })
+    ?.sort((a, b) => a.name.localeCompare(b.name)) ?? [];

package/src/utils/time.ts

@@ -0,0 +1,17 @@
+import { useI18n } from "@/stores/locale";
+
+const defaultOptions: Intl.DateTimeFormatOptions = {
+  month: "numeric",
+  day: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  hour12: false,
+};
+
+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/treeFilters.ts

@@ -0,0 +1,139 @@
+import type { Comparator, DefaultTreeGroup, Statistic, TestStatus, TreeLeaf } from "@allurereport/core-api";
+import {
+  alphabetically,
+  andThen,
+  byStatistic,
+  byStatus,
+  compareBy,
+  emptyStatistic,
+  incrementStatistic,
+  mergeStatistic,
+  ordinal,
+  reverse,
+} from "@allurereport/core-api";
+import type { TreeFiltersState, TreeSortBy } from "@/stores/tree";
+import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
+
+export const isIncluded = (leaf: TreeLeaf<AwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
+  const queryMatched = !filterOptions?.query || leaf.name.toLowerCase().includes(filterOptions.query.toLowerCase());
+  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;
+
+  return [queryMatched, statusMatched, flakyMatched, retryMatched].every(Boolean);
+};
+
+const leafComparatorByTreeSortBy = (sortBy: TreeSortBy): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
+  const typedCompareBy = compareBy<TreeLeaf<AwesomeTreeLeaf>>;
+  switch (sortBy) {
+    case "order":
+      return typedCompareBy("groupOrder", ordinal());
+    case "duration":
+      return typedCompareBy("duration", ordinal());
+    case "alphabet":
+      return typedCompareBy("name", alphabetically());
+    case "status":
+      return typedCompareBy("status", byStatus());
+  }
+};
+
+const groupComparatorByTreeSortBy = (sortBy: TreeSortBy): Comparator<DefaultTreeGroup> => {
+  const typedCompareBy = compareBy<DefaultTreeGroup>;
+  switch (sortBy) {
+    case "alphabet":
+      return typedCompareBy("name", alphabetically());
+    case "order":
+    case "duration":
+    case "status":
+      return typedCompareBy("statistic", byStatistic());
+  }
+};
+
+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
+  return andThen([directional, compareBy("name", alphabetically())]);
+};
+
+export const groupComparator = (filterOptions: TreeFiltersState): Comparator<DefaultTreeGroup> => {
+  const cmp = groupComparatorByTreeSortBy(filterOptions.sortBy);
+  const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
+  // apply fallback sorting by name
+  return andThen([directional, compareBy("name", alphabetically())]);
+};
+
+export const filterLeaves = (
+  leaves: string[] = [],
+  leavesById: AwesomeTree["leavesById"],
+  filterOptions: TreeFiltersState,
+) => {
+  const filteredLeaves = [...leaves]
+    .map((leafId) => leavesById[leafId])
+    .filter((leaf: TreeLeaf<AwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
+
+  const comparator = leafComparator(filterOptions);
+  return filteredLeaves.sort(comparator);
+};
+
+/**
+ * Fills the given tree from generator and returns recursive tree which includes leaves data instead of their IDs
+ * Filters leaves when `filterOptions` property is provided
+ * @param payload
+ */
+export const createRecursiveTree = (payload: {
+  group: AwesomeTreeGroup;
+  groupsById: AwesomeTree["groupsById"];
+  leavesById: AwesomeTree["leavesById"];
+  filterOptions?: TreeFiltersState;
+}): AwesomeRecursiveTree => {
+  const { group, groupsById, leavesById, filterOptions } = payload;
+  const groupLeaves: string[] = group.leaves ?? [];
+
+  const leaves = filterLeaves(groupLeaves, leavesById, filterOptions);
+  const trees =
+    group.groups
+      ?.map((groupId) =>
+        createRecursiveTree({
+          group: groupsById[groupId],
+          groupsById,
+          leavesById,
+          filterOptions,
+        }),
+      )
+      ?.filter((rt) => !isRecursiveTreeEmpty(rt)) ?? [];
+
+  const statistic: Statistic = emptyStatistic();
+  trees.forEach((rt: AwesomeRecursiveTree) => {
+    if (rt.statistic) {
+      const additional: Statistic = rt.statistic;
+      mergeStatistic(statistic, additional);
+    }
+  });
+  leaves.forEach((leaf) => {
+    const status: TestStatus = leaf.status;
+    incrementStatistic(statistic, status);
+  });
+
+  return {
+    ...group,
+    statistic,
+    leaves,
+    trees: trees.sort(groupComparator(filterOptions)),
+  };
+};
+
+export const isRecursiveTreeEmpty = (tree: AwesomeRecursiveTree): boolean => {
+  if (!tree.trees?.length && !tree.leaves?.length) {
+    return true;
+  }
+
+  if (tree.leaves?.length) {
+    return false;
+  }
+
+  return tree.trees?.every((subTree) => isRecursiveTreeEmpty(subTree));
+};

package/src/variables.scss

@@ -0,0 +1,71 @@
+$brand-blue: #0044bb;
+$brand-red: #ff0000;
+
+$color-passed: #97cc64;
+$color-failed: #fd5a3e;
+$color-broken: #ffd050;
+$color-skipped: #aaa;
+$color-unknown: #d35ebe;
+
+$background-light-passed: #eef9eb;
+$background-light-failed: #ffe7e6;
+$background-light-broken: #fffae6;
+$background-light-skipped: #f2f2f2;
+$background-light-unknown: #faebf7;
+
+$background-passed: #a6e19d;
+$background-failed: #ffaca6;
+$background-broken: #ffeca0;
+$background-skipped: #cccccc;
+$background-unknown: #ecb7e2;
+
+$header-bg: #fff;
+$heading-bg: #f6f5f3;
+$body-bg: #fff;
+$content-bg: #fff;
+$attachment-bg: #f8f8f9;
+
+$border-color: #eceff1;
+$border-accent-color: #e5e5e5;
+
+$hover-color: #e4edfe;
+$selected-color: #fffacd;
+$summary-color: #f6f5f3;
+
+$text-color: #000;
+$text-muted-color: #999;
+
+$gap-size: 16px;
+$footer-gap-size: 32px;
+
+$small-screen: 1000px;
+$min-pane-size: 300px;
+
+/*  Sidebar  **/
+
+$sidebar-full-width: 180px;
+$sidebar-collapsed: 60px;
+
+$sidebar-separator-color: #4d4d4d;
+$sidebar-active-accent-color: #64b5f6;
+$app-nav-bg: #343434;
+$sidebar-active-text-color: #fff;
+$sidebar-hover-text-color: #fff;
+$sidebar-brand-color: #fff;
+$sidebar-text-shadow-color: #000;
+
+/* Links */
+
+$link-color: #000;
+$link-color-hover: #f00;
+
+/* Pane set */
+
+$pane-bg-color: #fff;
+$pane-shadow-color: #999;
+$pane-overlay-bg: rgba(240, 240, 240, 0.4);
+$pane-overlay-bg-hover: rgba(240, 240, 240, 0.2);
+
+/* Tooltip */
+$tooltip-bg: rgba(50, 50, 50, 0.8);
+$tooltip-color: #fff;