@allurereport/web-dashboard 3.0.0-beta.19 → 3.0.0-beta.21

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-7bcc055d079abc1ab4eb.js"
+  "main.js": "app-478ea6270dbbc5c28920.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-dashboard",
-  "version": "3.0.0-beta.19",
+  "version": "3.0.0-beta.21",
   "description": "The static files for Allure Dashboard Report",
   "keywords": [
     "allure",
@@ -31,9 +31,10 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.19",
-    "@allurereport/web-commons": "3.0.0-beta.19",
-    "@allurereport/web-components": "3.0.0-beta.19",
+    "@allurereport/charts-api": "3.0.0-beta.21",
+    "@allurereport/core-api": "3.0.0-beta.21",
+    "@allurereport/web-commons": "3.0.0-beta.21",
+    "@allurereport/web-components": "3.0.0-beta.21",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "i18next": "^24.0.2",

package/src/components/Dashboard/index.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { ChartType, capitalize } from "@allurereport/core-api";
+import { BarChartType, ChartType } from "@allurereport/charts-api";
+import { capitalize } from "@allurereport/core-api";
 import { type UIChartData } from "@allurereport/web-commons";
 import {
   BarChartWidget,
@@ -9,6 +10,7 @@ import {
   HeatMapWidget,
   Loadable,
   PageLoader,
+  StabilityRateDistributionWidget,
   SuccessRatePieChart,
   TreeMapChartWidget,
   TrendChartWidget,
@@ -16,6 +18,7 @@ import {
 } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
 import { dashboardStore, fetchDashboardData } from "@/stores/dashboard";
+import { currentEnvironment, fetchEnvironments } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import * as styles from "./styles.scss";
 
@@ -57,6 +60,25 @@ const getChartWidgetByType = (
       const type = t(`bar.type.${chartData.dataType}`);
       const title = chartData.title ?? t("bar.title", { type: capitalize(type) });
 
+      if (chartData.dataType === BarChartType.StabilityRateDistribution) {
+        return (
+          <StabilityRateDistributionWidget
+            title={title}
+            mode={chartData.mode}
+            data={chartData.data}
+            keys={chartData.keys}
+            indexBy={chartData.indexBy}
+            colors={chartData.colors}
+            groupMode={chartData.groupMode}
+            xAxisConfig={chartData.xAxisConfig}
+            yAxisConfig={chartData.yAxisConfig}
+            layout={chartData.layout}
+            threshold={chartData.threshold}
+            translations={{ "no-results": empty("no-results") }}
+          />
+        );
+      }
+
       return (
         <BarChartWidget
           title={title}
@@ -66,6 +88,8 @@ const getChartWidgetByType = (
           indexBy={chartData.indexBy}
           colors={chartData.colors}
           groupMode={chartData.groupMode}
+          xAxisConfig={chartData.xAxisConfig}
+          yAxisConfig={chartData.yAxisConfig}
           translations={{ "no-results": empty("no-results") }}
         />
       );
@@ -107,6 +131,7 @@ export const Dashboard = () => {
 
   useEffect(() => {
     fetchDashboardData();
+    fetchEnvironments();
   }, []);
 
   return (
@@ -114,7 +139,9 @@ export const Dashboard = () => {
       source={dashboardStore}
       renderLoader={() => <PageLoader />}
       renderData={(data) => {
-        const charts = Object.entries(data).map(([chartId, value]) => {
+        const currentChartsData = currentEnvironment.value ? data.byEnv[currentEnvironment.value] : data.general;
+
+        const charts = Object.entries(currentChartsData).map(([chartId, value]) => {
           const chartWidget = getChartWidgetByType(value, { t, empty });
           return (
             <GridItem key={chartId} className={styles["overview-grid-item"]}>

package/src/components/EnvironmentPicker/index.tsx

@@ -0,0 +1,51 @@
+import { DropdownButton, Menu, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { currentEnvironment, environmentsStore, setCurrentEnvironment } from "@/stores/env";
+import { useI18n } from "@/stores/locale";
+import * as styles from "./styles.scss";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+export const EnvironmentPicker = () => {
+  const { t } = useI18n("environments");
+  const environment = currentEnvironment.value;
+  const handleSelect = (selectedOption: string) => {
+    setCurrentEnvironment(selectedOption);
+  };
+
+  // TODO: use props instead
+  if (environmentsStore.value.data.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className={styles["environment-picker"]} data-testid={"environment-picker"}>
+      <SvgIcon id={allureIcons.environment} size={"s"} />
+      <Text className={styles["environment-picker-label"]} type={"ui"} size={"s"} bold>
+        {t("environment", { count: 1 })}:
+      </Text>
+      <Menu
+        size="s"
+        menuTrigger={({ isOpened, onClick }) => (
+          <DropdownButton
+            style="ghost"
+            size="s"
+            text={environment || t("all")}
+            isExpanded={isOpened}
+            data-testid={"environment-picker-button"}
+            onClick={onClick}
+          />
+        )}
+      >
+        <Menu.Section>
+          <Menu.ItemWithCheckmark onClick={() => handleSelect("")} isChecked={!environment}>
+            {t("all")}
+          </Menu.ItemWithCheckmark>
+          {environmentsStore.value.data.map((env) => (
+            <Menu.ItemWithCheckmark onClick={() => handleSelect(env)} key={env} isChecked={env === environment}>
+              {env}
+            </Menu.ItemWithCheckmark>
+          ))}
+        </Menu.Section>
+      </Menu>
+    </div>
+  );
+};

package/src/components/EnvironmentPicker/styles.scss

@@ -0,0 +1,9 @@
+.environment-picker {
+  display: flex;
+  align-items: center;
+  gap: 0 4px;
+}
+
+.environment-picker-label {
+  text-transform: capitalize;
+}

package/src/components/Header/index.tsx

@@ -3,6 +3,7 @@ import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { currentLocale, setLocale } from "@/stores/locale";
 import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+import { EnvironmentPicker } from "../EnvironmentPicker";
 import * as styles from "./styles.scss";
 
 interface HeaderProps {
@@ -13,6 +14,7 @@ export const Header = ({ className }: HeaderProps) => {
   return (
     <div className={clsx(styles.above, className)}>
       <div className={styles.right}>
+        <EnvironmentPicker />
         <LanguagePicker locale={currentLocale.value} setLocale={setLocale} />
         <ThemeButton theme={themeStore.value} toggleTheme={toggleTheme} getTheme={getTheme} />
       </div>

package/src/locales/az.json

@@ -17,6 +17,11 @@
     "minor": "Kiçik",
     "trivial": "Əhəmiyyətsiz"
   },
+  "environments": {
+    "environment_one": "Mühit",
+    "environment_other": "Mühitlər",
+    "all": "Hamısı"
+  },
   "charts": {
     "trend": {
       "title": "Trend qrafiki: {{type}}",

package/src/locales/de.json

@@ -17,6 +17,11 @@
     "minor": "Geringfügig",
     "trivial": "Trivial"
   },
+  "environments": {
+    "environment_one": "Umgebung",
+    "environment_other": "Umgebungen",
+    "all": "Alle"
+  },
   "charts": {
     "trend": {
       "title": "Trenddiagramm: {{type}}",

package/src/locales/en.json

@@ -17,6 +17,11 @@
     "minor": "Minor",
     "trivial": "Trivial"
   },
+  "environments": {
+    "environment_one": "Environment",
+    "environment_other": "Environments",
+    "all": "All"
+  },
   "charts": {
     "trend": {
       "title": "Trend Chart: {{type}}",

package/src/locales/es.json

@@ -17,6 +17,11 @@
     "minor": "Menor",
     "trivial": "Trivial"
   },
+  "environments": {
+    "environment_one": "Entorno",
+    "environment_other": "Entornos",
+    "all": "Todo"
+  },
   "charts": {
     "trend": {
       "title": "Gráfico de tendencia: {{type}}",

package/src/locales/fr.json

@@ -17,6 +17,11 @@
     "minor": "Mineur",
     "trivial": "Trivial"
   },
+  "environments": {
+    "environment_one": "Environnement",
+    "environment_other": "Environnements",
+    "all": "Tous"
+  },
   "charts": {
     "trend": {
       "title": "Graphique de tendance: {{type}}",

package/src/locales/he.json

@@ -17,6 +17,11 @@
     "minor": "משני",
     "trivial": "שולי"
   },
+  "environments": {
+    "environment_one": "סביבה",
+    "environment_other": "סביבות",
+    "all": "הכל"
+  },
   "charts": {
     "trend": {
       "title": "תרשים מגמה: {{type}}",

package/src/locales/hy.json

@@ -17,6 +17,11 @@
     "minor": "Երկրորդական",
     "trivial": "Աննշան"
   },
+  "environments": {
+    "environment_one": "Համակարգչային միջավայր",
+    "environment_other": "Համակարգչային միջավայրներ",
+    "all": "Բոլոր համակարգչային միջավայրները"
+  },
   "charts": {
     "trend": {
       "title": "Միտումների գրաֆիկ: {{type}}",

package/src/locales/it.json

@@ -17,6 +17,11 @@
     "minor": "Minore",
     "trivial": "Banale"
   },
+  "environments": {
+    "environment_one": "Ambiente",
+    "environment_other": "Ambienti",
+    "all": "Tutti"
+  },
   "charts": {
     "trend": {
       "title": "Grafico di tendenza: {{type}}",

package/src/locales/ja.json

@@ -17,6 +17,11 @@
     "minor": "小規模",
     "trivial": "些細"
   },
+  "environments": {
+    "environment_one": "環境",
+    "environment_other": "環境",
+    "all": "すべて"
+  },
   "charts": {
     "trend": {
       "title": "トレンドチャート: {{type}}",

package/src/locales/ka.json

@@ -17,6 +17,11 @@
     "minor": "მცირე",
     "trivial": "უმნიშვნელო"
   },
+  "environments": {
+    "environment_one": "გარემობა",
+    "environment_other": "გარემობები",
+    "all": "ყველა"
+  },
   "charts": {
     "trend": {
       "title": "ტრენდის გრაფიკი: {{type}}",

package/src/locales/kr.json

@@ -17,6 +17,11 @@
     "minor": "경미",
     "trivial": "사소"
   },
+  "environments": {
+    "environment_one": "환경",
+    "environment_other": "환경",
+    "all": "모두"
+  },
   "charts": {
     "trend": {
       "title": "트렌드 차트: {{type}}",

package/src/locales/nl.json

@@ -17,6 +17,11 @@
     "minor": "Klein",
     "trivial": "Triviaal"
   },
+  "environments": {
+    "environment_one": "Omgeving",
+    "environment_other": "Omgevingen",
+    "all": "Alle"
+  },
   "charts": {
     "trend": {
       "title": "Trendgrafiek: {{type}}",

package/src/locales/pl.json

@@ -17,6 +17,11 @@
     "minor": "Pomniejszy",
     "trivial": "Trywialny"
   },
+  "environments": {
+    "environment_one": "Środowisko",
+    "environment_other": "Środowiska",
+    "all": "Wszystkie"
+  },
   "charts": {
     "trend": {
       "title": "Wykres trendu: {{type}}",

package/src/locales/pt.json

@@ -17,6 +17,11 @@
     "minor": "Menor",
     "trivial": "Trivial"
   },
+  "environments": {
+    "environment_one": "Ambiente",
+    "environment_other": "Ambientes",
+    "all": "Todos"
+  },
   "charts": {
     "trend": {
       "title": "Gráfico de tendência: {{type}}",

package/src/locales/ru.json

@@ -17,6 +17,11 @@
     "minor": "Невысокая",
     "trivial": "Минимальная"
   },
+  "environments": {
+    "environment_one": "Окружение",
+    "environment_other": "Окружения",
+    "all": "Все"
+  },
   "charts": {
     "trend": {
       "title": "График тренда: {{type}}",

package/src/locales/sv.json

@@ -17,6 +17,11 @@
     "minor": "Mindre",
     "trivial": "Trivial"
   },
+  "environments": {
+    "environment_one": "Miljö",
+    "environment_other": "Miljöer",
+    "all": "Alla"
+  },
   "charts": {
     "trend": {
       "title": "Trenddiagram: {{type}}",

package/src/locales/tr.json

@@ -17,6 +17,11 @@
     "minor": "Küçük",
     "trivial": "Önemsiz"
   },
+  "environments": {
+    "environment_one": "Ortam",
+    "environment_other": "Ortamlar",
+    "all": "Tümü"
+  },
   "charts": {
     "trend": {
       "title": "Trend Grafiği: {{type}}",

package/src/locales/zh.json

@@ -17,6 +17,11 @@
     "minor": "次要",
     "trivial": "轻微"
   },
+  "environments": {
+    "environment_one": "环境",
+    "environment_other": "环境",
+    "all": "所有"
+  },
   "charts": {
     "trend": {
       "title": "趋势图表: {{type}}",

package/src/stores/dashboard.ts

@@ -1,8 +1,13 @@
-import { type ChartsResponse, type UIChartsData, createCharts, fetchReportJsonData } from "@allurereport/web-commons";
+import {
+  type ChartsResponse,
+  type UIChartsDataWithEnvs,
+  createChartsWithEnvs,
+  fetchReportJsonData,
+} from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import type { StoreSignalState } from "@/stores/types";
 
-export const dashboardStore = signal<StoreSignalState<UIChartsData>>({
+export const dashboardStore = signal<StoreSignalState<UIChartsDataWithEnvs>>({
   loading: true,
   error: undefined,
   data: undefined,
@@ -19,7 +24,7 @@ export const fetchDashboardData = async () => {
     const res = await fetchReportJsonData<ChartsResponse>("widgets/charts.json", { bustCache: true });
 
     dashboardStore.value = {
-      data: createCharts(res),
+      data: createChartsWithEnvs(res),
       error: undefined,
       loading: false,
     };

package/src/stores/env.ts

@@ -0,0 +1,57 @@
+import { fetchReportJsonData } from "@allurereport/web-commons";
+import { effect, signal } from "@preact/signals";
+import type { StoreSignalState } from "@/stores/types";
+
+const loadFromLocalStorage = <T>(key: string, defaultValue?: T): T => {
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? (JSON.parse(stored) as T) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+};
+
+export const environmentsStore = signal<StoreSignalState<string[]>>({
+  loading: false,
+  error: undefined,
+  data: [],
+});
+export const collapsedEnvironments = signal<string[]>(loadFromLocalStorage<string[]>("collapsedEnvironments", []));
+
+export const currentEnvironment = signal<string>(loadFromLocalStorage<string>("currentEnvironment", ""));
+
+export const setCurrentEnvironment = (env: string) => {
+  currentEnvironment.value = env;
+};
+
+export const fetchEnvironments = async () => {
+  environmentsStore.value = {
+    ...environmentsStore.value,
+    loading: true,
+    error: undefined,
+  };
+
+  try {
+    const res = await fetchReportJsonData<string[]>("widgets/environments.json", { bustCache: true });
+
+    environmentsStore.value = {
+      data: res,
+      error: undefined,
+      loading: false,
+    };
+  } catch (e) {
+    environmentsStore.value = {
+      ...environmentsStore.value,
+      error: e.message,
+      loading: false,
+    };
+  }
+};
+
+effect(() => {
+  localStorage.setItem("currentEnvironment", JSON.stringify(currentEnvironment.value));
+});
+
+effect(() => {
+  localStorage.setItem("collapsedEnvironments", JSON.stringify([...collapsedEnvironments.value]));
+});

package/webpack.config.js

@@ -90,6 +90,11 @@ export default (env, argv) => {
         "react-dom": "@preact/compat",
       },
     },
+    externals: {
+      // Some packages use crypto from node:crypto, but webpack doesn't support it
+      // I think this does not end up in a bundle, so it is safe to do this
+      "node:crypto": "crypto",
+    },
   };
 
   if (SINGLE_FILE_MODE) {

package/dist/multi/29.app-b98a18c7d6561114f354.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_allurereport_web_dashboard=self.webpackChunk_allurereport_web_dashboard||[]).push([[29],{29:function(e){e.exports=JSON.parse('{"statuses":{"passed":"Zaliczone","failed":"Niezaliczone","broken":"Uszkodzone","skipped":"Pominięte","unknown":"Nieznane","total":"Razem"},"empty":{"no-results":"Brak wyników"},"severity":{"blocker":"Blokujący","critical":"Krytyczny","normal":"Normalny","minor":"Pomniejszy","trivial":"Trywialny"},"charts":{"trend":{"title":"Wykres trendu: {{type}}","type":{"status":"Status","severity":"Ważność"}},"pie":{"title":"Wskaźnik powodzenia testów"}}}')}}]);

package/dist/multi/672.app-b98a18c7d6561114f354.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_allurereport_web_dashboard=self.webpackChunk_allurereport_web_dashboard||[]).push([[672],{672:function(t){t.exports=JSON.parse('{"statuses":{"passed":"Superato","failed":"Fallito","broken":"Rotto","skipped":"Saltato","unknown":"Sconosciuto","total":"Totale"},"empty":{"no-results":"Nessun risultato"},"severity":{"blocker":"Bloccante","critical":"Critico","normal":"Normale","minor":"Minore","trivial":"Banale"},"charts":{"trend":{"title":"Grafico di tendenza: {{type}}","type":{"status":"Stato","severity":"Gravità"}},"pie":{"title":"Tasso di successo dei test"}}}')}}]);