@orchestrator-ui/orchestrator-ui-components 0.0.1-alpha.8 → 0.0.1-alpha.9

package/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
+import { EuiBadge, EuiText, useEuiTheme, tint, EuiToolTip, EuiHeader, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderLogo, EuiBadgeGroup, EuiButtonIcon, EuiSideNav, EuiButton, EuiSpacer, EuiPageTemplate, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTextColor, EuiPanel, EuiHorizontalRule, EuiFieldSearch, EuiAvatar, EuiDataGrid } from '@elastic/eui';
 import { useState, createContext, useContext, useRef } from 'react';
-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 { GraphQLClient, request } from 'graphql-request';
 import { useQuery } from 'react-query';
-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 : {};
 
@@ -13,7 +13,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$g =
+var global$i =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -21,11 +21,11 @@ var global$g =
   check(typeof self == 'object' && self) ||
   check(typeof commonjsGlobal == 'object' && commonjsGlobal) ||
   // eslint-disable-next-line no-new-func -- fallback
-  (function () { return this; })() || Function('return this')();
+  (function () { return this; })() || commonjsGlobal || Function('return this')();
 
 var objectGetOwnPropertyDescriptor = {};
 
-var fails$h = function (exec) {
+var fails$i = function (exec) {
   try {
     return !!exec();
   } catch (error) {
@@ -33,17 +33,17 @@ var fails$h = function (exec) {
   }
 };
 
-var fails$g = fails$h;
+var fails$h = fails$i;
 
 // Detect IE8's incomplete defineProperty implementation
-var descriptors = !fails$g(function () {
+var descriptors = !fails$h(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
-var fails$f = fails$h;
+var fails$g = fails$i;
 
-var functionBindNative = !fails$f(function () {
+var functionBindNative = !fails$g(function () {
   // eslint-disable-next-line es/no-function-prototype-bind -- safe
   var test = (function () { /* empty */ }).bind();
   // eslint-disable-next-line no-prototype-builtins -- safe
@@ -95,24 +95,24 @@ var functionUncurryThis = NATIVE_BIND$2 ? uncurryThisWithBind : function (fn) {
   };
 };
 
-var uncurryThis$g = functionUncurryThis;
+var uncurryThis$i = functionUncurryThis;
 
-var toString$4 = uncurryThis$g({}.toString);
-var stringSlice$1 = uncurryThis$g(''.slice);
+var toString$6 = uncurryThis$i({}.toString);
+var stringSlice$1 = uncurryThis$i(''.slice);
 
 var classofRaw$2 = function (it) {
-  return stringSlice$1(toString$4(it), 8, -1);
+  return stringSlice$1(toString$6(it), 8, -1);
 };
 
-var uncurryThis$f = functionUncurryThis;
-var fails$e = fails$h;
+var uncurryThis$h = functionUncurryThis;
+var fails$f = fails$i;
 var classof$6 = classofRaw$2;
 
 var $Object$4 = Object;
-var split = uncurryThis$f(''.split);
+var split = uncurryThis$h(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
-var indexedObject = fails$e(function () {
+var indexedObject = fails$f(function () {
   // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
   // eslint-disable-next-line no-prototype-builtins -- safe
   return !$Object$4('z').propertyIsEnumerable(0);
@@ -132,17 +132,17 @@ var $TypeError$e = TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
-var requireObjectCoercible$3 = function (it) {
+var requireObjectCoercible$4 = function (it) {
   if (isNullOrUndefined$3(it)) throw $TypeError$e("Can't call method on " + it);
   return it;
 };
 
 // toObject with fallback for non-array-like ES3 strings
 var IndexedObject$1 = indexedObject;
-var requireObjectCoercible$2 = requireObjectCoercible$3;
+var requireObjectCoercible$3 = requireObjectCoercible$4;
 
 var toIndexedObject$5 = function (it) {
-  return IndexedObject$1(requireObjectCoercible$2(it));
+  return IndexedObject$1(requireObjectCoercible$3(it));
 };
 
 var documentAll$2 = typeof document == 'object' && document.all;
@@ -179,7 +179,7 @@ var isObject$9 = $documentAll.IS_HTMLDDA ? function (it) {
   return typeof it == 'object' ? it !== null : isCallable$j(it);
 };
 
-var global$f = global$g;
+var global$h = global$i;
 var isCallable$i = isCallable$k;
 
 var aFunction = function (argument) {
@@ -187,20 +187,20 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$7 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$f[namespace]) : global$f[namespace] && global$f[namespace][method];
+  return arguments.length < 2 ? aFunction(global$h[namespace]) : global$h[namespace] && global$h[namespace][method];
 };
 
-var uncurryThis$e = functionUncurryThis;
+var uncurryThis$g = functionUncurryThis;
 
-var objectIsPrototypeOf = uncurryThis$e({}.isPrototypeOf);
+var objectIsPrototypeOf = uncurryThis$g({}.isPrototypeOf);
 
 var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
 
-var global$e = global$g;
+var global$g = global$i;
 var userAgent$5 = engineUserAgent;
 
-var process$4 = global$e.process;
-var Deno$1 = global$e.Deno;
+var process$4 = global$g.process;
+var Deno$1 = global$g.Deno;
 var versions = process$4 && process$4.versions || Deno$1 && Deno$1.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -227,14 +227,19 @@ var engineV8Version = version;
 /* eslint-disable es/no-symbol -- required for testing */
 
 var V8_VERSION$1 = engineV8Version;
-var fails$d = fails$h;
+var fails$e = fails$i;
+var global$f = global$i;
+
+var $String$5 = global$f.String;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
-var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$d(function () {
+var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$e(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-  return !String(symbol) || !(Object(symbol) instanceof Symbol) ||
+  // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+  // of course, fail.
+  return !$String$5(symbol) || !(Object(symbol) instanceof Symbol) ||
     // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
     !Symbol.sham && V8_VERSION$1 && V8_VERSION$1 < 41;
 });
@@ -310,24 +315,24 @@ var ordinaryToPrimitive$1 = function (input, pref) {
 
 var shared$3 = {exports: {}};
 
-var global$d = global$g;
+var global$e = global$i;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$6 = Object.defineProperty;
 
 var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$6(global$d, key, { value: value, configurable: true, writable: true });
+    defineProperty$6(global$e, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$d[key] = value;
+    global$e[key] = value;
   } return value;
 };
 
-var global$c = global$g;
+var global$d = global$i;
 var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = global$c[SHARED] || defineGlobalProperty$2(SHARED, {});
+var store$3 = global$d[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 var sharedStore = store$3;
 
@@ -336,27 +341,27 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.29.0',
+  version: '3.30.2',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.29.0/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
-var requireObjectCoercible$1 = requireObjectCoercible$3;
+var requireObjectCoercible$2 = requireObjectCoercible$4;
 
 var $Object$2 = Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
 var toObject$4 = function (argument) {
-  return $Object$2(requireObjectCoercible$1(argument));
+  return $Object$2(requireObjectCoercible$2(argument));
 };
 
-var uncurryThis$d = functionUncurryThis;
+var uncurryThis$f = functionUncurryThis;
 var toObject$3 = toObject$4;
 
-var hasOwnProperty = uncurryThis$d({}.hasOwnProperty);
+var hasOwnProperty = uncurryThis$f({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
@@ -365,31 +370,31 @@ var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
   return hasOwnProperty(toObject$3(it), key);
 };
 
-var uncurryThis$c = functionUncurryThis;
+var uncurryThis$e = functionUncurryThis;
 
 var id = 0;
 var postfix = Math.random();
-var toString$3 = uncurryThis$c(1.0.toString);
+var toString$5 = uncurryThis$e(1.0.toString);
 
 var uid$2 = function (key) {
-  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$3(++id + postfix, 36);
+  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$5(++id + postfix, 36);
 };
 
-var global$b = global$g;
+var global$c = global$i;
 var shared$2 = shared$3.exports;
 var hasOwn$a = hasOwnProperty_1;
 var uid$1 = uid$2;
 var NATIVE_SYMBOL = symbolConstructorDetection;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
-var Symbol$1 = global$b.Symbol;
+var Symbol$2 = global$c.Symbol;
 var WellKnownSymbolsStore = shared$2('wks');
-var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
+var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$2['for'] || Symbol$2 : Symbol$2 && Symbol$2.withoutSetter || uid$1;
 
 var wellKnownSymbol$g = function (name) {
   if (!hasOwn$a(WellKnownSymbolsStore, name)) {
-    WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$a(Symbol$1, name)
-      ? Symbol$1[name]
+    WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$a(Symbol$2, name)
+      ? Symbol$2[name]
       : createWellKnownSymbol('Symbol.' + name);
   } return WellKnownSymbolsStore[name];
 };
@@ -430,10 +435,10 @@ var toPropertyKey$3 = function (argument) {
   return isSymbol(key) ? key : key + '';
 };
 
-var global$a = global$g;
+var global$b = global$i;
 var isObject$6 = isObject$9;
 
-var document$3 = global$a.document;
+var document$3 = global$b.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$6(document$3) && isObject$6(document$3.createElement);
 
@@ -442,11 +447,11 @@ var documentCreateElement$2 = function (it) {
 };
 
 var DESCRIPTORS$a = descriptors;
-var fails$c = fails$h;
+var fails$d = fails$i;
 var createElement$1 = documentCreateElement$2;
 
 // Thanks to IE8 for its funny defineProperty
-var ie8DomDefine = !DESCRIPTORS$a && !fails$c(function () {
+var ie8DomDefine = !DESCRIPTORS$a && !fails$d(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement$1('div'), 'a', {
     get: function () { return 7; }
@@ -479,11 +484,11 @@ objectGetOwnPropertyDescriptor.f = DESCRIPTORS$9 ? $getOwnPropertyDescriptor$1 :
 var objectDefineProperty = {};
 
 var DESCRIPTORS$8 = descriptors;
-var fails$b = fails$h;
+var fails$c = fails$i;
 
 // V8 ~ Chrome 36-
 // https://bugs.chromium.org/p/v8/issues/detail?id=3334
-var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$b(function () {
+var v8PrototypeDefineBug = DESCRIPTORS$8 && fails$c(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
@@ -577,11 +582,11 @@ var functionName = {
   CONFIGURABLE: CONFIGURABLE
 };
 
-var uncurryThis$b = functionUncurryThis;
+var uncurryThis$d = functionUncurryThis;
 var isCallable$e = isCallable$k;
 var store$1 = sharedStore;
 
-var functionToString = uncurryThis$b(Function.toString);
+var functionToString = uncurryThis$d(Function.toString);
 
 // this helper broken in `core-js@3.4.1-3.4.4`, so we can't use `shared` helper
 if (!isCallable$e(store$1.inspectSource)) {
@@ -592,10 +597,10 @@ if (!isCallable$e(store$1.inspectSource)) {
 
 var inspectSource$3 = store$1.inspectSource;
 
-var global$9 = global$g;
+var global$a = global$i;
 var isCallable$d = isCallable$k;
 
-var WeakMap$1 = global$9.WeakMap;
+var WeakMap$1 = global$a.WeakMap;
 
 var weakMapBasicDetection = isCallable$d(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
@@ -611,7 +616,7 @@ var sharedKey$3 = function (key) {
 var hiddenKeys$4 = {};
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
-var global$8 = global$g;
+var global$9 = global$i;
 var isObject$4 = isObject$9;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$4;
 var hasOwn$7 = hasOwnProperty_1;
@@ -620,8 +625,8 @@ var sharedKey$2 = sharedKey$3;
 var hiddenKeys$3 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$2 = global$8.TypeError;
-var WeakMap = global$8.WeakMap;
+var TypeError$2 = global$9.TypeError;
+var WeakMap = global$9.WeakMap;
 var set$1, get, has;
 
 var enforce = function (it) {
@@ -681,8 +686,8 @@ var internalState = {
   getterFor: getterFor
 };
 
-var uncurryThis$a = functionUncurryThis;
-var fails$a = fails$h;
+var uncurryThis$c = functionUncurryThis;
+var fails$b = fails$i;
 var isCallable$c = isCallable$k;
 var hasOwn$6 = hasOwnProperty_1;
 var DESCRIPTORS$4 = descriptors;
@@ -695,11 +700,11 @@ var getInternalState$1 = InternalStateModule$2.get;
 var $String$2 = String;
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$5 = Object.defineProperty;
-var stringSlice = uncurryThis$a(''.slice);
-var replace = uncurryThis$a(''.replace);
-var join = uncurryThis$a([].join);
+var stringSlice = uncurryThis$c(''.slice);
+var replace$1 = uncurryThis$c(''.replace);
+var join = uncurryThis$c([].join);
 
-var CONFIGURABLE_LENGTH = DESCRIPTORS$4 && !fails$a(function () {
+var CONFIGURABLE_LENGTH = DESCRIPTORS$4 && !fails$b(function () {
   return defineProperty$5(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
 });
 
@@ -707,7 +712,7 @@ var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn$2 = makeBuiltIn$3.exports = function (value, name, options) {
   if (stringSlice($String$2(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace($String$2(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
+    name = '[' + replace$1($String$2(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -823,7 +828,7 @@ var toAbsoluteIndex$1 = toAbsoluteIndex$2;
 var lengthOfArrayLike$3 = lengthOfArrayLike$4;
 
 // `Array.prototype.{ indexOf, includes }` methods implementation
-var createMethod = function (IS_INCLUDES) {
+var createMethod$1 = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIndexedObject$3($this);
     var length = lengthOfArrayLike$3(O);
@@ -845,19 +850,19 @@ var createMethod = function (IS_INCLUDES) {
 var arrayIncludes = {
   // `Array.prototype.includes` method
   // https://tc39.es/ecma262/#sec-array.prototype.includes
-  includes: createMethod(true),
+  includes: createMethod$1(true),
   // `Array.prototype.indexOf` method
   // https://tc39.es/ecma262/#sec-array.prototype.indexof
-  indexOf: createMethod(false)
+  indexOf: createMethod$1(false)
 };
 
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$b = functionUncurryThis;
 var hasOwn$5 = hasOwnProperty_1;
 var toIndexedObject$2 = toIndexedObject$5;
 var indexOf = arrayIncludes.indexOf;
 var hiddenKeys$2 = hiddenKeys$4;
 
-var push$1 = uncurryThis$9([].push);
+var push$1 = uncurryThis$b([].push);
 
 var objectKeysInternal = function (object, names) {
   var O = toIndexedObject$2(object);
@@ -901,12 +906,12 @@ var objectGetOwnPropertySymbols = {};
 objectGetOwnPropertySymbols.f = Object.getOwnPropertySymbols;
 
 var getBuiltIn$5 = getBuiltIn$7;
-var uncurryThis$8 = functionUncurryThis;
+var uncurryThis$a = functionUncurryThis;
 var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
 var getOwnPropertySymbolsModule$1 = objectGetOwnPropertySymbols;
 var anObject$a = anObject$c;
 
-var concat$1 = uncurryThis$8([].concat);
+var concat$1 = uncurryThis$a([].concat);
 
 // all object keys, includes non-enumerable and symbols
 var ownKeys$1 = getBuiltIn$5('Reflect', 'ownKeys') || function ownKeys(it) {
@@ -932,7 +937,7 @@ var copyConstructorProperties$1 = function (target, source, exceptions) {
   }
 };
 
-var fails$9 = fails$h;
+var fails$a = fails$i;
 var isCallable$a = isCallable$k;
 
 var replacement = /#|\.prototype\./;
@@ -941,7 +946,7 @@ var isForced$2 = function (feature, detection) {
   var value = data[normalize(feature)];
   return value == POLYFILL ? true
     : value == NATIVE ? false
-    : isCallable$a(detection) ? fails$9(detection)
+    : isCallable$a(detection) ? fails$a(detection)
     : !!detection;
 };
 
@@ -955,7 +960,7 @@ var POLYFILL = isForced$2.POLYFILL = 'P';
 
 var isForced_1 = isForced$2;
 
-var global$7 = global$g;
+var global$8 = global$i;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$2 = createNonEnumerableProperty$4;
 var defineBuiltIn$5 = defineBuiltIn$6;
@@ -984,11 +989,11 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$7;
+    target = global$8;
   } else if (STATIC) {
-    target = global$7[TARGET] || defineGlobalProperty(TARGET, {});
+    target = global$8[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = (global$7[TARGET] || {}).prototype;
+    target = (global$8[TARGET] || {}).prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -1021,9 +1026,9 @@ var objectKeys$2 = Object.keys || function keys(O) {
 };
 
 var DESCRIPTORS$3 = descriptors;
-var uncurryThis$7 = functionUncurryThis;
+var uncurryThis$9 = functionUncurryThis;
 var call$a = functionCall;
-var fails$8 = fails$h;
+var fails$9 = fails$i;
 var objectKeys$1 = objectKeys$2;
 var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
 var propertyIsEnumerableModule = objectPropertyIsEnumerable;
@@ -1034,11 +1039,11 @@ var IndexedObject = indexedObject;
 var $assign = Object.assign;
 // eslint-disable-next-line es/no-object-defineproperty -- required for testing
 var defineProperty$4 = Object.defineProperty;
-var concat = uncurryThis$7([].concat);
+var concat = uncurryThis$9([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$8(function () {
+var objectAssign = !$assign || fails$9(function () {
   // should have correct order of operations (Edge bug)
   if (DESCRIPTORS$3 && $assign({ b: 1 }, $assign(defineProperty$4({}, 'a', {
     enumerable: true,
@@ -1077,34 +1082,67 @@ var objectAssign = !$assign || fails$8(function () {
   } return T;
 } : $assign;
 
-var $$a = _export;
+var $$b = _export;
 var assign = objectAssign;
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
 // eslint-disable-next-line es/no-object-assign -- required for testing
-$$a({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
+$$b({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
   assign: assign
 });
 
-const CustomButton = ({
-  buttonText
-}) => {
-  const contentStyles = css({
-    height: '300px',
-    width: '300px',
-    backgroundColor: 'lightgrey'
-  });
-  const buttonStyles = css({
-    backgroundColor: 'grey'
-  });
-  return jsx("div", Object.assign({
-    css: contentStyles
-  }, {
-    children: jsx("button", Object.assign({
-      css: buttonStyles
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const Badge = _a => {
+  var {
+      textColor,
+      children
+    } = _a,
+    restProps = __rest(_a, ["textColor", "children"]);
+  return jsx(EuiBadge, Object.assign({}, restProps, {
+    children: jsx(EuiText, Object.assign({
+      color: textColor,
+      size: "xs"
     }, {
-      children: buttonText
+      children: jsx("b", {
+        children: children
+      })
     }))
   }));
 };
@@ -1244,9 +1282,9 @@ var addToUnscopables$2 = function (key) {
 
 var iterators = {};
 
-var fails$7 = fails$h;
+var fails$8 = fails$i;
 
-var correctPrototypeGetter = !fails$7(function () {
+var correctPrototypeGetter = !fails$8(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
@@ -1275,14 +1313,14 @@ var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf :
   } return object instanceof $Object$1 ? ObjectPrototype : null;
 };
 
-var fails$6 = fails$h;
+var fails$7 = fails$i;
 var isCallable$8 = isCallable$k;
 var isObject$3 = isObject$9;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$4 = defineBuiltIn$6;
 var wellKnownSymbol$d = wellKnownSymbol$g;
 
-var ITERATOR$5 = wellKnownSymbol$d('iterator');
+var ITERATOR$6 = wellKnownSymbol$d('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -1300,18 +1338,18 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject$3(IteratorPrototype$2) || fails$6(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject$3(IteratorPrototype$2) || fails$7(function () {
   var test = {};
   // FF44- legacy iterators case
-  return IteratorPrototype$2[ITERATOR$5].call(test) !== test;
+  return IteratorPrototype$2[ITERATOR$6].call(test) !== test;
 });
 
 if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype$2 = {};
 
 // `%IteratorPrototype%[@@iterator]()` method
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-@@iterator
-if (!isCallable$8(IteratorPrototype$2[ITERATOR$5])) {
-  defineBuiltIn$4(IteratorPrototype$2, ITERATOR$5, function () {
+if (!isCallable$8(IteratorPrototype$2[ITERATOR$6])) {
+  defineBuiltIn$4(IteratorPrototype$2, ITERATOR$6, function () {
     return this;
   });
 }
@@ -1350,13 +1388,13 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
   return IteratorConstructor;
 };
 
-var uncurryThis$6 = functionUncurryThis;
+var uncurryThis$8 = functionUncurryThis;
 var aCallable$7 = aCallable$9;
 
 var functionUncurryThisAccessor = function (object, key, method) {
   try {
     // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-    return uncurryThis$6(aCallable$7(Object.getOwnPropertyDescriptor(object, key)[method]));
+    return uncurryThis$8(aCallable$7(Object.getOwnPropertyDescriptor(object, key)[method]));
   } catch (error) { /* empty */ }
 };
 
@@ -1398,7 +1436,7 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
   };
 }() : undefined);
 
-var $$9 = _export;
+var $$a = _export;
 var call$9 = functionCall;
 var FunctionName = functionName;
 var isCallable$6 = isCallable$k;
@@ -1416,7 +1454,7 @@ var PROPER_FUNCTION_NAME$1 = FunctionName.PROPER;
 var CONFIGURABLE_FUNCTION_NAME = FunctionName.CONFIGURABLE;
 var IteratorPrototype = IteratorsCore.IteratorPrototype;
 var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;
-var ITERATOR$4 = wellKnownSymbol$b('iterator');
+var ITERATOR$5 = wellKnownSymbol$b('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -1439,7 +1477,7 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
   var TO_STRING_TAG = NAME + ' Iterator';
   var INCORRECT_VALUES_NAME = false;
   var IterablePrototype = Iterable.prototype;
-  var nativeIterator = IterablePrototype[ITERATOR$4]
+  var nativeIterator = IterablePrototype[ITERATOR$5]
     || IterablePrototype['@@iterator']
     || DEFAULT && IterablePrototype[DEFAULT];
   var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT);
@@ -1453,8 +1491,8 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       if (getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {
         if (setPrototypeOf$1) {
           setPrototypeOf$1(CurrentIteratorPrototype, IteratorPrototype);
-        } else if (!isCallable$6(CurrentIteratorPrototype[ITERATOR$4])) {
-          defineBuiltIn$3(CurrentIteratorPrototype, ITERATOR$4, returnThis);
+        } else if (!isCallable$6(CurrentIteratorPrototype[ITERATOR$5])) {
+          defineBuiltIn$3(CurrentIteratorPrototype, ITERATOR$5, returnThis);
         }
       }
       // Set @@toStringTag to native iterators
@@ -1483,12 +1521,12 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) {
         defineBuiltIn$3(IterablePrototype, KEY, methods[KEY]);
       }
-    } else $$9({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
+    } else $$a({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);
   }
 
   // define iterator
-  if (IterablePrototype[ITERATOR$4] !== defaultIterator) {
-    defineBuiltIn$3(IterablePrototype, ITERATOR$4, defaultIterator, { name: DEFAULT });
+  if (IterablePrototype[ITERATOR$5] !== defaultIterator) {
+    defineBuiltIn$3(IterablePrototype, ITERATOR$5, defaultIterator, { name: DEFAULT });
   }
   Iterators$3[NAME] = defaultIterator;
 
@@ -1606,24 +1644,24 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$6 = global$g;
+var global$7 = global$i;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty = createNonEnumerableProperty$4;
 var wellKnownSymbol$a = wellKnownSymbol$g;
 
-var ITERATOR$3 = wellKnownSymbol$a('iterator');
+var ITERATOR$4 = wellKnownSymbol$a('iterator');
 var TO_STRING_TAG$2 = wellKnownSymbol$a('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
   if (CollectionPrototype) {
     // some Chrome versions have non-configurable methods on DOMTokenList
-    if (CollectionPrototype[ITERATOR$3] !== ArrayValues) try {
-      createNonEnumerableProperty(CollectionPrototype, ITERATOR$3, ArrayValues);
+    if (CollectionPrototype[ITERATOR$4] !== ArrayValues) try {
+      createNonEnumerableProperty(CollectionPrototype, ITERATOR$4, ArrayValues);
     } catch (error) {
-      CollectionPrototype[ITERATOR$3] = ArrayValues;
+      CollectionPrototype[ITERATOR$4] = ArrayValues;
     }
     if (!CollectionPrototype[TO_STRING_TAG$2]) {
       createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG$2, COLLECTION_NAME);
@@ -1640,205 +1678,67 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$6[COLLECTION_NAME] && global$6[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(global$7[COLLECTION_NAME] && global$7[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const useOrchestratorTheme = () => {
-  const {
-    euiTheme
-  } = useEuiTheme();
-  const baseUnit = euiTheme.base;
-  const multiplyByBaseUnit = multiplier => baseUnit * multiplier;
-  const toSecondaryColor = color => tint(color, 0.8);
+var Environment;
+(function (Environment) {
+  Environment["DEVELOPMENT"] = "Development";
+  Environment["PRODUCTION"] = "Production";
+})(Environment || (Environment = {}));
+const useOrchestratorConfig = initialOrchestratorConfig => {
+  const [orchestratorConfig] = useState(initialOrchestratorConfig);
   return {
-    theme: euiTheme,
-    multiplyByBaseUnit,
-    toSecondaryColor
+    orchestratorConfig
   };
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-const Badge = _a => {
-  var {
-      textColor,
-      children
-    } = _a,
-    restProps = __rest(_a, ["textColor", "children"]);
-  return jsx(EuiBadge, Object.assign({}, restProps, {
-    children: jsx(EuiText, Object.assign({
-      color: textColor,
-      size: "xs"
-    }, {
-      children: jsx("b", {
-        children: children
-      })
-    }))
-  }));
-};
-
-const HeaderBadge = _a => {
-  var {
-      children
-    } = _a,
-    restProps = __rest(_a, ["children"]);
-  const css = restProps.iconType ? {
-    height: 24,
-    display: 'flex',
-    paddingLeft: 0
-  } : {
-    height: 24,
-    display: 'flex'
-  };
-  return jsx(Badge, Object.assign({}, restProps, {
-    css: css
+const OrchestratorConfigContext = /*#__PURE__*/createContext({
+  orchestratorApiBaseUrl: '',
+  engineStatusEndpoint: '',
+  processStatusCountsEndpoint: '',
+  environmentName: '',
+  graphqlEndpoint: ''
+});
+const OrchestratorConfigProvider = ({
+  initialOrchestratorConfig,
+  children
+}) => {
+  const {
+    orchestratorConfig
+  } = useOrchestratorConfig(initialOrchestratorConfig);
+  return jsx(OrchestratorConfigContext.Provider, Object.assign({
+    value: orchestratorConfig
   }, {
     children: children
   }));
 };
 
-const StatusDotIcon = ({
-  width: _width = 24,
-  height: _height = 24,
-  color: _color = '#000000'
-}) => jsxs("svg", Object.assign({
-  width: _width,
-  height: _height,
-  viewBox: "0 0 24 24",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg"
-}, {
-  children: [jsx("title", {
-    children: "icon/statusdot"
-  }), jsx("g", Object.assign({
-    id: "Symbols",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, {
-    children: jsxs("g", Object.assign({
-      id: "icon/statusdot",
-      fill: _color,
-      fillRule: "nonzero"
-    }, {
-      children: [jsx("circle", {
-        id: "Oval",
-        opacity: "0.25",
-        cx: "12",
-        cy: "12",
-        r: "8"
-      }), jsx("circle", {
-        id: "Oval",
-        cx: "12",
-        cy: "12",
-        r: "4"
-      })]
-    }))
-  }))]
-}));
-
-const XCircleFill = ({
-  width: _width = 24,
-  height: _height = 24,
-  color: _color = '#000000'
-}) => jsxs("svg", Object.assign({
-  width: _width,
-  height: _height,
-  viewBox: "0 0 24 24",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg"
-}, {
-  children: [jsx("title", {
-    children: "icon/x-circle-fill"
-  }), jsx("g", Object.assign({
-    id: "Symbols",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, {
-    children: jsx("g", Object.assign({
-      id: "icon/x-circle-fill",
-      fill: _color
-    }, {
-      children: jsx("path", {
-        d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M10.70711,9.29289 C10.31658,8.90237 9.68342,8.90237 9.29289,9.29289 C8.90237,9.68342 8.90237,10.31658 9.29289,10.70711 L10.58579,12 L9.29289,13.2929 C8.90237,13.6834 8.90237,14.3166 9.29289,14.7071 C9.68342,15.0976 10.31658,15.0976 10.70711,14.7071 L12,13.4142 L13.2929,14.7071 C13.6834,15.0976 14.3166,15.0976 14.7071,14.7071 C15.0976,14.3166 15.0976,13.6834 14.7071,13.2929 L13.4142,12 L14.7071,10.70711 C15.0976,10.31658 15.0976,9.68342 14.7071,9.29289 C14.3166,8.90237 13.6834,8.90237 13.2929,9.29289 L12,10.58579 L10.70711,9.29289 Z",
-        id: "Shape"
-      })
-    }))
-  }))]
-}));
-
-const LogoutIcon = ({
-  width: _width = 24,
-  height: _height = 24,
-  color: _color = '#000000'
-}) => jsxs("svg", Object.assign({
-  width: _width,
-  height: _height,
-  viewBox: "0 0 24 24",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg"
-}, {
-  children: [jsx("title", {
-    children: "icon/logout"
-  }), jsx("g", Object.assign({
-    id: "Symbols",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, {
-    children: jsx("g", Object.assign({
-      id: "icon/logout",
-      fill: _color,
-      fillRule: "nonzero"
-    }, {
-      children: jsx("path", {
-        d: "M10,3 C12.2091701,3 14,4.79085056 14,7 L14,8 C14,8.55228475 13.5522847,9 13,9 C12.4477153,9 12,8.55228475 12,8 L12,7 C12,5.8954149 11.1045954,5 10,5 L6,5 C4.89543475,5 4,5.89543475 4,7 L4,17 C4,18.1045954 4.8954149,19 6,19 L10,19 C11.1046153,19 12,18.1046153 12,17 L12,16 C12,15.4477153 12.4477153,15 13,15 C13.5522847,15 14,15.4477153 14,16 L14,17 C14,19.2091847 12.2091847,21 10,21 L6,21 C3.79085056,21 2,19.2091701 2,17 L2,7 C2,4.79086525 3.79086525,3 6,3 L10,3 Z M17.7071068,7.29289322 L21.7071068,11.2928932 L21.7485042,11.336853 L21.757,11.347 L21.787214,11.3832499 L21.779,11.374 L21.8036654,11.4046934 C21.8215099,11.4288693 21.8382813,11.453725 21.8539326,11.4793398 L21.8753288,11.5159379 C21.8862061,11.5357061 21.8966234,11.5561086 21.9063462,11.5769009 L21.9287745,11.628664 C21.9366843,11.6484208 21.9438775,11.6682023 21.9504533,11.6882636 C21.9552713,11.7031487 21.9599023,11.7185367 21.9641549,11.734007 C21.9701664,11.7555635 21.9753602,11.7772539 21.9798348,11.7992059 C21.9832978,11.8166247 21.9863719,11.834051 21.9889822,11.8515331 C21.9920328,11.8714753 21.9944666,11.892114 21.9962623,11.912935 C21.9978436,11.9317345 21.9989053,11.9497336 21.9994829,11.9677454 C21.9998183,11.9777892 22,11.9888734 22,12 L21.996384,12.0852242 L21.9889807,12.1489612 C21.9863719,12.165949 21.9832978,12.1833753 21.9797599,12.2007258 C21.9753602,12.2227461 21.9701664,12.2444365 21.964279,12.2658396 C21.9599023,12.2814633 21.9552713,12.2968513 21.9502619,12.3121425 C21.9438775,12.3317977 21.9366843,12.3515792 21.928896,12.3710585 L21.9063266,12.4232215 C21.8966234,12.4438914 21.8862061,12.4642939 21.8751242,12.484277 C21.8685012,12.4963944 21.8613931,12.5086131 21.8540045,12.5207088 C21.8382813,12.546275 21.8215099,12.5711307 21.8036865,12.5951593 L21.7870723,12.6170223 C21.7849289,12.6196628 21.7826279,12.6225624 21.7803112,12.625449 L21.7071068,12.7071068 L17.7071068,16.7071068 C17.3165825,17.0976311 16.6834175,17.0976311 16.2928932,16.7071068 C15.9023689,16.3165825 15.9023689,15.6834175 16.2928932,15.2928932 L18.585,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L18.585,11 L16.2928932,8.70710678 C15.9023689,8.31658249 15.9023689,7.68341751 16.2928932,7.29289322 C16.6834175,6.90236893 17.3165825,6.90236893 17.7071068,7.29289322 Z",
-        id: "Combined-Shape"
-      })
-    }))
-  }))]
-}));
+const useQueryWithGraphql = (query, queryVars) => {
+  const {
+    graphqlEndpoint
+  } = useContext(OrchestratorConfigContext);
+  const graphQLClient = new GraphQLClient(graphqlEndpoint);
+  const fetchFromGraphql = () => __awaiter(void 0, void 0, void 0, function* () {
+    // TS-Ignore because queryVars does not seem to be accepted by the client
+    // The props in this useQueryWithGraphql-hook ensures queryVars is indeed related to the query
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return yield graphQLClient.request(query, queryVars);
+  });
+  return useQuery(['subscriptions', ...Object.values(queryVars)], fetchFromGraphql);
+};
+const useStringQueryWithGraphql = (query, queryVars) => {
+  const {
+    graphqlEndpoint
+  } = useContext(OrchestratorConfigContext);
+  const fetchFromGraphql = () => __awaiter(void 0, void 0, void 0, function* () {
+    return yield request(graphqlEndpoint, query, queryVars);
+  });
+  return useQuery(['subscriptions', ...Object.values(queryVars)], fetchFromGraphql);
+};
 
 var classof$5 = classofRaw$2;
 
@@ -1919,8 +1819,8 @@ var classof$4 = TO_STRING_TAG_SUPPORT ? classofRaw$1 : function (it) {
     : (result = classofRaw$1(O)) == 'Object' && isCallable$5(O.callee) ? 'Arguments' : result;
 };
 
-var uncurryThis$5 = functionUncurryThis;
-var fails$5 = fails$h;
+var uncurryThis$7 = functionUncurryThis;
+var fails$6 = fails$i;
 var isCallable$4 = isCallable$k;
 var classof$3 = classof$4;
 var getBuiltIn$2 = getBuiltIn$7;
@@ -1930,7 +1830,7 @@ var noop = function () { /* empty */ };
 var empty = [];
 var construct = getBuiltIn$2('Reflect', 'construct');
 var constructorRegExp = /^\s*(?:class|function)\b/;
-var exec = uncurryThis$5(constructorRegExp.exec);
+var exec$1 = uncurryThis$7(constructorRegExp.exec);
 var INCORRECT_TO_STRING = !constructorRegExp.exec(noop);
 
 var isConstructorModern = function isConstructor(argument) {
@@ -1954,7 +1854,7 @@ var isConstructorLegacy = function isConstructor(argument) {
     // we can't check .prototype since constructors produced by .bind haven't it
     // `Function#toString` throws on some built-it function in some legacy engines
     // (for example, `DOMQuad` and similar in FF41-)
-    return INCORRECT_TO_STRING || !!exec(constructorRegExp, inspectSource$1(argument));
+    return INCORRECT_TO_STRING || !!exec$1(constructorRegExp, inspectSource$1(argument));
   } catch (error) {
     return true;
   }
@@ -1964,7 +1864,7 @@ isConstructorLegacy.sham = true;
 
 // `IsConstructor` abstract operation
 // https://tc39.es/ecma262/#sec-isconstructor
-var isConstructor$1 = !construct || fails$5(function () {
+var isConstructor$1 = !construct || fails$6(function () {
   var called;
   return isConstructorModern(isConstructorModern.call)
     || !isConstructorModern(Object)
@@ -2010,20 +1910,20 @@ var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND$
 });
 
 var classofRaw = classofRaw$2;
-var uncurryThis$4 = functionUncurryThis;
+var uncurryThis$6 = functionUncurryThis;
 
 var functionUncurryThisClause = function (fn) {
   // Nashorn bug:
   //   https://github.com/zloirock/core-js/issues/1128
   //   https://github.com/zloirock/core-js/issues/1130
-  if (classofRaw(fn) === 'Function') return uncurryThis$4(fn);
+  if (classofRaw(fn) === 'Function') return uncurryThis$6(fn);
 };
 
-var uncurryThis$3 = functionUncurryThisClause;
+var uncurryThis$5 = functionUncurryThisClause;
 var aCallable$6 = aCallable$9;
 var NATIVE_BIND = functionBindNative;
 
-var bind$4 = uncurryThis$3(uncurryThis$3.bind);
+var bind$4 = uncurryThis$5(uncurryThis$5.bind);
 
 // optional / simple context binding
 var functionBindContext = function (fn, that) {
@@ -2033,9 +1933,9 @@ var functionBindContext = function (fn, that) {
   };
 };
 
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$4 = functionUncurryThis;
 
-var arraySlice$2 = uncurryThis$2([].slice);
+var arraySlice$2 = uncurryThis$4([].slice);
 
 var $TypeError$5 = TypeError;
 
@@ -2049,12 +1949,12 @@ var userAgent$4 = engineUserAgent;
 // eslint-disable-next-line redos/no-vulnerable -- safe
 var engineIsIos = /(?:ipad|iphone|ipod).*applewebkit/i.test(userAgent$4);
 
-var global$5 = global$g;
+var global$6 = global$i;
 var apply = functionApply;
 var bind$3 = functionBindContext;
 var isCallable$3 = isCallable$k;
 var hasOwn$1 = hasOwnProperty_1;
-var fails$4 = fails$h;
+var fails$5 = fails$i;
 var html = html$2;
 var arraySlice$1 = arraySlice$2;
 var createElement = documentCreateElement$2;
@@ -2062,21 +1962,21 @@ var validateArgumentsLength = validateArgumentsLength$1;
 var IS_IOS$1 = engineIsIos;
 var IS_NODE$3 = engineIsNode;
 
-var set = global$5.setImmediate;
-var clear = global$5.clearImmediate;
-var process$3 = global$5.process;
-var Dispatch = global$5.Dispatch;
-var Function$1 = global$5.Function;
-var MessageChannel = global$5.MessageChannel;
-var String$1 = global$5.String;
+var set = global$6.setImmediate;
+var clear = global$6.clearImmediate;
+var process$3 = global$6.process;
+var Dispatch = global$6.Dispatch;
+var Function$1 = global$6.Function;
+var MessageChannel = global$6.MessageChannel;
+var String$1 = global$6.String;
 var counter = 0;
 var queue$2 = {};
 var ONREADYSTATECHANGE = 'onreadystatechange';
 var $location, defer, channel, port;
 
-fails$4(function () {
+fails$5(function () {
   // Deno throws a ReferenceError on `location` access without `--location` flag
-  $location = global$5.location;
+  $location = global$6.location;
 });
 
 var run = function (id) {
@@ -2099,7 +1999,7 @@ var eventListener = function (event) {
 
 var globalPostMessageDefer = function (id) {
   // old engines have not location.origin
-  global$5.postMessage(String$1(id), $location.protocol + '//' + $location.host);
+  global$6.postMessage(String$1(id), $location.protocol + '//' + $location.host);
 };
 
 // Node.js 0.9+ & IE10+ has setImmediate, otherwise:
@@ -2137,14 +2037,14 @@ if (!set || !clear) {
   // Browsers with postMessage, skip WebWorkers
   // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
   } else if (
-    global$5.addEventListener &&
-    isCallable$3(global$5.postMessage) &&
-    !global$5.importScripts &&
+    global$6.addEventListener &&
+    isCallable$3(global$6.postMessage) &&
+    !global$6.importScripts &&
     $location && $location.protocol !== 'file:' &&
-    !fails$4(globalPostMessageDefer)
+    !fails$5(globalPostMessageDefer)
   ) {
     defer = globalPostMessageDefer;
-    global$5.addEventListener('message', eventListener, false);
+    global$6.addEventListener('message', eventListener, false);
   // IE8-
   } else if (ONREADYSTATECHANGE in createElement('script')) {
     defer = function (id) {
@@ -2199,7 +2099,7 @@ var userAgent$2 = engineUserAgent;
 
 var engineIsWebosWebkit = /web0s(?!.*chrome)/i.test(userAgent$2);
 
-var global$4 = global$g;
+var global$5 = global$i;
 var bind$2 = functionBindContext;
 var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 var macrotask = task$1.set;
@@ -2209,12 +2109,12 @@ var IS_IOS_PEBBLE = engineIsIosPebble;
 var IS_WEBOS_WEBKIT = engineIsWebosWebkit;
 var IS_NODE$2 = engineIsNode;
 
-var MutationObserver = global$4.MutationObserver || global$4.WebKitMutationObserver;
-var document$2 = global$4.document;
-var process$2 = global$4.process;
-var Promise$1 = global$4.Promise;
+var MutationObserver = global$5.MutationObserver || global$5.WebKitMutationObserver;
+var document$2 = global$5.document;
+var process$2 = global$5.process;
+var Promise$1 = global$5.Promise;
 // Node.js 11 shows ExperimentalWarning on getting `queueMicrotask`
-var queueMicrotaskDescriptor = getOwnPropertyDescriptor(global$4, 'queueMicrotask');
+var queueMicrotaskDescriptor = getOwnPropertyDescriptor(global$5, 'queueMicrotask');
 var microtask$1 = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value;
 var notify$1, toggle, node, promise, then;
 
@@ -2266,7 +2166,7 @@ if (!microtask$1) {
   // - setTimeout
   } else {
     // `webpack` dev server bug on IE global methods - use bind(fn, global)
-    macrotask = bind$2(macrotask, global$4);
+    macrotask = bind$2(macrotask, global$5);
     notify$1 = function () {
       macrotask(flush);
     };
@@ -2295,9 +2195,9 @@ var perform$3 = function (exec) {
   }
 };
 
-var global$3 = global$g;
+var global$4 = global$i;
 
-var promiseNativeConstructor = global$3.Promise;
+var promiseNativeConstructor = global$4.Promise;
 
 /* global Deno -- Deno case */
 
@@ -2310,7 +2210,7 @@ var engineIsBrowser = !IS_DENO$1 && !IS_NODE$1
   && typeof window == 'object'
   && typeof document == 'object';
 
-var global$2 = global$g;
+var global$3 = global$i;
 var NativePromiseConstructor$3 = promiseNativeConstructor;
 var isCallable$2 = isCallable$k;
 var isForced = isForced_1;
@@ -2323,7 +2223,7 @@ var V8_VERSION = engineV8Version;
 NativePromiseConstructor$3 && NativePromiseConstructor$3.prototype;
 var SPECIES = wellKnownSymbol$5('species');
 var SUBCLASSING = false;
-var NATIVE_PROMISE_REJECTION_EVENT$1 = isCallable$2(global$2.PromiseRejectionEvent);
+var NATIVE_PROMISE_REJECTION_EVENT$1 = isCallable$2(global$3.PromiseRejectionEvent);
 
 var FORCED_PROMISE_CONSTRUCTOR$5 = isForced('Promise', function () {
   var PROMISE_CONSTRUCTOR_SOURCE = inspectSource(NativePromiseConstructor$3);
@@ -2378,9 +2278,9 @@ newPromiseCapability$2.f = function (C) {
   return new PromiseCapability(C);
 };
 
-var $$8 = _export;
+var $$9 = _export;
 var IS_NODE = engineIsNode;
-var global$1 = global$g;
+var global$2 = global$i;
 var call$7 = functionCall;
 var defineBuiltIn$2 = defineBuiltIn$6;
 var setPrototypeOf = objectSetPrototypeOf;
@@ -2410,13 +2310,13 @@ var setInternalState = InternalStateModule.set;
 var NativePromisePrototype$1 = NativePromiseConstructor$2 && NativePromiseConstructor$2.prototype;
 var PromiseConstructor = NativePromiseConstructor$2;
 var PromisePrototype = NativePromisePrototype$1;
-var TypeError$1 = global$1.TypeError;
-var document$1 = global$1.document;
-var process$1 = global$1.process;
+var TypeError$1 = global$2.TypeError;
+var document$1 = global$2.document;
+var process$1 = global$2.process;
 var newPromiseCapability$1 = newPromiseCapabilityModule$3.f;
 var newGenericPromiseCapability = newPromiseCapability$1;
 
-var DISPATCH_EVENT = !!(document$1 && document$1.createEvent && global$1.dispatchEvent);
+var DISPATCH_EVENT = !!(document$1 && document$1.createEvent && global$2.dispatchEvent);
 var UNHANDLED_REJECTION = 'unhandledrejection';
 var REJECTION_HANDLED = 'rejectionhandled';
 var PENDING = 0;
@@ -2489,14 +2389,14 @@ var dispatchEvent = function (name, promise, reason) {
     event.promise = promise;
     event.reason = reason;
     event.initEvent(name, false, true);
-    global$1.dispatchEvent(event);
+    global$2.dispatchEvent(event);
   } else event = { promise: promise, reason: reason };
-  if (!NATIVE_PROMISE_REJECTION_EVENT && (handler = global$1['on' + name])) handler(event);
+  if (!NATIVE_PROMISE_REJECTION_EVENT && (handler = global$2['on' + name])) handler(event);
   else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);
 };
 
 var onUnhandled = function (state) {
-  call$7(task, global$1, function () {
+  call$7(task, global$2, function () {
     var promise = state.facade;
     var value = state.value;
     var IS_UNHANDLED = isUnhandled(state);
@@ -2519,7 +2419,7 @@ var isUnhandled = function (state) {
 };
 
 var onHandleUnhandled = function (state) {
-  call$7(task, global$1, function () {
+  call$7(task, global$2, function () {
     var promise = state.facade;
     if (IS_NODE) {
       process$1.emit('rejectionHandled', promise);
@@ -2658,7 +2558,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
   }
 }
 
-$$8({ global: true, constructor: true, wrap: true, forced: FORCED_PROMISE_CONSTRUCTOR$4 }, {
+$$9({ global: true, constructor: true, wrap: true, forced: FORCED_PROMISE_CONSTRUCTOR$4 }, {
   Promise: PromiseConstructor
 });
 
@@ -2668,12 +2568,12 @@ setSpecies(PROMISE);
 var wellKnownSymbol$4 = wellKnownSymbol$g;
 var Iterators$1 = iterators;
 
-var ITERATOR$2 = wellKnownSymbol$4('iterator');
+var ITERATOR$3 = wellKnownSymbol$4('iterator');
 var ArrayPrototype = Array.prototype;
 
 // check on default Array iterator
 var isArrayIteratorMethod$1 = function (it) {
-  return it !== undefined && (Iterators$1.Array === it || ArrayPrototype[ITERATOR$2] === it);
+  return it !== undefined && (Iterators$1.Array === it || ArrayPrototype[ITERATOR$3] === it);
 };
 
 var classof$2 = classof$4;
@@ -2682,10 +2582,10 @@ var isNullOrUndefined = isNullOrUndefined$4;
 var Iterators = iterators;
 var wellKnownSymbol$3 = wellKnownSymbol$g;
 
-var ITERATOR$1 = wellKnownSymbol$3('iterator');
+var ITERATOR$2 = wellKnownSymbol$3('iterator');
 
 var getIteratorMethod$2 = function (it) {
-  if (!isNullOrUndefined(it)) return getMethod$1(it, ITERATOR$1)
+  if (!isNullOrUndefined(it)) return getMethod$1(it, ITERATOR$2)
     || getMethod$1(it, '@@iterator')
     || Iterators[classof$2(it)];
 };
@@ -2799,7 +2699,7 @@ var iterate$2 = function (iterable, unboundFunction, options) {
 
 var wellKnownSymbol$2 = wellKnownSymbol$g;
 
-var ITERATOR = wellKnownSymbol$2('iterator');
+var ITERATOR$1 = wellKnownSymbol$2('iterator');
 var SAFE_CLOSING = false;
 
 try {
@@ -2812,7 +2712,7 @@ try {
       SAFE_CLOSING = true;
     }
   };
-  iteratorWithReturn[ITERATOR] = function () {
+  iteratorWithReturn[ITERATOR$1] = function () {
     return this;
   };
   // eslint-disable-next-line es/no-array-from, no-throw-literal -- required for testing
@@ -2824,7 +2724,7 @@ var checkCorrectnessOfIteration$1 = function (exec, SKIP_CLOSING) {
   var ITERATION_SUPPORT = false;
   try {
     var object = {};
-    object[ITERATOR] = function () {
+    object[ITERATOR$1] = function () {
       return {
         next: function () {
           return { done: ITERATION_SUPPORT = true };
@@ -2844,7 +2744,7 @@ var promiseStaticsIncorrectIteration = FORCED_PROMISE_CONSTRUCTOR$3 || !checkCor
   NativePromiseConstructor$1.all(iterable).then(undefined, function () { /* empty */ });
 });
 
-var $$7 = _export;
+var $$8 = _export;
 var call$3 = functionCall;
 var aCallable$2 = aCallable$9;
 var newPromiseCapabilityModule$2 = newPromiseCapability$2;
@@ -2854,7 +2754,7 @@ var PROMISE_STATICS_INCORRECT_ITERATION$1 = promiseStaticsIncorrectIteration;
 
 // `Promise.all` method
 // https://tc39.es/ecma262/#sec-promise.all
-$$7({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION$1 }, {
+$$8({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION$1 }, {
   all: function all(iterable) {
     var C = this;
     var capability = newPromiseCapabilityModule$2.f(C);
@@ -2883,7 +2783,7 @@ $$7({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
   }
 });
 
-var $$6 = _export;
+var $$7 = _export;
 var FORCED_PROMISE_CONSTRUCTOR$2 = promiseConstructorDetection.CONSTRUCTOR;
 var NativePromiseConstructor = promiseNativeConstructor;
 var getBuiltIn$1 = getBuiltIn$7;
@@ -2894,7 +2794,7 @@ var NativePromisePrototype = NativePromiseConstructor && NativePromiseConstructo
 
 // `Promise.prototype.catch` method
 // https://tc39.es/ecma262/#sec-promise.prototype.catch
-$$6({ target: 'Promise', proto: true, forced: FORCED_PROMISE_CONSTRUCTOR$2, real: true }, {
+$$7({ target: 'Promise', proto: true, forced: FORCED_PROMISE_CONSTRUCTOR$2, real: true }, {
   'catch': function (onRejected) {
     return this.then(undefined, onRejected);
   }
@@ -2908,7 +2808,7 @@ if (isCallable(NativePromiseConstructor)) {
   }
 }
 
-var $$5 = _export;
+var $$6 = _export;
 var call$2 = functionCall;
 var aCallable$1 = aCallable$9;
 var newPromiseCapabilityModule$1 = newPromiseCapability$2;
@@ -2918,7 +2818,7 @@ var PROMISE_STATICS_INCORRECT_ITERATION = promiseStaticsIncorrectIteration;
 
 // `Promise.race` method
 // https://tc39.es/ecma262/#sec-promise.race
-$$5({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION }, {
+$$6({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION }, {
   race: function race(iterable) {
     var C = this;
     var capability = newPromiseCapabilityModule$1.f(C);
@@ -2934,14 +2834,14 @@ $$5({ target: 'Promise', stat: true, forced: PROMISE_STATICS_INCORRECT_ITERATION
   }
 });
 
-var $$4 = _export;
+var $$5 = _export;
 var call$1 = functionCall;
 var newPromiseCapabilityModule = newPromiseCapability$2;
 var FORCED_PROMISE_CONSTRUCTOR$1 = promiseConstructorDetection.CONSTRUCTOR;
 
 // `Promise.reject` method
 // https://tc39.es/ecma262/#sec-promise.reject
-$$4({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR$1 }, {
+$$5({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR$1 }, {
   reject: function reject(r) {
     var capability = newPromiseCapabilityModule.f(this);
     call$1(capability.reject, undefined, r);
@@ -2962,7 +2862,7 @@ var promiseResolve$1 = function (C, x) {
   return promiseCapability.promise;
 };
 
-var $$3 = _export;
+var $$4 = _export;
 var getBuiltIn = getBuiltIn$7;
 var FORCED_PROMISE_CONSTRUCTOR = promiseConstructorDetection.CONSTRUCTOR;
 var promiseResolve = promiseResolve$1;
@@ -2971,45 +2871,12 @@ getBuiltIn('Promise');
 
 // `Promise.resolve` method
 // https://tc39.es/ecma262/#sec-promise.resolve
-$$3({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
+$$4({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
   resolve: function resolve(x) {
     return promiseResolve(this, x);
   }
 });
 
-var Environment;
-(function (Environment) {
-  Environment["DEVELOPMENT"] = "Development";
-  Environment["PRODUCTION"] = "Production";
-})(Environment || (Environment = {}));
-const useOrchestratorConfig = initialOrchestratorConfig => {
-  const [orchestratorConfig] = useState(initialOrchestratorConfig);
-  return {
-    orchestratorConfig
-  };
-};
-
-const OrchestratorConfigContext = /*#__PURE__*/createContext({
-  orchestratorApiBaseUrl: '',
-  engineStatusEndpoint: '',
-  processStatusCountsEndpoint: '',
-  environmentName: '',
-  graphqlEndpoint: ''
-});
-const OrchestratorConfigProvider = ({
-  initialOrchestratorConfig,
-  children
-}) => {
-  const {
-    orchestratorConfig
-  } = useOrchestratorConfig(initialOrchestratorConfig);
-  return jsx(OrchestratorConfigContext.Provider, Object.assign({
-    value: orchestratorConfig
-  }, {
-    children: children
-  }));
-};
-
 const useEngineStatusQuery = () => {
   const {
     engineStatusEndpoint
@@ -3023,6 +2890,20 @@ const useEngineStatusQuery = () => {
   return useQuery('engineStatus', fetchEngineStatus);
 };
 
+const useOrchestratorTheme = () => {
+  const {
+    euiTheme
+  } = useEuiTheme();
+  const baseUnit = euiTheme.base;
+  const multiplyByBaseUnit = multiplier => baseUnit * multiplier;
+  const toSecondaryColor = color => tint(color, 0.8);
+  return {
+    theme: euiTheme,
+    multiplyByBaseUnit,
+    toSecondaryColor
+  };
+};
+
 var ProcessStatus;
 (function (ProcessStatus) {
   ProcessStatus["CREATED"] = "created";
@@ -3048,112 +2929,198 @@ const useProcessStatusCountsQuery = () => {
   return useQuery('processStatusCounts', fetchProcessStatusCounts);
 };
 
-const getTaskCountsSummary = processStatusCounts => {
-  const failed = 0;
-  const inconsistentData = 0;
-  const apiUnavailable = 0;
-  return {
-    failed,
-    inconsistentData,
-    apiUnavailable,
-    total: failed + inconsistentData + apiUnavailable
+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 OrchestratorPageHeader = ({
-  navigationHeight,
-  getAppLogo,
-  handleLogoutClick
-}) => {
+const useProcessesAttention = () => {
   const {
-    theme,
-    multiplyByBaseUnit
-  } = useOrchestratorTheme();
-  return jsxs(EuiHeader, Object.assign({
-    css: {
-      backgroundColor: theme.colors.primary,
-      height: navigationHeight
-    }
-  }, {
-    children: [jsxs(EuiHeaderSection, {
-      children: [jsx(EuiHeaderSectionItem, {
-        children: jsx(EuiHeaderLogo, {
-          iconType: () => getAppLogo(navigationHeight)
-        })
-      }), jsx(EuiHeaderSectionItem, {
-        children: jsx(EnvironmentBadge, {})
-      })]
-    }), jsx(EuiHeaderSection, {
-      children: jsxs(EuiHeaderSectionItem, {
-        children: [jsxs(EuiBadgeGroup, Object.assign({
-          css: {
-            marginRight: multiplyByBaseUnit(2)
-          }
-        }, {
-          children: [jsx(EngineStatusBadge, {}), jsx(FailedTasksBadge, {})]
-        })), jsx(EuiButtonIcon, {
-          "aria-label": "Logout",
-          display: "empty",
-          iconType: () => jsx(LogoutIcon, {
-            color: theme.colors.emptyShade
-          }),
-          css: {
-            width: 48,
-            height: 48
-          },
-          color: "ghost",
-          onClick: () => handleLogoutClick()
-        })]
-      })
-    })]
-  }));
+    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 EnvironmentBadge = () => {
+const useRecentProcesses = () => {
   const {
-    environmentName
+    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 SubscriptionStatusBadge = ({
+  subscriptionStatus
+}) => {
   const {
     theme,
     toSecondaryColor
   } = useOrchestratorTheme();
-  if (environmentName !== Environment.PRODUCTION) {
-    return jsx(HeaderBadge, Object.assign({
-      color: "warning",
-      textColor: theme.colors.shadow
-    }, {
-      children: environmentName
-    }));
-  }
-  return jsx(HeaderBadge, Object.assign({
-    color: toSecondaryColor(theme.colors.primary),
-    textColor: theme.colors.primary
-  }, {
-    children: environmentName
-  }));
-};
-const EngineStatusBadge = () => {
-  const {
-    theme
-  } = useOrchestratorTheme();
+  const getBadgeColorFromSubscriptionStatus = status => {
+    const {
+      primary,
+      darkestShade,
+      lightShade,
+      primaryText,
+      success,
+      successText
+    } = theme.colors;
+    switch (status) {
+      case 'active':
+        return {
+          badgeColor: toSecondaryColor(success),
+          textColor: successText
+        };
+      case 'terminated':
+        return {
+          badgeColor: lightShade,
+          textColor: darkestShade
+        };
+      default:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: primaryText
+        };
+    }
+  };
   const {
-    data: engineStatus
-  } = useEngineStatusQuery();
-  const engineStatusText = (engineStatus === null || engineStatus === void 0 ? void 0 : engineStatus.global_status) ? `Engine is ${engineStatus.global_status}` : 'Engine status is unavailable';
-  return jsx(HeaderBadge, Object.assign({
-    color: theme.colors.emptyShade,
-    textColor: theme.colors.shadow,
-    iconType: () => jsx(StatusDotIcon, {
-      color: theme.colors.success
-    })
+    badgeColor,
+    textColor
+  } = getBadgeColorFromSubscriptionStatus(subscriptionStatus);
+  return jsx(Badge, Object.assign({
+    textColor: textColor,
+    color: badgeColor
   }, {
-    children: engineStatusText
+    children: subscriptionStatus
+  }));
+};
+
+const HeaderBadge = _a => {
+  var {
+      children
+    } = _a,
+    restProps = __rest(_a, ["children"]);
+  const css = restProps.iconType ? {
+    height: 24,
+    display: 'flex',
+    paddingLeft: 0
+  } : {
+    height: 24,
+    display: 'flex'
+  };
+  return jsx(Badge, Object.assign({}, restProps, {
+    css: css
+  }, {
+    children: children
   }));
 };
+
+const XCircleFill = ({
+  width: _width = 24,
+  height: _height = 24,
+  color: _color = '#000000'
+}) => jsxs("svg", Object.assign({
+  width: _width,
+  height: _height,
+  viewBox: "0 0 24 24",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg"
+}, {
+  children: [jsx("title", {
+    children: "icon/x-circle-fill"
+  }), jsx("g", Object.assign({
+    id: "Symbols",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, {
+    children: jsx("g", Object.assign({
+      id: "icon/x-circle-fill",
+      fill: _color
+    }, {
+      children: jsx("path", {
+        d: "M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M10.70711,9.29289 C10.31658,8.90237 9.68342,8.90237 9.29289,9.29289 C8.90237,9.68342 8.90237,10.31658 9.29289,10.70711 L10.58579,12 L9.29289,13.2929 C8.90237,13.6834 8.90237,14.3166 9.29289,14.7071 C9.68342,15.0976 10.31658,15.0976 10.70711,14.7071 L12,13.4142 L13.2929,14.7071 C13.6834,15.0976 14.3166,15.0976 14.7071,14.7071 C15.0976,14.3166 15.0976,13.6834 14.7071,13.2929 L13.4142,12 L14.7071,10.70711 C15.0976,10.31658 15.0976,9.68342 14.7071,9.29289 C14.3166,8.90237 13.6834,8.90237 13.2929,9.29289 L12,10.58579 L10.70711,9.29289 Z",
+        id: "Shape"
+      })
+    }))
+  }))]
+}));
+
+const getTaskCountsSummary = processStatusCounts => {
+  const failed = (processStatusCounts === null || processStatusCounts === void 0 ? void 0 : processStatusCounts.task_counts.failed) || 0;
+  const inconsistentData = (processStatusCounts === null || processStatusCounts === void 0 ? void 0 : processStatusCounts.task_counts.inconsistent_data) || 0;
+  const apiUnavailable = (processStatusCounts === null || processStatusCounts === void 0 ? void 0 : processStatusCounts.task_counts.api_unavailable) || 0;
+  return {
+    failed,
+    inconsistentData,
+    apiUnavailable,
+    total: failed + inconsistentData + apiUnavailable
+  };
+};
 const FailedTasksBadge = () => {
   const {
     theme
   } = useOrchestratorTheme();
-  useProcessStatusCountsQuery();
-  const taskCountsSummary = getTaskCountsSummary();
+  const {
+    data: processStatusCounts
+  } = useProcessStatusCountsQuery();
+  const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
+  console.log(processStatusCounts);
   return jsx(EuiToolTip, Object.assign({
     position: "bottom",
     content: jsxs(Fragment, {
@@ -3178,294 +3145,731 @@ const FailedTasksBadge = () => {
   }));
 };
 
-const OrchestratorSidebar = ({
-  routeTo
-}) => jsx(EuiSideNav, {
-  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: 'Start',
-      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 EnvironmentBadge = () => {
+  const {
+    environmentName
+  } = useContext(OrchestratorConfigContext);
   const {
     theme,
-    multiplyByBaseUnit
+    toSecondaryColor
   } = useOrchestratorTheme();
-  const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
-  const navigationHeight = multiplyByBaseUnit(3);
-  return jsxs(Fragment, {
-    children: [jsx(OrchestratorPageHeader, {
-      getAppLogo: getAppLogo,
-      navigationHeight: navigationHeight,
-      handleLogoutClick: () => setIsSideMenuVisible(!isSideMenuVisible)
-    }), jsxs(EuiPageTemplate, Object.assign({
-      panelled: false,
-      grow: false,
-      contentBorder: false,
-      minHeight: `calc(100vh - ${navigationHeight}px)`,
-      restrictWidth: false
+  if (environmentName !== Environment.PRODUCTION) {
+    return jsx(HeaderBadge, Object.assign({
+      color: "warning",
+      textColor: theme.colors.shadow
     }, {
-      children: [isSideMenuVisible && jsx(EuiPageTemplate.Sidebar, Object.assign({
-        css: {
-          backgroundColor: theme.colors.body
-        }
-      }, {
-        children: jsx(OrchestratorSidebar, {
-          routeTo: routeTo
-        })
-      })), jsx(EuiPageTemplate.Section, Object.assign({
-        css: {
-          backgroundColor: theme.colors.emptyShade
-        }
-      }, {
-        children: children
-      }))]
-    }))]
-  });
-};
-
-var classof$1 = classof$4;
-
-var $String = String;
-
-var toString$2 = function (argument) {
-  if (classof$1(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
-  return $String(argument);
+      children: environmentName
+    }));
+  }
+  return jsx(HeaderBadge, Object.assign({
+    color: toSecondaryColor(theme.colors.primary),
+    textColor: theme.colors.primary
+  }, {
+    children: environmentName
+  }));
 };
 
-var anObject$1 = anObject$c;
+const StatusDotIcon = ({
+  width: _width = 24,
+  height: _height = 24,
+  color: _color = '#000000'
+}) => jsxs("svg", Object.assign({
+  width: _width,
+  height: _height,
+  viewBox: "0 0 24 24",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg"
+}, {
+  children: [jsx("title", {
+    children: "icon/statusdot"
+  }), jsx("g", Object.assign({
+    id: "Symbols",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, {
+    children: jsxs("g", Object.assign({
+      id: "icon/statusdot",
+      fill: _color,
+      fillRule: "nonzero"
+    }, {
+      children: [jsx("circle", {
+        id: "Oval",
+        opacity: "0.25",
+        cx: "12",
+        cy: "12",
+        r: "8"
+      }), jsx("circle", {
+        id: "Oval",
+        cx: "12",
+        cy: "12",
+        r: "4"
+      })]
+    }))
+  }))]
+}));
 
-// `RegExp.prototype.flags` getter implementation
-// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
-var regexpFlags = function () {
-  var that = anObject$1(this);
-  var result = '';
-  if (that.hasIndices) result += 'd';
-  if (that.global) result += 'g';
-  if (that.ignoreCase) result += 'i';
-  if (that.multiline) result += 'm';
-  if (that.dotAll) result += 's';
-  if (that.unicode) result += 'u';
-  if (that.unicodeSets) result += 'v';
-  if (that.sticky) result += 'y';
-  return result;
+const EngineStatusBadge = () => {
+  const {
+    theme
+  } = useOrchestratorTheme();
+  const {
+    data: engineStatus
+  } = useEngineStatusQuery();
+  const engineStatusText = (engineStatus === null || engineStatus === void 0 ? void 0 : engineStatus.global_status) ? `Engine is ${engineStatus.global_status}` : 'Engine status is unavailable';
+  return jsx(HeaderBadge, Object.assign({
+    color: theme.colors.emptyShade,
+    textColor: theme.colors.shadow,
+    iconType: () => jsx(StatusDotIcon, {
+      color: theme.colors.success
+    })
+  }, {
+    children: engineStatusText
+  }));
 };
 
-var call = functionCall;
-var hasOwn = hasOwnProperty_1;
-var isPrototypeOf = objectIsPrototypeOf;
-var regExpFlags = regexpFlags;
-
-var RegExpPrototype$1 = RegExp.prototype;
+const LogoutIcon = ({
+  width: _width = 24,
+  height: _height = 24,
+  color: _color = '#000000'
+}) => jsxs("svg", Object.assign({
+  width: _width,
+  height: _height,
+  viewBox: "0 0 24 24",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg"
+}, {
+  children: [jsx("title", {
+    children: "icon/logout"
+  }), jsx("g", Object.assign({
+    id: "Symbols",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, {
+    children: jsx("g", Object.assign({
+      id: "icon/logout",
+      fill: _color,
+      fillRule: "nonzero"
+    }, {
+      children: jsx("path", {
+        d: "M10,3 C12.2091701,3 14,4.79085056 14,7 L14,8 C14,8.55228475 13.5522847,9 13,9 C12.4477153,9 12,8.55228475 12,8 L12,7 C12,5.8954149 11.1045954,5 10,5 L6,5 C4.89543475,5 4,5.89543475 4,7 L4,17 C4,18.1045954 4.8954149,19 6,19 L10,19 C11.1046153,19 12,18.1046153 12,17 L12,16 C12,15.4477153 12.4477153,15 13,15 C13.5522847,15 14,15.4477153 14,16 L14,17 C14,19.2091847 12.2091847,21 10,21 L6,21 C3.79085056,21 2,19.2091701 2,17 L2,7 C2,4.79086525 3.79086525,3 6,3 L10,3 Z M17.7071068,7.29289322 L21.7071068,11.2928932 L21.7485042,11.336853 L21.757,11.347 L21.787214,11.3832499 L21.779,11.374 L21.8036654,11.4046934 C21.8215099,11.4288693 21.8382813,11.453725 21.8539326,11.4793398 L21.8753288,11.5159379 C21.8862061,11.5357061 21.8966234,11.5561086 21.9063462,11.5769009 L21.9287745,11.628664 C21.9366843,11.6484208 21.9438775,11.6682023 21.9504533,11.6882636 C21.9552713,11.7031487 21.9599023,11.7185367 21.9641549,11.734007 C21.9701664,11.7555635 21.9753602,11.7772539 21.9798348,11.7992059 C21.9832978,11.8166247 21.9863719,11.834051 21.9889822,11.8515331 C21.9920328,11.8714753 21.9944666,11.892114 21.9962623,11.912935 C21.9978436,11.9317345 21.9989053,11.9497336 21.9994829,11.9677454 C21.9998183,11.9777892 22,11.9888734 22,12 L21.996384,12.0852242 L21.9889807,12.1489612 C21.9863719,12.165949 21.9832978,12.1833753 21.9797599,12.2007258 C21.9753602,12.2227461 21.9701664,12.2444365 21.964279,12.2658396 C21.9599023,12.2814633 21.9552713,12.2968513 21.9502619,12.3121425 C21.9438775,12.3317977 21.9366843,12.3515792 21.928896,12.3710585 L21.9063266,12.4232215 C21.8966234,12.4438914 21.8862061,12.4642939 21.8751242,12.484277 C21.8685012,12.4963944 21.8613931,12.5086131 21.8540045,12.5207088 C21.8382813,12.546275 21.8215099,12.5711307 21.8036865,12.5951593 L21.7870723,12.6170223 C21.7849289,12.6196628 21.7826279,12.6225624 21.7803112,12.625449 L21.7071068,12.7071068 L17.7071068,16.7071068 C17.3165825,17.0976311 16.6834175,17.0976311 16.2928932,16.7071068 C15.9023689,16.3165825 15.9023689,15.6834175 16.2928932,15.2928932 L18.585,13 L7,13 C6.44771525,13 6,12.5522847 6,12 C6,11.4477153 6.44771525,11 7,11 L18.585,11 L16.2928932,8.70710678 C15.9023689,8.31658249 15.9023689,7.68341751 16.2928932,7.29289322 C16.6834175,6.90236893 17.3165825,6.90236893 17.7071068,7.29289322 Z",
+        id: "Combined-Shape"
+      })
+    }))
+  }))]
+}));
 
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
-    ? call(regExpFlags, R) : flags;
+const OrchestratorPageHeader = ({
+  navigationHeight,
+  getAppLogo,
+  handleLogoutClick
+}) => {
+  const {
+    theme,
+    multiplyByBaseUnit
+  } = useOrchestratorTheme();
+  return jsxs(EuiHeader, Object.assign({
+    css: {
+      backgroundColor: theme.colors.primary,
+      height: navigationHeight
+    }
+  }, {
+    children: [jsxs(EuiHeaderSection, {
+      children: [jsx(EuiHeaderSectionItem, {
+        children: jsx(EuiHeaderLogo, {
+          iconType: () => getAppLogo(navigationHeight)
+        })
+      }), jsx(EuiHeaderSectionItem, {
+        children: jsx(EnvironmentBadge, {})
+      })]
+    }), jsx(EuiHeaderSection, {
+      children: jsxs(EuiHeaderSectionItem, {
+        children: [jsxs(EuiBadgeGroup, Object.assign({
+          css: {
+            marginRight: multiplyByBaseUnit(2)
+          }
+        }, {
+          children: [jsx(EngineStatusBadge, {}), jsx(FailedTasksBadge, {})]
+        })), jsx(EuiButtonIcon, {
+          "aria-label": "Logout",
+          display: "empty",
+          iconType: () => jsx(LogoutIcon, {
+            color: theme.colors.emptyShade
+          }),
+          css: {
+            width: 48,
+            height: 48
+          },
+          color: "ghost",
+          onClick: () => handleLogoutClick()
+        })]
+      })
+    })]
+  }));
 };
 
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn = defineBuiltIn$6;
-var anObject = anObject$c;
-var $toString = toString$2;
-var fails$3 = fails$h;
-var getRegExpFlags = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var nativeToString = RegExpPrototype[TO_STRING];
-
-var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn(RegExp.prototype, TO_STRING, function toString() {
-    var R = anObject(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
-var tryToString = tryToString$5;
-
-var $TypeError$1 = TypeError;
+const OrchestratorSidebar = ({
+  routeTo
+}) => jsx(EuiSideNav, {
+  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: 'Start',
+      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'
+    }]
+  }]
+});
 
-var deletePropertyOrThrow$1 = function (O, P) {
-  if (!delete O[P]) throw $TypeError$1('Cannot delete property ' + tryToString(P) + ' of ' + tryToString(O));
+const OrchestratorPageTemplate = ({
+  children,
+  routeTo,
+  getAppLogo
+}) => {
+  const {
+    theme,
+    multiplyByBaseUnit
+  } = useOrchestratorTheme();
+  const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
+  const navigationHeight = multiplyByBaseUnit(3);
+  return jsxs(Fragment, {
+    children: [jsx(OrchestratorPageHeader, {
+      getAppLogo: getAppLogo,
+      navigationHeight: navigationHeight,
+      handleLogoutClick: () => setIsSideMenuVisible(!isSideMenuVisible)
+    }), jsxs(EuiPageTemplate, Object.assign({
+      panelled: false,
+      grow: false,
+      contentBorder: false,
+      minHeight: `calc(100vh - ${navigationHeight}px)`,
+      restrictWidth: false
+    }, {
+      children: [isSideMenuVisible && jsx(EuiPageTemplate.Sidebar, Object.assign({
+        css: {
+          backgroundColor: theme.colors.body
+        }
+      }, {
+        children: jsx(OrchestratorSidebar, {
+          routeTo: routeTo
+        })
+      })), jsx(EuiPageTemplate.Section, Object.assign({
+        css: {
+          backgroundColor: theme.colors.emptyShade
+        }
+      }, {
+        children: children
+      }))]
+    }))]
+  });
 };
 
-var toPropertyKey = toPropertyKey$3;
-var definePropertyModule = objectDefineProperty;
-var createPropertyDescriptor = createPropertyDescriptor$4;
+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))
+  }));
+};
 
-var createProperty$1 = function (object, key, value) {
-  var propertyKey = toPropertyKey(key);
-  if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor(0, value));
-  else object[propertyKey] = value;
-};
-
-var toAbsoluteIndex = toAbsoluteIndex$2;
-var lengthOfArrayLike$1 = lengthOfArrayLike$4;
-var createProperty = createProperty$1;
-
-var $Array = Array;
-var max = Math.max;
-
-var arraySliceSimple = function (O, start, end) {
-  var length = lengthOfArrayLike$1(O);
-  var k = toAbsoluteIndex(start, length);
-  var fin = toAbsoluteIndex(end === undefined ? length : end, length);
-  var result = $Array(max(fin - k, 0));
-  for (var n = 0; k < fin; k++, n++) createProperty(result, n, O[k]);
-  result.length = n;
-  return result;
-};
-
-var arraySlice = arraySliceSimple;
-
-var floor = Math.floor;
-
-var mergeSort = function (array, comparefn) {
-  var length = array.length;
-  var middle = floor(length / 2);
-  return length < 8 ? insertionSort(array, comparefn) : merge(
-    array,
-    mergeSort(arraySlice(array, 0, middle), comparefn),
-    mergeSort(arraySlice(array, middle), comparefn),
-    comparefn
-  );
-};
-
-var insertionSort = function (array, comparefn) {
-  var length = array.length;
-  var i = 1;
-  var element, j;
-
-  while (i < length) {
-    j = i;
-    element = array[i];
-    while (j && comparefn(array[j - 1], element) > 0) {
-      array[j] = array[--j];
+const ListItemStartPage = ({
+  item,
+  type
+}) => {
+  const [hoverState, setHoverState] = useState(false);
+  console.log(item);
+  console.log(type);
+  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"
+          }))]
+        }))]
+      });
     }
-    if (j !== i++) array[j] = element;
-  } return array;
+  };
+  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"
+        })
+      }))]
+    }))
+  }));
 };
 
-var merge = function (array, left, right, comparefn) {
-  var llength = left.length;
-  var rlength = right.length;
-  var lindex = 0;
-  var rindex = 0;
+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
+      }))]
+    }))
+  }));
+}
 
-  while (lindex < llength || rindex < rlength) {
-    array[lindex + rindex] = (lindex < llength && rindex < rlength)
-      ? comparefn(left[lindex], right[rindex]) <= 0 ? left[lindex++] : right[rindex++]
-      : lindex < llength ? left[lindex++] : right[rindex++];
-  } return array;
+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
+    })]
+  }));
 };
 
-var arraySort = mergeSort;
-
-var fails$2 = fails$h;
-
-var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
-  var method = [][METHOD_NAME];
-  return !!method && fails$2(function () {
-    // eslint-disable-next-line no-useless-call -- required for testing
-    method.call(null, argument || function () { return 1; }, 1);
-  });
+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
+    })]
+  }));
 };
 
-var userAgent$1 = engineUserAgent;
-
-var firefox = userAgent$1.match(/firefox\/(\d+)/i);
-
-var engineFfVersion = !!firefox && +firefox[1];
-
-var UA = engineUserAgent;
-
-var engineIsIeOrEdge = /MSIE|Trident/.test(UA);
-
-var userAgent = engineUserAgent;
-
-var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
-
-var engineWebkitVersion = !!webkit && +webkit[1];
-
-var $$2 = _export;
-var uncurryThis$1 = functionUncurryThis;
-var aCallable = aCallable$9;
-var toObject = toObject$4;
-var lengthOfArrayLike = lengthOfArrayLike$4;
-var deletePropertyOrThrow = deletePropertyOrThrow$1;
-var toString$1 = toString$2;
-var fails$1 = fails$h;
-var internalSort = arraySort;
-var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var FF = engineFfVersion;
-var IE_OR_EDGE = engineIsIeOrEdge;
-var V8 = engineV8Version;
-var WEBKIT = engineWebkitVersion;
+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))
+  }));
+};
+
+var classof$1 = classof$4;
+
+var $String = String;
+
+var toString$4 = function (argument) {
+  if (classof$1(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+var anObject$1 = anObject$c;
+
+// `RegExp.prototype.flags` getter implementation
+// https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
+var regexpFlags = function () {
+  var that = anObject$1(this);
+  var result = '';
+  if (that.hasIndices) result += 'd';
+  if (that.global) result += 'g';
+  if (that.ignoreCase) result += 'i';
+  if (that.multiline) result += 'm';
+  if (that.dotAll) result += 's';
+  if (that.unicode) result += 'u';
+  if (that.unicodeSets) result += 'v';
+  if (that.sticky) result += 'y';
+  return result;
+};
+
+var call = functionCall;
+var hasOwn = hasOwnProperty_1;
+var isPrototypeOf = objectIsPrototypeOf;
+var regExpFlags = regexpFlags;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn(R, 'flags') && isPrototypeOf(RegExpPrototype$1, R)
+    ? call(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn = defineBuiltIn$6;
+var anObject = anObject$c;
+var $toString = toString$4;
+var fails$4 = fails$i;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails$4(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
+var tryToString = tryToString$5;
+
+var $TypeError$1 = TypeError;
+
+var deletePropertyOrThrow$1 = function (O, P) {
+  if (!delete O[P]) throw $TypeError$1('Cannot delete property ' + tryToString(P) + ' of ' + tryToString(O));
+};
+
+var toPropertyKey = toPropertyKey$3;
+var definePropertyModule = objectDefineProperty;
+var createPropertyDescriptor = createPropertyDescriptor$4;
+
+var createProperty$1 = function (object, key, value) {
+  var propertyKey = toPropertyKey(key);
+  if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor(0, value));
+  else object[propertyKey] = value;
+};
+
+var toAbsoluteIndex = toAbsoluteIndex$2;
+var lengthOfArrayLike$1 = lengthOfArrayLike$4;
+var createProperty = createProperty$1;
+
+var $Array = Array;
+var max = Math.max;
+
+var arraySliceSimple = function (O, start, end) {
+  var length = lengthOfArrayLike$1(O);
+  var k = toAbsoluteIndex(start, length);
+  var fin = toAbsoluteIndex(end === undefined ? length : end, length);
+  var result = $Array(max(fin - k, 0));
+  for (var n = 0; k < fin; k++, n++) createProperty(result, n, O[k]);
+  result.length = n;
+  return result;
+};
+
+var arraySlice = arraySliceSimple;
+
+var floor = Math.floor;
+
+var mergeSort = function (array, comparefn) {
+  var length = array.length;
+  var middle = floor(length / 2);
+  return length < 8 ? insertionSort(array, comparefn) : merge(
+    array,
+    mergeSort(arraySlice(array, 0, middle), comparefn),
+    mergeSort(arraySlice(array, middle), comparefn),
+    comparefn
+  );
+};
+
+var insertionSort = function (array, comparefn) {
+  var length = array.length;
+  var i = 1;
+  var element, j;
+
+  while (i < length) {
+    j = i;
+    element = array[i];
+    while (j && comparefn(array[j - 1], element) > 0) {
+      array[j] = array[--j];
+    }
+    if (j !== i++) array[j] = element;
+  } return array;
+};
+
+var merge = function (array, left, right, comparefn) {
+  var llength = left.length;
+  var rlength = right.length;
+  var lindex = 0;
+  var rindex = 0;
+
+  while (lindex < llength || rindex < rlength) {
+    array[lindex + rindex] = (lindex < llength && rindex < rlength)
+      ? comparefn(left[lindex], right[rindex]) <= 0 ? left[lindex++] : right[rindex++]
+      : lindex < llength ? left[lindex++] : right[rindex++];
+  } return array;
+};
+
+var arraySort = mergeSort;
+
+var fails$3 = fails$i;
+
+var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
+  var method = [][METHOD_NAME];
+  return !!method && fails$3(function () {
+    // eslint-disable-next-line no-useless-call -- required for testing
+    method.call(null, argument || function () { return 1; }, 1);
+  });
+};
+
+var userAgent$1 = engineUserAgent;
+
+var firefox = userAgent$1.match(/firefox\/(\d+)/i);
+
+var engineFfVersion = !!firefox && +firefox[1];
+
+var UA = engineUserAgent;
+
+var engineIsIeOrEdge = /MSIE|Trident/.test(UA);
+
+var userAgent = engineUserAgent;
+
+var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
+
+var engineWebkitVersion = !!webkit && +webkit[1];
+
+var $$3 = _export;
+var uncurryThis$3 = functionUncurryThis;
+var aCallable = aCallable$9;
+var toObject = toObject$4;
+var lengthOfArrayLike = lengthOfArrayLike$4;
+var deletePropertyOrThrow = deletePropertyOrThrow$1;
+var toString$3 = toString$4;
+var fails$2 = fails$i;
+var internalSort = arraySort;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+var FF = engineFfVersion;
+var IE_OR_EDGE = engineIsIeOrEdge;
+var V8 = engineV8Version;
+var WEBKIT = engineWebkitVersion;
 
 var test = [];
-var nativeSort = uncurryThis$1(test.sort);
-var push = uncurryThis$1(test.push);
+var nativeSort = uncurryThis$3(test.sort);
+var push = uncurryThis$3(test.push);
 
 // IE8-
-var FAILS_ON_UNDEFINED = fails$1(function () {
+var FAILS_ON_UNDEFINED = fails$2(function () {
   test.sort(undefined);
 });
 // V8 bug
-var FAILS_ON_NULL = fails$1(function () {
+var FAILS_ON_NULL = fails$2(function () {
   test.sort(null);
 });
 // Old WebKit
 var STRICT_METHOD = arrayMethodIsStrict('sort');
 
-var STABLE_SORT = !fails$1(function () {
+var STABLE_SORT = !fails$2(function () {
   // feature detection can be too slow, so check engines versions
   if (V8) return V8 < 70;
   if (FF && FF > 3) return;
@@ -3500,20 +3904,20 @@ var STABLE_SORT = !fails$1(function () {
   return result !== 'DGBEFHACIJK';
 });
 
-var FORCED = FAILS_ON_UNDEFINED || !FAILS_ON_NULL || !STRICT_METHOD || !STABLE_SORT;
+var FORCED$1 = FAILS_ON_UNDEFINED || !FAILS_ON_NULL || !STRICT_METHOD || !STABLE_SORT;
 
 var getSortCompare = function (comparefn) {
   return function (x, y) {
     if (y === undefined) return -1;
     if (x === undefined) return 1;
     if (comparefn !== undefined) return +comparefn(x, y) || 0;
-    return toString$1(x) > toString$1(y) ? 1 : -1;
+    return toString$3(x) > toString$3(y) ? 1 : -1;
   };
 };
 
 // `Array.prototype.sort` method
 // https://tc39.es/ecma262/#sec-array.prototype.sort
-$$2({ target: 'Array', proto: true, forced: FORCED }, {
+$$3({ target: 'Array', proto: true, forced: FORCED$1 }, {
   sort: function sort(comparefn) {
     if (comparefn !== undefined) aCallable(comparefn);
 
@@ -3574,6 +3978,19 @@ function columnSortToEuiDataGridSorting(columnSort, updateColumnSort) {
     }
   };
 }
+const getSortDirectionFromString = sortOrder => {
+  if (!sortOrder) {
+    return undefined;
+  }
+  switch (sortOrder.toUpperCase()) {
+    case SortDirection.Asc.toString():
+      return SortDirection.Asc;
+    case SortDirection.Desc.toString():
+      return SortDirection.Desc;
+    default:
+      return undefined;
+  }
+};
 
 // Total height of grid button bar, table header and pagination bar
 const EUI_DATA_GRID_HEIGHT_OFFSET = 103;
@@ -3665,67 +4082,6 @@ const Table = ({
   });
 };
 
-const useQueryWithGraphql = (query, queryVars) => {
-  const {
-    graphqlEndpoint
-  } = useContext(OrchestratorConfigContext);
-  const graphQLClient = new GraphQLClient(graphqlEndpoint);
-  const fetchFromGraphql = () => __awaiter(void 0, void 0, void 0, function* () {
-    // TS-Ignore because queryVars does not seem to be accepted by the client
-    // The props in this useQueryWithGraphql-hook ensures queryVars is indeed related to the query
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return yield graphQLClient.request(query, queryVars);
-  });
-  return useQuery(['subscriptions', ...Object.values(queryVars)], fetchFromGraphql);
-};
-
-const SubscriptionStatusBadge = ({
-  subscriptionStatus
-}) => {
-  const {
-    theme,
-    toSecondaryColor
-  } = useOrchestratorTheme();
-  const getBadgeColorFromSubscriptionStatus = status => {
-    const {
-      primary,
-      darkestShade,
-      lightShade,
-      primaryText,
-      success,
-      successText
-    } = theme.colors;
-    switch (status) {
-      case 'active':
-        return {
-          badgeColor: toSecondaryColor(success),
-          textColor: successText
-        };
-      case 'terminated':
-        return {
-          badgeColor: lightShade,
-          textColor: darkestShade
-        };
-      default:
-        return {
-          badgeColor: toSecondaryColor(primary),
-          textColor: primaryText
-        };
-    }
-  };
-  const {
-    badgeColor,
-    textColor
-  } = getBadgeColorFromSubscriptionStatus(subscriptionStatus);
-  return jsx(Badge, Object.assign({
-    textColor: textColor,
-    color: badgeColor
-  }, {
-    children: subscriptionStatus
-  }));
-};
-
 const CheckmarkCircleFill = ({
   width: _width = 24,
   height: _height = 24,
@@ -3857,463 +4213,190 @@ const defaultOrchestratorTheme = {
   },
   font: {
     weight: {
-      regular: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700
-    }
-  }
-};
-
-var $$1 = _export;
-var $includes = arrayIncludes.includes;
-var fails = fails$h;
-var addToUnscopables = addToUnscopables$2;
-
-// FF99+ bug
-var BROKEN_ON_SPARSE = fails(function () {
-  // eslint-disable-next-line es/no-array-prototype-includes -- detection
-  return !Array(1).includes();
-});
-
-// `Array.prototype.includes` method
-// https://tc39.es/ecma262/#sec-array.prototype.includes
-$$1({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
-  includes: function includes(el /* , fromIndex = 0 */) {
-    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
-  }
-});
-
-// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
-addToUnscopables('includes');
-
-var isObject = isObject$9;
-var classof = classofRaw$2;
-var wellKnownSymbol$1 = wellKnownSymbol$g;
-
-var MATCH$1 = wellKnownSymbol$1('match');
-
-// `IsRegExp` abstract operation
-// https://tc39.es/ecma262/#sec-isregexp
-var isRegexp = function (it) {
-  var isRegExp;
-  return isObject(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof(it) == 'RegExp');
-};
-
-var isRegExp = isRegexp;
-
-var $TypeError = TypeError;
-
-var notARegexp = function (it) {
-  if (isRegExp(it)) {
-    throw $TypeError("The method doesn't accept regular expressions");
-  } return it;
-};
-
-var wellKnownSymbol = wellKnownSymbol$g;
-
-var MATCH = wellKnownSymbol('match');
-
-var correctIsRegexpLogic = function (METHOD_NAME) {
-  var regexp = /./;
-  try {
-    '/./'[METHOD_NAME](regexp);
-  } catch (error1) {
-    try {
-      regexp[MATCH] = false;
-      return '/./'[METHOD_NAME](regexp);
-    } catch (error2) { /* empty */ }
-  } return false;
-};
-
-var $ = _export;
-var uncurryThis = functionUncurryThis;
-var notARegExp = notARegexp;
-var requireObjectCoercible = requireObjectCoercible$3;
-var toString = toString$2;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-var stringIndexOf = uncurryThis(''.indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
-  includes: function includes(searchString /* , position = 0 */) {
-    return !!~stringIndexOf(
-      toString(requireObjectCoercible(this)),
-      toString(notARegExp(searchString)),
-      arguments.length > 1 ? arguments[1] : undefined
-    );
-  }
-});
-
-function getTypedFieldFromObject(field, object) {
-  if (!Object.keys(object).includes(field)) {
-    return undefined;
-  }
-  return field;
-}
-
-const getStatusBadgeColor = status => {
-  const statusColors = {
-    terminated: 'danger',
-    active: 'success',
-    provisioning: 'primary',
-    migrating: 'primary',
-    initial: 'danger'
-  };
-  // eslint-disable-next-line no-prototype-builtins
-  return statusColors.hasOwnProperty(status) ?
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  statusColors[status] : 'primary';
-};
-
-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 (
-    // <Link
-    //     href={`/subscriptions/${
-    //         'subscription_id' in item ? item.subscription_id : ''
-    //     }`}
-    // >
-    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"
-        })
-      }))]
-    }))
-    // </Link>
-  );
-};
-
-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'
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    }
+  }
+};
+
+// a string of all valid unicode whitespaces
+var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+var uncurryThis$2 = functionUncurryThis;
+var requireObjectCoercible$1 = requireObjectCoercible$4;
+var toString$2 = toString$4;
+var whitespaces$1 = whitespaces$2;
+
+var replace = uncurryThis$2(''.replace);
+var ltrim = RegExp('^[' + whitespaces$1 + ']+');
+var rtrim = RegExp('(^|[^' + whitespaces$1 + '])[' + whitespaces$1 + ']+$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod = function (TYPE) {
+  return function ($this) {
+    var string = toString$2(requireObjectCoercible$1($this));
+    if (TYPE & 1) string = replace(string, ltrim, '');
+    if (TYPE & 2) string = replace(string, rtrim, '$1');
+    return string;
   };
-  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
-    })]
-  }));
+var stringTrim = {
+  // `String.prototype.{ trimLeft, trimStart }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+  start: createMethod(1),
+  // `String.prototype.{ trimRight, trimEnd }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+  end: createMethod(2),
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod(3)
 };
 
-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))
-  }));
+var global$1 = global$i;
+var fails$1 = fails$i;
+var uncurryThis$1 = functionUncurryThis;
+var toString$1 = toString$4;
+var trim = stringTrim.trim;
+var whitespaces = whitespaces$2;
+
+var $parseInt$1 = global$1.parseInt;
+var Symbol$1 = global$1.Symbol;
+var ITERATOR = Symbol$1 && Symbol$1.iterator;
+var hex = /^[+-]?0x/i;
+var exec = uncurryThis$1(hex.exec);
+var FORCED = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
+  // MS Edge 18- broken with boxed symbols
+  || (ITERATOR && !fails$1(function () { $parseInt$1(Object(ITERATOR)); }));
+
+// `parseInt` method
+// https://tc39.es/ecma262/#sec-parseint-string-radix
+var numberParseInt = FORCED ? function parseInt(string, radix) {
+  var S = trim(toString$1(string));
+  return $parseInt$1(S, (radix >>> 0) || (exec(hex, S) ? 16 : 10));
+} : $parseInt$1;
+
+var $$2 = _export;
+var $parseInt = numberParseInt;
+
+// `parseInt` method
+// https://tc39.es/ecma262/#sec-parseint-string-radix
+$$2({ global: true, forced: parseInt != $parseInt }, {
+  parseInt: $parseInt
+});
+
+const parseDate = date => {
+  if (date === null || date === '') {
+    return null;
+  }
+  return new Date(parseInt(date) * 1000);
 };
 
-const NewProcessPanel = () => {
-  const [value, setValue] = useState('');
-  const onChange = e => {
-    setValue(e.target.value);
+const getStatusBadgeColor = status => {
+  const statusColors = {
+    terminated: 'danger',
+    active: 'success',
+    provisioning: 'primary',
+    migrating: 'primary',
+    initial: 'danger'
   };
-  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
-    })]
-  }));
+  // eslint-disable-next-line no-prototype-builtins
+  return statusColors.hasOwnProperty(status) ?
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  statusColors[status] : 'primary';
 };
 
-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))
-  }));
+var $$1 = _export;
+var $includes = arrayIncludes.includes;
+var fails = fails$i;
+var addToUnscopables = addToUnscopables$2;
+
+// FF99+ bug
+var BROKEN_ON_SPARSE = fails(function () {
+  // eslint-disable-next-line es/no-array-prototype-includes -- detection
+  return !Array(1).includes();
+});
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+$$1({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE }, {
+  includes: function includes(el /* , fromIndex = 0 */) {
+    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
+  }
+});
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables('includes');
+
+var isObject = isObject$9;
+var classof = classofRaw$2;
+var wellKnownSymbol$1 = wellKnownSymbol$g;
+
+var MATCH$1 = wellKnownSymbol$1('match');
+
+// `IsRegExp` abstract operation
+// https://tc39.es/ecma262/#sec-isregexp
+var isRegexp = function (it) {
+  var isRegExp;
+  return isObject(it) && ((isRegExp = it[MATCH$1]) !== undefined ? !!isRegExp : classof(it) == 'RegExp');
+};
+
+var isRegExp = isRegexp;
+
+var $TypeError = TypeError;
+
+var notARegexp = function (it) {
+  if (isRegExp(it)) {
+    throw $TypeError("The method doesn't accept regular expressions");
+  } return it;
+};
+
+var wellKnownSymbol = wellKnownSymbol$g;
+
+var MATCH = wellKnownSymbol('match');
+
+var correctIsRegexpLogic = function (METHOD_NAME) {
+  var regexp = /./;
+  try {
+    '/./'[METHOD_NAME](regexp);
+  } catch (error1) {
+    try {
+      regexp[MATCH] = false;
+      return '/./'[METHOD_NAME](regexp);
+    } catch (error2) { /* empty */ }
+  } return false;
 };
 
-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 };
+var $ = _export;
+var uncurryThis = functionUncurryThis;
+var notARegExp = notARegexp;
+var requireObjectCoercible = requireObjectCoercible$4;
+var toString = toString$4;
+var correctIsRegExpLogic = correctIsRegexpLogic;
+
+var stringIndexOf = uncurryThis(''.indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
+  includes: function includes(searchString /* , position = 0 */) {
+    return !!~stringIndexOf(
+      toString(requireObjectCoercible(this)),
+      toString(notARegExp(searchString)),
+      arguments.length > 1 ? arguments[1] : undefined
+    );
+  }
+});
+
+function getTypedFieldFromObject(field, object) {
+  if (!Object.keys(object).includes(field)) {
+    return null;
+  }
+  return field;
+}
+
+export { Badge, CheckmarkCircleFill, EngineStatusBadge, Environment, EnvironmentBadge, FailedTasksBadge, FrequentlyUsed, HeaderBadge, ListItemStartPage, LogoutIcon, MinusCircleOutline, MultiListSection, NewProcessPanel, OrchestratorConfigContext, OrchestratorConfigProvider, OrchestratorPageHeader, OrchestratorPageTemplate, OrchestratorSidebar, PlusCircleFill, ProcessStatus, SortDirection, StatCards, StatusDotIcon, SubscriptionStatusBadge, Table, XCircleFill, columnSortToEuiDataGridSorting, defaultOrchestratorTheme, getInitialColumnOrder, getSortDirectionFromString, getStatusBadgeColor, getTypedFieldFromObject, parseDate, useEngineStatusQuery, useFavouriteSubscriptions, useOrchestratorConfig, useOrchestratorTheme, useProcessStatusCountsQuery, useProcessesAttention, useQueryWithGraphql, useRecentProcesses, useStringQueryWithGraphql };