@orchestrator-ui/orchestrator-ui-components 0.0.1-alpha.5 → 0.0.1-alpha.7

package/index.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { css } from '@emotion/react';
 import { useState, createContext, useContext, useRef } from 'react';
-import { useEuiTheme, tint, EuiBadge, EuiText, EuiHeader, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderLogo, EuiBadgeGroup, EuiButtonIcon, EuiToolTip, EuiSideNav, EuiPageTemplate, EuiDataGrid } from '@elastic/eui';
+import { useEuiTheme, tint, EuiBadge, EuiText, EuiHeader, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderLogo, EuiBadgeGroup, EuiButtonIcon, EuiToolTip, EuiSideNav, EuiButton, EuiSpacer, EuiPageTemplate, EuiDataGrid, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTextColor, EuiPanel, EuiHorizontalRule, EuiFieldSearch, EuiAvatar } from '@elastic/eui';
 import { useQuery } from 'react-query';
-import 'regenerator-runtime/runtime';
 import { GraphQLClient } from 'graphql-request';
+import moment from 'moment';
+import Link from 'next/link';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2990,6 +2991,7 @@ const useOrchestratorConfig = initialOrchestratorConfig => {
 };
 
 const OrchestratorConfigContext = /*#__PURE__*/createContext({
+  orchestratorApiBaseUrl: '',
   engineStatusEndpoint: '',
   processStatusCountsEndpoint: '',
   environmentName: '',
@@ -3048,10 +3050,9 @@ const useProcessStatusCountsQuery = () => {
 };
 
 const getTaskCountsSummary = processStatusCounts => {
-  var _a, _b, _c;
-  const failed = (_a = processStatusCounts === null || processStatusCounts === void 0 ? void 0 : processStatusCounts.task_counts.failed) !== null && _a !== void 0 ? _a : 0;
-  const inconsistentData = (_b = processStatusCounts === null || processStatusCounts === void 0 ? void 0 : processStatusCounts.task_counts.inconsistent_data) !== null && _b !== void 0 ? _b : 0;
-  const apiUnavailable = (_c = processStatusCounts === null || processStatusCounts === void 0 ? void 0 : processStatusCounts.task_counts.api_unavailable) !== null && _c !== void 0 ? _c : 0;
+  const failed = 0;
+  const inconsistentData = 0;
+  const apiUnavailable = 0;
   return {
     failed,
     inconsistentData,
@@ -3152,10 +3153,8 @@ const FailedTasksBadge = () => {
   const {
     theme
   } = useOrchestratorTheme();
-  const {
-    data: processStatusCounts
-  } = useProcessStatusCountsQuery();
-  const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
+  useProcessStatusCountsQuery();
+  const taskCountsSummary = getTaskCountsSummary();
   return jsx(EuiToolTip, Object.assign({
     position: "bottom",
     content: jsxs(Fragment, {
@@ -3186,10 +3185,24 @@ const OrchestratorSidebar = ({
   mobileTitle: "Nav Items",
   isOpenOnMobile: false,
   items: [{
+    renderItem: () => jsxs(Fragment, {
+      children: [jsx(EuiButton, Object.assign({
+        onClick: e => {
+          e.preventDefault();
+          routeTo('/new-process');
+        },
+        iconType: "plus",
+        fullWidth: true
+      }, {
+        children: "New Process"
+      })), jsx(EuiSpacer, {
+        size: "m"
+      })]
+    }),
     name: 'Menu',
     id: 1,
     items: [{
-      name: 'Home',
+      name: 'Start',
       id: 2,
       onClick: e => {
         e.preventDefault();
@@ -3957,4 +3970,347 @@ const getStatusBadgeColor = status => {
   statusColors[status] : 'primary';
 };
 
-export { Badge, CheckmarkCircleFill, CustomButton, Environment, LogoutIcon, MinusCircleOutline, OrchestratorConfigContext, OrchestratorConfigProvider, OrchestratorPageTemplate, PlusCircleFill, ProcessStatus, SortDirection, StatusDotIcon, SubscriptionStatusBadge, Table, XCircleFill, columnSortToEuiDataGridSorting, defaultOrchestratorTheme, getInitialColumnOrder, getStatusBadgeColor, getTypedFieldFromObject, useEngineStatusQuery, useOrchestratorConfig, useOrchestratorTheme, useProcessStatusCountsQuery, useQueryWithGraphql };
+const ListItemStartPage = ({
+  item,
+  type
+}) => {
+  const [hoverState, setHoverState] = useState(false);
+  const renderItem = (item, type) => {
+    if (type === 'subscription') {
+      item = item;
+      return jsxs(EuiFlexItem, {
+        children: [jsx(EuiTextColor, Object.assign({
+          color: hoverState ? '#397dc2' : 'black',
+          style: {
+            fontWeight: 500,
+            transition: '0.2s'
+          }
+        }, {
+          children: item.product.name
+        })), jsx(EuiTextColor, Object.assign({
+          style: {
+            fontWeight: 400
+          }
+        }, {
+          children: item.subscription_id.slice(0, 8)
+        }))]
+      });
+    } else if (type === 'process') {
+      item = item;
+      const date = new Date(item.last_modified_at * 1000);
+      const formattedDate = moment(date).format('DD-MM-YYYY, HH:mm');
+      return jsxs(EuiFlexItem, {
+        children: [jsx(EuiTextColor, Object.assign({
+          color: hoverState ? '#397dc2' : 'black',
+          style: {
+            fontWeight: 500,
+            transition: '0.2s'
+          }
+        }, {
+          children: item.workflow
+        })), jsxs(EuiTextColor, Object.assign({
+          style: {
+            fontWeight: 400
+          }
+        }, {
+          children: [formattedDate, " for", ' ', jsx("span", Object.assign({
+            style: {
+              color: '#397dc2'
+            }
+          }, {
+            children: "KLM"
+          }))]
+        }))]
+      });
+    }
+  };
+  return jsx(Link, Object.assign({
+    href: `/subscriptions/${'subscription_id' in item ? item.subscription_id : ''}`
+  }, {
+    children: jsxs(EuiFlexGroup, Object.assign({
+      style: {
+        cursor: 'pointer',
+        paddingBlock: 10
+      },
+      onMouseOver: () => setHoverState(true),
+      onMouseLeave: () => setHoverState(false)
+    }, {
+      children: [renderItem(item, type), jsx(EuiFlexItem, Object.assign({
+        grow: false,
+        style: {
+          display: hoverState ? 'block' : 'none'
+        }
+      }, {
+        children: jsx(EuiIcon, {
+          type: "sortRight",
+          color: "primary"
+        })
+      }))]
+    }))
+  }));
+};
+
+function ListStartPage({
+  list
+}) {
+  return list && jsx(EuiFlexItem, Object.assign({
+    style: {
+      minWidth: 300
+    }
+  }, {
+    children: jsxs(EuiPanel, Object.assign({
+      hasShadow: false,
+      hasBorder: true,
+      paddingSize: "l"
+    }, {
+      children: [jsx("p", Object.assign({
+        style: {
+          fontWeight: 600
+        }
+      }, {
+        children: list.title
+      })), jsx(EuiSpacer, {
+        size: "m"
+      }), list.items.map((item, index) => jsxs(Fragment, {
+        children: [jsx(ListItemStartPage, {
+          item: item,
+          type: list.type
+        }), index === list.items.length - 1 ? null : jsx(EuiHorizontalRule, {
+          margin: "none"
+        })]
+      })), jsx(EuiSpacer, {
+        size: "m"
+      }), jsx(EuiButton, Object.assign({
+        fullWidth: true
+      }, {
+        children: list.buttonName
+      }))]
+    }))
+  }));
+}
+
+function getFavouriteSubscriptions(apiUrl) {
+  return __awaiter(this, void 0, void 0, function* () {
+    console.log('api url', apiUrl);
+    const response = yield fetch(apiUrl + '/subscriptions/?range=10%2C15');
+    return yield response.json();
+  });
+}
+function getProcessesNeedingAttention(apiUrl) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const response = yield fetch(apiUrl + '/processes/?range=100%2C105');
+    return yield response.json();
+  });
+}
+function getRecentProcesses(apiUrl) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const response = yield fetch(apiUrl + '/processes/?range=106%2C111');
+    return yield response.json();
+  });
+}
+const useFavouriteSubscriptions = () => {
+  const {
+    orchestratorApiBaseUrl
+  } = useContext(OrchestratorConfigContext);
+  const {
+    data,
+    isLoading
+  } = useQuery(['favouriteSubscriptions'], () => getFavouriteSubscriptions(orchestratorApiBaseUrl));
+  const initialData = {
+    buttonName: 'Show all favourites',
+    items: [],
+    title: 'Favourite Subscriptions',
+    type: 'subscription'
+  };
+  return isLoading ? initialData : Object.assign(Object.assign({}, initialData), {
+    items: data
+  });
+};
+const useProcessesAttention = () => {
+  const {
+    orchestratorApiBaseUrl
+  } = useContext(OrchestratorConfigContext);
+  const {
+    data,
+    isLoading
+  } = useQuery(['processesAttention'], () => getProcessesNeedingAttention(orchestratorApiBaseUrl));
+  const initialData = {
+    type: 'process',
+    title: 'Processes that need attention',
+    items: [],
+    buttonName: 'Show all active processes'
+  };
+  return isLoading ? initialData : Object.assign(Object.assign({}, initialData), {
+    items: data
+  });
+};
+const useRecentProcesses = () => {
+  const {
+    orchestratorApiBaseUrl
+  } = useContext(OrchestratorConfigContext);
+  const {
+    data,
+    isLoading
+  } = useQuery(['recentProcesses'], () => getRecentProcesses(orchestratorApiBaseUrl));
+  const initialData = {
+    type: 'process',
+    title: 'Recently completed processes',
+    items: [],
+    buttonName: 'Show all completed processes'
+  };
+  return isLoading ? initialData : Object.assign(Object.assign({}, initialData), {
+    items: data
+  });
+};
+
+const MultiListSection = () => {
+  const favouriteSubscriptionsList = useFavouriteSubscriptions();
+  const processesAttentionList = useProcessesAttention();
+  const completedProcessesList = useRecentProcesses();
+  return jsxs(EuiFlexGroup, Object.assign({
+    wrap: true
+  }, {
+    children: [jsx(ListStartPage, {
+      list: favouriteSubscriptionsList
+    }), jsx(ListStartPage, {
+      list: processesAttentionList
+    }), jsx(ListStartPage, {
+      list: completedProcessesList
+    })]
+  }));
+};
+
+const FrequentlyUsed = ({
+  values
+}) => {
+  return jsx(EuiFlexGroup, Object.assign({
+    wrap: true,
+    gutterSize: "m"
+  }, {
+    children: values.map((value, index) => jsx(EuiFlexItem, Object.assign({
+      grow: false
+    }, {
+      children: jsx(EuiButton, Object.assign({
+        size: "xs",
+        style: {
+          minWidth: 0
+        }
+      }, {
+        children: value
+      }))
+    }), index))
+  }));
+};
+
+const NewProcessPanel = () => {
+  const [value, setValue] = useState('');
+  const onChange = e => {
+    setValue(e.target.value);
+  };
+  const frequentlyUsedValues = ['IP Prefix', 'SN8 LightPath', 'NL8 MSC', 'NL8 Service Port 100G', 'SN8 AGGSP'];
+  return jsxs(EuiPanel, Object.assign({
+    hasShadow: false,
+    color: "subdued",
+    paddingSize: "l"
+  }, {
+    children: [jsx(EuiText, {
+      children: jsx("b", {
+        children: "Start a new process"
+      })
+    }), jsx(EuiSpacer, {
+      size: "m"
+    }), jsx(EuiFieldSearch, {
+      fullWidth: true,
+      placeholder: "Search and select process",
+      value: value,
+      onChange: e => onChange(e),
+      "aria-label": "Search and select process"
+    }), jsx(EuiSpacer, {
+      size: "m"
+    }), jsx(EuiTextColor, Object.assign({
+      color: "subdued"
+    }, {
+      children: "Frequently used:"
+    })), jsx(EuiSpacer, {
+      size: "s"
+    }), jsx(FrequentlyUsed, {
+      values: frequentlyUsedValues
+    })]
+  }));
+};
+
+const totalStats = [{
+  icon: 'kubernetesPod',
+  name: 'subscriptions',
+  value: 24864,
+  color: 'primary'
+}, {
+  icon: 'error',
+  name: 'processes failed',
+  value: 462252,
+  color: 'danger'
+}, {
+  icon: 'checkInCircleFilled',
+  name: 'processes completed',
+  value: 1353632,
+  color: 'success'
+}];
+const StatCards = () => {
+  const [stats] = useState(totalStats);
+  const {
+    theme
+  } = useOrchestratorTheme();
+  return jsx(EuiFlexGroup, Object.assign({
+    wrap: true
+  }, {
+    children: stats.map((stat, index) => jsx(EuiFlexItem, {
+      children: jsx(EuiPanel, Object.assign({
+        hasShadow: false,
+        color: "subdued",
+        paddingSize: "l"
+      }, {
+        children: jsxs(EuiFlexGroup, {
+          children: [jsx(EuiFlexItem, Object.assign({
+            grow: false
+          }, {
+            children: jsx(EuiAvatar, {
+              iconSize: "l",
+              size: "xl",
+              type: "space",
+              name: stat.name,
+              style: {
+                maxHeight: 55,
+                maxWidth: 55
+              },
+              iconType: stat.icon,
+              iconColor: theme.colors.ghost,
+              color: theme.colors[stat.color]
+            })
+          })), jsxs(EuiFlexItem, {
+            children: [jsx(EuiText, Object.assign({
+              color: "subdued"
+            }, {
+              children: jsxs("h4", Object.assign({
+                style: {
+                  fontWeight: 300
+                }
+              }, {
+                children: ["Total ", stat.name]
+              }))
+            })), jsx(EuiText, {
+              children: jsx("h2", Object.assign({
+                style: {
+                  fontWeight: 500
+                }
+              }, {
+                children: stat.value.toLocaleString('de-DE')
+              }))
+            })]
+          })]
+        })
+      }))
+    }, index))
+  }));
+};
+
+export { Badge, CheckmarkCircleFill, CustomButton, Environment, ListItemStartPage, LogoutIcon, MinusCircleOutline, MultiListSection, NewProcessPanel, OrchestratorConfigContext, OrchestratorConfigProvider, OrchestratorPageTemplate, PlusCircleFill, ProcessStatus, SortDirection, StatCards, StatusDotIcon, SubscriptionStatusBadge, Table, XCircleFill, columnSortToEuiDataGridSorting, defaultOrchestratorTheme, getInitialColumnOrder, getStatusBadgeColor, getTypedFieldFromObject, useEngineStatusQuery, useOrchestratorConfig, useOrchestratorTheme, useProcessStatusCountsQuery, useQueryWithGraphql };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1-alpha.7",
   "main": "./index.js",
   "module": "./index.js",
   "type": "module",
@@ -10,7 +10,8 @@
     "@elastic/eui": "77.1.0",
     "react": "18.2.0",
     "@emotion/react": "11.10.6",
-    "regenerator-runtime": "0.13.7",
+    "moment": "2.29.4",
+    "next": "13.1.1",
     "react-query": "3.39.3",
     "graphql-request": "5.2.0",
     "@graphql-typed-document-node/core": "3.1.2"

package/src/index.d.ts

@@ -9,4 +9,10 @@ export * from './lib/theme/defaultOrchestratorTheme';
 export * from './lib/utils/getTypedFieldFromObject';
 export * from './lib/utils/getStatusBadgeColor';
 export * from './lib/contexts/OrchestratorConfigContext';
+export * from './lib/components/StartPage/ListItemStartPage';
+export * from './lib/components/StartPage/ListStartPage';
+export * from './lib/components/StartPage/MultiListSection';
+export * from './lib/components/StartPage/NewProcessPanel';
+export * from './lib/components/StartPage/StatCards';
+export * from './lib/types';
 export * from './lib/hooks';

package/src/lib/components/StartPage/FrequentlyUsed.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export interface FrequentlyUsedProps {
+    values: string[];
+}
+export declare const FrequentlyUsed: FC<FrequentlyUsedProps>;

package/src/lib/components/StartPage/ListItemStartPage.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { Process, Subscription } from '../../types';
+export interface ListItemStartPageProps {
+    item: Subscription | Process;
+    type: string;
+}
+export declare const ListItemStartPage: FC<ListItemStartPageProps>;

package/src/lib/components/StartPage/ListStartPage.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { ItemsList } from '../../types';
+interface ListStartPage {
+    list: ItemsList;
+}
+export default function ListStartPage({ list }: ListStartPage): ReactElement;
+export {};

package/src/lib/components/StartPage/MultiListSection.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MultiListSection: FC;

package/src/lib/components/StartPage/NewProcessPanel.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const NewProcessPanel: FC;

package/src/lib/components/StartPage/StatCards.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const StatCards: FC;

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

@@ -1,4 +1,3 @@
-import 'regenerator-runtime/runtime';
 import { ControlColumn, DataSorting, TableColumns } from './columns';
 import { EuiDataGridPaginationProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
 export declare type Pagination = EuiDataGridPaginationProps & {

package/src/lib/hooks/DataFetchHooks.d.ts

@@ -0,0 +1,18 @@
+export declare const useFavouriteSubscriptions: () => {
+    items: any;
+    type: string;
+    title: string;
+    buttonName: string;
+};
+export declare const useProcessesAttention: () => {
+    items: any;
+    type: string;
+    title: string;
+    buttonName: string;
+};
+export declare const useRecentProcesses: () => {
+    items: any;
+    type: string;
+    title: string;
+    buttonName: string;
+};

package/src/lib/hooks/useOrchestratorConfig.d.ts

@@ -4,6 +4,7 @@ export declare enum Environment {
 }
 export declare type OrchestratorConfig = {
     environmentName: Environment | string;
+    orchestratorApiBaseUrl: string;
     engineStatusEndpoint: string;
     processStatusCountsEndpoint: string;
     graphqlEndpoint: string;

package/src/lib/types.d.ts

@@ -0,0 +1,55 @@
+import { _EuiThemeColorsMode } from '@elastic/eui/src/global_styling/variables/colors';
+export interface ItemsList {
+    type: string;
+    title: string;
+    items: Subscription[] | Process[];
+    buttonName: string;
+}
+export interface TotalStat {
+    icon: string;
+    name: string;
+    value: number;
+    color: keyof _EuiThemeColorsMode;
+}
+export interface Subscription {
+    name: string;
+    subscription_id: string;
+    description: string;
+    product: Product;
+    product_id: string;
+    status: string;
+    insync: boolean;
+    customer_id: string;
+    start_date: number;
+    end_date: number;
+    note: string;
+}
+export interface Process {
+    pid: string;
+    workflow: string;
+    assignee: string;
+    last_status: string;
+    failed_reason: string;
+    traceback: string;
+    step: string;
+    created_by: string;
+    started_at: number;
+    last_modified_at: number;
+    is_task: boolean;
+}
+export interface Product {
+    name: string;
+    tag: string;
+    description: string;
+    product_id: string;
+    created_at: number;
+    product_type: string;
+    end_date: number;
+    status: string;
+    fixed_inputs: [];
+    workflows: [];
+    product_blocks: [];
+    create_subscription_workflow_key: string;
+    modify_subscription_workflow_key: string;
+    terminate_subscription_workflow_key: string;
+}