@allurereport/web-awesome 3.0.0-beta.12 → 3.0.0-beta.14

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-83b0c4fc.js"
+  "main.js": "app-3a6e31c7.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.14",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,9 +31,9 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.12",
-    "@allurereport/web-commons": "3.0.0-beta.12",
-    "@allurereport/web-components": "3.0.0-beta.12",
+    "@allurereport/core-api": "3.0.0-beta.14",
+    "@allurereport/web-commons": "3.0.0-beta.14",
+    "@allurereport/web-components": "3.0.0-beta.14",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

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

@@ -4,7 +4,8 @@
   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,8 @@
   justify-content: space-between;
   align-items: center;
   gap: 12px;
+  padding: 0 24px;
+  padding-top: 8px;
 }
 
 .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/Filters.tsx

@@ -24,14 +24,14 @@ export const Filters = () => {
         </div>
       )}
     >
-      <Menu.Section>
+      <Menu.Section data-testid="filters-menu">
         <Menu.Item
           closeMenuOnClick={false}
           ariaLabel={t("enable-filter", { filter: t("flaky") })}
           onClick={() => {
             setTreeFilter("flaky", !flaky);
           }}
-          leadingIcon={allureIcons.lineGeneralZap}
+          leadingIcon={allureIcons.lineIconBomb2}
           rightSlot={
             <div className={styles.filterToggle}>
               <Toggle

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/ReportMetadata/MetadataWithIcon.tsx

@@ -4,7 +4,7 @@ import type { MetadataProps } from "@/components/ReportMetadata/MetadataItem";
 import * as styles from "./styles.scss";
 
 const icons: Record<string, string> = {
-  flaky: allureIcons.lineGeneralZap,
+  flaky: allureIcons.lineIconBomb2,
   retries: allureIcons.lineArrowsRefreshCcw1,
   new: allureIcons.lineAlertsNotificationBox,
 };

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";
@@ -19,7 +18,7 @@ export const TrEnvironmentItem: FunctionalComponent<{
   const { status, error, stop, duration, id } = testResult;
   const [isOpened, setIsOpen] = useState(false);
   const hasEmptyError = !error || !Object.keys(error).length;
-  const convertedStop = timestampToDate(stop);
+  const convertedStop = stop ? timestampToDate(stop) : "";
   const formattedDuration = formatDuration(duration as number);
   const { t } = useI18n("controls");
   const navigateUrl = id;
@@ -36,6 +35,7 @@ export const TrEnvironmentItem: FunctionalComponent<{
           className={cx(styles["test-result-environment-item-wrap"], {
             [styles.current]: current,
           })}
+          role={current ? undefined : "button"}
           onClick={(e) => {
             if (current) {
               return;

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

@@ -1,4 +1,4 @@
-import type { TestEnvGroup } from "@allurereport/core-api";
+import { type TestEnvGroup, getRealEnvsCount } from "@allurereport/core-api";
 import { Loadable } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
@@ -39,7 +39,7 @@ export const TrEnvironmentsView: FunctionalComponent<{
       <Loadable<Record<string, TestEnvGroup>, TestEnvGroup | undefined>
         source={testEnvGroupsStore}
         renderData={(group) => {
-          if (!group) {
+          if (!getRealEnvsCount(group)) {
             return <div className={styles["test-result-empty"]}>{t("no-environments-results")}</div>;
           }
 

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";