@allurereport/web-dashboard 3.0.0-beta.12

package/src/components/Dashboard/components/TrendChartWidget/index.tsx

@@ -0,0 +1,69 @@
+import { TrendChart, TrendChartKind, makeSymlogScale } from "@allurereport/web-components";
+import type { Serie, Slice } from "@allurereport/web-components";
+import type { CSSProperties } from "preact/compat";
+import { useCallback, useMemo, useState } from "preact/hooks";
+import { useI18n } from "@/stores/locale";
+import { Widget } from "../Widget";
+
+interface TrendChartWidgetProps<TSlice = { metadata: { executionId: string } }> {
+  title: string;
+  items: readonly Serie[];
+  slices: readonly TSlice[];
+  min: number;
+  max: number;
+  height?: CSSProperties["height"];
+  width?: CSSProperties["width"];
+  rootAriaLabel?: string;
+}
+
+export const TrendChartWidget = ({
+  title,
+  items,
+  slices,
+  min,
+  max,
+  height = 400,
+  width = "100%",
+  rootAriaLabel,
+}: TrendChartWidgetProps) => {
+  const { t } = useI18n("empty");
+  const [selectedSliceIds, setSelectedSliceIds] = useState<string[]>([]);
+
+  const emptyLabel = t("no-results");
+
+  const yScale = useMemo(() => makeSymlogScale(min, max, { constant: 8 }), [max, min]);
+
+  const handleSliceClick = useCallback((slice: Slice) => {
+    const executionIds = slice.points.reduce((acc, point) => {
+      acc.push(point.data.x as string);
+
+      return acc;
+    }, [] as string[]);
+
+    setSelectedSliceIds(() => executionIds);
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const selectedSlices = useMemo(
+    () => slices.filter((slice) => selectedSliceIds.includes(slice.metadata.executionId)),
+    [slices, selectedSliceIds],
+  );
+
+  return (
+    <Widget title={title}>
+      <TrendChart
+        kind={TrendChartKind.SlicesX}
+        data={items}
+        height={height}
+        width={width}
+        emptyLabel={emptyLabel}
+        emptyAriaLabel={emptyLabel}
+        rootAriaLabel={rootAriaLabel}
+        colors={({ color }) => color}
+        yScale={yScale}
+        onSliceClick={handleSliceClick}
+        onSliceTouchEnd={handleSliceClick}
+      />
+    </Widget>
+  );
+};

package/src/components/Dashboard/components/Widget/index.tsx

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

package/src/components/Dashboard/components/Widget/styles.scss

@@ -0,0 +1,31 @@
+.widget {
+  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;
+  flex: 0 0 auto;
+}
+
+.dragArea {
+  width: 24px;
+  height: 24px;
+  margin-left: -8px;
+  flex: 0 0 auto;
+}
+
+.content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}

package/src/components/Dashboard/index.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { capitalize } from "@allurereport/web-commons";
+import { Grid, GridItem, Loadable, PageLoader, SuccessRatePieChart } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { type ChartData, ChartType, dashboardStore, fetchDashboardData } from "@/stores/dashboard";
+import { useI18n } from "@/stores/locale";
+import { TrendChartWidget } from "./components/TrendChartWidget";
+import { Widget } from "./components/Widget";
+import * as styles from "./styles.scss";
+
+const getChartWidgetByType = (chartData: ChartData, t: (key: string, options?: any) => string) => {
+  switch (chartData.type) {
+    case ChartType.Trend: {
+      const type = t(`trend.type.${chartData.dataType}`);
+      const title = chartData.title ?? t("trend.title", { type: capitalize(type) });
+
+      return (
+        <TrendChartWidget
+          title={title}
+          items={chartData.items}
+          slices={chartData.slices}
+          min={chartData.min}
+          max={chartData.max}
+        />
+      );
+    }
+    case ChartType.Pie: {
+      const title = chartData.title ?? t("pie.title");
+
+      return (
+        <Widget title={title}>
+          <div className={styles["overview-grid-item-pie-chart-wrapper"]}>
+            <div className={styles["overview-grid-item-pie-chart-wrapper-squeezer"]}>
+              <SuccessRatePieChart slices={chartData.slices} percentage={chartData.percentage} />
+            </div>
+          </div>
+        </Widget>
+      );
+    }
+  }
+};
+
+export const Dashboard = () => {
+  const { t } = useI18n("charts");
+
+  useEffect(() => {
+    fetchDashboardData();
+  }, []);
+
+  return (
+    <Loadable
+      source={dashboardStore}
+      renderLoader={() => <PageLoader />}
+      renderData={(data) => {
+        const charts = Object.entries(data).map(([chartId, value]) => {
+          const chartWidget = getChartWidgetByType(value, t);
+
+          return (
+            <GridItem key={chartId} className={styles["overview-grid-item"]}>
+              {chartWidget}
+            </GridItem>
+          );
+        });
+
+        return (
+          <div className={styles.overview}>
+            <Grid kind="swap" className={styles["overview-grid"]}>
+              {charts}
+            </Grid>
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Dashboard/styles.scss

@@ -0,0 +1,29 @@
+.overview {
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.overview-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(50% - 12px)), 1fr));
+}
+
+.overview-grid-item {
+  padding: 12px;
+  width: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper-squeezer {
+  width: 50%;
+}

package/src/components/Footer/FooterLogo.tsx

@@ -0,0 +1,15 @@
+import { ReportLogoFull, Text } from "@allurereport/web-components";
+import * as styles from "./styles.scss";
+
+export const FooterLogo = () => {
+  return (
+    <div className={styles["footer-logo"]}>
+      <a href="https://allurereport.org" target={"_blank"} rel="noreferrer">
+        <Text type="paragraph" size="m" className={styles["footer-logo"]}>
+          Powered by
+        </Text>
+        <ReportLogoFull className={styles.logo} />
+      </a>
+    </div>
+  );
+};

package/src/components/Footer/FooterVersion.tsx

@@ -0,0 +1,37 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { Text } from "@allurereport/web-components";
+import { useEffect, useState } from "preact/hooks";
+import type { DashboardReportOptions } from "types";
+import { currentLocaleIso } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+export const FooterVersion = () => {
+  const [createdAt, setCreatedAt] = useState<number | null>(null);
+  const [currentVersion, setCurrentVersion] = useState<string>();
+
+  useEffect(() => {
+    const reportOptions = getReportOptions<DashboardReportOptions>();
+    if (reportOptions?.createdAt) {
+      setCreatedAt(Number(reportOptions.createdAt));
+    }
+    if (reportOptions?.allureVersion) {
+      setCurrentVersion(reportOptions.allureVersion as string);
+    }
+  }, []);
+
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
+    month: "numeric",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
+
+  return (
+    <Text type="paragraph" size="m" className={styles.version}>
+      {formattedCreatedAt}
+      {currentVersion && <span> Ver: {currentVersion}</span>}
+    </Text>
+  );
+};

package/src/components/Footer/index.tsx

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { FooterLogo } from "@/components/Footer/FooterLogo";
+import { FooterVersion } from "@/components/Footer/FooterVersion";
+
+export const Footer = () => {
+  return (
+    <div className={clsx(styles.below)}>
+      <FooterLogo />
+      <FooterVersion />
+    </div>
+  );
+};

package/src/components/Footer/styles.scss

@@ -0,0 +1,14 @@
+.footer-logo {
+  color: var(--on-text-secondary);
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  margin-left: 8px;
+}
+
+.version {
+  color: var(--on-text-hint);
+}

package/src/components/Header/index.tsx

@@ -0,0 +1,21 @@
+import { LanguagePicker, ThemeButton } from "@allurereport/web-components";
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
+import { currentLocale, setLocale } from "@/stores/locale";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+import * as styles from "./styles.scss";
+
+interface HeaderProps {
+  className?: ClassValue;
+}
+
+export const Header = ({ className }: HeaderProps) => {
+  return (
+    <div className={clsx(styles.above, className)}>
+      <div className={styles.right}>
+        <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
+        <ThemeButton theme={themeStore.value} toggleTheme={toggleTheme} getTheme={getTheme} />
+      </div>
+    </div>
+  );
+};

package/src/components/Header/styles.scss

@@ -0,0 +1,33 @@
+.above {
+  margin-bottom: 12px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.logoWrapper {
+  margin-right: auto;
+  color: var(--on-text-secondary);
+}
+
+.logo {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
+  top: -2px;
+}
+
+.left {
+  margin-right: auto;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/src/components/MainReport/index.tsx

@@ -0,0 +1,12 @@
+import { Dashboard } from "@/components/Dashboard";
+import { Header } from "@/components/Header";
+
+const MainReport = () => {
+  return (
+    <>
+      <Header />
+      <Dashboard />
+    </>
+  );
+};
+export default MainReport;

package/src/components/MainReport/styles.scss

@@ -0,0 +1,6 @@
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}

package/src/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Allure Dashboard</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.09.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.981-4.61-2.587-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23a)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.392 3.6a3.6 3.6 0 0 1 3.6-3.6c4.41 0 8.401 1.807 11.296 4.662a3.6 3.6 0 1 1-5.056 5.126C20.602 8.18 18.398 7.2 15.992 7.2a3.6 3.6 0 0 1-3.6-3.6Z' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 15.992C0 7.157 7.157 0 15.992 0a3.6 3.6 0 0 1 0 7.2A8.789 8.789 0 0 0 7.2 15.992c0 2.406.981 4.61 2.588 6.24a3.6 3.6 0 0 1-5.126 5.056C1.807 24.393 0 20.402 0 15.992Z' fill='url(%23c)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.661 22.232a3.6 3.6 0 0 1 5.091-.035c1.63 1.606 3.834 2.587 6.24 2.587a3.6 3.6 0 0 1 0 7.2c-4.41 0-8.401-1.807-11.295-4.661a3.6 3.6 0 0 1-.036-5.091Z' fill='url(%23d)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.384 12.392a3.6 3.6 0 0 1 3.6 3.6c0 8.835-7.157 15.992-15.992 15.992a3.6 3.6 0 0 1 0-7.2 8.789 8.789 0 0 0 8.792-8.792 3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23e)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.385 12.392a3.6 3.6 0 0 1 3.6 3.6v12.392a3.6 3.6 0 0 1-7.2 0V15.992a3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23f)'/%3E%3Cg clip-path='url(%23g)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.091.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.982-4.61-2.588-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.8' y1='9.4' x2='17.8' y2='3.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF4444'/%3E%3Cstop offset='1' stop-color='%23DC2626'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='3.6' y1='14' x2='5.4' y2='24.8' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2322C55E'/%3E%3Cstop offset='1' stop-color='%2315803D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.8' y1='22.2' x2='14.4' y2='29.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2394A3B8'/%3E%3Cstop offset='.958' stop-color='%2364748B'/%3E%3Cstop offset='1' stop-color='%2364748B'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='28.4' y1='22.173' x2='22.188' y2='28.384' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D97706'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='29.2' y1='54.4' x2='30.626' y2='54.256' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3CclipPath id='g'%3E%3Cpath fill='%23fff' transform='translate(24.8 12)' d='M0 0h7.2v8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" />
+    <base href="http://localhost:8080" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      window.allure = window.allure || {};
+    </script>
+
+    <script>
+      const { origin, pathname } = window.location;
+      const url = new URL(pathname, origin);
+      const baseEl = document.createElement("base");
+
+      baseEl.href = url.toString();
+
+      window.document.head.appendChild(baseEl);
+    </script>
+    <script>
+      window.allureReportOptions = {
+        "reportName": "Allure Report",
+        "logo": "",
+        "theme": "light",
+        "reportLanguage": "en",
+        "createdAt": 1739819870336,
+        "reportUuid": "51b36daf-614b-409c-b6a2-e8e401b2c145",
+        "layout": [],
+        "allureVersion": "3.0.0-beta.8"
+      };
+    </script>
+    <script async>
+      window.allureReportDataReady = true;
+    </script>
+  </body>
+</html>

package/src/index.tsx

@@ -0,0 +1,34 @@
+import { ensureReportDataReady } from "@allurereport/web-commons";
+import "@allurereport/web-components/index.css";
+import { render } from "preact";
+import "@/assets/scss/index.scss";
+import { BaseLayout } from "@/components/BaseLayout";
+import { getLocale, waitForI18next } from "@/stores/locale";
+import { getTheme } from "@/stores/theme";
+import { isMac } from "@/utils/isMac";
+import * as styles from "./styles.scss";
+
+const App = () => (
+  <div className={styles.main}>
+    <BaseLayout />
+  </div>
+);
+
+const rootElement = document.getElementById("app");
+
+document.addEventListener("DOMContentLoaded", () => {
+  if (isMac) {
+    document.documentElement.setAttribute("data-os", "mac");
+  }
+});
+
+(async () => {
+  await waitForI18next;
+  if (globalThis) {
+    await getLocale();
+    getTheme();
+  }
+  await ensureReportDataReady();
+
+  render(<App />, rootElement);
+})();

package/src/locales/az.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Keçdi",
+    "failed": "Uğursuz",
+    "broken": "Sınıq",
+    "skipped": "Keçildi",
+    "unknown": "Naməlum",
+    "total": "Cəmi"
+  },
+  "empty": {
+    "no-results": "Nəticə tapılmadı"
+  },
+  "severity": {
+    "blocker": "Bloklayıcı",
+    "critical": "Kritik",
+    "normal": "Normal",
+    "minor": "Kiçik",
+    "trivial": "Əhəmiyyətsiz"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trend qrafiki: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Ciddilik"
+      }
+    },
+    "pie": {
+      "title": "Test Uğur Dərəcəsi"
+    }
+  }
+}

package/src/locales/de.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Bestanden",
+    "failed": "Fehlgeschlagen",
+    "broken": "Defekt",
+    "skipped": "Übersprungen",
+    "unknown": "Unbekannt",
+    "total": "Gesamt"
+  },
+  "empty": {
+    "no-results": "Keine Ergebnisse"
+  },
+  "severity": {
+    "blocker": "Blocker",
+    "critical": "Kritisch",
+    "normal": "Normal",
+    "minor": "Geringfügig",
+    "trivial": "Trivial"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trenddiagramm: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Schweregrad"
+      }
+    },
+    "pie": {
+      "title": "Testerfolgsrate"
+    }
+  }
+}

package/src/locales/en.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Passed",
+    "failed": "Failed",
+    "broken": "Broken",
+    "skipped": "Skipped",
+    "unknown": "Unknown",
+    "total": "Total"
+  },
+  "empty": {
+    "no-results": "No results"
+  },
+  "severity": {
+    "blocker": "Blocker",
+    "critical": "Critical",
+    "normal": "Normal",
+    "minor": "Minor",
+    "trivial": "Trivial"
+  },
+  "charts": {
+    "trend": {
+      "title": "Trend Chart: {{type}}",
+      "type": {
+        "status": "Status",
+        "severity": "Severity"
+      }
+    },
+    "pie": {
+      "title": "Test Success Rate"
+    }
+  }
+}

package/src/locales/es.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Aprobado",
+    "failed": "Fallido",
+    "broken": "Roto",
+    "skipped": "Omitido",
+    "unknown": "Desconocido",
+    "total": "Total"
+  },
+  "empty": {
+    "no-results": "Sin resultados"
+  },
+  "severity": {
+    "blocker": "Bloqueante",
+    "critical": "Crítico",
+    "normal": "Normal",
+    "minor": "Menor",
+    "trivial": "Trivial"
+  },
+  "charts": {
+    "trend": {
+      "title": "Gráfico de tendencia: {{type}}",
+      "type": {
+        "status": "Estado",
+        "severity": "Severidad"
+      }
+    },
+    "pie": {
+      "title": "Tasa de éxito de pruebas"
+    }
+  }
+}

package/src/locales/fr.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "Réussi",
+    "failed": "Échoué",
+    "broken": "Cassé",
+    "skipped": "Ignoré",
+    "unknown": "Inconnu",
+    "total": "Total"
+  },
+  "empty": {
+    "no-results": "Aucun résultat"
+  },
+  "severity": {
+    "blocker": "Bloquant",
+    "critical": "Critique",
+    "normal": "Normal",
+    "minor": "Mineur",
+    "trivial": "Trivial"
+  },
+  "charts": {
+    "trend": {
+      "title": "Graphique de tendance: {{type}}",
+      "type": {
+        "status": "Statut",
+        "severity": "Sévérité"
+      }
+    },
+    "pie": {
+      "title": "Taux de réussite des tests"
+    }
+  }
+}

package/src/locales/he.json

@@ -0,0 +1,32 @@
+{
+  "statuses": {
+    "passed": "עבר",
+    "failed": "נכשל",
+    "broken": "שבור",
+    "skipped": "דולג",
+    "unknown": "לא ידוע",
+    "total": "סך הכל"
+  },
+  "empty": {
+    "no-results": "אין תוצאות"
+  },
+  "severity": {
+    "blocker": "חוסם",
+    "critical": "קריטי",
+    "normal": "רגיל",
+    "minor": "משני",
+    "trivial": "שולי"
+  },
+  "charts": {
+    "trend": {
+      "title": "תרשים מגמה: {{type}}",
+      "type": {
+        "status": "סטטוס",
+        "severity": "חומרה"
+      }
+    },
+    "pie": {
+      "title": "שיעור הצלחת הבדיקות"
+    }
+  }
+}