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

package/src/locales/tr.json

@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "Ek bulunamadı"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "Grafikler"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trend Grafiği: {{type}}",
+      "type": {
+        "status": "Durum",
+        "severity": "Önem Derecesi"
+      }
+    },
+    "pie": {
+      "title": "Test Başarı Oranı"
+    }
   }
 }

package/src/locales/zh.json

@@ -138,5 +138,21 @@
   },
   "errors": {
     "missedAttachment": "未找到附件"
+  },
+  "sections": {
+    "report": "Report",
+    "charts": "图形"
+  },
+  "charts": {
+    "trend": {
+      "title": "趋势图表: {{type}}",
+      "type": {
+        "status": "状态",
+        "severity": "严重程度"
+      }
+    },
+    "pie": {
+      "title": "测试成功率"
+    }
   }
 }

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,
@@ -16,7 +18,9 @@ export const fetchPieChartData = async (env: string) => {
   };
 
   try {
-    const res = await fetchReportJsonData(env ? `widgets/${env}/pie_chart.json` : "widgets/pie_chart.json");
+    const res = await fetchReportJsonData(env ? `widgets/${env}/pie_chart.json` : "widgets/pie_chart.json", {
+      bustCache: true,
+    });
 
     pieChartStore.value = {
       data: res,
@@ -30,3 +34,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", { bustCache: true });
+
+    chartsStore.value = {
+      data: createCharts(res),
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    chartsStore.value = {
+      data: undefined,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

package/src/stores/env.ts

@@ -32,7 +32,7 @@ export const fetchEnvironments = async () => {
   };
 
   try {
-    const res = await fetchReportJsonData<string[]>("widgets/environments.json");
+    const res = await fetchReportJsonData<string[]>("widgets/environments.json", { bustCache: true });
 
     environmentsStore.value = {
       data: res,

package/src/stores/envInfo.ts

@@ -1,7 +1,7 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
-import { StoreSignalState } from "@/stores/types";
+import type { StoreSignalState } from "@/stores/types";
 
 export const envInfoStore = signal<StoreSignalState<EnvironmentItem[]>>({
   loading: false,
@@ -17,7 +17,7 @@ export const fetchEnvInfo = async () => {
   };
 
   try {
-    const res = await fetchReportJsonData<EnvironmentItem[]>("widgets/allure_environment.json");
+    const res = await fetchReportJsonData<EnvironmentItem[]>("widgets/allure_environment.json", { bustCache: true });
 
     envInfoStore.value = {
       data: res,

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

@@ -26,7 +26,7 @@ export const fetchReportStats = async () => {
   };
 
   try {
-    const res = await fetchReportJsonData<Statistic>("widgets/statistic.json");
+    const res = await fetchReportJsonData<Statistic>("widgets/statistic.json", { bustCache: true });
 
     reportStatsStore.value = {
       data: res,
@@ -58,7 +58,7 @@ export const fetchEnvStats = async (envs: string[]) => {
 
   try {
     const data = await Promise.all(
-      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/statistic.json`)),
+      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/statistic.json`, { bustCache: true })),
     );
 
     statsByEnvStore.value = {

package/src/stores/testResults.ts

@@ -21,7 +21,9 @@ export const testResultNavStore = signal<StoreSignalState<TrNavStoreState>>({
 
 export const fetchTestResultNav = async (env?: string) => {
   try {
-    const data = await fetchReportJsonData<string[]>(env ? `widgets/${env}/nav.json` : "widgets/nav.json");
+    const data = await fetchReportJsonData<string[]>(env ? `widgets/${env}/nav.json` : "widgets/nav.json", {
+      bustCache: true,
+    });
 
     testResultNavStore.value = {
       data,
@@ -49,7 +51,9 @@ export const fetchTestResult = async (testResultId: string) => {
   };
 
   try {
-    const data = await fetchReportJsonData<AwesomeTestResult>(`data/test-results/${testResultId}.json`);
+    const data = await fetchReportJsonData<AwesomeTestResult>(`data/test-results/${testResultId}.json`, {
+      bustCache: true,
+    });
 
     testResultStore.value = {
       data: { ...testResultStore.value.data, [testResultId]: data },

package/src/stores/tree.ts

@@ -164,16 +164,19 @@ export const fetchEnvTreesData = async (envs: string[]) => {
 
   try {
     const data = await Promise.all(
-      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`)),
+      envsToFetch.map((env) => fetchReportJsonData<AwesomeTree>(`widgets/${env}/tree.json`, { bustCache: true })),
     );
 
+    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/stores/variables.ts

@@ -18,7 +18,9 @@ export const fetchVariables = async (env: string = "default") => {
   };
 
   try {
-    const res = await fetchReportJsonData<string[]>(env ? `widgets/${env}/variables.json` : "widgets/variables.json");
+    const res = await fetchReportJsonData<string[]>(env ? `widgets/${env}/variables.json` : "widgets/variables.json", {
+      bustCache: true,
+    });
 
     variables.value = {
       data: {

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

package/webpack.config.js

@@ -7,6 +7,7 @@ import SpriteLoaderPlugin from "svg-sprite-loader/plugin.js";
 import webpack from "webpack";
 import { WebpackManifestPlugin } from "webpack-manifest-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
+import TerserPlugin from "terser-webpack-plugin";
 
 const { SINGLE_FILE_MODE } = env;
 const baseDir = dirname(fileURLToPath(import.meta.url));
@@ -21,6 +22,19 @@ export default (env, argv) => {
       assetModuleFilename: devMode ? `[name].[ext]` : `[name]-[hash:8].[ext]`,
     },
     devtool: devMode ? "inline-source-map" : false,
+    optimization: {
+      minimize: !devMode,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            compress: {
+              drop_console: false,
+              drop_debugger: false,
+            },
+          },
+        }),
+      ],
+    },
     module: {
       rules: [
         {