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 b5185449d56..467bf358c58 100644
--- a/src/browser/modules/Stream/Queries/QueriesFrame.jsx
+++ b/src/browser/modules/Stream/Queries/QueriesFrame.jsx
@@ -44,13 +44,15 @@ import {
StyledTable,
StyledTableWrapper,
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 23a7781552c..a39326e193a 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 bd23cc15c8b..0e36fc2c238 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(
@@ -198,10 +208,26 @@ 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) {
+ 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,
@@ -223,6 +249,13 @@ export class SysInfoFrame extends Component {
this.setState({ error: 'No connection available' })
}
}
+ setAutoRefresh (autoRefresh) {
+ this.setState({ autoRefresh: autoRefresh })
+
+ if (autoRefresh) {
+ this.getSysInfo()
+ }
+ }
buildTableData (data) {
if (!data) return null
return data.map(props => {
@@ -284,7 +317,27 @@ export class SysInfoFrame extends Component {
}
+ statusbar={
+
+
+
+
+
+
+ {this.state.success}
+ this.getSysInfo()}>
+
+
+
+ this.setAutoRefresh(e.target.checked)}
+ />
+
+
+
+
+ }
/>
)
}