aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/pages
diff options
context:
space:
mode:
authorEmiliano Ciavatta2020-10-19 10:40:53 +0000
committerEmiliano Ciavatta2020-10-19 10:40:53 +0000
commit18287f888b0c3ae80422d4068c511614b55bfa6d (patch)
tree1afb5eab88efeee79a6b4a37aef1ce0061af89b5 /frontend/src/components/pages
parent3a96b841f06bb1049b0625c6d20e8f8f46c8f2ab (diff)
Add resizable layout
Diffstat (limited to 'frontend/src/components/pages')
-rw-r--r--frontend/src/components/pages/ConfigurationPage.scss9
-rw-r--r--frontend/src/components/pages/MainPage.js69
-rw-r--r--frontend/src/components/pages/MainPage.scss22
-rw-r--r--frontend/src/components/pages/common.scss15
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;
}