Merge pull request #93 from att/all_experiments

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,67 @@
+@import "src/styles/variables-keys";
+
+.experiments_wrapper {
+  padding-inline: 80px;
+  padding-block: 40px;
+
+  .title_options_container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .experiments_title {
+      font-size: 20px;
+      font-family: var($fontMedium);
+      margin-block-end: 40px;
+    }
+
+    .options_wrapper {
+      .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 {
+  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;
+  }
+}

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();
+  });
+});