1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent'
import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent'
import { useProjectTopologies } from '../../../../data/topology'
import { usePortfolio, useScenarios } from '../../../../data/project'
import { useSchedulers, useTraces } from '../../../../data/experiments'
import { useAuth } from '../../../../auth'
import { useMutation, useQueryClient } from 'react-query'
import { addScenario, deleteScenario } from '../../../../api/scenarios'
const ScenarioListContainer = ({ portfolioId }) => {
const { data: portfolio } = usePortfolio(portfolioId)
const scenarios = useScenarios(portfolio?.scenarioIds ?? [])
.filter((res) => res.data)
.map((res) => res.data)
const topologies = useProjectTopologies()
const traces = useTraces().data ?? []
const schedulers = useSchedulers().data ?? []
const auth = useAuth()
const queryClient = useQueryClient()
const addMutation = useMutation((data) => addScenario(auth, data), {
onSuccess: async (result) => {
await queryClient.invalidateQueries(['portfolios', portfolioId])
},
})
const deleteMutation = useMutation((id) => deleteScenario(auth, id), {
onSuccess: async (result) => {
queryClient.setQueryData(['portfolios', portfolioId], (old) => ({
...old,
scenarioIds: old.scenarioIds.filter((id) => id !== result._id),
}))
queryClient.removeQueries(['scenarios', result._id])
},
})
const [isVisible, setVisible] = useState(false)
const onNewScenario = (currentPortfolioId) => {
setVisible(true)
}
const onDeleteScenario = (id) => {
if (id) {
deleteMutation.mutate(id)
}
}
const callback = (name, portfolioId, trace, topology, operational) => {
if (name) {
addMutation.mutate({
portfolioId,
name,
trace,
topology,
operational,
})
}
setVisible(false)
}
return (
<>
<ScenarioListComponent
portfolioId={portfolioId}
scenarios={scenarios}
onNewScenario={onNewScenario}
onDeleteScenario={onDeleteScenario}
/>
<NewScenarioModalComponent
show={isVisible}
currentPortfolioId={portfolioId}
currentPortfolioScenarioIds={scenarios.map((s) => s._id)}
traces={traces}
schedulers={schedulers}
topologies={topologies}
callback={callback}
/>
</>
)
}
ScenarioListContainer.propTypes = {
portfolioId: PropTypes.string,
}
export default ScenarioListContainer
|