diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/Header.js | 28 | ||||
| -rw-r--r-- | frontend/src/components/Header.scss | 17 | ||||
| -rw-r--r-- | frontend/src/components/Timeline.js | 2 | ||||
| -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 | ||||
| -rw-r--r-- | frontend/src/components/panels/StreamsPane.scss | 6 |
8 files changed, 90 insertions, 78 deletions
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index c46d768..4db05a5 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -46,19 +46,17 @@ class Header extends Component { render() { return ( - <header className="header container-fluid"> - <div className="row"> - <div className={classNames({"col-auto": this.props.configured, "col": !this.props.configured})}> - <h1 className="header-title type-wrap"> - <Link to="/"> - <span style={{whiteSpace: "pre"}} ref={(el) => { - this.el = el; - }}/> - </Link> - </h1> - </div> + <header className={classNames("header", {"configured": this.props.configured})}> + <div className="header-content"> + <h1 className="header-title type-wrap"> + <Link to="/"> + <span style={{whiteSpace: "pre"}} ref={(el) => { + this.el = el; + }}/> + </Link> + </h1> - {this.props.configured && <div className="col-auto"> + {this.props.configured && <div className="filters-bar"> <StringConnectionsFilter filterName="service_port" defaultFilterValue="all_ports" @@ -71,9 +69,9 @@ class Header extends Component { <ExitSearchFilter/> <AdvancedFilters onClick={this.props.onOpenFilters}/> </div> - </div>} + } - {this.props.configured && <div className="col"> + {this.props.configured && <div className="header-buttons"> <Link to={"/searches" + this.props.location.search}> <ButtonField variant="pink" name="searches" bordered/> @@ -91,7 +89,7 @@ class Header extends Component { <ButtonField variant="blue" name="config" bordered/> </Link> </div> - </div>} + } </div> </header> ); diff --git a/frontend/src/components/Header.scss b/frontend/src/components/Header.scss index fff28e6..c6a88b7 100644 --- a/frontend/src/components/Header.scss +++ b/frontend/src/components/Header.scss @@ -1,16 +1,18 @@ @import "../colors"; .header { - height: 80px; - padding: 15px 30px; + padding: 15px; - > .row { + .header-content { + display: flex; + width: 100%; + padding: 0 10px; background-color: $color-primary-0; } .header-title { width: 200px; - margin: 5px 0 5px -5px; + margin: 5px 0 5px 0; } .header-buttons { @@ -24,6 +26,7 @@ } .filters-bar { + flex: 1; padding: 3px 0; .filter, @@ -38,4 +41,10 @@ border-radius: 5px; } } + + @media screen and (max-width: 1530px) { + &.configured .header-title { + display: none; + } + } } diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index 9ecbd80..5443a3b 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -256,7 +256,7 @@ class Timeline extends Component { enablePanZoom={true} utc={false} onTimeRangeChanged={this.handleTimeRangeChange}> - <ChartRow height="125"> + <ChartRow height={this.props.height - 70}> <YAxis id="axis1" hideAxisLine min={this.aggregateSeries("min")} max={this.aggregateSeries("max")} width="35" type="linear" transition={300}/> 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; } diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss index 1f641f3..1d8a250 100644 --- a/frontend/src/components/panels/StreamsPane.scss +++ b/frontend/src/components/panels/StreamsPane.scss @@ -34,6 +34,9 @@ font-size: 11px; margin-top: 6px; margin-left: -10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .connection-message-actions { @@ -99,6 +102,9 @@ font-size: 12px; padding-top: 7px; padding-left: 25px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .header-actions { |