feat/add-layout-component

packages/plugin-awesome/src/charts.ts

@@ -13,6 +13,16 @@ export type TestResultChartData = {
   slices: TestResultSlice[];
 };
 
+export type TrendItem = {
+  buildOrder: number;
+  reportName: string;
+  data: Statistic;
+};
+
+export type TrendData = {
+  items: TrendItem[];
+};
+
 export const d3Arc = arc<PieArcDatum<TestResultSlice>>().innerRadius(40).outerRadius(50).cornerRadius(2).padAngle(0.03);
 
 export const d3Pie = pie<TestResultSlice>()
@@ -41,3 +51,11 @@ export const getChartData = (stats: Statistic): TestResultChartData => {
     percentage,
   };
 };
+
+export const getTrendData = (stats: Statistic, reportName: string, buildOrder: number): TrendItem => {
+  return {
+    buildOrder,
+    reportName,
+    data: stats,
+  };
+};

packages/plugin-awesome/src/generators.ts

@@ -27,7 +27,7 @@ import Handlebars from "handlebars";
 import { readFile } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { basename, join } from "node:path";
-import { getChartData } from "./charts.js";
+import { getChartData, getTrendData, type TrendData } from "./charts.js";
 import { convertFixtureResult, convertTestResult } from "./converters.js";
 import type { AllureAwesomeOptions, TemplateManifest } from "./model.js";
 import type { AllureAwesomeDataWriter, ReportFile } from "./writer.js";
@@ -316,3 +316,21 @@ export const generateStaticFiles = async (
 
   await reportFiles.addFile("index.html", Buffer.from(html, "utf8"));
 };
+
+export const generateTrendData = async (
+  writer: AllureAwesomeDataWriter,
+  reportName: string,
+  statistic: Statistic,
+  historyDataPoints: { name: string; statistic: Statistic }[],
+) => {
+  const trendData: TrendData = {
+    items: [
+      getTrendData(statistic, reportName, historyDataPoints.length + 1),
+      ...historyDataPoints
+        .sort((a, b) => b.statistic.total - a.statistic.total)
+        .map((point, index) => getTrendData(point.statistic, point.name, historyDataPoints.length - index)),
+    ],
+  };
+
+  await writer.writeWidget("history-trend.json", trendData);
+};

packages/plugin-awesome/src/plugin.ts

@@ -1,4 +1,4 @@
-import { type EnvironmentItem } from "@allurereport/core-api";
+import { type EnvironmentItem, type Statistic } from "@allurereport/core-api";
 import type { AllureStore, Plugin, PluginContext } from "@allurereport/plugin-api";
 import { preciseTreeLabels } from "@allurereport/plugin-api";
 import {
@@ -10,6 +10,7 @@ import {
   generateStatistic,
   generateTestResults,
   generateTree,
+  generateTrendData,
 } from "./generators.js";
 import type { AllureAwesomePluginOptions } from "./model.js";
 import { type AllureAwesomeDataWriter, InMemoryReportDataWriter, ReportFileDataWriter } from "./writer.js";
@@ -24,6 +25,7 @@ export class AllureAwesomePlugin implements Plugin {
     const environmentItems = await store.metadataByKey<EnvironmentItem[]>("allure_environment");
     const statistic = await store.testsStatistic();
     const attachments = await store.allAttachments();
+    const historyDataPoints = await store.allHistoryDataPoints();
 
     await generateStatistic(this.#writer!, statistic);
     await generatePieChart(this.#writer!, statistic);
@@ -46,6 +48,20 @@ export class AllureAwesomePlugin implements Plugin {
       await generateAttachmentsFiles(this.#writer!, attachments, (id) => store.attachmentContentById(id));
     }
 
+    // Trend data generation
+    const historyPoints = historyDataPoints.map(point => ({
+      name: point.name,
+      statistic: Object.values(point.testResults).reduce((stat: Statistic, test) => {
+        if (test.status) {
+          stat[test.status] = (stat[test.status] || 0) + 1;
+          stat.total = (stat.total || 0) + 1;
+        }
+
+        return stat;
+      }, { total: 0 } as Statistic)
+    }));
+    await generateTrendData(this.#writer!, context.reportName, statistic, historyPoints);
+
     const reportDataFiles = singleFile ? (this.#writer! as InMemoryReportDataWriter).reportFiles() : [];
 
     await generateStaticFiles({

packages/web-classic/src/components/Overview/Overview.module.scss

@@ -0,0 +1,4 @@
+.overview {
+  padding: 24px;
+  width: 100%;
+} 

packages/web-classic/src/components/Overview/components/Widget/Widget.module.scss

@@ -0,0 +1,38 @@
+.widget {
+  background: var(--bg-base-modal);
+  border-radius: 8px;
+  box-shadow: var(--shadow-small);
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--on-border-primary);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.dragArea {
+  width: 24px;
+  height: 24px;
+  margin-left: -8px;
+}
+
+.title {
+  color: var(--on-text-primary);
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-m);
+  margin: 0;
+}
+
+.content {
+  padding: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+} 

packages/web-classic/src/components/Overview/components/Widget/index.tsx

@@ -0,0 +1,19 @@
+import type { FunctionalComponent, ComponentChildren } from "preact";
+import * as styles from "./Widget.module.scss";
+
+interface WidgetProps {
+  children: ComponentChildren;
+  title: string;
+}
+
+export const Widget: FunctionalComponent<WidgetProps> = ({ children, title }) => {
+  return (
+    <div className={styles.widget}>
+      <div className={styles.header}>
+        <div className={styles.dragArea} />
+        <h3 className={styles.title}>{title}</h3>
+      </div>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};

packages/web-classic/src/components/Overview/index.tsx

@@ -1,9 +1,40 @@
-import { Loadable, PageLoader } from "@allurereport/web-components";
-import * as styles from "@/components/BaseLayout/styles.scss";
-import { testResultStore } from "@/stores/testResults";
+import { Loadable, PageLoader, Grid, TrendChart, GridItem } from "@allurereport/web-components";
 import { treeStore } from "@/stores/tree";
+import { Widget } from "./components/Widget";
+import * as styles from "./Overview.module.scss";
+import { useEffect } from "preact/hooks";
+import { trendStore, fetchTrendData } from "@/stores/trend";
 
 const Overview = () => {
-  const testResultId = "";
+  useEffect(() => {
+    fetchTrendData();
+  }, []);
+
+  return (
+    <Loadable
+      source={trendStore}
+      renderLoader={() => <PageLoader />}
+      renderData={(trendData) => {
+        return (
+          <div className={styles.overview}>
+            <Grid kind="swap">
+                  <GridItem style={{ padding: "12px", width: "100%" }}>
+                    <Widget title="Test Results Trend">
+                      <TrendChart
+                        data={trendData.data}
+                        rootArialLabel="Test Results Trend"
+                        height={400}
+                        width="100%"
+                        colors={({ color }) => color}
+                      />
+                    </Widget>
+                  </GridItem>
+                </Grid>
+          </div>
+        );
+      }}
+    />
+  );
 };
+
 export default Overview;

packages/web-classic/src/stores/trend.ts

@@ -0,0 +1,88 @@
+import { signal } from "@preact/signals";
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import type { StoreSignalState } from "@/stores/types";
+import type { TestStatus } from "@allurereport/core-api";
+import { statusesList } from "@allurereport/core-api";
+
+interface TrendItem {
+  buildOrder: number;
+  reportName: string;
+  data: {
+    total: number;
+    failed?: number;
+    broken?: number;
+    passed?: number;
+    skipped?: number;
+    unknown?: number;
+  };
+}
+
+interface TrendResponse {
+  items: TrendItem[];
+}
+
+interface TrendChartItem {
+  id: string;
+  data: { x: Date | number; y: number }[];
+  color: string;
+}
+
+interface TrendData {
+  data: TrendChartItem[];
+}
+
+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)"
+};
+
+export const trendStore = signal<StoreSignalState<TrendData>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchTrendData = async () => {
+  trendStore.value = {
+    ...trendStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<TrendResponse>("widgets/history-trend.json");
+    const sortedItems = [...res.items].sort((a, b) => a.buildOrder - b.buildOrder);
+
+    const chartData = statusesList.reduce<TrendChartItem[]>((acc, status) => {
+      const hasStatus = sortedItems.some(item => item.data[status]);
+
+      if (hasStatus) {
+        acc.push({
+          id: status.charAt(0).toUpperCase() + status.slice(1),
+          data: sortedItems.map(item => ({
+            x: item.buildOrder,
+            y: item.data[status] ?? 0
+          })),
+          color: statusColors[status]
+        });
+      }
+
+      return acc;
+    }, []);
+
+    trendStore.value = {
+      data: { data: chartData },
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    trendStore.value = {
+      data: undefined,
+      error: err.message,
+      loading: false,
+    };
+  }
+};

packages/web-classic/test/dummy.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+
+describe("dummy", () => {
+  it("works", () => {
+    expect(true).toBe(true);
+  });
+});

packages/web-components/package.json

@@ -45,12 +45,14 @@
     "@nivo/core": "^0.88.0",
     "@nivo/line": "^0.88.0",
     "@preact/signals": "^1.3.0",
+    "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
     "preact": "^10.24.0",
     "prismjs": "^1.29.0",
     "react": "npm:@preact/compat@*",
     "react-dom": "npm:@preact/compat@*",
-    "reset.css": "^2.0.2"
+    "reset.css": "^2.0.2",
+    "sortablejs": "^1.15.6"
   },
   "devDependencies": {
     "@allurereport/core-api": "workspace:*",
@@ -93,6 +95,7 @@
     "@types/md5": "^2.3.5",
     "@types/node": "^20.17.9",
     "@types/prismjs": "^1",
+    "@types/sortablejs": "^1.15.8",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitest/runner": "^2.1.8",

packages/web-components/src/components/Grid/Grid.module.scss

@@ -0,0 +1,12 @@
+.grid {
+  display: grid;
+  width: 100%;
+}
+
+:global(.dnd-drag-swap-highlight) {
+  opacity: 0.8;
+  transition: all 150ms ease;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+  z-index: 1;
+}