Merge pull request #50 from kaleido-io/dashboard-counts

use FF count query param in dashboard, show transaction ID in message details

Author: shorsher

README.md

@@ -4,7 +4,7 @@ firefly-ui is the UI explorer for [FireFly](https://github.com/hyperledger-labs/
 
 ### Get started locally
 
-- Clone / build firefly-ui
+- Clone / start firefly-ui
 
 ```bash
 git clone https://github.com/kaleido-io/firefly-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firefly-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",

src/views/Dashboard.tsx

@@ -77,15 +77,15 @@ export const Dashboard: () => JSX.Element = () => {
     }
 
     Promise.all([
-      fetchWithCredentials(`/api/v1/network/organizations?limit=100`),
+      fetchWithCredentials(`/api/v1/network/organizations?count&created=>=0`),
       fetchWithCredentials(
-        `/api/v1/namespaces/${namespace}/data?limit=200${createdFilterString}`
+        `/api/v1/namespaces/${namespace}/data?count${createdFilterString}`
       ),
       fetchWithCredentials(
-        `/api/v1/namespaces/${namespace}/messages?limit=200${createdFilterString}`
+        `/api/v1/namespaces/${namespace}/messages?limit=5&count${createdFilterString}`
       ),
       fetchWithCredentials(
-        `/api/v1/namespaces/${namespace}/transactions?limit=200&created=>=${dayjs()
+        `/api/v1/namespaces/${namespace}/transactions?count&created=>=${dayjs()
           .subtract(24, 'hours')
           .unix()}${createdFilterString}`
       ),
@@ -97,10 +97,14 @@ export const Dashboard: () => JSX.Element = () => {
           messageResponse.ok &&
           txResponse.ok
         ) {
-          setMessages(await messageResponse.json());
-          setTransactions(await txResponse.json());
-          setOrgs(await orgResponse.json());
-          setData(await dataResponse.json());
+          const messageJson = await messageResponse.json();
+          const dataJson = await dataResponse.json();
+          const txJson = await txResponse.json();
+          const orgJson = await orgResponse.json();
+          setMessages(messageJson.items);
+          setTransactions(txJson.items);
+          setData(dataJson.items);
+          setOrgs(orgJson.items);
         }
       }
     );
@@ -126,9 +130,8 @@ export const Dashboard: () => JSX.Element = () => {
     t('createdOn'),
   ];
 
-  const messageRecords: IDataTableRecord[] = messages
-    .slice(0, 5)
-    .map((message: IMessage) => ({
+  const messageRecords: IDataTableRecord[] = messages.map(
+    (message: IMessage) => ({
       key: message.header.id,
       columns: [
         {
@@ -154,7 +157,8 @@ export const Dashboard: () => JSX.Element = () => {
           value: dayjs(message.header.created).format('MM/DD/YYYY h:mm A'),
         },
       ],
-    }));
+    })
+  );
 
   return (
     <Grid container justify="center">

src/views/Messages/MessageDetails.tsx

@@ -106,14 +106,14 @@ export const MessageDetails: React.FC<Props> = ({ message, open, onClose }) => {
     </Grid>
   );
 
-  const pinned = (txType: string | undefined, txId: string | undefined) => (
+  const transactionLink = (txId: string | undefined) => (
     <Grid alignItems="center" container direction="row" justify="space-between">
       <Grid item xs={8}>
         <Typography
           noWrap
           className={clsx(classes.detailValue, classes.paddingRight)}
         >
-          {txType === 'batch_pin' ? t('yes') : t('no')}
+          {txId}
         </Typography>
       </Grid>
       {txId && (
@@ -194,7 +194,7 @@ export const MessageDetails: React.FC<Props> = ({ message, open, onClose }) => {
             direction="row"
           >
             <Grid className={classes.detailItem} sm={12} container item>
-              {detailItem(t('pinned?'), pinned(message.header.txtype, txId))}
+              {detailItem(t('transaction'), transactionLink(txId))}
             </Grid>
             <Grid className={classes.detailItem} sm={12} container item>
               {detailItem(t('dataHash'), copyableHash(message.header.datahash))}