From 3d1c02e50ee619598bcd7fad4368be8b4a039e84 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 7 Mar 2022 18:19:21 +0100
Subject: refactor(web/ui): Fix compatibility with new API

This change updates the web interface in React to be compatible with the
new API written in Kotlin. Several changes have been made in the new API
to ensure consistency.
---
 .../src/components/portfolios/ScenarioTable.js     | 31 +++++++++-------------
 1 file changed, 13 insertions(+), 18 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js')

diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
index 9966e3ba..68647957 100644
--- a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
@@ -20,44 +20,38 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
 import Link from 'next/link'
 import { Table, TableBody, TableHeader } from '@patternfly/react-table'
 import React from 'react'
+import { Portfolio, Status } from '../../shapes'
 import TableEmptyState from '../util/TableEmptyState'
 import ScenarioState from './ScenarioState'
-import { usePortfolio, usePortfolioScenarios } from '../../data/project'
-import { useProjectTopologies } from '../../data/topology'
-import { useMutation } from 'react-query'
+import { useDeleteScenario } from '../../data/project'
 
-const ScenarioTable = ({ portfolioId }) => {
-    const { data: portfolio } = usePortfolio(portfolioId)
-    const { status, data: scenarios = [] } = usePortfolioScenarios(portfolioId)
-    const { data: topologies } = useProjectTopologies(portfolio?.projectId, {
-        select: (topologies) => new Map(topologies.map((topology) => [topology._id, topology])),
-    })
-
-    const { mutate: deleteScenario } = useMutation('deleteScenario')
+function ScenarioTable({ portfolio, status }) {
+    const { mutate: deleteScenario } = useDeleteScenario()
+    const projectId = portfolio?.project?.id
+    const scenarios = portfolio?.scenarios ?? []
 
     const columns = ['Name', 'Topology', 'Trace', 'State']
     const rows =
         scenarios.length > 0
             ? scenarios.map((scenario) => {
-                  const topology = topologies?.get(scenario.topology.topologyId)
+                  const topology = scenario.topology
 
                   return [
                       scenario.name,
                       {
                           title: topology ? (
-                              <Link href={`/projects/${topology.projectId}/topologies/${topology._id}`}>
+                              <Link href={`/projects/${projectId}/topologies/${topology.number}`}>
                                   <a>{topology.name}</a>
                               </Link>
                           ) : (
                               'Unknown Topology'
                           ),
                       },
-                      scenario.trace.traceId,
-                      { title: <ScenarioState state={scenario.simulation.state} /> },
+                      `${scenario.workload.trace.name} (${scenario.workload.samplingFraction * 100}%)`,
+                      { title: <ScenarioState state={scenario.job.state} /> },
                   ]
               })
             : [
@@ -82,7 +76,7 @@ const ScenarioTable = ({ portfolioId }) => {
     const actionResolver = (_, { rowIndex }) => [
         {
             title: 'Delete Scenario',
-            onClick: (_, rowId) => deleteScenario(scenarios[rowId]._id),
+            onClick: (_, rowId) => deleteScenario({ projectId: projectId, number: scenarios[rowId].number }),
             isDisabled: rowIndex === 0,
         },
     ]
@@ -102,7 +96,8 @@ const ScenarioTable = ({ portfolioId }) => {
 }
 
 ScenarioTable.propTypes = {
-    portfolioId: PropTypes.string,
+    portfolio: Portfolio,
+    status: Status.isRequired,
 }
 
 export default ScenarioTable
-- 
cgit v1.2.3