fix: get machine logs page up-to-date

new-lamassu-admin/src/pages/MachineLogs.js

@@ -1,14 +1,14 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import { gql } from 'apollo-boost'
-import FileSaver from 'file-saver'
 import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
+import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import Sidebar from 'src/components/Sidebar'
 import Title from 'src/components/Title'
-import { SimpleButton } from 'src/components/buttons'
+import { FeatureButton, SimpleButton } from 'src/components/buttons'
 import {
   Table,
   TableHead,
@@ -18,8 +18,10 @@ import {
   TableCell
 } from 'src/components/table'
 import { Info3 } from 'src/components/typography'
+import { ReactComponent as DownloadActive } from 'src/styling/icons/button/download/white.svg'
+import { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg'
 
-import styles from './Logs.styles.js'
+import styles from './Logs.styles'
 
 const useStyles = makeStyles(styles)
 
@@ -55,20 +57,18 @@ const formatDate = date => {
   return moment(date).format('YYYY-MM-DD HH:mm')
 }
 
-const formatDateFile = date => {
-  return moment(date).format('YYYY-MM-DD_HH-mm')
-}
-
 const Logs = () => {
   const classes = useStyles()
 
   const [selected, setSelected] = useState(null)
   const [saveMessage, setSaveMessage] = useState(null)
+  const [anchorEl, setAnchorEl] = useState(null)
+
   const deviceId = selected?.deviceId
 
   const { data: machineResponse } = useQuery(GET_MACHINES)
 
-  const [saveSupportLogs, { loading }] = useMutation(SUPPORT_LOGS, {
+  const [sendSnapshot, { loading }] = useMutation(SUPPORT_LOGS, {
     variables: { deviceId },
     onError: () => setSaveMessage('Failure saving snapshot'),
     onCompleted: () => setSaveMessage('✓ Saved latest snapshot')
@@ -89,37 +89,46 @@ const Logs = () => {
     return R.path(['deviceId'])(selected) === it.deviceId
   }
 
+  const handleOpenRangePicker = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget)
+  }
+
+  const open = Boolean(anchorEl)
+  const id = open ? 'date-range-popover' : undefined
+
   return (
     <>
       <div className={classes.titleWrapper}>
-        <Title>Machine Logs</Title>
-        {logsResponse && (
-          <div className={classes.buttonsWrapper}>
-            <Info3>{saveMessage}</Info3>
-            <SimpleButton
-              className={classes.button}
-              onClick={() => {
-                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())}_${selected.name}`
-                )
-              }}>
-              DL
-            </SimpleButton>
-            <SimpleButton
-              className={classes.button}
-              disabled={loading}
-              onClick={saveSupportLogs}>
-              Share with Lamassu
-            </SimpleButton>
-          </div>
-        )}
+        <div className={classes.titleAndButtonsContainer}>
+          <Title>Machine Logs</Title>
+          {logsResponse && (
+            <div className={classes.buttonsWrapper}>
+              <FeatureButton
+                Icon={Download}
+                InverseIcon={DownloadActive}
+                aria-describedby={id}
+                variant="contained"
+                onClick={handleOpenRangePicker}
+              />
+              <LogsDowloaderPopover
+                title="Download logs"
+                name="machine-logs"
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                logs={logsResponse.machineLogs}
+                getTimestamp={log => log.timestamp}
+              />
+              <SimpleButton
+                className={classes.button}
+                disabled={loading}
+                onClick={sendSnapshot}>
+                Share with Lamassu
+              </SimpleButton>
+              <Info3>{saveMessage}</Info3>
+            </div>
+          )}
+        </div>
       </div>
       <div className={classes.wrapper}>
         <Sidebar