diff options
Diffstat (limited to 'frontend/src/components/pages')
| -rw-r--r-- | frontend/src/components/pages/ConfigurationPage.scss | 9 | ||||
| -rw-r--r-- | frontend/src/components/pages/MainPage.js | 69 | ||||
| -rw-r--r-- | frontend/src/components/pages/MainPage.scss | 22 | ||||
| -rw-r--r-- | frontend/src/components/pages/common.scss | 15 |
4 files changed, 57 insertions, 58 deletions
diff --git a/frontend/src/components/pages/ConfigurationPage.scss b/frontend/src/components/pages/ConfigurationPage.scss index 4254547..2ceccd5 100644 --- a/frontend/src/components/pages/ConfigurationPage.scss +++ b/frontend/src/components/pages/ConfigurationPage.scss @@ -10,16 +10,10 @@ .configuration-pane { display: flex; justify-content: center; - height: 100%; - padding-top: 100px; .section-content { - background-color: $color-primary-3; margin-top: 15px; - } - - .section-table table { - background-color: red !important; + background-color: $color-primary-3; } .section-footer { @@ -27,4 +21,3 @@ } } } - diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js index c4dcd20..5d42f4d 100644 --- a/frontend/src/components/pages/MainPage.js +++ b/frontend/src/components/pages/MainPage.js @@ -16,6 +16,7 @@ */ import React, {Component} from "react"; +import {ReflexContainer, ReflexElement, ReflexSplitter} from "react-reflex"; import {Route, Switch} from "react-router-dom"; import Filters from "../dialogs/Filters"; import Header from "../Header"; @@ -29,10 +30,22 @@ import StreamsPane from "../panels/StreamsPane"; import Timeline from "../Timeline"; import "./common.scss"; import "./MainPage.scss"; +import 'react-reflex/styles.css' class MainPage extends Component { - state = {}; + state = { + timelineHeight: 175 + }; + + handleTimelineResize = (e) => { + if (this.timelineTimeoutHandle) { + clearTimeout(this.timelineTimeoutHandle); + } + + this.timelineTimeoutHandle = setTimeout(() => + this.setState({timelineHeight: e.domElement.clientHeight}), 100); + }; render() { let modal; @@ -41,34 +54,40 @@ class MainPage extends Component { } return ( - <div className="page main-page"> - <div className="page-header"> + <ReflexContainer orientation="horizontal" className="page main-page"> + <ReflexElement className="page-header"> <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/> - </div> + {modal} + </ReflexElement> - <div className="page-content"> - <div className="pane connections-pane"> - <Connections onSelected={(c) => this.setState({selectedConnection: c})}/> - </div> - <div className="pane details-pane"> - <Switch> - <Route path="/searches" children={<SearchPane/>}/> - <Route path="/pcaps" children={<PcapsPane/>}/> - <Route path="/rules" children={<RulesPane/>}/> - <Route path="/services" children={<ServicesPane/>}/> - <Route exact path="/connections/:id" - children={<StreamsPane connection={this.state.selectedConnection}/>}/> - <Route children={<MainPane version={this.props.version}/>}/> - </Switch> - </div> + <ReflexElement className="page-content" flex={1}> + <ReflexContainer orientation="vertical" className="page-content"> + <ReflexElement className="pane connections-pane"> + <Connections onSelected={(c) => this.setState({selectedConnection: c})}/> + </ReflexElement> - {modal} - </div> + <ReflexSplitter/> + + <ReflexElement className="pane details-pane"> + <Switch> + <Route path="/searches" children={<SearchPane/>}/> + <Route path="/pcaps" children={<PcapsPane/>}/> + <Route path="/rules" children={<RulesPane/>}/> + <Route path="/services" children={<ServicesPane/>}/> + <Route exact path="/connections/:id" + children={<StreamsPane connection={this.state.selectedConnection}/>}/> + <Route children={<MainPane version={this.props.version}/>}/> + </Switch> + </ReflexElement> + </ReflexContainer> + </ReflexElement> + + <ReflexSplitter propagate={true}/> - <div className="page-footer"> - <Timeline/> - </div> - </div> + <ReflexElement className="page-footer" onResize={this.handleTimelineResize}> + <Timeline height={this.state.timelineHeight}/> + </ReflexElement> + </ReflexContainer> ); } } diff --git a/frontend/src/components/pages/MainPage.scss b/frontend/src/components/pages/MainPage.scss index 4ca54c0..4fc5853 100644 --- a/frontend/src/components/pages/MainPage.scss +++ b/frontend/src/components/pages/MainPage.scss @@ -1,25 +1,25 @@ @import "../../colors"; .main-page { + .page-header { + min-height: 80px; + } + + .page-footer { + overflow: hidden !important; + min-height: 175px; + } + .page-content { - display: flex; - flex: 1; - padding: 0 15px; - background-color: $color-primary-2; + padding: 0 7.5px; .connections-pane { - flex: 1 0; margin-right: 7.5px; } .details-pane { - position: relative; - flex: 1 1; + overflow: hidden; margin-left: 7.5px; } } - - .page-footer { - flex: 0; - } } diff --git a/frontend/src/components/pages/common.scss b/frontend/src/components/pages/common.scss index fcf5c20..2b0cd05 100644 --- a/frontend/src/components/pages/common.scss +++ b/frontend/src/components/pages/common.scss @@ -1,16 +1,3 @@ .page { - position: relative; - display: flex; - flex-direction: column; - height: 100vh; - - .page-header, - .page-footer { - flex: 0; - } - - .page-content { - overflow: hidden; - flex: 1; - } + height: 100vh !important; } |