FI-1635 feat: add API statistics to HTML report

Author: uid11

src/types/report.ts

@@ -116,6 +116,7 @@ export type Retry = Readonly<{
  */
 export type RetryButtonProps = Readonly<{
   disabled: boolean;
+  name: string;
   retry: number;
   selected: boolean;
 }>;

src/utils/report/render/renderMetadata.ts

@@ -0,0 +1,17 @@
+import {createSafeHtmlWithoutSanitize} from '../client';
+
+import type {SafeHtml} from '../../../types/internal';
+
+type Props = Readonly<{retryIndex: number}>;
+
+/**
+ * Renders metadata of whole `e2ed` run.
+ * @internal
+ */
+export const renderMetadata = ({retryIndex}: Props): SafeHtml => createSafeHtmlWithoutSanitize`
+<article class="retry" id="retry${retryIndex}" hidden>
+  <h3 class="__title">Metadata</h3>
+  <button aria-selected="false" class="test-button" role="tab">Pages statistics</button>
+  <button aria-selected="false" class="test-button" role="tab">Requests statistics</button>
+  <button aria-selected="false" class="test-button" role="tab">Resources statistics</button>
+</article>`;

src/utils/report/render/renderRetries.ts

@@ -1,5 +1,6 @@
 import {createSafeHtmlWithoutSanitize} from '../client';
 
+import {renderMetadata} from './renderMetadata';
 import {renderRetry} from './renderRetry';
 
 import type {RetryProps, SafeHtml} from '../../../types/internal';
@@ -13,5 +14,7 @@ type Props = Readonly<{retries: readonly RetryProps[]}>;
 export const renderRetries = ({retries}: Props): SafeHtml => {
   const retriesHtml = retries.map((retry) => renderRetry({retry}));
 
+  retriesHtml.push(renderMetadata({retryIndex: retries.length + 1}));
+
   return createSafeHtmlWithoutSanitize`${retriesHtml.join('')}`;
 };

src/utils/report/render/renderRetriesButtons.ts

@@ -16,11 +16,13 @@ export const renderRetriesButtons = ({retries}: Props): SafeHtml => {
   const maxRetry = Math.max(...retryNumbers);
   const buttons: SafeHtml[] = [];
 
-  for (let index = 1; index <= maxRetry; index += 1) {
+  for (let index = 1; index <= maxRetry + 1; index += 1) {
     const isRetry = retryNumbers.includes(index);
+    const isMeta = index === maxRetry + 1;
 
     buttons[index] = renderRetryButton({
-      disabled: !isRetry,
+      disabled: isMeta ? false : !isRetry,
+      name: isMeta ? 'Meta' : `Retry ${index}`,
       retry: index,
       selected: index === maxRetry,
     });

src/utils/report/render/renderRetryButton.ts

@@ -5,12 +5,14 @@ import {locator} from './locator';
 import type {RetryButtonProps, SafeHtml} from '../../../types/internal';
 
 type Props = RetryButtonProps;
+
 /**
  * Renders tag `<button>` with single retry button.
  * @internal
  */
 export const renderRetryButton = ({
   disabled,
+  name,
   retry,
   selected,
 }: Props): SafeHtml => sanitizeHtml`<button
@@ -20,4 +22,4 @@ class="nav-tabs__button"
 id="retry${retry}-nav"
 role="tab"
 ${locator('RetryButton', {disabled, retry, selected})}
-${disabled ? 'disabled' : ''}>Retry ${retry}</button>`;
+${disabled ? 'disabled' : ''}>${name}</button>`;