lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: remove status section of the machine status table

Browse source 
fix: remove unnecessary JSX fragment
This commit is contained in:
Sérgio Salgado 2021-02-03 16:54:42 +00:00 • committed by Josh Harvey
parent 71cf10f73c
commit ae92b583f6
2 changed files with 255 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

421
new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js
View file

@ -1,16 +1,16 @@
import { useMutation, useLazyQuery } from '@apollo/react-hooks' import { useMutation, useLazyQuery } from '@apollo/react-hooks'
import { Grid, Divider } from '@material-ui/core' import { Grid /*, Divider */ } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import moment from 'moment' import moment from 'moment'
import React, { useState } from 'react' import React, { useState } from 'react'
import { ConfirmDialog } from 'src/components/ConfirmDialog' import { ConfirmDialog } from 'src/components/ConfirmDialog'
import { Status } from 'src/components/Status' // import { Status } from 'src/components/Status'
import ActionButton from 'src/components/buttons/ActionButton' import ActionButton from 'src/components/buttons/ActionButton'
import { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg' import { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg' import { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg' // import { ReactComponent as LinkIcon } from 'src/styling/icons/button/link/zodiac.svg'
import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg' import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg'
import { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg' import { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg'
import { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg' import { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg'
@ -42,16 +42,16 @@ const MACHINE = gql`
} }
` `
const supportArtices = [ // const supportArtices = [
{ // {
// Default article for non-maped statuses // // Default article for non-maped statuses
code: undefined, // code: undefined,
label: 'Troubleshooting', // label: 'Troubleshooting',
article: // article:
'https://support.lamassu.is/hc/en-us/categories/115000075249-Troubleshooting' // 'https://support.lamassu.is/hc/en-us/categories/115000075249-Troubleshooting'
} // }
// TODO add Stuck and Fully Functional statuses articles for the new-admins // // TODO add Stuck and Fully Functional statuses articles for the new-admins
] // ]
const isStaticState = machineState => { const isStaticState = machineState => {
if (!machineState) { if (!machineState) {
@ -71,8 +71,8 @@ const isStaticState = machineState => {
return staticStates.includes(machineState) return staticStates.includes(machineState)
} }
const article = ({ code: status }) => // const article = ({ code: status }) =>
supportArtices.find(({ code: article }) => article === status) // supportArtices.find(({ code: article }) => article === status)
const useLStyles = makeStyles(labelStyles) const useLStyles = makeStyles(labelStyles)
@ -142,166 +142,243 @@ const MachineDetailsRow = ({ it: machine, onActionSuccess }) => {
const disabled = !!(action?.command === 'restartServices' && loadingEvents) const disabled = !!(action?.command === 'restartServices' && loadingEvents)
return ( return (
<> <Container className={classes.wrapper}>
<Container className={classes.wrapper}> {/* <Item xs={5}>
<Item xs={5}> <Container>
<Container> <Item>
<Item> <Label>Statuses</Label>
<Label>Statuses</Label> <ul className={classes.list}>
<ul className={classes.list}> {machine.statuses.map((status, index) => (
{machine.statuses.map((status, index) => ( <li className={classes.item} key={index}>
<Status status={status} />
</li>
))}
</ul>
</Item>
<Item>
<Label>Lamassu Support article</Label>
<ul className={classes.list}>
{machine.statuses
.map(article)
.map(({ label, article }, index) => (
<li className={classes.item} key={index}> <li className={classes.item} key={index}>
<Status status={status} /> <a
className={classes.link}
target="_blank"
rel="noopener noreferrer"
href={article}>
'{label}' <LinkIcon />
</a>
</li> </li>
))} ))}
</ul> </ul>
</Item> </Item>
<Item> </Container>
<Label>Lamassu Support article</Label> </Item>
<ul className={classes.list}> <Divider
{machine.statuses orientation="vertical"
.map(article) flexItem
.map(({ label, article }, index) => ( className={classes.separator}
<li className={classes.item} key={index}> /> */}
<a <ConfirmDialog
className={classes.link} disabled={disabled}
target="_blank" open={confirmDialogOpen}
rel="noopener noreferrer" title={`${action?.display} this machine?`}
href={article}> errorMessage={errorMessage}
'{label}' <LinkIcon /> toBeConfirmed={machine.name}
</a> message={action?.message}
</li> confirmationMessage={action?.confirmationMessage}
))} saveButtonAlwaysEnabled={action?.command === 'rename'}
</ul> onConfirmed={value => {
</Item> setErrorMessage(null)
</Container> machineAction({
</Item> variables: {
<Divider deviceId: machine.deviceId,
orientation="vertical" action: `${action?.command}`,
flexItem ...(action?.command === 'rename' && { newName: value })
className={classes.separator} }
/> })
<ConfirmDialog }}
disabled={disabled} onDissmised={() => {
open={confirmDialogOpen} setAction({ command: null })
title={`${action?.display} this machine?`} setErrorMessage(null)
errorMessage={errorMessage} }}
toBeConfirmed={machine.name} />
message={action?.message} <Item xs>
confirmationMessage={action?.confirmationMessage} <Container className={classes.row}>
saveButtonAlwaysEnabled={action?.command === 'rename'} <Item xs={2}>
onConfirmed={value => { <Label>Machine Model</Label>
setErrorMessage(null) <span>{machine.model}</span>
machineAction({ </Item>
variables: { <Item xs={4}>
deviceId: machine.deviceId, <Label>Paired at</Label>
action: `${action?.command}`, <span>
...(action?.command === 'rename' && { newName: value }) {moment(machine.pairedAt).format('YYYY-MM-DD HH:mm:ss')}
} </span>
}) </Item>
}} <Item xs={6}>
onDissmised={() => { <Label>Actions</Label>
setAction({ command: null }) <div className={classes.stack}>
setErrorMessage(null) <ActionButton
}} className={classes.mr}
/> disabled={loading}
<Item xs> color="primary"
<Container className={classes.row}> Icon={EditIcon}
<Item xs={4}> InverseIcon={EditReversedIcon}
<Label>Machine Model</Label> onClick={() =>
<span>{machine.model}</span> setAction({
</Item> command: 'rename',
<Item xs={4}> display: 'Rename',
<Label>Paired at</Label> confirmationMessage: 'Write the new name for this machine'
<span> })
{moment(machine.pairedAt).format('YYYY-MM-DD HH:mm:ss')} }>
</span> Rename
</Item> </ActionButton>
</Container> <ActionButton
<Container> color="primary"
<Item> className={classes.mr}
<Label>Actions</Label> Icon={UnpairIcon}
<div className={classes.stack}> InverseIcon={UnpairReversedIcon}
<ActionButton disabled={loading}
className={classes.mr} onClick={() =>
disabled={loading} setAction({
color="primary" command: 'unpair',
Icon={EditIcon} display: 'Unpair'
InverseIcon={EditReversedIcon} })
onClick={() => }>
setAction({ Unpair
command: 'rename', </ActionButton>
display: 'Rename', <ActionButton
confirmationMessage: 'Write the new name for this machine' color="primary"
}) className={classes.mr}
}> Icon={RebootIcon}
Rename InverseIcon={RebootReversedIcon}
</ActionButton> disabled={loading}
<ActionButton onClick={() =>
color="primary" setAction({
className={classes.mr} command: 'reboot',
Icon={UnpairIcon} display: 'Reboot'
InverseIcon={UnpairReversedIcon} })
disabled={loading} }>
onClick={() => Reboot
setAction({ </ActionButton>
command: 'unpair', <ActionButton
display: 'Unpair' className={classes.mr}
}) disabled={loading}
}> color="primary"
Unpair Icon={ShutdownIcon}
</ActionButton> InverseIcon={ShutdownReversedIcon}
<ActionButton onClick={() =>
color="primary" setAction({
className={classes.mr} command: 'shutdown',
Icon={RebootIcon} display: 'Shutdown',
InverseIcon={RebootReversedIcon} message:
disabled={loading} 'In order to bring it back online, the machine will need to be visited and its power reset.'
onClick={() => })
setAction({ }>
command: 'reboot', Shutdown
display: 'Reboot' </ActionButton>
}) <ActionButton
}> color="primary"
Reboot className={classes.inlineChip}
</ActionButton> Icon={RebootIcon}
<ActionButton InverseIcon={RebootReversedIcon}
className={classes.mr} disabled={loading}
disabled={loading} onClick={() => {
color="primary" fetchMachineEvents()
Icon={ShutdownIcon} setAction({
InverseIcon={ShutdownReversedIcon} command: 'restartServices',
onClick={() => display: 'Restart services for'
setAction({ })
command: 'shutdown', }}>
display: 'Shutdown', Restart Services
message: </ActionButton>
'In order to bring it back online, the machine will need to be visited and its power reset.' </div>
}) </Item>
}> </Container>
Shutdown {/* <Container>
</ActionButton> <Item>
<ActionButton <Label>Actions</Label>
color="primary" <div className={classes.stack}>
className={classes.inlineChip} <ActionButton
Icon={RebootIcon} className={classes.mr}
InverseIcon={RebootReversedIcon} disabled={loading}
disabled={loading} color="primary"
onClick={() => { Icon={EditIcon}
fetchMachineEvents() InverseIcon={EditReversedIcon}
setAction({ onClick={() =>
command: 'restartServices', setAction({
display: 'Restart services for' command: 'rename',
}) display: 'Rename',
}}> confirmationMessage: 'Write the new name for this machine'
Restart Services })
</ActionButton> }>
</div> Rename
</Item> </ActionButton>
</Container> <ActionButton
</Item> color="primary"
</Container> className={classes.mr}
</> Icon={UnpairIcon}
InverseIcon={UnpairReversedIcon}
disabled={loading}
onClick={() =>
setAction({
command: 'unpair',
display: 'Unpair'
})
}>
Unpair
</ActionButton>
<ActionButton
color="primary"
className={classes.mr}
Icon={RebootIcon}
InverseIcon={RebootReversedIcon}
disabled={loading}
onClick={() =>
setAction({
command: 'reboot',
display: 'Reboot'
})
}>
Reboot
</ActionButton>
<ActionButton
className={classes.mr}
disabled={loading}
color="primary"
Icon={ShutdownIcon}
InverseIcon={ShutdownReversedIcon}
onClick={() =>
setAction({
command: 'shutdown',
display: 'Shutdown',
message:
'In order to bring it back online, the machine will need to be visited and its power reset.'
})
}>
Shutdown
</ActionButton>
<ActionButton
color="primary"
className={classes.inlineChip}
Icon={RebootIcon}
InverseIcon={RebootReversedIcon}
disabled={loading}
onClick={() => {
fetchMachineEvents()
setAction({
command: 'restartServices',
display: 'Restart services for'
})
}}>
Restart Services
</ActionButton>
</div>
</Item>
</Container> */}
</Item>
</Container>
) )
} }

10
new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js
View file

@ -29,14 +29,16 @@ const machineDetailsStyles = {
}, },
wrapper: { wrapper: {
display: 'flex', display: 'flex',
marginTop: 24, // marginTop: 24,
marginBottom: 32, // marginBottom: 32,
marginTop: 12,
marginBottom: 16,
fontSize: fontSize4 fontSize: fontSize4
}, },
row: { row: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row'
marginBottom: 36 // marginBottom: 36
}, },
list: { list: {
padding: 0, padding: 0,