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

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 {
+}

package/src/utils/charts.ts

@@ -0,0 +1,169 @@
+import { type SeverityLevel, type TestStatus, severityLevels, statusesList } from "@allurereport/core-api";
+
+export enum ChartType {
+  Trend = "trend",
+  Pie = "pie",
+}
+
+export enum ChartDataType {
+  Status = "status",
+  Severity = "severity",
+}
+
+export type ChartId = string;
+
+export interface Point {
+  x: Date | string | number;
+  y: number;
+}
+
+export interface Slice {
+  min: number;
+  max: number;
+  metadata: { executionId: string };
+}
+
+interface ResponseTrendChartData {
+  type: ChartType.Trend;
+  dataType: ChartDataType;
+  title?: string;
+  min: number;
+  max: number;
+  points: Record<string, Point>;
+  slices: Record<string, Slice>;
+  series: Record<TestStatus | SeverityLevel, string[]>;
+}
+
+interface TrendChartItem {
+  id: string;
+  data: Point[];
+  color: string;
+}
+
+export interface TrendChartData {
+  type: ChartType.Trend;
+  dataType: ChartDataType;
+  min: number;
+  max: number;
+  items: TrendChartItem[];
+  slices: Slice[];
+  title?: string;
+}
+
+export interface PieSlice {
+  status: TestStatus;
+  count: number;
+  d: string | null;
+}
+
+export interface ResponsePieChartData {
+  type: ChartType.Pie;
+  title?: string;
+  percentage: number;
+  slices: PieSlice[];
+}
+
+export type PieChartData = ResponsePieChartData;
+export type ChartData = TrendChartData | PieChartData;
+export type ChartsResponse = Partial<Record<ChartId, ResponseTrendChartData | ResponsePieChartData>>;
+export type ChartsData = Record<ChartId, ChartData>;
+
+const statusColors: Record<TestStatus, string> = {
+  failed: "var(--bg-support-capella)",
+  broken: "var(--bg-support-atlas)",
+  passed: "var(--bg-support-castor)",
+  skipped: "var(--bg-support-rau)",
+  unknown: "var(--bg-support-skat)",
+};
+const severityColors: Record<SeverityLevel, string> = {
+  blocker: "var(--bg-support-capella)",
+  critical: "var(--bg-support-atlas)",
+  normal: "var(--bg-support-castor)",
+  minor: "var(--bg-support-rau)",
+  trivial: "var(--bg-support-skat)",
+};
+
+/**
+ * Helper function to create chart data for different chart types
+ *
+ * @param getChart - Function to get the chart data
+ * @param getGroups - Function to get the groups
+ * @param getColor - Function to get the color
+ * @returns TrendChartData or undefined if the chart data is not available
+ */
+export const createTrendChartData = <T extends TestStatus | SeverityLevel>(
+  getChart: () => ResponseTrendChartData | undefined,
+  getGroups: () => readonly T[],
+  getColor: (group: T) => string,
+): TrendChartData | undefined => {
+  const chart = getChart();
+  if (!chart) {
+    return undefined;
+  }
+
+  const items = getGroups().reduce((acc, group) => {
+    const pointsByGroupBy =
+      chart.series[group]?.map((pointId) => ({
+        x: chart.points[pointId].x,
+        y: chart.points[pointId].y,
+      })) ?? [];
+
+    if (pointsByGroupBy.length) {
+      acc.push({
+        id: group.charAt(0).toUpperCase() + group.slice(1),
+        data: pointsByGroupBy,
+        color: getColor(group),
+      });
+    }
+
+    return acc;
+  }, [] as TrendChartItem[]);
+
+  return {
+    type: chart.type,
+    dataType: chart.dataType,
+    title: chart.title,
+    items,
+    slices: Object.values(chart.slices),
+    min: chart.min,
+    max: chart.max,
+  };
+};
+
+export const createStatusTrendChartData = (chartId: ChartId, res: ChartsResponse): TrendChartData | undefined =>
+  createTrendChartData(
+    () => res[chartId] as ResponseTrendChartData | undefined,
+    () => statusesList,
+    (status) => statusColors[status],
+  );
+
+export const createSeverityTrendChartData = (chartId: ChartId, res: ChartsResponse): TrendChartData | undefined =>
+  createTrendChartData(
+    () => res[chartId] as ResponseTrendChartData | undefined,
+    () => severityLevels,
+    (severity) => severityColors[severity],
+  );
+
+export const createaTrendChartData = (
+  chartId: string,
+  chartData: ResponseTrendChartData,
+  res: ChartsResponse,
+): TrendChartData | undefined => {
+  if (chartData.dataType === ChartDataType.Status) {
+    return createStatusTrendChartData(chartId, res);
+  } else if (chartData.dataType === ChartDataType.Severity) {
+    return createSeverityTrendChartData(chartId, res);
+  }
+};
+
+export const createCharts = (res: ChartsResponse): ChartsData => {
+  return Object.entries(res).reduce((acc, [chartId, chart]) => {
+    if (chart.type === ChartType.Trend) {
+      acc[chartId] = createaTrendChartData(chartId, chart, res);
+    } else if (chart.type === ChartType.Pie) {
+      acc[chartId] = chart;
+    }
+
+    return acc;
+  }, {} as ChartsData);
+};

package/types.d.ts

@@ -22,6 +22,8 @@ export type AwesomeReportOptions = {
   createdAt: number;
   reportUuid: string;
   layout?: Layout;
+  defaultSection?: string;
+  sections?: string[];
 };
 
 export type AwesomeFixtureResult = Omit<
@@ -97,4 +99,4 @@ export type AwesomeRecursiveTree = DefaultTreeGroup & {
 // TODO: add worst status
 export type AwesomeTestResultGroup = Pick<AwesomeTestResult, "name" | "fullName" | "groupOrder"> & {
   testResults: AwesomeTestResult[];
-}
+};