Merge pull request #148 from kaleido-io/subscriptions

src/components/Lists/SubList.tsx

@@ -0,0 +1,49 @@
+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 { FFCircleLoader } from '../Loaders/FFCircleLoader';
+import { FFListItem } from './FFListItem';
+import { FFListText } from './FFListText';
+import { FFListTimestamp } from './FFListTimestamp';
+import { FFSkeletonList } from './FFSkeletonList';
+
+interface Props {
+  sub?: ISubscription;
+}
+
+export const SubList: React.FC<Props> = ({ sub }) => {
+  const { t } = useTranslation();
+  const [dataList, setDataList] = useState<IDataListItem[]>(FFSkeletonList);
+
+  useEffect(() => {
+    if (sub) {
+      setDataList([
+        {
+          label: t('id'),
+          value: <FFListText color="primary" text={sub.id} />,
+          button: <FFCopyButton value={sub.id} />,
+        },
+        {
+          label: t('transport'),
+          value: <FFListText color="primary" text={sub.transport} />,
+        },
+        {
+          label: t('created'),
+          value: <FFListTimestamp ts={sub.created} />,
+        },
+      ]);
+    }
+  }, [sub]);
+
+  return (
+    <>
+      {!sub ? (
+        <FFCircleLoader color="warning" />
+      ) : (
+        dataList.map((d, idx) => <FFListItem key={idx} item={d} />)
+      )}
+    </>
+  );
+};

src/components/Navigation/MyNodeNav.tsx

@@ -0,0 +1,55 @@
+// 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 HexagonIcon from '@mui/icons-material/Hexagon';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ApplicationContext } from '../../contexts/ApplicationContext';
+import { FF_NAV_PATHS, INavItem } from '../../interfaces';
+import { NavSection } from './NavSection';
+
+export const MyNodeNav = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { selectedNamespace } = useContext(ApplicationContext);
+  const { pathname } = useLocation();
+
+  const myNodePath = FF_NAV_PATHS.myNodePath(selectedNamespace);
+  const myNodeSubscriptionsPath =
+    FF_NAV_PATHS.myNodeSubscriptionsPath(selectedNamespace);
+
+  const navItems: INavItem[] = [
+    {
+      name: t('dashboard'),
+      action: () => navigate(myNodePath),
+      itemIsActive: pathname === myNodePath,
+    },
+    {
+      name: t('subscriptions'),
+      action: () => navigate(myNodeSubscriptionsPath),
+      itemIsActive: pathname === myNodeSubscriptionsPath,
+    },
+  ];
+
+  return (
+    <NavSection
+      icon={<HexagonIcon />}
+      navItems={navItems}
+      title={t('myNode')}
+    />
+  );
+};

src/components/Navigation/Navigation.tsx

@@ -17,6 +17,7 @@ import { FF_NAV_PATHS } from '../../interfaces';
 import { MenuLogo } from '../MenuLogo';
 import { ActivityNav } from './ActivityNav';
 import { BlockchainNav } from './BlockchainNav';
+import { MyNodeNav } from './MyNodeNav';
 import { NavItem } from './NavItem';
 import { NetworkNav } from './NetworkNav';
 import { OffChainNav } from './OffChainNav';
@@ -45,13 +46,7 @@ export const Navigation: React.FC = () => {
       <OffChainNav />
       <TokensNav />
       <NetworkNav />
-      <NavItem
-        name={t('myNode')}
-        icon={<HexagonIcon />}
-        action={() => navigate(FF_NAV_PATHS.myNodePath(selectedNamespace))}
-        itemIsActive={pathname === FF_NAV_PATHS.myNodePath(selectedNamespace)}
-        isRoot
-      />
+      <MyNodeNav />
       <NavItem
         name={t('docs')}
         icon={<MenuBookIcon />}

src/components/Slides/SubscriptionSlide.tsx

@@ -0,0 +1,69 @@
+// 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 { Grid } from '@mui/material';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ISubscription } from '../../interfaces';
+import { DEFAULT_PADDING } from '../../theme';
+import { JsonViewAccordion } from '../Accordions/JsonViewerAccordion';
+import { SubList } from '../Lists/SubList';
+import { DisplaySlide } from './DisplaySlide';
+import { SlideHeader } from './SlideHeader';
+
+interface Props {
+  sub: ISubscription;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const SubscriptionSlide: React.FC<Props> = ({ sub, open, onClose }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <DisplaySlide open={open} onClose={onClose}>
+        <Grid container direction="column" p={DEFAULT_PADDING}>
+          {/* Header */}
+          <SlideHeader subtitle={t('subscription')} title={sub.name} />
+          {/* Data list */}
+          <Grid container item pb={DEFAULT_PADDING}>
+            <SubList sub={sub} />
+          </Grid>
+
+          {sub.filter && (
+            <Grid container item pb={DEFAULT_PADDING}>
+              <JsonViewAccordion
+                isOpen
+                header={t('filter')}
+                json={sub.filter}
+              />
+            </Grid>
+          )}
+          {sub.options && (
+            <Grid container item>
+              <JsonViewAccordion
+                isOpen
+                header={t('options')}
+                json={sub.options}
+              />
+            </Grid>
+          )}
+        </Grid>
+      </DisplaySlide>
+    </>
+  );
+};

src/interfaces/api.ts

@@ -342,6 +342,13 @@ export interface IPagedOrganizationResponse {
   total: number;
 }
 
+export interface IPagedSubscriptionsResponse {
+  pageParam: number;
+  count: number;
+  items: ISubscription[];
+  total: number;
+}
+
 export interface IPagedTokenPoolResponse {
   pageParam: number;
   count: number;
@@ -380,6 +387,17 @@ export interface IStatus {
   };
 }
 
+export interface ISubscription {
+  id: string;
+  namespace: string;
+  name: string;
+  transport: string;
+  filter?: any;
+  options?: any;
+  created: string;
+  updated: string | null;
+}
+
 export interface ITokenAccount {
   key: string;
 }

src/interfaces/filters.ts

@@ -140,6 +140,17 @@ export const PoolFilters = [
   'tx.id',
 ];
 
+export const SubscriptionFilters = [
+  'id',
+  'namespace',
+  'name',
+  'transport',
+  'events',
+  'filters',
+  'options',
+  'created',
+];
+
 export const TransactionFilters = ['id', 'type', 'created', 'blockchainids'];
 
 export const TransferFilters = [

src/interfaces/navigation.ts

@@ -42,6 +42,7 @@ export const OFFCHAIN_PATH = 'offChain';
 export const OPERATIONS_PATH = 'operations';
 export const ORGANIZATIONS_PATH = 'organizations';
 export const POOLS_PATH = 'pools';
+export const SUBSCRIPTIONS_PATH = 'subscriptions';
 export const TOKENS_PATH = 'tokens';
 export const TRANSACTIONS_PATH = 'transactions';
 export const TRANSFERS_PATH = 'transfers';
@@ -121,6 +122,8 @@ export const FF_NAV_PATHS = {
     `/${NAMESPACES_PATH}/${ns}/${NETWORK_PATH}/${IDENTITIES_PATH}`,
   // My Node
   myNodePath: (ns: string) => `/${NAMESPACES_PATH}/${ns}/${MY_NODES_PATH}`,
+  myNodeSubscriptionsPath: (ns: string) =>
+    `/${NAMESPACES_PATH}/${ns}/${MY_NODES_PATH}/${SUBSCRIPTIONS_PATH}`,
   // Docs
   docsPath: DOCS_PATH,
 };

src/pages/MyNode/Routes.tsx

@@ -1,6 +1,7 @@
 import { RouteObject } from 'react-router-dom';
 import { NAMESPACES_PATH } from '../../interfaces';
 import { MyNodeDashboard } from './views/Dashboard';
+import { MyNodeSubscriptions } from './views/Subscriptions';
 
 export const MyNodeRoutes: RouteObject = {
   path: `${NAMESPACES_PATH}/:namespace/myNode`,
@@ -10,5 +11,9 @@ export const MyNodeRoutes: RouteObject = {
       index: true,
       element: <MyNodeDashboard />,
     },
+    {
+      path: 'subscriptions',
+      element: <MyNodeSubscriptions />,
+    },
   ],
 };