client: Add links to cluster field on reports page

Magpie-Monitor · Dec 4, 2024 · aa15570 · aa15570
1 parent 56bc9b1
commit aa15570
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 50 deletions.
diff --git a/client/src/pages/Login/components/Panel/Panel.scss b/client/src/pages/Login/components/Panel/Panel.scss
@@ -87,9 +87,9 @@
       }
 
       &:hover {
-        box-shadow: 0 2px 2px $component-border-color;
-        transform: scale(1.02);
-        background-color: $quaternary;
+        border-width: 1px;
+        transform: scale(1.01);
+        filter: brightness(1.1);
       }
 
       &__logo {

diff --git a/client/src/pages/Report/CreateReport.tsx b/client/src/pages/Report/CreateReport.tsx
@@ -21,7 +21,7 @@ import SchedulePeriod, {
 } from './SchedulePeriod/SchedulePeriod.tsx';
 import { fetchClusterData, generateReport } from './CreateReportUtils.tsx';
 import { AccuracyLevel, ReportType } from 'api/managment-service.ts';
-import { getEndOfDay, getStartOfDay } from '@lib/date.ts';
+import { getEndOfDay, getStartOfDay } from 'lib/date.ts';
 
 const CreateReport = () => {
     const { id } = useParams<{ id: string }>();

diff --git a/client/src/pages/Reports/Reports.tsx b/client/src/pages/Reports/Reports.tsx
@@ -1,7 +1,7 @@
 import SectionComponent from 'components/SectionComponent/SectionComponent.tsx';
-import Table, {TableColumn} from 'components/Table/Table.tsx';
-import {useEffect, useState} from 'react';
-import {useNavigate} from 'react-router-dom';
+import Table, { TableColumn } from 'components/Table/Table.tsx';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   ReportAwaitingGeneration,
   ManagmentServiceApiInstance,
@@ -13,7 +13,10 @@ import PageTemplate from 'components/PageTemplate/PageTemplate';
 import HeaderWithIcon from 'components/PageTemplate/components/HeaderWithIcon/HeaderWithIcon';
 import LinkComponent from 'components/LinkComponent/LinkComponent.tsx';
 import Spinner from 'components/Spinner/Spinner.tsx';
-import {dateFromTimestampMs, dateTimeWithoutSecondsFromTimestampMs} from 'lib/date.ts';
+import {
+  dateFromTimestampMs,
+  dateTimeWithoutSecondsFromTimestampMs,
+} from 'lib/date.ts';
 import './Reports.scss';
 
 const Reports = () => {
@@ -30,10 +33,11 @@ const Reports = () => {
     {
       header: 'Cluster',
       columnKey: 'clusterId',
-      customComponent: (row: ReportSummary) =>
-        <LinkComponent>
+      customComponent: (row: ReportSummary) => (
+        <LinkComponent to={`/clusters/${row.id}/report`}>
           {row.clusterId}
         </LinkComponent>
+      ),
     },
     {
       header: 'Title',
@@ -42,32 +46,31 @@ const Reports = () => {
         <div className="reports__title-with-icon">
           {row.urgency === null && (
             <div className="reports__spinner">
-              <Spinner size="17px"/>
+              <Spinner size="17px" />
             </div>
           )}
           <span
-            className={`reports__title ${
-              row.urgency === null ? 'reports__title--inactive' : ''
-            }`}
+            className={`reports__title ${row.urgency === null ? 'reports__title--inactive' : ''
+              }`}
           >
-          {row.title}
-        </span>
+            {row.title}
+          </span>
         </div>
       ),
     },
     {
       header: 'Urgency',
       columnKey: 'urgency',
       customComponent: (row: ReportSummary) =>
-        row.urgency ? <UrgencyBadge label={row.urgency}/> : null,
+        row.urgency ? <UrgencyBadge label={row.urgency} /> : null,
     },
     {
       header: 'Date Range',
       columnKey: 'dateRange',
       customComponent: (row: ReportSummary) => (
         <span>
-        {row.startDate} - {row.endDate}
-      </span>
+          {row.startDate} - {row.endDate}
+        </span>
       ),
     },
     {
@@ -79,17 +82,16 @@ const Reports = () => {
       columnKey: '',
       customComponent: (row: ReportSummary) => (
         <button
-          className={`reports__action-button ${
-            row.urgency === null ? 'reports__action-button--inactive' : ''
-          }`}
+          // eslint-disable-next-line
+          className={`reports__action-button ${row.urgency === null ? 'reports__action-button--inactive' : ''
+            }`}
           onClick={() => row.urgency !== null && handleRowClick(row.id)}
           disabled={row.urgency === null}
         >
           <SVGIcon iconName="open-icon" />
         </button>
       ),
-    }
-    ,
+    },
   ];
 
   const fetchReportsOnDemand = async () => {
@@ -99,41 +101,40 @@ const Reports = () => {
         ...report,
         startDate: dateFromTimestampMs(report.sinceMs),
         endDate: dateFromTimestampMs(report.toMs),
-        requestedAtDate: dateTimeWithoutSecondsFromTimestampMs(report.requestedAtMs),
+        requestedAtDate: dateTimeWithoutSecondsFromTimestampMs(
+          report.requestedAtMs,
+        ),
       }));
 
-      setRowsOnDemand(prev => [
-        ...mappedReports,
-        ...prev,
-      ]);
+      setRowsOnDemand((prev) => [...mappedReports, ...prev]);
     } catch (error) {
+      // eslint-disable-next-line
       console.error('Error fetching on-demand reports:', error);
     }
   };
 
-
   const fetchReportsScheduled = async () => {
     try {
       const reports = await ManagmentServiceApiInstance.getReports('SCHEDULED');
       const mappedReports = reports.map((report: ReportSummary) => ({
         ...report,
         startDate: dateFromTimestampMs(report.sinceMs),
         endDate: dateFromTimestampMs(report.toMs),
-        requestedAtDate: dateTimeWithoutSecondsFromTimestampMs(report.requestedAtMs),
+        requestedAtDate: dateTimeWithoutSecondsFromTimestampMs(
+          report.requestedAtMs,
+        ),
       }));
 
-      setRowsScheduled(prev => [
-        ...mappedReports,
-        ...prev,
-      ]);
+      setRowsScheduled((prev) => [...mappedReports, ...prev]);
     } catch (error) {
       console.error('Error fetching scheduled reports:', error);
     }
   };
 
   const fetchReportAwaitingGenerations = async () => {
     try {
-      const reports = await ManagmentServiceApiInstance.getAwaitingGenerationReports();
+      const reports =
+        await ManagmentServiceApiInstance.getAwaitingGenerationReports();
       const mappedReports = reports.map((report: ReportAwaitingGeneration) => ({
         ...report,
         id: `${report.clusterId}-${report.sinceMs}`,
@@ -145,11 +146,15 @@ const Reports = () => {
         requestedAtDate: dateTimeWithoutSecondsFromTimestampMs(Date.now()),
       }));
 
-      const updateRows =
-        (filterType: string, setRows: React.Dispatch<React.SetStateAction<ReportSummary[]>>) => {
-          const filteredReports = mappedReports.filter(report => report.reportType === filterType);
-          setRows(prev => [...filteredReports, ...prev]);
-        };
+      const updateRows = (
+        filterType: string,
+        setRows: React.Dispatch<React.SetStateAction<ReportSummary[]>>,
+      ) => {
+        const filteredReports = mappedReports.filter(
+          (report) => report.reportType === filterType,
+        );
+        setRows((prev) => [...filteredReports, ...prev]);
+      };
 
       updateRows('ON_DEMAND', setRowsOnDemand);
       updateRows('SCHEDULED', setRowsScheduled);
@@ -167,8 +172,12 @@ const Reports = () => {
         fetchReportAwaitingGenerations(),
       ]);
 
-      setRowsOnDemand(prev => [...prev].sort((a, b) => b.requestedAtMs - a.requestedAtMs));
-      setRowsScheduled(prev => [...prev].sort((a, b) => b.requestedAtMs - a.requestedAtMs));
+      setRowsOnDemand((prev) =>
+        [...prev].sort((a, b) => b.requestedAtMs - a.requestedAtMs),
+      );
+      setRowsScheduled((prev) =>
+        [...prev].sort((a, b) => b.requestedAtMs - a.requestedAtMs),
+      );
 
       setLoading(false);
     };
@@ -180,40 +189,40 @@ const Reports = () => {
       header={
         <HeaderWithIcon
           title={'Reports'}
-          icon={<SVGIcon iconName="reports-list-icon"/>}
+          icon={<SVGIcon iconName="reports-list-icon" />}
         />
       }
     >
       <div className="reports">
         <SectionComponent
-          icon={<SVGIcon iconName="chart-icon"/>}
+          icon={<SVGIcon iconName="chart-icon" />}
           title={'Scheduled reports'}
         >
           {loading ? (
-            <Spinner/>
+            <Spinner />
           ) : rowsScheduled.length === 0 ? (
             <>
               <p>No reports. &nbsp;</p>
               <LinkComponent to="/clusters">Generate new report</LinkComponent>
             </>
           ) : (
-            <Table columns={columns} rows={rowsScheduled}/>
+            <Table columns={columns} rows={rowsScheduled} />
           )}
         </SectionComponent>
 
         <SectionComponent
-          icon={<SVGIcon iconName="chart-icon"/>}
+          icon={<SVGIcon iconName="chart-icon" />}
           title={'Reports on demand'}
         >
           {loading ? (
-            <Spinner/>
+            <Spinner />
           ) : rowsOnDemand.length === 0 ? (
             <>
               <p>No reports. &nbsp;</p>
               <LinkComponent to="/clusters">Generate new report</LinkComponent>
             </>
           ) : (
-            <Table columns={columns} rows={rowsOnDemand}/>
+            <Table columns={columns} rows={rowsOnDemand} />
           )}
         </SectionComponent>
       </div>