client: Reports page poc (#50)

* client: Reports page poc * client: Reports page poc * client: Fix * client: Fix * client: Fix
Magpie-Monitor · Oct 26, 2024 · cbfcbf3 · cbfcbf3
1 parent 2a147d9
commit cbfcbf3
Show file tree

Hide file tree

Showing 13 changed files with 214 additions and 15 deletions.
diff --git a/client/src/api/managment-service.ts b/client/src/api/managment-service.ts
@@ -9,7 +9,19 @@ interface TokenInfo {
   expTime: number;
 }
 
+export interface ReportSummary {
+  id: string;
+  clusterId: string;
+  title: string;
+  urgency: 'HIGH' | 'MEDIUM' | 'LOW';
+  sinceMs: number;
+  toMs: number;
+  [key: string]: string | number;
+}
+
 const MANAGMENT_SERVICE_URL = import.meta.env.VITE_BACKEND_URL;
+const VALID_URGENCY_VALUES: ReportSummary['urgency'][] = ['HIGH', 'MEDIUM', 'LOW'];
+
 
 class ManagmentServiceApi {
   private axiosInstance: AxiosInstance;
@@ -60,6 +72,19 @@ class ManagmentServiceApi {
     const user = await this.axiosInstance.get('/api/v1/auth/user-details');
     return user.data;
   }
+
+  public async getReports(): Promise<ReportSummary[]> {
+    await this.refreshTokenIfExpired();
+    const response = await this.axiosInstance.get('/api/v1/reports');
+    const reports: ReportSummary[] = response.data;
+    reports.forEach((report) => {
+      if (!VALID_URGENCY_VALUES.includes(report.urgency)) {
+        throw new Error(`Invalid urgency value "${report.urgency}" for report ID ${report.id}. Allowed values are: ${VALID_URGENCY_VALUES.join(', ')}`);
+      }
+    });
+
+    return reports;
+  }
 }
 
 export const ManagmentServiceApiInstance = new ManagmentServiceApi();
diff --git a/client/src/assets/reports_list_icon.svg b/client/src/assets/reports_list_icon.svg
diff --git a/client/src/components/SVGIcon/SVGIcon.scss b/client/src/components/SVGIcon/SVGIcon.scss
@@ -36,3 +36,8 @@
   transform: rotate(180deg);
   mask: url('/src/assets/drop-down-icon.svg') no-repeat center;
 }
+
+.reports-list-icon {
+  @extend .svg-icon;
+  mask: url('/src/assets/reports_list_icon.svg') no-repeat center;
+}
diff --git a/client/src/components/SectionComponent/SectionComponent.scss b/client/src/components/SectionComponent/SectionComponent.scss
@@ -27,13 +27,15 @@
   }
 
   &__title {
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 22px;
+    margin: 0;
+    font-weight: 400;
   }
 
   &__divider {
     height: 1px;
     background-color: $component-border-color;
+    margin-bottom: 15px;
   }
 
   &__content {

diff --git a/client/src/components/UrgencyBadge/UrgencyBadge.scss b/client/src/components/UrgencyBadge/UrgencyBadge.scss
@@ -0,0 +1,24 @@
+@import '@/variables';
+
+.urgency-badge {
+  padding: 0 20px;
+  border-radius: 5px;
+  font-weight: 500;
+  color: $white;
+  display: inline-block;
+  text-align: center;
+  font-size: 14px;
+  width: 50px;
+
+  &--high {
+    background-color: $red;
+  }
+
+  &--medium {
+    background-color: $medium-urgency-background;
+  }
+
+  &--low {
+    background-color: $low-urgency-background;
+  }
+}
diff --git a/client/src/components/UrgencyBadge/UrgencyBadge.tsx b/client/src/components/UrgencyBadge/UrgencyBadge.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './UrgencyBadge.scss';
+
+interface UrgencyBadgeProps {
+    label: 'HIGH' | 'MEDIUM' | 'LOW';
+}
+
+const UrgencyBadge: React.FC<UrgencyBadgeProps> = ({ label }) => {
+    return (
+        <span className={`urgency-badge urgency-badge--${label.toLowerCase()}`}>
+            {label}
+        </span>
+    );
+};
+
+export default UrgencyBadge;
diff --git a/client/src/pages/Home/components/ScanStats/ScanStats.scss b/client/src/pages/Home/components/ScanStats/ScanStats.scss
@@ -7,7 +7,7 @@
   &__heading {
     font-size: 24px;
     font-weight: bold;
-    margin: 12px;
+    margin: 0 12px 12px 12px;
   }
 
   &__content {

diff --git a/client/src/pages/ReportDetails/ReportDetails.scss b/client/src/pages/ReportDetails/ReportDetails.scss
diff --git a/client/src/pages/ReportDetails/ReportDetails.tsx b/client/src/pages/ReportDetails/ReportDetails.tsx
@@ -0,0 +1,16 @@
+import './ReportDetails.scss';
+import { useParams } from 'react-router-dom';
+
+const ReportDetails = () => {
+    const { id } = useParams();
+
+    return (
+        <div className="reports-details">
+            <div className="reports-details__content">
+                <p className="reports-details__content__heading">Report ID: {id}</p>
+            </div>
+        </div>
+    );
+};
+
+export default ReportDetails;
diff --git a/client/src/pages/Reports/Reports.scss b/client/src/pages/Reports/Reports.scss
@@ -11,10 +11,45 @@
     flex-grow: 1;
     padding: 20px;
     max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__link {
+      color: $green;
+      text-decoration: underline;
+    }
 
     &__heading {
-      font-size: 32px;
-      margin: 0;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+
+      &__paragraph {
+        font-size: 32px;
+        margin: 0 0 0 7px;
+      }
+
+      .svg-icon {
+        background-color: $green;
+      }
+    }
+
+    &__dashboard {
+      &__content{
+        min-width: 900px;
+
+        @media (max-width: $md) {
+          width: 300px;
+        }
+        &__paragraph {
+          text-align: center;
+        }
+      }
+      .svg-icon {
+        background-color: $green;
+      }
     }
   }
 }
+
diff --git a/client/src/pages/Reports/Reports.tsx b/client/src/pages/Reports/Reports.tsx
@@ -1,19 +1,87 @@
 import './Reports.scss';
 import SectionComponent from 'components/SectionComponent/SectionComponent.tsx';
-// import Table from '@/components/Table/Table.tsx';
+import Table, {TableColumn} from 'components/Table/Table.tsx';
+import {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {ManagmentServiceApiInstance, ReportSummary} from 'api/managment-service';
+import SVGIcon from 'components/SVGIcon/SVGIcon.tsx';
+import UrgencyBadge from 'components/UrgencyBadge/UrgencyBadge.tsx';
 
 const Reports = () => {
+    const [rows, setRows] = useState<ReportSummary[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const navigate = useNavigate();
+
+    const handleRowClick = (id: string) => {
+        navigate(`/reports/${id}`);
+    };
+
+    const columns: Array<TableColumn<ReportSummary>>  = [
+        {
+            header: 'Cluster',
+            columnKey: 'clusterId',
+            customComponent: (row: ReportSummary) => (
+                <a className='reports__content__link' href="#" onClick={() => handleRowClick(row.id)}>
+                    {row.clusterId}
+                </a>
+            )
+        },
+        {header: 'Title', columnKey: 'title'},
+        {
+            header: 'Urgency',
+            columnKey: 'urgency',
+            customComponent: (row: ReportSummary) => <UrgencyBadge label={row.urgency}/>
+        },
+        {header: 'Start date', columnKey: 'startDate'},
+        {header: 'End date', columnKey: 'endDate'}
+    ];
+
+    const fetchReports = async () => {
+        try {
+            const reports = await ManagmentServiceApiInstance.getReports();
+            const mappedReports = reports.map((report: ReportSummary) => ({
+                ...report,
+                startDate: new Date(report.sinceMs / 1e6).toLocaleString(),
+                endDate: new Date(report.toMs / 1e6).toLocaleString(),
+            }));
+            setRows(mappedReports);
+        } catch (error) {
+            console.error('Error fetching reports:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchReports();
+    }, []);
+
     return (
         <div className="reports">
             <div className="reports__content">
-                <p className="reports__content__heading">Reports</p>
-                <div className="reports__content__dashboard">
-                    <SectionComponent
-                        icon={'setting-icon'}
-                        title={<p> Weekly reports</p>}
-                    >
-                        <div>{/*<Table></Table>*/}</div>
-                    </SectionComponent>
+                <div>
+                    <div className='reports__content__heading'>
+                        <SVGIcon iconName='reports-list-icon'/>
+                        <p className="reports__content__heading__paragraph">Reports</p>
+                    </div>
+                    <div className="reports__content__dashboard">
+                        <SectionComponent
+                            icon={'setting-icon'}
+                            title={'Weekly reports'}
+                        >
+                            <div className="reports__content__dashboard__content">
+                                {loading ? (
+                                    <p className="reports__content__dashboard__content__paragraph">Loading...</p>
+                                ) : rows.length === 0 ? (
+                                    <p className="reports__content__dashboard__content__paragraph">No reports. Generate new report (TBA: link)</p>
+                                ) : (
+                                    <Table
+                                        columns={columns}
+                                        rows={rows}
+                                    />
+                                )}</div>
+                        </SectionComponent>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/client/src/pages/Router.tsx b/client/src/pages/Router.tsx
@@ -12,6 +12,7 @@ import { getAuthInfo } from 'providers/AuthProvider/AuthProvider';
 import NotFoundError from './NotFoundError/NotFoundError';
 import Reports from './Reports/Reports.tsx';
 import Settings from './Settings/Settings.tsx';
+import ReportDetails from './ReportDetails/ReportDetails.tsx';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -28,7 +29,10 @@ const router = createBrowserRouter(
       <Route path="/" element={<ProtectedLayout />}>
         <Route path="/" element={<Home />} />
         <Route path="/dashboard" element={<Home />} />
-        <Route path="/reports" element={<Reports />} />
+        <Route path="/reports" >
+          <Route path="" element={<Reports />} />
+          <Route path=":id" element={<ReportDetails />} />
+        </Route>
         <Route path="/settings" element={<Settings />} />
       </Route>
     </Route>,

diff --git a/client/src/variables.scss b/client/src/variables.scss
@@ -22,3 +22,6 @@ $component-border-color: #484a49;
 
 $red: #E01300;
 $cancel-color: #EC584B;
+$medium-urgency-background: #d18f00;
+$white: #fff;
+$low-urgency-background: #028e07;