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

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-607f21f7.js"
+  "main.js": "app-f5ecfcd9.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.15",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,9 +31,9 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.13",
-    "@allurereport/web-commons": "3.0.0-beta.13",
-    "@allurereport/web-components": "3.0.0-beta.13",
+    "@allurereport/core-api": "3.0.0-beta.15",
+    "@allurereport/web-commons": "3.0.0-beta.15",
+    "@allurereport/web-components": "3.0.0-beta.15",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -96,6 +96,7 @@
     "split.js": "^1.6.5",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
+    "terser-webpack-plugin": "^5.3.14",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.6.0",
     "vitest": "^2.1.8",

package/src/components/BaseLayout/index.tsx

@@ -1,5 +1,4 @@
 import { Loadable, PageLoader } from "@allurereport/web-components";
-import { Footer } from "@/components/Footer";
 import MainReport from "@/components/MainReport";
 import TestResult from "@/components/TestResult";
 import { route } from "@/stores/router";
@@ -12,7 +11,7 @@ export type BaseLayoutProps = {
 };
 
 export const BaseLayout = () => {
-  const { id: testResultId } = route.value;
+  const testResultId = route.value.params?.testResultId ?? null;
 
   const content = testResultId ? (
     <Loadable
@@ -23,7 +22,6 @@ export const BaseLayout = () => {
         <>
           <div className={styles.wrapper} key={testResult?.id}>
             <TestResult testResult={testResult} />
-            <Footer />
           </div>
         </>
       )}
@@ -31,7 +29,6 @@ export const BaseLayout = () => {
   ) : (
     <div className={styles.wrapper}>
       <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
-      <Footer />
     </div>
   );
 

package/src/components/BaseLayout/styles.scss

@@ -1,10 +1,11 @@
 .layout {
   margin: auto;
-  padding: 12px 32px;
+  padding: 0 32px;
   background: var(--bg-base-secondary);
   color: var(--on-text-primary);
   font-size: 14px;
-  min-height: 100vh;
+  height: 100%;
+  overflow: auto;
 }
 
 .wrapper {
@@ -51,7 +52,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px;
+  padding: 8px 24px;
+  width: 100%;
 }
 
 .test-result-errors {

package/src/components/Charts/index.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { capitalize } from "@allurereport/web-commons";
+import {
+  Grid,
+  GridItem,
+  Loadable,
+  PageLoader,
+  SuccessRatePieChart,
+  TrendChartWidget,
+  Widget,
+} from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { chartsStore, fetchChartsData } from "@/stores/chart";
+import { useI18n } from "@/stores/locale";
+import type { ChartData } from "@/utils/charts";
+import { ChartType } from "@/utils/charts";
+import * as styles from "./styles.scss";
+
+const getChartWidgetByType = (
+  chartData: ChartData,
+  { t, empty }: Record<string, (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) });
+      const translations = empty("no-results");
+
+      return (
+        <TrendChartWidget
+          title={title}
+          items={chartData.items}
+          slices={chartData.slices}
+          min={chartData.min}
+          max={chartData.max}
+          translations={{ "no-results": translations }}
+        />
+      );
+    }
+    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 Charts = () => {
+  const { t } = useI18n("charts");
+  const { t: empty } = useI18n("empty");
+
+  useEffect(() => {
+    fetchChartsData();
+  }, []);
+
+  return (
+    <Loadable
+      source={chartsStore}
+      renderLoader={() => <PageLoader />}
+      renderData={(data) => {
+        const charts = Object.entries(data).map(([chartId, value]) => {
+          const chartWidget = getChartWidgetByType(value, { t, empty });
+
+          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/Charts/styles.scss

@@ -0,0 +1,29 @@
+.overview {
+  padding: 0 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/index.tsx

@@ -1,11 +1,15 @@
+import type { ClassValue } from "clsx";
 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 = () => {
+interface FooterProps {
+  className?: ClassValue;
+}
+export const Footer = ({ className }: FooterProps) => {
   return (
-    <div className={clsx(styles.below)}>
+    <div className={clsx(styles.below, className)}>
       <FooterLogo />
       <FooterVersion />
     </div>

package/src/components/Header/index.tsx

@@ -1,8 +1,10 @@
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { HeaderControls } from "@/components/HeaderControls";
+import { SectionPicker } from "@/components/SectionPicker";
 import { TrBreadcrumbs } from "@/components/TestResult/TrHeader/TrBreadcrumbs";
 import { route } from "@/stores/router";
+import { availableSections } from "@/stores/sections";
 import { testResultStore } from "@/stores/testResults";
 import * as styles from "./styles.scss";
 
@@ -11,11 +13,12 @@ interface HeaderProps {
 }
 
 export const Header = ({ className }: HeaderProps) => {
-  const { id } = route.value;
+  const testResultId = route.value.params?.testResultId ?? null;
 
   return (
     <div className={clsx(styles.above, className)}>
-      {id && <TrBreadcrumbs testResult={testResultStore.value?.data?.[id]} />}
+      {Boolean(availableSections.value?.length) && <SectionPicker />}
+      {testResultId && <TrBreadcrumbs testResult={testResultStore.value?.data?.[testResultId]} />}
       <HeaderControls className={styles.right} />
     </div>
   );

package/src/components/Header/styles.scss

@@ -5,6 +5,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 12px;
+  padding: 8px 24px 12px;
 }
 
 .logoWrapper {

package/src/components/MainReport/index.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import { Header } from "@/components/Header";
 import { ReportBody } from "@/components/ReportBody";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
@@ -9,7 +8,6 @@ import * as styles from "./styles.scss";
 const MainReport = () => {
   return (
     <>
-      {!isSplitMode.value && <Header />}
       <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
         <ReportHeader />
         <ReportMetadata />

package/src/components/MetadataButton/index.tsx

@@ -1,7 +1,6 @@
-import { Counter, Text } from "@allurereport/web-components";
+import { ArrowButton, Counter, Text } from "@allurereport/web-components";
 import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
-import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
 interface MetadataButtonProps {
@@ -34,6 +33,7 @@ export const MetadataButton: FunctionalComponent<MetadataButtonProps> = ({
         iconSize={"s"}
         buttonSize={"s"}
         className={styles["report-metadata-header-arrow"]}
+        tag={"div"}
       />
     </button>
   );

package/src/components/Report/index.tsx

@@ -0,0 +1,7 @@
+import { BaseLayout } from "@/components/BaseLayout";
+import { SplitLayout } from "@/components/SplitLayout";
+import { isSplitMode } from "@/stores/layout";
+
+export const Report = () => {
+  return isSplitMode.value ? <SplitLayout /> : <BaseLayout />;
+};

package/src/components/ReportBody/index.tsx

@@ -1,10 +1,11 @@
 import { statusesList } from "@allurereport/core-api";
 import { Counter, Loadable } from "@allurereport/web-components";
-import { reportStatsStore } from "@/stores";
+import { reportStatsStore, statsByEnvStore } from "@/stores";
+import { currentEnvironment } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
-import { treeFiltersStore } from "@/stores/tree";
+import { setTreeStatus, treeFiltersStore } from "@/stores/tree";
 import { capitalize } from "@/utils/capitalize";
-import { Tab, Tabs, TabsList } from "../Tabs";
+import { Tab, Tabs, TabsList, useTabsContext } from "../Tabs";
 import { TreeList } from "../Tree";
 import { HeaderActions } from "./HeaderActions";
 import { SortBy } from "./SortBy";
@@ -15,6 +16,7 @@ const ALL_TAB = "total";
 
 const Header = () => {
   const { t } = useI18n("statuses");
+  const { currentTab, setCurrentTab } = useTabsContext();
 
   return (
     <header className={styles.header}>
@@ -22,21 +24,30 @@ const Header = () => {
       <div className={styles.headerRow}>
         <TabsList>
           <Loadable
-            source={reportStatsStore}
+            source={statsByEnvStore}
             renderData={(stats) => {
-              const allStatuses = statusesList
-                .map((status) => ({ status, value: stats[status] }))
-                .filter(({ value }) => value)
-                .map(({ status, value }) => (
-                  <Tab data-testid={`tab-${status}`} key={status} id={status}>
-                    {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
-                  </Tab>
-                ));
+              const currentEnv = stats[currentEnvironment.value] || reportStatsStore.value.data;
+              const statList = statusesList
+                .map((status) => {
+                  return { status, value: currentEnv[status] };
+                })
+                .filter(({ value }) => value);
+              const isStatListHaveCurrentTab = statList.filter(({ status }) => status === currentTab);
+              if (!isStatListHaveCurrentTab.length && currentTab !== "total") {
+                setCurrentTab("total");
+                setTreeStatus("total");
+              }
+
+              const allStatuses = statList.map(({ status, value }) => (
+                <Tab data-testid={`tab-${status}`} key={status} id={status}>
+                  {capitalize(t(status) ?? status)} <Counter count={value} size="s" status={status} />
+                </Tab>
+              ));
 
               return (
                 <>
                   <Tab data-testid="tab-all" id={ALL_TAB}>
-                    {capitalize(t("total"))} <Counter count={stats?.total ?? 0} size="s" />
+                    {capitalize(t("total"))} <Counter count={currentEnv?.total ?? 0} size="s" />
                   </Tab>
                   {allStatuses}
                 </>

package/src/components/ReportBody/styles.scss

@@ -23,6 +23,7 @@
 
 .body {
   padding: 16px 24px;
+  min-height: 320px;
 }
 
 .headerActions {

package/src/components/ReportHeader/index.tsx

@@ -12,6 +12,9 @@ export const ReportHeader = () => {
     month: "long",
     day: "numeric",
     year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
   });
 
   return (

package/src/components/SectionPicker/index.tsx

@@ -0,0 +1,54 @@
+import { DropdownButton, Menu, SvgIcon, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import { availableSections, currentSection, setSection } from "@/stores/sections";
+import * as styles from "./styles.scss";
+
+export type SectionItem = {
+  name: string;
+  logo: string;
+};
+
+const defaultSection: SectionItem = { name: "report", logo: allureIcons.reportLogo };
+
+const sectionMap: Record<string, SectionItem> = {
+  default: defaultSection,
+  charts: { name: "charts", logo: allureIcons.lineChartsBarChartSquare },
+};
+
+export const SectionPicker = () => {
+  const selectedSection = sectionMap[currentSection.value] || defaultSection;
+  const { t } = useI18n("sections");
+
+  return (
+    <Menu
+      size="m"
+      placement={"bottom-start"}
+      menuTrigger={({ isOpened, onClick }) => (
+        <DropdownButton
+          style="ghost"
+          size="m"
+          text={t(selectedSection.name)}
+          icon={selectedSection.logo}
+          isExpanded={isOpened}
+          onClick={onClick}
+          iconSize={"xs"}
+        />
+      )}
+    >
+      <Menu.Section>
+        {["default", ...availableSections.value].map((value) => (
+          <Menu.ItemWithCheckmark
+            onClick={() => setSection(value)}
+            key={value}
+            isChecked={currentSection.value === value}
+          >
+            <div className={styles["menu-item"]}>
+              <SvgIcon id={sectionMap[value]?.logo} size={"s"} />
+              {t(sectionMap[value]?.name) || value}
+            </div>
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};

package/src/components/SectionPicker/styles.scss

@@ -0,0 +1,5 @@
+.menu-item {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}

package/src/components/SectionSwitcher/index.tsx

@@ -0,0 +1,14 @@
+import type { VNode } from "preact";
+import { Charts } from "@/components/Charts";
+import { Report } from "@/components/Report";
+import { currentSection } from "@/stores/sections";
+import * as styles from "./styles.scss";
+
+export const SectionSwitcher = () => {
+  const sectionMap: Record<string, VNode> = {
+    report: <Report />,
+    charts: <Charts />,
+  };
+
+  return <div className={styles.layout}>{sectionMap[currentSection.value] || sectionMap.report}</div>;
+};

package/src/components/SectionSwitcher/styles.scss

@@ -0,0 +1,4 @@
+.layout {
+  flex: 1 1 auto;
+  overflow: hidden;
+}

package/src/components/SideBySide/styles.scss

@@ -56,7 +56,7 @@
 
 .gutter {
   background: var(--bg-base-secondary) no-repeat 50%;
-  min-height: 100vh;
+  height: 100%;
 }
 
 .gutter:hover {

package/src/components/SplitLayout/index.tsx

@@ -31,7 +31,7 @@ const Loader = () => {
 };
 
 export const SplitLayout = () => {
-  const { id: testResultId } = route.value;
+  const testResultId = route.value.params?.testResultId ?? null;
   const [cachedMain, setCachedMain] = useState<JSX.Element | null>(null);
 
   const { t } = useI18n("controls");
@@ -69,9 +69,7 @@ export const SplitLayout = () => {
 
   return (
     <div className={styles["side-by-side"]} data-testId={"split-layout"}>
-      <Header className={styles.header} />
       <SideBySide left={cachedMain} right={<TrView />} />
-      <Footer />
     </div>
   );
 };

package/src/components/SplitLayout/styles.scss

@@ -4,7 +4,6 @@
   background: var(--bg-base-secondary);
   color: var(--on-text-primary);
   font-size: 14px;
-  min-height: 100vh;
 }
 
 .wrapper {
@@ -22,7 +21,6 @@
   width: 100%;
   overflow: hidden;
   overflow-y: scroll;
-  height: calc(100vh - var(--footer-header-sizes));
   position: relative;
 }
 
@@ -69,8 +67,8 @@
 .side-by-side {
   display: flex;
   flex-direction: column;
-  height: 100vh;
   justify-content: space-between;
+  height: 100%;
 }
 
 .empty {

package/src/components/TestResult/TrDropdown/index.tsx

@@ -1,8 +1,7 @@
-import { Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { ArrowButton, Counter, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import type { ClassValue } from "clsx";
 import clsx from "clsx";
 import { type FunctionalComponent } from "preact";
-import { ArrowButton } from "@/components/ArrowButton";
 import * as styles from "./styles.scss";
 
 export const TrDropdown: FunctionalComponent<{

package/src/components/TestResult/TrEnvironmentItem/index.tsx

@@ -1,9 +1,8 @@
 import { formatDuration } from "@allurereport/core-api";
-import { IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import cx from "clsx";
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { ArrowButton } from "@/components/ArrowButton";
 import { TrError } from "@/components/TestResult/TrError";
 import { useI18n } from "@/stores";
 import { navigateTo, openInNewTab } from "@/stores/router";

package/src/components/TestResult/TrHistory/TrHistoryItem.tsx

@@ -1,8 +1,7 @@
 import { type HistoryTestResult, formatDuration } from "@allurereport/core-api";
-import { IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import { ArrowButton, IconButton, Text, TooltipWrapper, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
-import { ArrowButton } from "@/components/ArrowButton";
 import { TrError } from "@/components/TestResult/TrError";
 import * as styles from "@/components/TestResult/TrHistory/styles.scss";
 import { useI18n } from "@/stores";

package/src/components/TestResult/TrPwTraces/PwTraceButton.tsx

@@ -5,7 +5,6 @@ import { IconButton, TooltipWrapper, allureIcons } from "@allurereport/web-compo
 import { PwTrace } from "@/components/TestResult/TrPwTraces/PwTrace";
 import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
-import * as styles from "./styles.scss";
 
 export const fetchFromUrl = async ({ id, ext, contentType }: Attachments) => {
   const fileName = `${id || "-"}${ext || ""}`;

package/src/components/TestResult/TrRetriesView/TrRetriesItem.tsx

@@ -1,9 +1,8 @@
 import { formatDuration } from "@allurereport/core-api";
-import { IconButton, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import { ArrowButton, IconButton, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
-import { ArrowButton } from "@/components/ArrowButton";
 import { TrError } from "@/components/TestResult/TrError";
 import * as styles from "@/components/TestResult/TrRetriesView/styles.scss";
 import { navigateTo } from "@/stores/router";
@@ -21,7 +20,9 @@ export const TrRetriesItem: FunctionalComponent<{
   return (
     <div>
       <div className={styles["test-result-retries-item-header"]} onClick={() => setIsOpen(!isOpened)}>
-        {Boolean(error) && <ArrowButton isOpened={isOpened} icon={allureIcons.lineArrowsChevronDown} />}
+        {Boolean(error.trace || error.message) && (
+          <ArrowButton isOpened={isOpened} icon={allureIcons.lineArrowsChevronDown} />
+        )}
         <div className={styles["test-result-retries-item-wrap"]}>
           <TreeItemIcon status={status} className={styles["test-result-retries-item-status"]} />
           <Text className={styles["test-result-retries-item-text"]}>{convertedStop}</Text>
@@ -41,7 +42,7 @@ export const TrRetriesItem: FunctionalComponent<{
           </div>
         </div>
       </div>
-      {isOpened && error && (
+      {isOpened && (error.message || error.trace) && (
         <div className={styles["test-result-retries-item-content"]}>
           <TrError {...error} status={status} />
         </div>