Merge pull request hyperledger#140 from kaleido-io/event-enriching

Event enriching
kaleido-io · Mar 24, 2022 · 946b117 · 946b117
2 parents 3fc40f7 + 65622ed
commit 946b117
Show file tree

Hide file tree

Showing 19 changed files with 584 additions and 343 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
     "@mui/material": "^5.4.1",
     "@mui/styles": "^5.4.1",
     "@nivo/bar": "^0.79.1",
-    "@nivo/circle-packing": "^0.79.1",
     "@nivo/core": "^0.79.0",
     "@nivo/legends": "^0.79.1",
+    "@nivo/network": "^0.79.1",
     "@nivo/pie": "^0.79.1",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.7",

diff --git a/src/components/Accordions/ApiAccordion.tsx b/src/components/Accordions/ApiAccordion.tsx
@@ -62,9 +62,13 @@ export const ApiAccordion: React.FC<Props> = ({ api, isOpen = false }) => {
           ))}
         </Grid>
         {/* OpenAPI */}
-        <FFAccordionLink header={t('openApi')} link={api.urls.openapi} />
+        {api.urls.openapi && (
+          <FFAccordionLink header={t('openApi')} link={api.urls.openapi} />
+        )}
         {/* Swagger */}
-        <FFAccordionLink header={t('swagger')} link={api.urls.ui} />
+        {api.urls.ui && (
+          <FFAccordionLink header={t('swagger')} link={api.urls.ui} />
+        )}
       </AccordionDetails>
     </Accordion>
   );

diff --git a/src/components/Accordions/FFAccordionHeader.tsx b/src/components/Accordions/FFAccordionHeader.tsx
@@ -11,10 +11,10 @@ export const FFAccordionHeader: React.FC<Props> = ({
 }) => {
   return (
     <Grid container direction="row" alignItems="center">
-      <Grid xs={6} item container justifyContent="flex-start">
+      <Grid xs={8} item container justifyContent="flex-start">
         {leftContent}
       </Grid>
-      <Grid xs={6} item container justifyContent="flex-end" alignItems="center">
+      <Grid xs={4} item container justifyContent="flex-end" alignItems="center">
         {rightContent}
       </Grid>
     </Grid>

diff --git a/src/components/Accordions/FFAccordionText.tsx b/src/components/Accordions/FFAccordionText.tsx
@@ -22,6 +22,7 @@ export const FFAccordionText: React.FC<Props> = ({
       }}
       color={color}
       variant="body2"
+      noWrap
     >
       {text}
     </Typography>

diff --git a/src/components/Cards/EventCards/BaseCard.tsx b/src/components/Cards/EventCards/BaseCard.tsx
@@ -83,7 +83,7 @@ export const BaseCard: React.FC<Props> = ({
         >
           <Grid container item alignItems="center" direction="row">
             <Grid
-              xs={6}
+              xs={8}
               container
               item
               direction="row"
@@ -94,7 +94,7 @@ export const BaseCard: React.FC<Props> = ({
               </Typography>
             </Grid>
             <Grid
-              xs={6}
+              xs={4}
               container
               item
               direction="row"
@@ -127,13 +127,25 @@ export const BaseCard: React.FC<Props> = ({
             item
             alignItems="center"
           >
-            <Grid item>
-              <Typography color="text.secondary" fontSize={12}>
+            <Grid
+              xs={8}
+              container
+              item
+              direction="row"
+              justifyContent="flex-start"
+            >
+              <Typography noWrap color="text.secondary" fontSize={12}>
                 {description}
               </Typography>
             </Grid>
-            <Grid item>
-              <Typography color="text.secondary" fontSize={12}>
+            <Grid
+              xs={4}
+              container
+              item
+              direction="row"
+              justifyContent="flex-end"
+            >
+              <Typography noWrap color="text.secondary" fontSize={12}>
                 {timestamp}
               </Typography>
             </Grid>

diff --git a/src/components/Cards/EventCards/EventCardWrapper.tsx b/src/components/Cards/EventCards/EventCardWrapper.tsx
@@ -26,6 +26,14 @@ export const EventCardWrapper = ({
 }: Props) => {
   const { t } = useTranslation();
 
+  const getEnrichedText = (event: IEvent) => {
+    const eventObject = FF_EVENTS_CATEGORY_MAP[event.type];
+    if (eventObject) {
+      return eventObject.enrichedEventString(event);
+    }
+    return t('event');
+  };
+
   return (
     <>
       <BaseCard
@@ -34,12 +42,12 @@ export const EventCardWrapper = ({
             ? () => onHandleViewTx(event.transaction)
             : () => onHandleViewEvent(event)
         }
-        title={t(FF_EVENTS_CATEGORY_MAP[event.type]?.nicename)}
-        description={
+        title={
           event.transaction
             ? t(FF_TX_CATEGORY_MAP[event.transaction?.type]?.nicename)
-            : t('event')
+            : t(t(FF_EVENTS_CATEGORY_MAP[event.type]?.nicename))
         }
+        description={getEnrichedText(event)}
         timestamp={getFFTime(event.created)}
         status={<HashPopover address={event.id} shortHash paper />}
         color={FF_EVENTS_CATEGORY_MAP[event.type]?.color}

diff --git a/src/components/Lists/PoolList.tsx b/src/components/Lists/PoolList.tsx
@@ -50,13 +50,20 @@ export const PoolList: React.FC<Props> = ({ pool, showPoolLink = true }) => {
         },
         {
           label: t('transactionID'),
-          value: <FFListText color="primary" text={pool.tx.id} />,
-          button: (
+          value: pool.tx.id ? (
+            <FFListText color="primary" text={pool.tx.id} />
+          ) : (
+            <FFListText
+              color="secondary"
+              text={t('transactionIDUnavailable')}
+            />
+          ),
+          button: pool.tx.id ? (
             <>
               <TxButton ns={selectedNamespace} txID={pool.tx.id} />
               <FFCopyButton value={pool.tx.id} />
             </>
-          ),
+          ) : undefined,
         },
         {
           label: t('messageID'),

diff --git a/src/components/Lists/TransferList.tsx b/src/components/Lists/TransferList.tsx
@@ -31,7 +31,7 @@ export const TransferList: React.FC<Props> = ({
   const [dataList, setDataList] = useState<IDataListItem[]>(FFSkeletonList);
 
   useEffect(() => {
-    if (transfer && txStatus) {
+    if (transfer) {
       setDataList([
         {
           label: t('localID'),
@@ -40,15 +40,22 @@ export const TransferList: React.FC<Props> = ({
         },
         {
           label: t('transactionID'),
-          value: <FFListText color="primary" text={transfer.tx.id} />,
-          button: (
+          value: transfer.tx.id ? (
+            <FFListText color="primary" text={transfer.tx.id} />
+          ) : (
+            <FFListText
+              color="secondary"
+              text={t('transactionIDUnavailable')}
+            />
+          ),
+          button: transfer.tx.id ? (
             <>
               {showTxLink && (
                 <TxButton ns={selectedNamespace} txID={transfer.tx.id} />
               )}
               <FFCopyButton value={transfer.tx.id} />
             </>
-          ),
+          ) : undefined,
         },
         {
           label: t('author'),
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,7 @@ export const FFAccordionText: React.FC<Props> = ({ @@
           }}
           color={color}
           variant="body2"
+          noWrap
         >
           {text}
         </Typography>
@@ Expand Down @@