Feat: use new tree listing (#1709)

* feat: use new treeListing

- Replaces old treeListing page with new endpoint and status format
- Reorganizes the routes and component files
- Refactors some component parts in order to be reused between treeListings

* feat: add treeListing banner

Used as a link between the newer and older versions of the treeListing, should be removed after the new tree listing is stable

* feat: add treeListing feature flag

Adds a feature flag to select the version of the main treeListing page

Closes #1559

* fix: show origins in any listing route

Author: MarceloRobert

dashboard/.env.example

@@ -1,5 +1,9 @@
 # Use port 8000 to go directly to the backend/gunicorn.
 # Use port 80 to go through Nginx (proxy service on Docker)
 VITE_API_BASE_URL=http://localhost:8000
+
+# Feature Flags
 VITE_FEATURE_FLAG_SHOW_DEV=false
+VITE_FEATURE_FLAG_TREE_LISTING_VERSION=v1
+
 PLAYWRIGHT_TEST_BASE_URL=https://staging.dashboard.kernelci.org:9000

dashboard/README.md

@@ -70,5 +70,8 @@ Also, we are using file based routing in the tanstack router, only files that st
 # Feature Flags
 
 They are used when we want to hide a feature for some users, without having to do branch manipulation.
-Right now the only feature flag is for Dev only and it is controlled by the env
-`FEATURE_FLAG_SHOW_DEV=false` it is a boolean.
+
+Available feature flags:
+
+- `VITE_FEATURE_FLAG_SHOW_DEV` - Controls visibility of dev-only features (boolean, default: `false`)
+- `VITE_FEATURE_FLAG_TREE_LISTING_VERSION` - Controls which tree listing version to display. Set to `"v1"` for the old version or `"v2"` for the new version (string, default: `"v1"`)

dashboard/src/api/tree.ts

@@ -7,9 +7,12 @@ import type {
   Tree,
   TreeFastPathResponse,
   TreeLatestResponse,
+  TreeV2,
 } from '@/types/tree/Tree';
 import { DEFAULT_ORIGIN } from '@/types/general';
 
+import type { TreeListingRoutesMap } from '@/utils/constants/treeListing';
+
 import { RequestData } from './commonRequest';
 
 const fetchTreeCheckoutData = async (
@@ -29,11 +32,12 @@ const fetchTreeCheckoutData = async (
 
 export const useTreeTable = ({
   enabled,
+  searchFrom,
 }: {
   enabled: boolean;
+  searchFrom: TreeListingRoutesMap['v1']['search'];
 }): UseQueryResult<Tree[]> => {
-  const { origin, intervalInDays } = useSearch({ from: '/_main/tree' });
-
+  const { origin, intervalInDays } = useSearch({ from: searchFrom });
   const queryKey = ['treeTable', origin, intervalInDays];
 
   return useQuery({
@@ -46,7 +50,7 @@ export const useTreeTable = ({
 
 const fetchTreeFastCheckoutData = async (
   origin: string,
-  intervalInDays?: number,
+  intervalInDays: number,
 ): Promise<TreeFastPathResponse> => {
   const params = {
     origin: origin,
@@ -59,8 +63,12 @@ const fetchTreeFastCheckoutData = async (
   return data;
 };
 
-export const useTreeTableFast = (): UseQueryResult<TreeFastPathResponse> => {
-  const { origin, intervalInDays } = useSearch({ from: '/_main/tree' });
+export const useTreeTableFast = ({
+  searchFrom,
+}: {
+  searchFrom: TreeListingRoutesMap['v1']['search'];
+}): UseQueryResult<TreeFastPathResponse> => {
+  const { origin, intervalInDays } = useSearch({ from: searchFrom });
 
   const queryKey = ['treeTableFast', origin, intervalInDays];
 
@@ -100,3 +108,33 @@ export const useTreeLatest = (
     refetchOnWindowFocus: false,
   });
 };
+
+const fetchTreeListingV2 = async (
+  origin: string,
+  intervalInDays: number,
+): Promise<TreeV2[]> => {
+  const params = {
+    origin: origin,
+    interval_in_days: intervalInDays,
+  };
+
+  const data = await RequestData.get<TreeV2[]>('/api/tree-v2/', {
+    params,
+  });
+  return data;
+};
+
+export const useTreeListingV2 = ({
+  searchFrom,
+}: {
+  searchFrom: TreeListingRoutesMap['v2']['search'];
+}): UseQueryResult<TreeV2[]> => {
+  const { origin, intervalInDays } = useSearch({ from: searchFrom });
+  const queryKey = ['treeTableV2', origin, intervalInDays];
+
+  return useQuery({
+    queryKey,
+    queryFn: () => fetchTreeListingV2(origin, intervalInDays),
+    refetchOnWindowFocus: false,
+  });
+};

dashboard/src/components/Banner/BaseBanner.tsx

@@ -0,0 +1,33 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import type { JSX } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const bannerVariants = cva('rounded-md p-3 text-sm', {
+  variants: {
+    variant: {
+      default:
+        'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+      green:
+        'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export const BaseBanner = ({
+  children,
+  variant,
+  className,
+}: {
+  children: JSX.Element;
+  variant?: VariantProps<typeof bannerVariants>['variant'];
+  className?: string;
+}): JSX.Element => {
+  return (
+    <div className={cn(bannerVariants({ variant }), className)}>{children}</div>
+  );
+};

dashboard/src/components/Banner/PageBanner.tsx

@@ -0,0 +1,86 @@
+import type { LinkProps } from '@tanstack/react-router';
+import { Link } from '@tanstack/react-router';
+import type { JSX } from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { BaseBanner } from '@/components/Banner/BaseBanner';
+
+const GITHUB_ISSUES_URL = 'https://github.com/kernelci/dashboard/issues';
+
+interface IPageBanner {
+  pageNameId: MessageDescriptor['id'];
+  pageRoute: LinkProps['to'];
+}
+
+/**
+ * This is the banner that goes in the older page
+ */
+export const OldPageBanner = ({
+  pageNameId,
+  pageRoute: newerPageRoute,
+}: IPageBanner): JSX.Element => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <BaseBanner>
+      <FormattedMessage
+        id="messages.olderPageVersion"
+        values={{
+          page: formatMessage({ id: pageNameId }),
+          gitHubLink: (
+            <a
+              href={GITHUB_ISSUES_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+            >
+              {formatMessage({ id: 'global.gitHubIssue' })}
+            </a>
+          ),
+          newPageLink: (
+            <Link to={newerPageRoute} className="underline">
+              {formatMessage({ id: 'global.here' })}
+            </Link>
+          ),
+        }}
+      />
+    </BaseBanner>
+  );
+};
+
+/**
+ * This is the banner that goes in the newer page
+ */
+export const NewPageBanner = ({
+  pageNameId,
+  pageRoute: olderPageRoute,
+}: IPageBanner): JSX.Element => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <BaseBanner variant="green">
+      <FormattedMessage
+        id="messages.newerPageVersion"
+        values={{
+          page: formatMessage({ id: pageNameId }),
+          gitHubLink: (
+            <a
+              href={GITHUB_ISSUES_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+            >
+              {formatMessage({ id: 'global.gitHubIssue' })}
+            </a>
+          ),
+          oldVersionLink: (
+            <Link to={olderPageRoute} className="underline">
+              {formatMessage({ id: 'global.here' })}
+            </Link>
+          ),
+        }}
+      />
+    </BaseBanner>
+  );
+};

dashboard/src/components/OpenGraphTags/ListingOGTags.tsx

@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react';
 
 import { useIntl } from 'react-intl';
 
-import type { PossibleMonitorPath } from '@/types/general';
+import type { ListingPaths } from '@/types/general';
 import type { MessagesKey } from '@/locales/messages';
 
 import { OpenGraphTags } from './OpenGraphTags';
@@ -12,7 +12,7 @@ const ListingOGTags = ({
   monitor,
   search,
 }: {
-  monitor: PossibleMonitorPath;
+  monitor: ListingPaths;
   search: string;
 }): JSX.Element => {
   const { formatMessage } = useIntl();
@@ -30,9 +30,6 @@ const ListingOGTags = ({
       case '/issues':
         descriptionId = 'issueListing.description';
         break;
-      case '/hardware-new':
-        descriptionId = 'hardwareListing.description';
-        break;
     }
     return (
       formatMessage({ id: descriptionId }) +
@@ -50,8 +47,6 @@ const ListingOGTags = ({
         return formatMessage({ id: 'hardwareListing.title' });
       case '/issues':
         return formatMessage({ id: 'issueListing.title' });
-      case '/hardware-new':
-        return formatMessage({ id: 'hardwareListing.title' });
     }
   }, [formatMessage, monitor]);
 

dashboard/src/components/Status/Status.tsx

@@ -6,6 +6,8 @@ import ColoredCircle from '@/components/ColoredCircle/ColoredCircle';
 import type { GroupedStatus } from '@/utils/status';
 import { groupStatus } from '@/utils/status';
 
+// TODO: replace the preCalculatedGroupedStatus with a type-safe approach,
+// currently everything is optional
 interface ITestStatus {
   pass?: number;
   error?: number;
@@ -64,40 +66,30 @@ export const GroupedTestStatus = ({
   );
 };
 
-interface ITestStatusWithLink extends ITestStatus {
+interface IStatusLinkProps {
   passLinkProps?: LinkProps;
   failLinkProps?: LinkProps;
   inconclusiveLinkProps?: LinkProps;
 }
 
-export const GroupedTestStatusWithLink = ({
-  pass,
-  error,
-  miss,
-  fail,
-  done,
-  skip,
-  nullStatus,
-  hideInconclusive = false,
+interface IBaseGroupedStatusWithLink extends IStatusLinkProps {
+  groupedStatus: GroupedStatus;
+  hideInconclusive?: boolean;
+}
+
+export const BaseGroupedStatusWithLink = ({
+  groupedStatus,
   passLinkProps,
   failLinkProps,
   inconclusiveLinkProps,
-}: ITestStatusWithLink): JSX.Element => {
-  const { successCount, inconclusiveCount, failedCount } = groupStatus({
-    doneCount: done,
-    errorCount: error,
-    failCount: fail,
-    missCount: miss,
-    passCount: pass,
-    skipCount: skip,
-    nullCount: nullStatus,
-  });
+  hideInconclusive = false,
+}: IBaseGroupedStatusWithLink): JSX.Element => {
   return (
     <div className="flex flex-row gap-1">
       {
         <Link {...passLinkProps}>
           <ColoredCircle
-            quantity={successCount ?? 0}
+            quantity={groupedStatus.successCount}
             tooltipText="global.success"
             backgroundClassName="bg-light-green"
           />
@@ -106,7 +98,7 @@ export const GroupedTestStatusWithLink = ({
       {
         <Link {...failLinkProps}>
           <ColoredCircle
-            quantity={failedCount}
+            quantity={groupedStatus.failedCount}
             tooltipText="global.failed"
             backgroundClassName="bg-light-red"
           />
@@ -115,7 +107,7 @@ export const GroupedTestStatusWithLink = ({
       {!hideInconclusive && (
         <Link {...inconclusiveLinkProps}>
           <ColoredCircle
-            quantity={inconclusiveCount ?? 0}
+            quantity={groupedStatus.inconclusiveCount}
             tooltipText="global.inconclusive"
             backgroundClassName="bg-medium-gray"
           />
@@ -125,6 +117,42 @@ export const GroupedTestStatusWithLink = ({
   );
 };
 
+interface ITestStatusWithLink extends ITestStatus, IStatusLinkProps {}
+
+export const GroupedTestStatusWithLink = ({
+  pass,
+  error,
+  miss,
+  fail,
+  done,
+  skip,
+  nullStatus,
+  hideInconclusive = false,
+  passLinkProps,
+  failLinkProps,
+  inconclusiveLinkProps,
+}: ITestStatusWithLink): JSX.Element => {
+  const groupedStatus = groupStatus({
+    doneCount: done,
+    errorCount: error,
+    failCount: fail,
+    missCount: miss,
+    passCount: pass,
+    skipCount: skip,
+    nullCount: nullStatus,
+  });
+
+  return (
+    <BaseGroupedStatusWithLink
+      groupedStatus={groupedStatus}
+      passLinkProps={passLinkProps}
+      failLinkProps={failLinkProps}
+      inconclusiveLinkProps={inconclusiveLinkProps}
+      hideInconclusive={hideInconclusive}
+    />
+  );
+};
+
 interface IBuildStatus {
   valid?: number;
   invalid?: number;