All Experiments Page

portal/mock-server/src/all-experiments.json

@@ -0,0 +1,120 @@
+[
+  {
+    "id": 15,
+    "name": "Experiment 1",
+    "end_time": 1705240065192,
+    "test_runs": [
+      {
+        "id": 354,
+        "algorithm": "prime256v1",
+        "iterations": 100
+      },
+      {
+        "id": 355,
+        "algorithm": "prime256v1",
+        "iterations": 500
+      },
+      {
+        "id": 356,
+        "algorithm": "prime256v1",
+        "iterations": 1000
+      },
+      {
+        "id": 357,
+        "algorithm": "p256_kyber512",
+        "iterations": 100
+      },
+      {
+        "id": 358,
+        "algorithm": "p256_kyber512",
+        "iterations": 500
+      },
+      {
+        "id": 359,
+        "algorithm": "p256_kyber512",
+        "iterations": 1000
+      },
+      {
+        "id": 360,
+        "algorithm": "bikel3",
+        "iterations": 100
+      },
+      {
+        "id": 361,
+        "algorithm": "bikel3",
+        "iterations": 500
+      },
+      {
+        "id": 362,
+        "algorithm": "bikel3",
+        "iterations": 1000
+      }
+    ]
+  },
+  {
+    "id": 16,
+    "name": "Experiment 2",
+    "end_time": 1705389926549,
+    "test_runs": [
+      {
+        "id": 363,
+        "algorithm": "kyber512",
+        "iterations": 1000
+      },
+      {
+        "id": 364,
+        "algorithm": "bikel3",
+        "iterations": 1000
+      },
+      {
+        "id": 365,
+        "algorithm": "prime256v1",
+        "iterations": 1000
+      }
+    ]
+  },
+  {
+    "id": 17,
+    "name": "Experiment 3",
+    "end_time": 1705389926549,
+    "test_runs": [
+      {
+        "id": 366,
+        "algorithm": "prime256v1",
+        "iterations": 500
+      },
+      {
+        "id": 367,
+        "algorithm": "bikel3",
+        "iterations": 1000
+      },
+      {
+        "id": 368,
+        "algorithm": "bikel3",
+        "iterations": 1000
+      },
+      {
+        "id": 369,
+        "algorithm": "prime256v1",
+        "iterations": 5000
+      }
+    ]
+  },
+  {
+    "id": 18,
+    "name": "Experiment 4",
+    "end_time": 1705389926549,
+    "test_runs": [
+      {
+        "id": 370,
+        "algorithm": "kyber512",
+        "iterations": 500
+      },
+      {
+        "id": 371,
+        "algorithm": "kyber512",
+        "iterations": 1500
+      }
+    ]
+  }
+]

portal/mock-server/src/router.ts

@@ -37,6 +37,14 @@ router.get('/qujata-api/test_suites/:testSuiteId', async (req: Request, res: Res
   }, 1500);
 });
 
+router.get('/qujata-api/test_suites', async (req: Request, res: Response) => {
+  console.log(`-${req.method} ${req.url}`);
+  const data = (await import('./all-experiments.json')).default;
+  setTimeout(() => {
+    res.json(data);
+  }, 1500);
+});
+
 router.put('/qujata-api/test_suites/:testSuiteId', async (req: Request, res: Response) => {
   console.log(`-${req.method} ${req.url}`);
   setTimeout(() => {
@@ -51,4 +59,11 @@ router.delete('/qujata-api/test_suites/:testSuiteId', async (req: Request, res:
   }, 1500);
 });
 
+router.post('/qujata-api/test_suites/delete', async (req: Request, res: Response) => {
+  console.log(`-${req.method} ${req.url}`);
+  setTimeout(() => {
+    res.status(200).send();
+  }, 1500);
+});
+
 export default router;

portal/mock-server/src/test.json

@@ -15,7 +15,7 @@
     "resourceName": "RELACE_WITH_RESOURCE_NAME"
   },
 
-  "testRuns": [
+  "test_runs": [
     {
       "id":1,
       "algorithm": "bikel1",

portal/package.json

@@ -8,6 +8,7 @@
     "chart.js": "^4.4.0",
     "chartjs-plugin-annotation": "^3.0.1",
     "classnames": "^2.3.2",
+    "date-fns": "^3.3.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-chartjs-2": "3.1.1",

portal/src/app/apis.ts

@@ -1,19 +1,23 @@
 const testSuites = 'test_suites';
-
+ 
 export const APIS: { [key in keyof typeof API_URLS]: string } = {
   analyze: 'analyze',
   algorithms: 'algorithms',
   iterations: 'iterations',
   testRunResults: `${testSuites}/:testSuiteId`,
   editExperiment: `${testSuites}/:testSuiteId`,
   deleteExperiment: `${testSuites}/:testSuiteId`,
+  allExperiments: `${testSuites}`,
+  deleteExperiments: `${testSuites}/delete`,
 };
-
+ 
 enum API_URLS {
   analyze,
   algorithms,
   iterations,
   testRunResults,
   editExperiment,
   deleteExperiment,
+  allExperiments,
+  deleteExperiments
 }

portal/src/app/components/all-experiments/Experiments.module.scss

@@ -0,0 +1,95 @@
+@import "src/styles/variables-keys";
+
+.experiments_wrapper {
+  padding-block-start: 40px;
+  padding-block-end: 40px;
+  padding-inline-start: 80px;
+  padding-inline-end: 80px;
+}
+
+.title_options_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .experiments_title {
+    font-size: 20px;
+    font-family: var($fontMedium);
+    margin-inline-start: 150px;
+  }
+
+  .options_wrapper {
+    margin-inline-end: 50px;
+
+    .trash_icon {
+      background-color: #F5F1FF;
+      inline-size: 34px;
+      block-size: 34px;
+      border-radius: 50%;
+    }
+  }
+
+  .options_wrapper:hover .hover_image {
+    display: block;
+  }
+
+  .options_wrapper:hover .default_image {
+    display: none;
+  }
+
+  .default_image {
+    padding-inline: 11px;
+    display: block;
+  }
+
+  .hover_image {
+    display: none;
+  }
+}
+
+.experiments_table {
+  margin-block-start: 60px;
+  margin-block-end: 60px;
+
+  th, td {
+    text-align: left;
+  }
+
+  th:first-child,
+  td:first-child {
+    text-align: center;
+    inline-size: 80px;
+  }
+}
+
+.input_form_item {
+  display: none;
+}
+
+.input_option {
+  margin-block-end: -5px;
+
+  .input_option_checkbox_icon {
+    margin-inline-end: 10px;
+    cursor: pointer;
+  }
+}
+
+.spinner_wrapper {
+  position: sticky;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  text-align: center;   
+}
+
+.spinner_overlay {
+  inline-size: 100%;
+  block-size: 100%;
+  position: absolute;
+  background-color: #fff;
+  opacity: 0.6;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 4;
+}
+

portal/src/app/components/all-experiments/Experiments.test.tsx

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/react';
+import { Experiments } from './Experiments';
+import { useExperimentsData } from './hooks';
+import { FetchDataStatus, useFetch } from '../../shared/hooks/useFetch';
+
+jest.mock('./hooks');
+jest.mock('../../shared/hooks/useFetch');
+jest.mock('react-router-dom', () => ({
+  useNavigate: jest.fn(),
+}));
+
+describe('Experiments', () => {
+  it('renders correctly', () => {
+    (useExperimentsData as jest.Mock).mockReturnValue({
+      test_suites: [{
+        id: 15,
+        name: "Experiment 1",
+        end_time: 1705240065192,
+        test_runs: [
+          {
+            id: 354,
+            algorithm: "prime256v1",
+            iterations: 100
+          },
+          {
+            id: 355,
+            algorithm: "prime256v1",
+            iterations: 500
+          }
+        ]
+      }],
+      status: FetchDataStatus.Fetching,
+    });
+    (useFetch as jest.Mock).mockReturnValue({
+      post: jest.fn(),
+      status: FetchDataStatus.Fetching,
+      error: null,
+      cancelRequest: jest.fn(),
+    });
+
+    const { container } = render(<Experiments />);
+    expect(container).toMatchSnapshot();
+  });
+});