From 0d9d54efaf836741cfc649e5dbfe97401d22c70e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20F=C3=A9lix?= Date: Wed, 13 Nov 2019 13:01:49 +0000 Subject: [PATCH] refactor: move download popover to own component --- .../src/components/LogsDownloaderPopover.js | 134 +++++++++++++ .../src/pages/LogPageHeader.styles.js | 12 -- new-lamassu-admin/src/pages/Logs.styles.js | 8 +- new-lamassu-admin/src/pages/ServerLogs.js | 179 ++++-------------- 4 files changed, 173 insertions(+), 160 deletions(-) create mode 100644 new-lamassu-admin/src/components/LogsDownloaderPopover.js delete mode 100644 new-lamassu-admin/src/pages/LogPageHeader.styles.js diff --git a/new-lamassu-admin/src/components/LogsDownloaderPopover.js b/new-lamassu-admin/src/components/LogsDownloaderPopover.js new file mode 100644 index 00000000..9411ecc6 --- /dev/null +++ b/new-lamassu-admin/src/components/LogsDownloaderPopover.js @@ -0,0 +1,134 @@ +import React, { useState } from 'react' +import FileSaver from 'file-saver' +import classnames from 'classnames' +import { toInteger } from 'lodash/fp' +import moment from 'moment' +import { makeStyles } from '@material-ui/core' + +import typographyStyles from '../components/typography/styles' +import { primaryColor } from '../styling/variables' + +import { Link } from './buttons' +import { RadioGroup } from './inputs' +import Popover from './Popover' +import DateRangePicker from './date-range-picker/DateRangePicker' + +const { h4 } = typographyStyles + +const styles = { + popoverContent: { + minWidth: 315 + }, + popoverHeader: { + extend: h4, + padding: [[20, 15, 0, 15]] + }, + radioButtonsContainer: { + padding: [[10, 15, 10, 15]] + }, + radioButtons: { + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + color: primaryColor + }, + dateRangePickerShowing: { + display: 'block', + height: '100%' + }, + dateRangePickerHidden: { + display: 'none', + height: 0 + }, + download: { + padding: [[30, 15, 30, 15]] + } +} + +const useStyles = makeStyles(styles) + +const LogsDownloaderPopover = ({ id, open, anchorEl, onClose, logsResponse, ...props }) => { + const [radioButtons, setRadioButtons] = useState(0) + const [range, setRange] = useState(null) + + const classes = useStyles() + + const dateRangePickerClasses = { + [classes.dateRangePickerShowing]: radioButtons === 1, + [classes.dateRangePickerHidden]: radioButtons === 0 + } + + const formatDateFile = date => { + return moment(date).format('YYYY-MM-DD_HH-mm') + } + + const handleRadioButtons = (event) => { + setRadioButtons(toInteger(event.target.value)) + } + + const handleRangeChange = (from, to) => { + setRange({ from, to }) + } + + return ( + +
+
+ Download logs +
+
+ +
+ +
+ { + if (radioButtons === 0) { + const text = logsResponse.data.logs.map(it => JSON.stringify(it)).join('\n') + const blob = new window.Blob([text], { + type: 'text/plain;charset=utf-8' + }) + FileSaver.saveAs(blob, `${formatDateFile(new Date())}_server`) + } else if (radioButtons === 1 && range.from && range.to) { + const text = logsResponse.data.logs.filter((log) => moment(log.timestamp).isBetween(range.from, range.to, 'day', '[]')).map(it => JSON.stringify(it)).join('\n') + const blob = new window.Blob([text], { + type: 'text/plain;charset=utf-8' + }) + FileSaver.saveAs(blob, `${formatDateFile(range.from)}_${formatDateFile(range.to)}_server`) + } + }} + > + Download + +
+
+ + ) +} + +export default LogsDownloaderPopover diff --git a/new-lamassu-admin/src/pages/LogPageHeader.styles.js b/new-lamassu-admin/src/pages/LogPageHeader.styles.js deleted file mode 100644 index 166b83ff..00000000 --- a/new-lamassu-admin/src/pages/LogPageHeader.styles.js +++ /dev/null @@ -1,12 +0,0 @@ -export default { - titleAndButtonsContainer: { - display: 'flex' - }, - buttonsWrapper: { - display: 'flex', - marginLeft: 10, - '& > *': { - margin: 'auto 10px' - } - } -} diff --git a/new-lamassu-admin/src/pages/Logs.styles.js b/new-lamassu-admin/src/pages/Logs.styles.js index e0596f09..5f67194b 100644 --- a/new-lamassu-admin/src/pages/Logs.styles.js +++ b/new-lamassu-admin/src/pages/Logs.styles.js @@ -39,8 +39,14 @@ export default { button: { margin: 8 }, + titleAndButtonsContainer: { + display: 'flex' + }, buttonsWrapper: { display: 'flex', - alignItems: 'center' + marginLeft: 10, + '& > *': { + margin: 'auto 10px' + } } } diff --git a/new-lamassu-admin/src/pages/ServerLogs.js b/new-lamassu-admin/src/pages/ServerLogs.js index 98ef6789..3a1030a2 100644 --- a/new-lamassu-admin/src/pages/ServerLogs.js +++ b/new-lamassu-admin/src/pages/ServerLogs.js @@ -1,95 +1,49 @@ import React, { useState } from 'react' -import FileSaver from 'file-saver' -import classnames from 'classnames' -import { concat, uniq, toInteger } from 'lodash/fp' +import { concat, uniq, merge } from 'lodash/fp' import moment from 'moment' import useAxios from '@use-hooks/axios' import { makeStyles } from '@material-ui/core' import Title from '../components/Title' import { Info3 } from '../components/typography' -import { FeatureButton, SimpleButton, Link } from '../components/buttons' +import { FeatureButton, SimpleButton } from '../components/buttons' import { Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '../components/table' -import { Select, RadioGroup } from '../components/inputs' +import { Select } from '../components/inputs' import Uptime from '../components/Uptime' -import DateRangePicker from '../components/date-range-picker/DateRangePicker' -import Popover from '../components/Popover' +import LogsDowloaderPopover from '../components/LogsDownloaderPopover' import { ReactComponent as Download } from '../styling/icons/button/download/zodiac.svg' import { ReactComponent as DownloadActive } from '../styling/icons/button/download/white.svg' -import { primaryColor, comet } from '../styling/variables' +import { comet } from '../styling/variables' import typographyStyles from '../components/typography/styles' -import styles from './Logs.styles' -import logPageHeaderStyles from './LogPageHeader.styles' +import logsStyles from './Logs.styles' -const { regularLabel, h4 } = typographyStyles -const { tableWrapper } = styles -const { titleAndButtonsContainer, buttonsWrapper } = logPageHeaderStyles +const { regularLabel } = typographyStyles +const { tableWrapper } = logsStyles -styles.titleWrapper = { - display: 'flex', - justifyContent: 'space-between' +const localStyles = { + serverTableWrapper: { + extend: tableWrapper, + maxWidth: '100%', + marginLeft: 0 + }, + serverVersion: { + extend: regularLabel, + color: comet, + margin: 'auto 0 auto 0' + }, + headerLine2: { + height: 60, + display: 'flex', + justifyContent: 'space-between', + marginBottom: 24 + }, + uptimeContainer: { + margin: 'auto 0 auto 0' + } } -styles.serverTableWrapper = { - extend: tableWrapper, - maxWidth: '100%', - marginLeft: 0 -} - -styles.serverVersion = { - extend: regularLabel, - color: comet, - margin: 'auto 0 auto 0' -} - -styles.headerLine2 = { - height: 60, - display: 'flex', - justifyContent: 'space-between', - marginBottom: 24 -} - -styles.uptimeContainer = { - margin: 'auto 0 auto 0' -} - -styles.titleAndButtonsContainer = titleAndButtonsContainer -styles.buttonsWrapper = buttonsWrapper - -styles.popoverContent = { - minWidth: 315 -} - -styles.popoverHeader = { - extend: h4, - padding: [[20, 15, 0, 15]] -} - -styles.radioButtonsContainer = { - padding: [[10, 15, 10, 15]] -} - -styles.radioButtons = { - display: 'flex', - justifyContent: 'space-between', - flexDirection: 'row', - color: primaryColor -} - -styles.dateRangePickerShowing = { - display: 'block', - height: '100%' -} - -styles.dateRangePickerHidden = { - display: 'none', - height: 0 -} - -styles.download = { - padding: [[30, 15, 30, 15]] -} +const styles = merge(logsStyles, localStyles) const useStyles = makeStyles(styles) @@ -104,8 +58,6 @@ const Logs = () => { const [logLevel, setLogLevel] = useState(SHOW_ALL) const [version, setVersion] = useState(null) const [processStates, setProcessStates] = useState(null) - const [radioButtons, setRadioButtons] = useState(0) - const [range, setRange] = useState(null) const [anchorEl, setAnchorEl] = useState(null) const classes = useStyles() @@ -155,15 +107,6 @@ const Logs = () => { } }) - const formatDateFile = date => { - return moment(date).format('YYYY-MM-DD_HH-mm') - } - - const dateRangePickerClasses = { - [classes.dateRangePickerShowing]: radioButtons === 1, - [classes.dateRangePickerHidden]: radioButtons === 0 - } - const handleOpenRangePicker = (event) => { setAnchorEl(event.currentTarget) } @@ -172,14 +115,6 @@ const Logs = () => { setAnchorEl(null) } - const handleRadioButtons = (event) => { - setRadioButtons(toInteger(event.target.value)) - } - - const handleRangeChange = (from, to) => { - setRange({ from, to }) - } - const open = Boolean(anchorEl) const id = open ? 'date-range-popover' : undefined @@ -197,63 +132,13 @@ const Logs = () => { variant='contained' onClick={handleOpenRangePicker} /> - -
-
- Download logs -
-
- -
- -
- { - if (radioButtons === 0) { - const text = logsResponse.data.logs.map(it => JSON.stringify(it)).join('\n') - const blob = new window.Blob([text], { - type: 'text/plain;charset=utf-8' - }) - FileSaver.saveAs(blob, `${formatDateFile(new Date())}_server`) - } else if (radioButtons === 1 && range.from && range.to) { - const text = logsResponse.data.logs.filter((log) => moment(log.timestamp).isBetween(range.from, range.to, 'day', '[]')).map(it => JSON.stringify(it)).join('\n') - const blob = new window.Blob([text], { - type: 'text/plain;charset=utf-8' - }) - FileSaver.saveAs(blob, `${formatDateFile(range.from)}_${formatDateFile(range.to)}_server`) - } - }} - > - Download - -
-
- + /> Share with Lamassu