Merge pull request neo4j#757 from pe4cey/auto-refresh-sysinfo

Add auto refresh to sysinfo frame

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 <http://www.gnu.org/licenses/>.
+ */
+
+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 (
+    <ToggleLabel>
+      AUTO-REFRESH &nbsp;
+      <input
+        type='checkbox'
+        checked={props.checked}
+        onClick={props.onClick}
+        className={styles['toggle-check-input']}
+      />
+      <span className={styles['toggle-check-text']} />
+    </ToggleLabel>
+  )
+}

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;
+}

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'

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 (
-    <ToggleLabel>
-      AUTO-REFRESH &nbsp;
-      <input
-        type='checkbox'
-        checked={props.checked}
-        onClick={props.onClick}
-        className={styles['toggle-check-input']}
-      />
-      <span className={styles['toggle-check-text']} />
-    </ToggleLabel>
-  )
-}

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 {
         </Render>
       ]
     })
-    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 {
       <FrameTemplate
         header={this.props.frame}
         contents={content}
-        statusbar={<FrameError message={this.state.error} />}
+        statusbar={
+          <StatusbarWrapper>
+            <Render if={this.state.errors}>
+              <FrameError message={this.state.error} />
+            </Render>
+            <Render if={this.state.success}>
+              <StyledStatusBar>
+                {this.state.success}
+                <RefreshQueriesButton onClick={() => this.getSysInfo()}>
+                  <RefreshIcon />
+                </RefreshQueriesButton>
+                <AutoRefreshSpan>
+                  <AutoRefreshToggle
+                    checked={this.state.autoRefresh}
+                    onClick={e => this.setAutoRefresh(e.target.checked)}
+                  />
+                </AutoRefreshSpan>
+              </StyledStatusBar>
+            </Render>
+          </StatusbarWrapper>
+        }
       />
     )
   }