p59342861
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Island UI: merge StandardLayoutComponent.js and DisabledSidebarLayoutComponent.tsx into one component to remove duplication

This commit is contained in:
VakarisZ 2021-07-16 08:52:49 +03:00
parent 1a7b513ca3
commit 63f885e3db
4 changed files with 38 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
monkey/monkey_island/cc/ui/src/components/Main.tsx
View File

@ -23,9 +23,8 @@ import 'react-data-components/css/table-twbs.css';
import 'styles/App.css'; import 'styles/App.css';
import 'react-toggle/style.css'; import 'react-toggle/style.css';
import 'react-table/react-table.css'; import 'react-table/react-table.css';
import {StandardLayoutComponent} from './layouts/StandardLayoutComponent';
import LoadingScreen from './ui-components/LoadingScreen'; import LoadingScreen from './ui-components/LoadingScreen';
import {DisabledSidebarLayoutComponent} from "./layouts/DisabledSidebarLayoutComponent"; import SidebarLayoutComponent from "./layouts/SidebarLayoutComponent";
import {CompletedSteps} from "./side-menu/CompletedSteps"; import {CompletedSteps} from "./side-menu/CompletedSteps";
import Timeout = NodeJS.Timeout; import Timeout = NodeJS.Timeout;
import IslandHttpClient from "./IslandHttpClient"; import IslandHttpClient from "./IslandHttpClient";
@ -179,52 +178,53 @@ class AppComponent extends AuthComponent {
<Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/> <Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
<Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/> <Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
{this.renderRoute(Routes.LandingPage, {this.renderRoute(Routes.LandingPage,
<DisabledSidebarLayoutComponent component={LandingPage} <SidebarLayoutComponent component={LandingPage}
completedSteps={new CompletedSteps()} sideNavDisabled={true}
onStatusChange={this.updateStatus}/>)} completedSteps={new CompletedSteps()}
onStatusChange={this.updateStatus}/>)}
{this.renderRoute(Routes.GettingStartedPage, {this.renderRoute(Routes.GettingStartedPage,
<StandardLayoutComponent component={GettingStartedPage} <SidebarLayoutComponent component={GettingStartedPage}
completedSteps={this.state.completedSteps} completedSteps={this.state.completedSteps}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
/>, />,
true)} true)}
{this.renderRoute('/configure', {this.renderRoute('/configure',
<StandardLayoutComponent component={ConfigurePage} <SidebarLayoutComponent component={ConfigurePage}
islandMode={this.state.islandMode} islandMode={this.state.islandMode}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/run-monkey', {this.renderRoute('/run-monkey',
<StandardLayoutComponent component={RunMonkeyPage} <SidebarLayoutComponent component={RunMonkeyPage}
islandMode={this.state.islandMode} islandMode={this.state.islandMode}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/infection/map', {this.renderRoute('/infection/map',
<StandardLayoutComponent component={MapPage} <SidebarLayoutComponent component={MapPage}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/infection/telemetry', {this.renderRoute('/infection/telemetry',
<StandardLayoutComponent component={TelemetryPage} <SidebarLayoutComponent component={TelemetryPage}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/start-over', {this.renderRoute('/start-over',
<StandardLayoutComponent component={StartOverPage} <SidebarLayoutComponent component={StartOverPage}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.redirectTo('/report', '/report/security')} {this.redirectTo('/report', '/report/security')}
{this.renderRoute('/report/security', {this.renderRoute('/report/security',
<StandardLayoutComponent component={ReportPage} <SidebarLayoutComponent component={ReportPage}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/report/attack', {this.renderRoute('/report/attack',
<StandardLayoutComponent component={ReportPage} <SidebarLayoutComponent component={ReportPage}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/report/zeroTrust', {this.renderRoute('/report/zeroTrust',
<StandardLayoutComponent component={ReportPage} <SidebarLayoutComponent component={ReportPage}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/report/ransomware', {this.renderRoute('/report/ransomware',
<StandardLayoutComponent component={ReportPage} <SidebarLayoutComponent component={ReportPage}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
{this.renderRoute('/license', {this.renderRoute('/license',
<StandardLayoutComponent component={LicensePage} <SidebarLayoutComponent component={LicensePage}
onStatusChange={this.updateStatus} onStatusChange={this.updateStatus}
completedSteps={this.state.completedSteps}/>)} completedSteps={this.state.completedSteps}/>)}
<Route component={NotFoundPage}/> <Route component={NotFoundPage}/>

15
monkey/monkey_island/cc/ui/src/components/layouts/DisabledSidebarLayoutComponent.tsx
View File

@ -1,15 +0,0 @@
import React from 'react';
import {Route} from 'react-router-dom';
import SideNavComponent from '../SideNavComponent.tsx';
import {Col, Row} from 'react-bootstrap';
export const DisabledSidebarLayoutComponent = ({component: Component, ...rest}) => (
<Route {...rest} render={() => (
<Row>
<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
<SideNavComponent disabled={true} completedSteps={rest['completedSteps']}/>
</Col>
<Component {...rest} />
</Row>
)}/>
)

22
monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import {Route} from 'react-router-dom';
import SideNavComponent from '../SideNavComponent.tsx';
import {Col, Row} from 'react-bootstrap';
const SidebarLayoutComponent = ({component: Component,
sideNavDisabled = false,
completedSteps = null,
...other
}) => (
<Route {...other} render={() => {
return (
<Row>
<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
<SideNavComponent disabled={sideNavDisabled} completedSteps={completedSteps}/>
</Col>
<Component {...other} />
</Row>)
}}/>
)
export default SidebarLayoutComponent;

15
monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js
View File

@ -1,15 +0,0 @@
import React from 'react'
import {Route} from 'react-router-dom'
import SideNavComponent from '../SideNavComponent.tsx'
import {Col, Row} from 'react-bootstrap';
export const StandardLayoutComponent = ({component: Component, ...rest}) => (
<Route {...rest} render={() => (
<Row>
<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
<SideNavComponent completedSteps={rest['completedSteps']}/>
</Col>
<Component {...rest} />
</Row>
)}/>
)