summaryrefslogtreecommitdiff
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js12
-rw-r--r--frontend/src/components/app/sidebars/project/TopologyListComponent.js63
-rw-r--r--frontend/src/components/modals/custom-components/NewTopologyModalComponent.js (renamed from frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js)45
-rw-r--r--frontend/src/components/navigation/AppNavbar.js54
-rw-r--r--frontend/src/components/navigation/AppNavbarComponent.js27
5 files changed, 105 insertions, 96 deletions
diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
new file mode 100644
index 00000000..d6e39ff6
--- /dev/null
+++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import Sidebar from '../Sidebar'
+import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
+
+const ProjectSidebarComponent = () => (
+ <Sidebar isRight={false}>
+ <TopologyListContainer/>
+ <h2>Portfolios</h2>
+ </Sidebar>
+ )
+
+export default ProjectSidebarComponent
diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
new file mode 100644
index 00000000..98615711
--- /dev/null
+++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../../shapes'
+import FontAwesome from 'react-fontawesome'
+
+class TopologyListComponent extends React.Component {
+ static propTypes = {
+ show: PropTypes.bool.isRequired,
+ topologies: PropTypes.arrayOf(Shapes.Topology),
+ currentTopologyId: PropTypes.string,
+ onChooseTopology: PropTypes.func.isRequired,
+ onNewTopology: PropTypes.func.isRequired,
+ onDeleteTopology: PropTypes.func.isRequired,
+ }
+
+ onChoose(id) {
+ this.props.onChooseTopology(id)
+ }
+
+ onDuplicate() {
+ this.props.onNewTopology(
+ this.textInput.value,
+ this.originTopology.value,
+ )
+ }
+
+ onDelete(id) {
+ this.props.onDeleteTopology(id)
+ }
+
+ render() {
+ return (
+ <div className="pb-3">
+ <h2>
+ Topologies
+ <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}>
+ <FontAwesome name="plus"/>
+ </button>
+ </h2>
+
+ {this.props.topologies.map((topology, idx) => (
+ <div key={topology._id} className="row mb-1">
+ <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}>
+ {topology.name}
+ </div>
+ <div className="col-4 text-right">
+ <span
+ className="btn btn-outline-primary mr-1 fa fa-play"
+ onClick={() => this.onChoose(topology._id)}
+ />
+ <span
+ className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
+ onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined}
+ />
+ </div>
+ </div>
+ ))}
+ </div>
+ )
+ }
+}
+
+export default TopologyListComponent
diff --git a/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index 22ef4585..a0d736a1 100644
--- a/frontend/src/components/modals/custom-components/ChangeTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -3,15 +3,12 @@ import React from 'react'
import Shapes from '../../../shapes'
import Modal from '../Modal'
-class ChangeTopologyModalComponent extends React.Component {
+class NewTopologyModalComponent extends React.Component {
static propTypes = {
show: PropTypes.bool.isRequired,
topologies: PropTypes.arrayOf(Shapes.Topology),
- currentTopologyId: PropTypes.string,
- onChooseTopology: PropTypes.func.isRequired,
onCreateTopology: PropTypes.func.isRequired,
onDuplicateTopology: PropTypes.func.isRequired,
- onDeleteTopology: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
}
@@ -28,11 +25,6 @@ class ChangeTopologyModalComponent extends React.Component {
}
}
- onChoose(id) {
- this.props.onChooseTopology(id)
- this.reset()
- }
-
onCreate() {
this.props.onCreateTopology(this.textInput.value)
this.reset()
@@ -46,11 +38,6 @@ class ChangeTopologyModalComponent extends React.Component {
this.reset()
}
- onDelete(id) {
- this.props.onDeleteTopology(id)
- this.reset()
- }
-
onCancel() {
this.props.onCancel()
this.reset()
@@ -59,37 +46,11 @@ class ChangeTopologyModalComponent extends React.Component {
render() {
return (
<Modal
- title="Change Topology"
+ title="New Topology"
show={this.props.show}
onSubmit={this.onSubmit.bind(this)}
onCancel={this.onCancel.bind(this)}
>
- <div>
- {this.props.topologies.map((topology, idx) => (
- <div key={topology._id} className="row mb-1">
- <div className="col-6">
- <em>{topology._id === this.props.currentTopologyId ? 'Active: ' : ''}</em>
- {topology.name}
- </div>
- <div className="col-6 text-right">
- <span
- className="btn btn-primary mr-1"
- onClick={() => this.onChoose(topology._id)}
- >
- Choose
- </span>
- <span
- className={'btn btn-danger ' + (idx === 0 ? 'disabled' : '')}
- onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined}
- >
- Delete
- </span>
- </div>
- </div>
- ))}
- </div>
-
- <h5 className="pt-3 pt-1">New Topology</h5>
<form
onSubmit={e => {
e.preventDefault()
@@ -128,4 +89,4 @@ class ChangeTopologyModalComponent extends React.Component {
}
}
-export default ChangeTopologyModalComponent
+export default NewTopologyModalComponent
diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js
deleted file mode 100644
index 876d4abd..00000000
--- a/frontend/src/components/navigation/AppNavbar.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react'
-import FontAwesome from 'react-fontawesome'
-import { Link } from 'react-router-dom'
-import Navbar, { NavItem } from './Navbar'
-import './Navbar.css'
-
-const AppNavbar = ({ projectId, inProject, fullWidth, onViewTopologies }) => (
- <Navbar fullWidth={fullWidth}>
- <NavItem route="/projects">
- <Link className="nav-link" title="My Projects" to="/projects">
- <FontAwesome name="list" className="mr-2"/>
- My Projects
- </Link>
- </NavItem>
- {inProject ? (
- <>
- <NavItem route={'/projects/' + projectId}>
- <Link
- className="nav-link"
- title="Construction"
- to={'/projects/' + projectId}
- >
- <FontAwesome name="industry" className="mr-2"/>
- Construction
- </Link>
- </NavItem>
- <NavItem route="topologies">
- <span
- className="nav-link"
- title="Topologies"
- onClick={onViewTopologies}
- >
- <FontAwesome name="server" className="mr-2"/>
- Topologies
- </span>
- </NavItem>
- <NavItem route={'/projects/' + projectId + '/experiments'}>
- <Link
- className="nav-link"
- title="Experiments"
- to={'/projects/' + projectId + '/experiments'}
- >
- <FontAwesome name="play" className="mr-2"/>
- Experiments
- </Link>
- </NavItem>
- </>
- ) : (
- undefined
- )}
- </Navbar>
-)
-
-export default AppNavbar
diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js
new file mode 100644
index 00000000..10a2b92c
--- /dev/null
+++ b/frontend/src/components/navigation/AppNavbarComponent.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import { Link } from 'react-router-dom'
+import Navbar, { NavItem } from './Navbar'
+import './Navbar.css'
+
+const AppNavbarComponent = ({ project, fullWidth }) => (
+ <Navbar fullWidth={fullWidth}>
+ <NavItem route="/projects">
+ <Link className="nav-link" title="My Projects" to="/projects">
+ <FontAwesome name="list" className="mr-2"/>
+ My Projects
+ </Link>
+ </NavItem>
+ {project ? (
+ <NavItem>
+ <Link className="nav-link" title="Current Project" to={`/projects/${project._id}`}>
+ <span>{project.name}</span>
+ </Link>
+ </NavItem>
+ ) : (
+ undefined
+ )}
+ </Navbar>
+)
+
+export default AppNavbarComponent
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 13:55:10 +0000