support last_payload and last_insert in ui

Author: toddtreece

ui/package.json

@@ -36,7 +36,7 @@
     "typescript": "^3.7.4"
   },
   "scripts": {
-    "generate-client": "docker run --rm -v ${PWD}/src:/out -v ${PWD}/../../docs:/in openapitools/openapi-generator-cli generate -i /in/openapi.json -g typescript-fetch -o /out/client",
+    "generate-client": "docker run --rm -v ${PWD}/src:/out -v ${PWD}/../docs:/in openapitools/openapi-generator-cli generate -i /in/openapi.json -g typescript-fetch -o /out/client",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

ui/src/client/models/Stream.ts

@@ -43,6 +43,18 @@ export interface Stream {
      * @memberof Stream
      */
     updated?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof Stream
+     */
+    readonly lastInsert?: string;
+    /**
+     * 
+     * @type {{ [key: string]: string; }}
+     * @memberof Stream
+     */
+    readonly lastPayload?: { [key: string]: string; };
 }
 
 export function StreamFromJSON(json: any): Stream {
@@ -59,6 +71,8 @@ export function StreamFromJSONTyped(json: any, ignoreDiscriminator: boolean): St
         'key': !exists(json, 'key') ? undefined : json['key'],
         'created': !exists(json, 'created') ? undefined : json['created'],
         'updated': !exists(json, 'updated') ? undefined : json['updated'],
+        'lastInsert': !exists(json, 'last_insert') ? undefined : json['last_insert'],
+        'lastPayload': !exists(json, 'last_payload') ? undefined : json['last_payload'],
     };
 }
 

ui/src/pages/Data.tsx

@@ -29,6 +29,7 @@ export const DataPage: React.FC<MainProps> = props => {
     dispatch(fetchRequest(params.key));
   }, [dispatch]);
 
+  // TODO tjt: move data formatting to store
   const payloadColumnsSet = new Set(data.map((datum: Data) => Object.keys(datum.payload || {})).flat());
   const payloadColumns = [...payloadColumnsSet].sort();
 

ui/src/pages/Streams.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Table, Header, Popup } from 'semantic-ui-react';
+import { Table, Header, Popup, Label } from 'semantic-ui-react';
 import { History } from 'history';
 import moment from 'moment';
 
@@ -23,39 +23,36 @@ export const StreamsPage: React.FC<MainProps> = ({ history }) => {
   return (
     <>
       <Header as="h1">dlphn.streams</Header>
-      <Table celled selectable fixed>
+      <Table celled selectable>
         <Table.Header>
           <Table.Row>
-            <Table.HeaderCell>id</Table.HeaderCell>
             <Table.HeaderCell>key</Table.HeaderCell>
-            <Table.HeaderCell>created</Table.HeaderCell>
-            <Table.HeaderCell>updated</Table.HeaderCell>
+            <Table.HeaderCell>last payload</Table.HeaderCell>
+            <Table.HeaderCell>last insert</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
 
         <Table.Body>
-          {loading && data.length === 0 && (
+          {loading && (
             <Table.Row>
-              <Table.Cell colSpan={4}>loading...</Table.Cell>
+              <Table.Cell colSpan={3}>loading...</Table.Cell>
             </Table.Row>
           )}
           {data.map((stream: Stream) => (
             <Table.Row key={stream.id} onClick={() => history.push(`/streams/${stream.key}/data`)}>
-              <Table.Cell>{stream.id}</Table.Cell>
               <Table.Cell>{stream.key}</Table.Cell>
               <Table.Cell>
-                <Popup
-                  size="mini"
-                  content={stream.created}
-                  trigger={<div>{moment(stream.created).fromNow()}</div>}
-                  inverted
-                />
+                <Label color="blue">
+                  {Object.entries(stream.lastPayload || {})
+                    .map(([k, v]) => `${k}: ${v}`)
+                    .join(', ')}
+                </Label>
               </Table.Cell>
               <Table.Cell>
                 <Popup
                   size="mini"
-                  content={stream.updated}
-                  trigger={<div>{moment(stream.updated).fromNow()}</div>}
+                  content={stream.lastInsert}
+                  trigger={<span>{moment(stream.lastInsert).fromNow()}</span>}
                   inverted
                 />
               </Table.Cell>