From 05428cc937ef6168cdea052cf93947d57a9fbc55 Mon Sep 17 00:00:00 2001 From: Mark Peace Date: Fri, 11 May 2018 14:07:44 +0100 Subject: [PATCH 1/2] Add auto refresh to sysinfo frame --- .../modules/Stream/AutoRefresh/styled.jsx | 66 ++++++++++++++++++ .../Stream/AutoRefresh/toggleStyles.css | 51 ++++++++++++++ .../modules/Stream/Queries/QueriesFrame.jsx | 6 +- src/browser/modules/Stream/Queries/styled.jsx | 45 ------------ .../modules/Stream/SysInfoFrame/index.jsx | 69 +++++++++++++++++-- 5 files changed, 183 insertions(+), 54 deletions(-) create mode 100644 src/browser/modules/Stream/AutoRefresh/styled.jsx create mode 100644 src/browser/modules/Stream/AutoRefresh/toggleStyles.css diff --git a/src/browser/modules/Stream/AutoRefresh/styled.jsx b/src/browser/modules/Stream/AutoRefresh/styled.jsx new file mode 100644 index 00000000000..7d81f9f98e5 --- /dev/null +++ b/src/browser/modules/Stream/AutoRefresh/styled.jsx @@ -0,0 +1,66 @@ +/* + * Copyright (c) 2002-2018 "Neo4j, Inc" + * Network Engine for Objects in Lund AB [http://neotechnology.com] + * + * This file is part of Neo4j. + * + * Neo4j is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import styled from 'styled-components' +import { FrameButton } from 'browser-components/buttons' +import styles from './toggleStyles.css' + +export const StatusbarWrapper = styled.div`width: 100%;` + +export const StyledStatusBar = styled.div` + min-height: 39px; + line-height: 39px; + color: #788185; + background-color: #fff; + white-space: nowrap; + font-size: 13px; + position: relative; + float: right; + overflow: hidden; + border-top: 1px solid #e6e9ef; + margin-bottom: -39px; + padding-left: 16px; + margin-top: 0; + width: 100%; +` + +export const RefreshQueriesButton = styled(FrameButton)`float: right;` + +export const AutoRefreshSpan = styled.span` + float: right; + margin-right: 5px; +` + +const ToggleLabel = styled.label`cursor: pointer;` + +export const AutoRefreshToggle = props => { + return ( + + AUTO-REFRESH   + + + + ) +} diff --git a/src/browser/modules/Stream/AutoRefresh/toggleStyles.css b/src/browser/modules/Stream/AutoRefresh/toggleStyles.css new file mode 100644 index 00000000000..1d24976df8d --- /dev/null +++ b/src/browser/modules/Stream/AutoRefresh/toggleStyles.css @@ -0,0 +1,51 @@ +.toggle-check-input { + width: 1px; + height: 1px; + position: absolute; + display:none; +} + +.toggle-check-text { + display: inline-block; + position: relative; + text-transform: uppercase; + background: #CCC; + padding: 0.25em 0.5em 0.25em 1.75em; + border-radius: 1em; + width: 50px; + height: 21px; + color: #FFF; + cursor: pointer; + transition: background-color 0.15s; + line-height: initial; +} +.toggle-check-text:after { + content: ' '; + display: block; + background: #FFF; + width: 1.1em; + height: 1.1em; + border-radius: 1em; + position: absolute; + left: 0.3em; + top: 0.25em; + transition: left 0.15s, margin-left 0.15s; +} +.toggle-check-text:before { + font-size: 90%; + content: 'OFF'; +} +.toggle-check-input:checked ~ .toggle-check-text { + color: #319113; + padding-left: 0.5em; + padding-right: 2em; +} +.toggle-check-input:checked ~ .toggle-check-text:before { + font-size: 90%; + content: 'ON'; +} + +.toggle-check-input:checked ~ .toggle-check-text:after { + left: 100%; + margin-left: -1.4em; +} \ No newline at end of file diff --git a/src/browser/modules/Stream/Queries/QueriesFrame.jsx b/src/browser/modules/Stream/Queries/QueriesFrame.jsx index b131a0411bb..509e7f30182 100644 --- a/src/browser/modules/Stream/Queries/QueriesFrame.jsx +++ b/src/browser/modules/Stream/Queries/QueriesFrame.jsx @@ -43,13 +43,15 @@ import { StyledHeaderRow, StyledTable, StyledTd, - Code, + Code +} from './styled' +import { StyledStatusBar, AutoRefreshToggle, RefreshQueriesButton, AutoRefreshSpan, StatusbarWrapper -} from './styled' +} from '../AutoRefresh/styled' import { EnterpriseOnlyFrame } from 'browser-components/EditionView' import { RefreshIcon } from 'browser-components/icons/Icons' import Render from 'browser-components/Render' diff --git a/src/browser/modules/Stream/Queries/styled.jsx b/src/browser/modules/Stream/Queries/styled.jsx index dce2b45f9ab..6c3309061e9 100644 --- a/src/browser/modules/Stream/Queries/styled.jsx +++ b/src/browser/modules/Stream/Queries/styled.jsx @@ -19,8 +19,6 @@ */ import styled from 'styled-components' -import { FrameButton } from 'browser-components/buttons' -import styles from './toggleStyles.css' export const Code = styled.code` white-space: nowrap; @@ -51,46 +49,3 @@ export const StyledHeaderRow = styled.tr` border-top: ${props => props.theme.inFrameBorder}; border-bottom: ${props => props.theme.inFrameBorder}; ` - -export const StatusbarWrapper = styled.div`width: 100%;` - -export const StyledStatusBar = styled.div` - min-height: 39px; - line-height: 39px; - color: #788185; - background-color: #fff; - white-space: nowrap; - font-size: 13px; - position: relative; - float: right; - overflow: hidden; - border-top: 1px solid #e6e9ef; - margin-bottom: -39px; - padding-left: 16px; - margin-top: 0; - width: 100%; -` - -export const RefreshQueriesButton = styled(FrameButton)`float: right;` - -export const AutoRefreshSpan = styled.span` - float: right; - margin-right: 5px; -` - -const ToggleLabel = styled.label`cursor: pointer;` - -export const AutoRefreshToggle = props => { - return ( - - AUTO-REFRESH   - - - - ) -} diff --git a/src/browser/modules/Stream/SysInfoFrame/index.jsx b/src/browser/modules/Stream/SysInfoFrame/index.jsx index f9ee6e0b267..f30c840c44f 100644 --- a/src/browser/modules/Stream/SysInfoFrame/index.jsx +++ b/src/browser/modules/Stream/SysInfoFrame/index.jsx @@ -25,6 +25,7 @@ import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck' import { isACausalCluster } from 'shared/modules/features/featuresDuck' import { isConnected } from 'shared/modules/connections/connectionsDuck' import FrameTemplate from 'browser/modules/Stream/FrameTemplate' + import FrameError from 'browser/modules/Stream/FrameError' import { SysInfoTableContainer, @@ -34,19 +35,28 @@ import { import { toHumanReadableBytes } from 'services/utils' import { mapSysInfoRecords, getTableDataFromRecords } from './sysinfo' import Render from 'browser-components/Render' -import { QuestionIcon } from 'browser-components/icons/Icons' +import { QuestionIcon, RefreshIcon } from 'browser-components/icons/Icons' +import { + StyledStatusBar, + AutoRefreshToggle, + RefreshQueriesButton, + AutoRefreshSpan, + StatusbarWrapper +} from '../AutoRefresh/styled' export class SysInfoFrame extends Component { constructor (props) { super(props) this.state = { error: '', - results: false + results: false, + success: null, + autoRefreshInterval: 20 // seconds } } clusterResponseHandler (res) { if (!res.success) { - this.setState({ error: 'No causal cluster results' }) + this.setState({ error: 'No causal cluster results', success: false }) return } const mappedResult = mapSysInfoRecords(res.result.records) @@ -67,11 +77,11 @@ export class SysInfoFrame extends Component { ] }) - this.setState({ cc: [{ value: mappedTableComponents }] }) + this.setState({ cc: [{ value: mappedTableComponents }], success: true }) } responseHandler (res) { if (!res.success) { - this.setState({ error: 'No results' }) + this.setState({ error: 'No results', success: false }) return } const { ha, kernel, cache, tx, primitive } = getTableDataFromRecords( @@ -195,10 +205,27 @@ export class SysInfoFrame extends Component { { label: 'Peak', value: tx.PeakNumberOfConcurrentTransactions }, { label: 'Opened', value: tx.NumberOfOpenedTransactions }, { label: 'Committed', value: tx.NumberOfCommittedTransactions } - ] + ], + success: true }) } componentDidMount () { + this.getSysInfo() + } + componentDidUpdate (prevProps, prevState) { + if (prevState.autoRefresh !== this.state.autoRefresh) { + if (this.state.autoRefresh) { + console.log('update') + this.timer = setInterval( + this.getSysInfo.bind(this), + this.state.autoRefreshInterval * 1000 + ) + } else { + clearInterval(this.timer) + } + } + } + getSysInfo () { if (this.props.bus && this.props.isConnected) { this.props.bus.self( CYPHER_REQUEST, @@ -220,6 +247,14 @@ export class SysInfoFrame extends Component { this.setState({ error: 'No connection available' }) } } + setAutoRefresh (autoRefresh) { + this.setState({ autoRefresh: autoRefresh }) + + if (autoRefresh) { + console.log('refresh') + this.getSysInfo() + } + } buildTableData (data) { if (!data) return null return data.map(props => { @@ -281,7 +316,27 @@ export class SysInfoFrame extends Component { } + statusbar={ + + + + + + + {this.state.success} + this.getSysInfo()}> + + + + this.setAutoRefresh(e.target.checked)} + /> + + + + + } /> ) } From 845c414c7ba5d4a9c706cc8ba6772819960ed205 Mon Sep 17 00:00:00 2001 From: Mark Peace Date: Tue, 15 May 2018 11:06:45 +0100 Subject: [PATCH 2/2] Remove debugging code --- src/browser/modules/Stream/SysInfoFrame/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/browser/modules/Stream/SysInfoFrame/index.jsx b/src/browser/modules/Stream/SysInfoFrame/index.jsx index f30c840c44f..d0b5c1a7165 100644 --- a/src/browser/modules/Stream/SysInfoFrame/index.jsx +++ b/src/browser/modules/Stream/SysInfoFrame/index.jsx @@ -215,7 +215,6 @@ export class SysInfoFrame extends Component { componentDidUpdate (prevProps, prevState) { if (prevState.autoRefresh !== this.state.autoRefresh) { if (this.state.autoRefresh) { - console.log('update') this.timer = setInterval( this.getSysInfo.bind(this), this.state.autoRefreshInterval * 1000 @@ -251,7 +250,6 @@ export class SysInfoFrame extends Component { this.setState({ autoRefresh: autoRefresh }) if (autoRefresh) { - console.log('refresh') this.getSysInfo() } }