Merge pull request #191 from kaleido-io/status

Add status sections to subscription & listener slides

src/components/Lists/SubStatusList.tsx

@@ -0,0 +1,59 @@
+// Copyright © 2022 Kaleido, Inc.
+//
+// SPDX-License-Identifier: Apache-2.0
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ISubscription } from '../../interfaces';
+import { IDataListItem } from '../../interfaces/lists';
+import { FFCopyButton } from '../Buttons/CopyButton';
+import { FFListItem } from './FFListItem';
+import { FFListText } from './FFListText';
+import { FFSkeletonList } from './FFSkeletonList';
+
+interface Props {
+  status?: ISubscription['status'];
+}
+
+export const SubStatusList: React.FC<Props> = ({ status }) => {
+  const { t } = useTranslation();
+  const [dataList, setDataList] = useState<IDataListItem[]>(FFSkeletonList);
+
+  useEffect(() => {
+    if (status) {
+      setDataList([
+        {
+          label: status.currentOffset ? t('currentOffset') : '',
+          value: status.currentOffset && (
+            <FFListText color="primary" text={String(status.currentOffset)} />
+          ),
+          button: status.currentOffset ? (
+            <FFCopyButton value={String(status.currentOffset)} />
+          ) : (
+            <></>
+          ),
+        },
+      ]);
+    }
+  }, [status]);
+
+  return (
+    <>
+      {dataList.map(
+        (d, idx) => d.label !== '' && <FFListItem key={idx} item={d} />
+      )}
+    </>
+  );
+};

src/components/Slides/ListenerSlide.tsx

@@ -53,6 +53,15 @@ export const ListenerSlide: React.FC<Props> = ({ listener, open, onClose }) => {
             <SlideSectionHeader title={t('options')} />
             <SubOptionsList options={listener.options} />
           </Grid>
+          {listener.status?.checkpoint && (
+            <Grid container item pb={DEFAULT_PADDING}>
+              <JsonViewAccordion
+                isOpen
+                json={listener.status}
+                header={t('status')}
+              />
+            </Grid>
+          )}
           {/* API Location */}
           {listener.location && (
             <Grid container item pb={DEFAULT_PADDING}>

src/components/Slides/SubscriptionSlide.tsx

@@ -22,6 +22,7 @@ import { DEFAULT_PADDING } from '../../theme';
 import { JsonViewAccordion } from '../Accordions/JsonViewerAccordion';
 import { SubList } from '../Lists/SubList';
 import { SubOptionsList } from '../Lists/SubOptionsList';
+import { SubStatusList } from '../Lists/SubStatusList';
 import { DisplaySlide } from './DisplaySlide';
 import { SlideHeader } from './SlideHeader';
 import { SlideSectionHeader } from './SlideSectionHeader';
@@ -45,12 +46,17 @@ export const SubscriptionSlide: React.FC<Props> = ({ sub, open, onClose }) => {
           <Grid container item>
             <SubList sub={sub} />
           </Grid>
+          {sub.status && (
+            <Grid container item pb={DEFAULT_PADDING}>
+              <SlideSectionHeader title={t('status')} />
+              <SubStatusList status={sub.status} />
+            </Grid>
+          )}
           {/* Filter options */}
           <Grid container item pb={DEFAULT_PADDING}>
             <SlideSectionHeader title={t('options')} />
             <SubOptionsList options={sub.options} />
           </Grid>
-
           {sub.filter && (
             <Grid container item pb={DEFAULT_PADDING}>
               <JsonViewAccordion

src/interfaces/api.ts

@@ -70,6 +70,14 @@ export interface IContractListener {
     readAhead?: number;
     withData?: boolean;
   };
+  status?: {
+    checkpoint?: {
+      block: number;
+      transactionIndex: number;
+      logIndex: number;
+    };
+    catchup?: boolean;
+  };
 }
 
 export interface IData {
@@ -483,6 +491,9 @@ export interface ISubscription {
   };
   created: string;
   updated: string | null;
+  status?: {
+    currentOffset?: number;
+  };
 }
 
 export interface ITokenAccount {

src/interfaces/constants.ts

@@ -55,7 +55,7 @@ export const FF_Paths = {
   contractQuery: '/contracts/query',
   contractListeners: '/contracts/listeners',
   contractListenersByNameId: (nameOrId: string) =>
-    `/contracts/listeners/${nameOrId}`,
+    `/contracts/listeners/${nameOrId}?fetchstatus`,
   // Data
   data: '/data',
   dataById: (id: string) => `/data/${id}`,
@@ -88,7 +88,7 @@ export const FF_Paths = {
   operationsById: (opId: string) => `/operations/${opId}`,
   // Subscriptions
   subscriptions: '/subscriptions',
-  subscriptionsById: (subId: string) => `/subscriptions/${subId}`,
+  subscriptionsById: (subId: string) => `/subscriptions/${subId}?fetchstatus`,
   // Tokens
   tokens: '/tokens',
   tokenAccounts: '/tokens/accounts',

src/translations/en.json

@@ -69,6 +69,7 @@
   "copyToClipboard": "Copy to Clipboard",
   "core": "Core",
   "created": "Created",
+  "currentOffset": "Current Offset",
   "customRange": "Custom Range",
   "dashboard": "Dashboard",
   "data": "Data",