@orchestrator-ui/orchestrator-ui-components 0.0.1-alpha.1 → 0.0.1-alpha.3

package/index.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { css } from '@emotion/react';
 import { useState, createContext, useContext } from 'react';
-import { useEuiTheme, EuiBadge, EuiHeader, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderLogo, EuiBadgeGroup, EuiButtonIcon, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
+import { useEuiTheme, EuiBadge, EuiHeader, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderLogo, EuiBadgeGroup, EuiButtonIcon, EuiToolTip, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
 import { useQuery } from 'react-query';
-import { useRouter } from 'next/router';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -3034,9 +3033,7 @@ const OrchestratorPageHeader = ({
   const {
     data: processStatusCounts
   } = useProcessStatusCountsQuery();
-  const {
-    total: totalFailedTasks
-  } = getTaskCountsSummary(processStatusCounts);
+  const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
   return jsxs(EuiHeader, Object.assign({
     css: {
       backgroundColor: theme.colors.primary,
@@ -3068,15 +3065,8 @@ const OrchestratorPageHeader = ({
               color: theme.colors.success
             })
           }, {
-            children: ["Engine ", engineStatus === null || engineStatus === void 0 ? void 0 : engineStatus.global_status]
-          })), jsx(HeaderBadge, Object.assign({
-            color: "emptyShade",
-            iconType: () => jsx(XCircleFill, {
-              color: theme.colors.danger
-            })
-          }, {
-            children: totalFailedTasks
-          }))]
+            children: ["Engine is ", engineStatus === null || engineStatus === void 0 ? void 0 : engineStatus.global_status]
+          })), jsx(FailedTasksBadge, Object.assign({}, taskCountsSummary))]
         })), jsx(EuiButtonIcon, {
           "aria-label": "Logout",
           display: "empty",
@@ -3094,47 +3084,65 @@ const OrchestratorPageHeader = ({
     })]
   }));
 };
+const FailedTasksBadge = taskCountsSummary => {
+  const {
+    theme
+  } = useOrchestratorTheme();
+  return jsx(EuiToolTip, Object.assign({
+    position: "bottom",
+    content: jsxs(Fragment, {
+      children: [jsxs("div", {
+        children: ["Failed: ", taskCountsSummary.failed]
+      }), jsxs("div", {
+        children: ["Inconsistent data: ", taskCountsSummary.inconsistentData]
+      }), jsxs("div", {
+        children: ["API unavailable: ", taskCountsSummary.apiUnavailable]
+      })]
+    })
+  }, {
+    children: jsx(HeaderBadge, Object.assign({
+      color: "emptyShade",
+      iconType: () => jsx(XCircleFill, {
+        color: theme.colors.danger
+      })
+    }, {
+      children: taskCountsSummary.total
+    }))
+  }));
+};
 
 const OrchestratorSidebar = ({
-  text
-}) => {
-  const router = useRouter();
-  return jsx(EuiSideNav, {
-    mobileTitle: "Nav Items",
-    isOpenOnMobile: false,
+  routeTo
+}) => jsx(EuiSideNav, {
+  mobileTitle: "Nav Items",
+  isOpenOnMobile: false,
+  items: [{
+    name: 'Menu',
+    id: 1,
     items: [{
-      name: 'Menu',
-      id: 1,
-      items: [{
-        name: 'Home',
-        id: 2,
-        onClick: e => {
-          e.preventDefault();
-          router.push('/');
-        },
-        href: '/'
-      }, {
-        name: 'Subscriptions',
-        id: 3,
-        // TODO: NEXT router / EUI seem to cause unneeded re-renders. At least in dev mode,
-        onClick: e => {
-          e.preventDefault();
-          router.push('/subscriptions');
-        },
-        href: '/subscriptions'
-      }
-      // {
-      //     name: 'Anchor item',
-      //     id: 4,
-      //     href: '#',
-      // },
-      ]
+      name: 'Home',
+      id: 2,
+      onClick: e => {
+        e.preventDefault();
+        routeTo('/');
+      },
+      href: '/'
+    }, {
+      name: 'Subscriptions',
+      id: 3,
+      // TODO: NEXT router / EUI seem to cause unneeded re-renders. At least in dev mode,
+      onClick: e => {
+        e.preventDefault();
+        routeTo('/subscriptions');
+      },
+      href: '/subscriptions'
     }]
-  });
-};
+  }]
+});
 
 const OrchestratorPageTemplate = ({
   children,
+  routeTo,
   getAppLogo
 }) => {
   const {
@@ -3160,7 +3168,7 @@ const OrchestratorPageTemplate = ({
         }
       }, {
         children: jsx(OrchestratorSidebar, {
-          text: "Sidebar"
+          routeTo: routeTo
         })
       })), jsx(EuiPageTemplate.Section, Object.assign({
         css: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.3",
   "main": "./index.js",
   "module": "./index.js",
   "type": "module",
@@ -10,7 +10,6 @@
     "react": "18.2.0",
     "@emotion/react": "11.10.6",
     "@elastic/eui": "75.1.2",
-    "next": "13.1.1",
     "react-query": "3.39.3"
   }
 }

package/src/lib/components/OrchestratorPageTemplate/OrchestratorPageTemplate.d.ts

@@ -1,6 +1,7 @@
 import { FC, ReactElement, ReactNode } from 'react';
 export interface OrchestratorPageTemplateProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
+    routeTo: (route: string) => void;
     children: ReactNode;
 }
 export declare const OrchestratorPageTemplate: FC<OrchestratorPageTemplateProps>;

package/src/lib/components/OrchestratorPageTemplate/OrchestratorSidebar.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
 export interface OrchestratorSidebarProps {
-    text: string;
+    routeTo: (route: string) => void;
 }
 export declare const OrchestratorSidebar: FC<OrchestratorSidebarProps>;