Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sysinfo cleanup #1472

Merged
merged 4 commits into from
Jul 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/browser/components/Tables.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const SysInfoTableContainer = styled.div`
padding: 30px;
width: 100%;
`
export const SysInfoTable = ({ header, colspan, children }: any) => {
export const StyledSysInfoTable = ({ header, colspan, children }: any) => {
return (
<StyledTable>
<thead>
Expand Down
30 changes: 15 additions & 15 deletions src/browser/modules/Stream/AutoRefresh/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
*/
import React from 'react'
import styled from 'styled-components'
import { FrameButton } from 'browser-components/buttons'
import styles from './toggleStyles.css'

export const StatusbarWrapper = styled.div`
Expand Down Expand Up @@ -48,17 +47,18 @@ const ToggleLabel = styled.label`
cursor: pointer;
`

export const AutoRefreshToggle = (props: any) => {
return (
<ToggleLabel>
AUTO-REFRESH &nbsp;
<input
type="checkbox"
checked={props.checked}
onChange={props.onChange}
className={styles['toggle-check-input']}
/>
<span className={styles['toggle-check-text']} />
</ToggleLabel>
)
}
export const AutoRefreshToggle = (props: {
checked: boolean
onChange: React.ChangeEventHandler<HTMLInputElement>
}): JSX.Element => (
<ToggleLabel>
AUTO-REFRESH &nbsp;
<input
type="checkbox"
checked={props.checked}
onChange={props.onChange}
className={styles['toggle-check-input']}
/>
<span className={styles['toggle-check-text']} />
</ToggleLabel>
)
2 changes: 1 addition & 1 deletion src/browser/modules/Stream/Stream.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import HelpFrame from './HelpFrame'
import CypherScriptFrame from './CypherScriptFrame/CypherScriptFrame'
import SchemaFrame from './SchemaFrame'
import StyleFrame from './StyleFrame'
import SysInfoFrame from './SysInfoFrame'
import SysInfoFrame from './SysInfoFrame/SysInfoFrame'
import ConnectionFrame from './Auth/ConnectionFrame'
import DisconnectFrame from './Auth/DisconnectFrame'
import ServerStatusFrame from './Auth/ServerStatusFrame'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,20 @@

import React from 'react'
import { render } from '@testing-library/react'
import { SysInfoFrame } from './index'
import { SysInfoFrame } from './SysInfoFrame'
import { Frame } from 'shared/modules/stream/streamDuck'
import { Bus } from 'suber'
import { Database } from 'shared/modules/dbMeta/dbMetaDuck'

const baseProps = {
databases: [],
bus: ({ self: () => undefined } as unknown) as Bus,
frame: {} as Frame,
hasMultiDbSupport: true,
isConnected: true,
isEnterprise: true,
useDb: 'neo4j'
}

jest.mock(
'browser/modules/Frame/FrameTemplate',
Expand All @@ -34,27 +47,12 @@ jest.mock(
)

describe('sysinfo component', () => {
test('should render causal cluster table', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's the reason for removing this test?

// Given
const props = { isACausalCluster: true, isConnected: true }

// When
const { getByText, container } = render(<SysInfoFrame {...props} />)

// Then
expect(getByText('Causal Cluster Members')).not.toBeNull()
expect(
container.querySelector(
'[data-testid="sysinfo-casual-cluster-members-title"]'
)
).not.toBeNull()
})
test('should not render causal cluster table', () => {
// Given
const props = { isACausalCluster: false, isConnected: true }

// When
const { queryByTestId } = render(<SysInfoFrame {...props} />)
const { queryByTestId } = render(<SysInfoFrame {...baseProps} {...props} />)

// Then
expect(queryByTestId('sysinfo-casual-cluster-members-title')).toBeNull()
Expand All @@ -65,7 +63,7 @@ describe('sysinfo component', () => {
const props = { isConnected: false }

// When
const { getByText } = render(<SysInfoFrame {...props} />)
const { getByText } = render(<SysInfoFrame {...baseProps} {...props} />)

// Then
expect(getByText(/No connection available/i)).not.toBeNull()
Expand All @@ -76,7 +74,7 @@ describe('sysinfo component', () => {
const databases = [
{ name: 'neo4j', address: '0.0.0.0:7687', status: 'online' },
{ name: 'system', address: '0.0.0.0:7687', status: 'online' }
]
] as Database[]
const props = {
isConnected: true,
isEnterprise: true,
Expand All @@ -85,7 +83,7 @@ describe('sysinfo component', () => {
}

// When
const { queryByText } = render(<SysInfoFrame {...props} />)
const { queryByText } = render(<SysInfoFrame {...baseProps} {...props} />)

// Then
expect(queryByText('Databases')).not.toBeNull()
Expand All @@ -106,7 +104,7 @@ describe('sysinfo component', () => {
const databases = [
{ name: 'neo4j', address: '0.0.0.0:7687', status: 'online' },
{ name: 'system', address: '0.0.0.0:7687', status: 'online' }
]
] as Database[]
const props = {
isConnected: true,
isEnterprise: false,
Expand All @@ -115,7 +113,7 @@ describe('sysinfo component', () => {
}

// When
const { queryByText } = render(<SysInfoFrame {...props} />)
const { queryByText } = render(<SysInfoFrame {...baseProps} {...props} />)

// Then
expect(queryByText('Databases')).not.toBeNull()
Expand Down
205 changes: 205 additions & 0 deletions src/browser/modules/Stream/SysInfoFrame/SysInfoFrame.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
/*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we perhaps use git commands to rename this file? As it stands now, it looks like we'll lose the commit history on this file after it was renamed...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking a single commit that only renamed would be enough, I'll try git mv!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to me from this stack overflow thread it doesn't matter if I use git mv instead? https://stackoverflow.com/questions/2314652/is-it-possible-to-move-rename-files-in-git-and-maintain-their-history

* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.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 React, { Component, ReactNode } from 'react'
import { connect } from 'react-redux'
import { withBus } from 'react-suber'
import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
import { Database, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
import {
isConnected,
getUseDb
} from 'shared/modules/connections/connectionsDuck'
import FrameTemplate from 'browser/modules/Frame/FrameTemplate'
import FrameError from 'browser/modules/Frame/FrameError'
import {
StyledStatusBar,
AutoRefreshToggle,
AutoRefreshSpan,
StatusbarWrapper
} from '../AutoRefresh/styled'
import { NEO4J_BROWSER_USER_ACTION_QUERY } from 'services/bolt/txMetadata'
import { hasMultiDbSupport } from 'shared/modules/features/versionedFeatures'
import { ErrorsView } from '../CypherFrame/ErrorsView'
import { getDatabases } from 'shared/modules/dbMeta/dbMetaDuck'
import * as legacyHelpers from './legacyHelpers'
import * as helpers from './helpers'
import { SysInfoTable } from './SysInfoTable'
import { Bus } from 'suber'
import { GlobalState } from 'shared/globalState'
import { Frame } from 'shared/modules/stream/streamDuck'

export type DatabaseMetric = { label: string; value?: string }
export type SysInfoFrameState = {
lastFetch?: null | number
storeSizes: DatabaseMetric[]
idAllocation: DatabaseMetric[]
pageCache: DatabaseMetric[]
transactions: DatabaseMetric[]
error: string
results: boolean
success: boolean
autoRefresh: boolean
autoRefreshInterval: number
}

type SysInfoFrameProps = {
bus: Bus
databases: Database[]
frame: Frame
hasMultiDbSupport: boolean
isConnected: boolean
isEnterprise: boolean
useDb: string | null
}

export class SysInfoFrame extends Component<
SysInfoFrameProps,
SysInfoFrameState
> {
timer: number | null = null
state: SysInfoFrameState = {
lastFetch: null,
storeSizes: [],
idAllocation: [],
pageCache: [],
transactions: [],
error: '',
results: false,
success: false,
autoRefresh: false,
autoRefreshInterval: 20 // seconds
}
helpers = this.props.hasMultiDbSupport ? helpers : legacyHelpers

componentDidMount(): void {
this.getSysInfo()
}

componentDidUpdate(
_prevProps: SysInfoFrameProps,
prevState: SysInfoFrameState
): void {
if (prevState.autoRefresh !== this.state.autoRefresh) {
if (this.state.autoRefresh) {
this.timer = setInterval(
this.getSysInfo.bind(this),
this.state.autoRefreshInterval * 1000
)
} else {
this.timer && clearInterval(this.timer)
}
}
}

getSysInfo(): void {
const { bus, isConnected, useDb } = this.props
const { sysinfoQuery, responseHandler } = this.helpers

if (bus && isConnected) {
this.setState({ lastFetch: Date.now() })
bus.self(
CYPHER_REQUEST,
{
query: sysinfoQuery(useDb),
queryType: NEO4J_BROWSER_USER_ACTION_QUERY
},
responseHandler(newState => {
this.setState(newState)
}, useDb)
)
} else {
this.setState({ error: 'No connection available' })
}
}

setAutoRefresh(autoRefresh: boolean): void {
this.setState({ autoRefresh })

if (autoRefresh) {
this.getSysInfo()
}
}

render(): ReactNode {
const {
autoRefresh,
error,
idAllocation,
lastFetch,
pageCache,
storeSizes,
success,
transactions
} = this.state
const { databases, frame, isConnected, isEnterprise } = this.props

const content = !isConnected ? (
<ErrorsView
result={{ code: 'No connection', message: 'No connection available' }}
/>
) : (
<SysInfoTable
pageCache={pageCache}
storeSizes={storeSizes}
idAllocation={idAllocation}
transactions={transactions}
databases={databases}
isEnterpriseEdition={isEnterprise}
/>
)

return (
<FrameTemplate
header={frame}
contents={content}
statusbar={
<StatusbarWrapper>
{error && <FrameError message={error} />}
{success && (
<StyledStatusBar>
{lastFetch && `Updated: ${new Date(lastFetch).toISOString()}`}

{success}

<AutoRefreshSpan>
<AutoRefreshToggle
checked={autoRefresh}
onChange={e => this.setAutoRefresh(e.target.checked)}
/>
</AutoRefreshSpan>
</StyledStatusBar>
)}
</StatusbarWrapper>
}
/>
)
}
}

const mapStateToProps = (state: GlobalState) => ({
hasMultiDbSupport: hasMultiDbSupport(state),
isEnterprise: isEnterprise(state),
isConnected: isConnected(state),
databases: getDatabases(state),
useDb: getUseDb(state)
})

export default withBus(connect(mapStateToProps)(SysInfoFrame))
Loading