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,38 +89,47 @@ 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}>
+        <div className={classes.titleAndButtonsContainer}>
           <Title>Machine Logs</Title>
           {logsResponse && (
             <div className={classes.buttonsWrapper}>
-            <Info3>{saveMessage}</Info3>
+              <FeatureButton
-            <SimpleButton
+                Icon={Download}
-              className={classes.button}
+                InverseIcon={DownloadActive}
-              onClick={() => {
+                aria-describedby={id}
-                const text = logsResponse.data.logs
+                variant="contained"
-                  .map(it => JSON.stringify(it))
+                onClick={handleOpenRangePicker}
-                  .join('\n')
+              />
-                const blob = new window.Blob([text], {
+              <LogsDowloaderPopover
-                  type: 'text/plain;charset=utf-8'
+                title="Download logs"
-                })
+                name="machine-logs"
-                FileSaver.saveAs(
+                id={id}
-                  blob,
+                open={open}
-                  `${formatDateFile(new Date())}_${selected.name}`
+                anchorEl={anchorEl}
-                )
+                logs={logsResponse.machineLogs}
-              }}>
+                getTimestamp={log => log.timestamp}
-              DL
+              />
-            </SimpleButton>
               <SimpleButton
                 className={classes.button}
                 disabled={loading}
-              onClick={saveSupportLogs}>
+                onClick={sendSnapshot}>
                 Share with Lamassu
               </SimpleButton>
+              <Info3>{saveMessage}</Info3>
             </div>
           )}
         </div>
+      </div>
       <div className={classes.wrapper}>
         <Sidebar
           displayName={it => it.name}