feat: Next.js (React) UI for iot-app examples.

- Replace http-proxy with Next.js' native Rewrite module that just works.
- Add Giraffe plot for device measurements.
- Add Device Card to view details, data, plot.

Author: jstirnaman

.env.development

@@ -1,3 +1,3 @@
 # Development environment non-secret defaults
 
-API_URL=http://127.0.0.1:5200
+API_URL=http://127.0.0.1:5200/api

next.config.js

@@ -3,4 +3,15 @@ const nextConfig = {
   reactStrictMode: true,
 }
 
-module.exports = nextConfig
+module.exports = {
+  async rewrites() {
+    return { 
+      beforeFiles: [
+        {
+          source: '/api/:endpoint*',
+          destination: `${process.env.API_URL}/:endpoint*`, // The :path parameter isn't used here so will be automatically passed in the query
+        },
+      ]
+    }
+  },
+}

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@influxdata/giraffe": "^2.26.1",
     "next": "12.1.6",
     "react": "18.1.0",
     "react-dom": "18.1.0"

pages/api/[...path].ts

@@ -1,28 +1,93 @@
 import React, { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic'
 
-export default function Device({ device, deviceData, error, isLoading }:
-  {device: any, deviceData: any, error: string | null, isLoading: boolean}
-  ) {
+/* Wrap DevicePlot with a dynamic import to disable server-side rendering.
+ * Prevents `self is undefined` errors caused by Giraffe when rendered
+ * with Node.
+ */
+const DynamicDevicePlotWithNoSSR = dynamic(
+  () => import('./_devicePlot'),
+  { ssr: false }
+)
 
-  function writeSimulatedData() {
+export default function Device({ deviceId }: {deviceId: string}) {
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [device, setDevice] = useState<any[] | null>(null)
+  const [data, setData] = useState<any | null>(null)
+
+  const getDeviceData = (deviceId: string) => {
+    setIsLoading(true)
+    setError(null)
+    fetch(`/api/devices/${deviceId}/measurements`,
+          { headers: { "Accept": "application/csv" } }
+    )
+    .then((res) => {
+      if(res.ok) {
+        return res.text()
+      } else {
+        setError(`Device data ${res.statusText}`)
+        setIsLoading(false)
+      }
+    })
+    .then((data) =>{
+      setData(data)
+      setIsLoading(false)
+    })
+  }
+  
+  const getDevice = (deviceId: string) => {
+    setIsLoading(true)
+    fetch(`/api/devices/${deviceId}`)
+    .then((res) => res.json())
+    .then((data) => {
+      if(Array.isArray(data)) {
+        setDevice(data)
+      }
+      if(data.error) {
+        setError(data.error)
+      }
+      setIsLoading(false)
+    })
+  }
 
+  useEffect(() => {
+    deviceId &&
+    getDevice(deviceId)
+    getDeviceData(deviceId)
+  }, [deviceId])
+
+  function writeSimulatedData() {
+    fetch('/api/devices/generate', {
+      method: 'POST',
+      body: JSON.stringify({ deviceIds: [deviceId] }),
+      headers: { "Content-Type": "application/json" }
+    })
+    .then((res) => {
+      if(res.ok) {
+        getDeviceData(deviceId)
+      } else {
+        setError(res.statusText)
+      }
+    })
 
   }
 
   return (
-      <>
-        <div className='card'>
-          <div className="alert">
-          { isLoading && <span>Loading...</span> }
-          { error &&
-            <span className="alert-danger">{ error }</span>
-          }
-          </div>
-          <h2>Device</h2>
-            <p>{device.deviceId}</p>
-            <p>{JSON.stringify(deviceData)}</p>
-
+    deviceId ?
+      <div className='card'>
+        <div className="alert">
+        { isLoading && <span>Loading...</span> }
+        { error &&
+          <span className="alert-danger">{ error }</span>
+        }
         </div>
-      </>
+        <h2>Device</h2>
+          <p>{deviceId}</p>
+          <p><button onClick={ writeSimulatedData }>Generate data for this device</button></p>
+          { data &&
+            <div><DynamicDevicePlotWithNoSSR csv={data} title={'Measurements'} lastUpdated={''} /></div>
+          }     
+      </div> : <></>
   )
 }

pages/devices/_device.tsx

@@ -0,0 +1,53 @@
+import { fromFlux, Plot, LayerTypes, Config, LayerConfig, HoverTimeProvider } from '@influxdata/giraffe'
+export default function DevicePlot({ csv, title, lastUpdated }) {
+
+  const style = {
+    width: "calc(70vw - 20px)",
+    height: "calc(70vh - 20px)",
+    margin: "40px",
+  }
+
+  const table = fromFlux(csv).table
+
+  const lineLayer: LayerConfig = {
+    type: LayerTypes.Line,
+    x: "_time",
+    y: "_value",
+    fill: []
+  }
+
+  const tableLayer: LayerConfig = {
+    type: LayerTypes.Table,
+    timeZone: 'UTC',
+    properties: {
+      colors: [],
+      tableOptions: {},
+      fieldOptions: [],
+      timeFormat: 'YYYY-MM-DD hh:mm:ss A',
+      decimalPlaces: {
+        isEnforced: false,
+        digits: 5
+      }
+    }
+  }
+
+  const simpleTableLayer: LayerConfig = {
+    fluxResponse: csv,
+    type: LayerTypes.SimpleTable,
+    showAll: true
+  }
+
+  const config: Config = {
+    table,
+    layers: [lineLayer],
+  }
+
+  return(
+    <div style={style}>
+      <h3>{title} {lastUpdated}</h3>
+      <Plot config={config} />
+    </div>
+
+  )
+
+}

pages/devices/_deviceList.tsx

@@ -9,7 +9,11 @@ export default function DeviceRegistrationButton({ deviceId, onError, isLoading}
     isLoading(true)
     const body = JSON.stringify({ deviceId })
 
-    fetch('/api/devices/create', { method: 'POST', body })
+    fetch('/api/devices/create', {
+      method: 'POST',
+      body,
+      headers: { "Content-Type": "application/json" }
+    })
       .then((res) => res.json())
       .then((data) => {
         if(data.error) {

pages/devices/_devicePlot.tsx

@@ -3,7 +3,7 @@ import DeviceRegistrationButton from './_deviceRegistrationButton'
 import DevicesList from './_devicesList'
 
 export default function DevicesCard({ onSelectDevice }:
-  { onSelectDevice: (device: any) => void}
+  { onSelectDevice: (device: {deviceId: string}) => void }
   ) {
   const [deviceId, setDeviceId] = useState('')
   const [error, setError] = useState<string | null>(null)

pages/devices/_deviceRegistrationButton.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 
 export default function DevicesList({ deviceId, onSelectDevice, onError, isLoading}: 
-    { deviceId: string, onSelectDevice: (device: any) => void,
+    { deviceId: string, onSelectDevice: (device: {deviceId: string}) => void,
     onError: (error: string) => void, isLoading: (loading: boolean) => void }
   ) {
   const [data, setData] = useState<any[] | null>(null)
   const itemType = 'device'
 
   useEffect(() => {
     isLoading(true)
-    fetch(`/api/devices/${deviceId || ''}`)
+    fetch(`/api/devices/${deviceId  || '' }`)
     .then((res) => res.json())
     .then((data) => {
       if(Array.isArray(data)) {

pages/devices/_devicesCard.tsx

@@ -8,33 +8,16 @@ export default function Devices() {
   const [isLoading, setIsLoading] = useState(false)
   const [deviceData, setDeviceData] = useState<any[] | null>(null)
 
-  function handleSelectDevice(selected: any) {
+  function handleSelectDevice(selected: { deviceId: string }) {
     setDevice(selected)
-    getDeviceData(selected.deviceId)
-  }
-
-  function getDeviceData(deviceId: string) {
-    setIsLoading(true)
-    setError(null)
-    fetch(`/api/data/${deviceId || ''}`)
-    .then((res) => {
-      if(res.ok) {
-        const json = res.json()
-        Array.isArray(json) && setDeviceData(json)
-        setIsLoading(false)
-      } else {
-        setError(res.statusText)
-        setIsLoading(false)
-      }
-    })
   }
 
   return (
     <>
       { device ?
           <div>
             <DevicesCard onSelectDevice={ handleSelectDevice } />
-            <Device device={device} deviceData={deviceData} error={error} isLoading />
+            <Device deviceId={device.deviceId} />
           </div>
           : <DevicesCard onSelectDevice={ handleSelectDevice } />
       }

pages/devices/_devicesList.tsx

@@ -46,6 +46,13 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@influxdata/giraffe@^2.26.1":
+  version "2.26.1"
+  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-2.26.1.tgz#6af830da76c009373114b88b7e09a109313e3e40"
+  integrity sha512-qi4SPFj8eFJZzK8+JMHLJ9AycQhA9CNOsZRhk+jiluZBNBVaIENF8fqQglCZWUEnMLsRf4fWo0sxlKycy2qOjQ==
+  dependencies:
+    merge-images "^2.0.0"
+
 "@next/[email protected]":
   version "12.1.6"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.6.tgz#5f44823a78335355f00f1687cfc4f1dafa3eca08"
@@ -1155,6 +1162,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+merge-images@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-images/-/merge-images-2.0.0.tgz#4d68d6d90ad8c33a91aced0b5d8660983bf4db3a"
+  integrity sha512-bpI4j54n/Zl6ZTgxaR3xWou/lqI53RAAt8peXijW37BKqoON83LQ7XCZqtFiwzBfEXIws1isYyR06584yffAyA==
+
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"