fix: status page assets (#860)

* fix: status page assets * fix: incident colors * fix: hide cloud features from oss * fix: sider plugin * fix: icons color * fix: incidents tag type colors * fix: bar colors * fix: update bar chart colors * add amber800 color * fix: update unknown colors * adjust picker theme colors * adjusted calendar styling * adjusted hover style * fixup --------- Co-authored-by: fivenp <[email protected]> Co-authored-by: Bogdan Hanea <[email protected]> Co-authored-by: Dawid Rusnak <[email protected]>
kubeshop · Sep 29, 2023 · 8437f63 · 8437f63
1 parent 2c89f19
commit 8437f63
Show file tree

Hide file tree

Showing 14 changed files with 234 additions and 74 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, {Suspense, useContext, useEffect, useMemo} from 'react';
+import React, {Suspense, useContext, useEffect} from 'react';
 import {Navigate, Route, Routes, useLocation} from 'react-router-dom';
 import {useUpdate} from 'react-use';
 
@@ -23,10 +23,6 @@ import {
   Webhooks,
 } from '@pages';
 
-import PluginsContext from '@plugins/context';
-import createPluginManager from '@plugins/manager';
-import {Plugin} from '@plugins/types';
-
 import {getApiDetails, getApiEndpoint, isApiEndpointLocked, useApiEndpoint} from '@services/apiEndpoint';
 import {useGetExecutorsQuery} from '@services/executors';
 import {useGetSourcesQuery} from '@services/sources';
@@ -42,11 +38,9 @@ import {PollingIntervals} from '@utils/numbers';
 
 import {MessagePanelWrapper} from './App.styled';
 
-export interface AppProps {
-  plugins: Plugin[];
-}
+export interface AppProps {}
 
-const App: React.FC<AppProps> = ({plugins}) => {
+const App: React.FC<AppProps> = () => {
   const location = useLocation();
   const apiEndpoint = useApiEndpoint();
   const {isClusterAvailable} = useContext(MainContext);
@@ -117,20 +111,10 @@ const App: React.FC<AppProps> = ({plugins}) => {
       });
   }, [apiEndpoint, isClusterAvailable]);
 
-  const scope = useMemo(() => {
-    const pluginManager = createPluginManager();
-    plugins.forEach(plugin => pluginManager.add(plugin));
-    return pluginManager.setup();
-  }, [plugins]);
-
   return composeProviders()
     .append(Suspense, {fallback: <Loading />})
     .append(LogOutputProvider, {})
-    .append(PluginsContext.Provider, {
-      value: {
-        scope,
-      },
-    })
+
     .render(
       <Suspense fallback={<Loading />}>
         {!isTestkubeCloudLaunchBannerHidden && showTestkubeCloudBanner ? (

diff --git a/src/AppRoot.tsx b/src/AppRoot.tsx
@@ -22,7 +22,9 @@ import {ErrorBoundary} from '@pages';
 
 import {BasePermissionsResolver, PermissionsProvider} from '@permissions/base';
 
+import PluginsContext from '@plugins/context';
 import createAiInsightsPlugin from '@plugins/definitions/ai-insights';
+import createPluginManager from '@plugins/manager';
 import {Plugin} from '@plugins/types';
 
 import {resetRtkCache, store} from '@redux/store';
@@ -134,7 +136,18 @@ const AppRoot: React.FC = () => {
 
   const plugins: Plugin[] = useMemo(() => [createAiInsightsPlugin()], []);
 
+  const scope = useMemo(() => {
+    const pluginManager = createPluginManager();
+    plugins.forEach(plugin => pluginManager.add(plugin));
+    return pluginManager.setup();
+  }, [plugins]);
+
   return composeProviders()
+    .append(PluginsContext.Provider, {
+      value: {
+        scope,
+      },
+    })
     .append(FeatureFlagsProvider, {})
     .append(ConfigContext.Provider, {value: config})
     .append(DashboardContext.Provider, {value: dashboardValue})
@@ -156,7 +169,7 @@ const AppRoot: React.FC = () => {
           <StyledLayoutContentWrapper>
             <Content>
               <ErrorBoundary>
-                <App plugins={plugins} />
+                <App />
               </ErrorBoundary>
             </Content>
           </StyledLayoutContentWrapper>

diff --git a/src/antd-theme/my-antd-theme.less b/src/antd-theme/my-antd-theme.less
@@ -1,4 +1,5 @@
 @primary-color: #7984f4;
+@primary-1: #7984f4;
 @error-color: #ec4899;
 @heading-color: #fff;
 @text-color: #fff;
@@ -64,9 +65,10 @@
 @picker-border-color: #1e293b;
 @picker-panel-bg: #1e293b;
 
-@calendar-full-panel-bg: #475569;
-@calendar-full-bg: #475569;
-@calendar-bg: #475569;
+@calendar-full-panel-bg: #0f172a;
+@calendar-full-bg: #0f172a;
+@calendar-bg: #0f172a;
+@calendar-border-color: #1e293b;
 // notification
 @notification-bg: #1e293b;
 @notification-padding-vertical: 0;

diff --git a/src/assets/images/status-page-icon.svg b/src/assets/images/status-page-icon.svg
diff --git a/src/components/atoms/Icon/Icon.styled.tsx b/src/components/atoms/Icon/Icon.styled.tsx
@@ -7,5 +7,6 @@ export const StyledAntdIcon = styled(AntdIcon)`
     height: 100%;
     width: 100%;
     fill: currentcolor;
+    color: currentcolor;
   }
 `;
diff --git a/src/components/atoms/Icon/Icon.tsx b/src/components/atoms/Icon/Icon.tsx
@@ -19,6 +19,7 @@ const {
   DelayIcon,
   AbortingStatusIcon,
   CloudMigrateIcon,
+  StatusPageIcon,
 } = Icons;
 
 const iconsMap: Record<IconProps['name'], IconComponentProps['component']> = {
@@ -40,6 +41,11 @@ const iconsMap: Record<IconProps['name'], IconComponentProps['component']> = {
   aborting: AbortingStatusIcon,
   success: PassedStatusIcon,
   cloudMigrate: CloudMigrateIcon,
+  statusPage: StatusPageIcon,
+  operational: PassedStatusIcon,
+  major_outage: FailedStatusIcon,
+  partial_outage: FailedStatusIcon,
+  unknown: FailedStatusIcon,
 };
 
 const Icon: React.FC<IconProps> = props => {

diff --git a/src/components/atoms/Icon/icons.tsx b/src/components/atoms/Icon/icons.tsx
@@ -54,7 +54,7 @@ const FailedStatusIcon: React.FC = () => {
     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M9 0.25C4.16797 0.25 0.25 4.16797 0.25 9C0.25 13.832 4.16797 17.75 9 17.75C13.832 17.75 17.75 13.832 17.75 9C17.75 4.16797 13.832 0.25 9 0.25ZM12.2305 12.3242L10.9414 12.3184L9 10.0039L7.06055 12.3164L5.76953 12.3223C5.68359 12.3223 5.61328 12.2539 5.61328 12.166C5.61328 12.1289 5.62695 12.0938 5.65039 12.0645L8.19141 9.03711L5.65039 6.01172C5.62679 5.98309 5.61369 5.94725 5.61328 5.91016C5.61328 5.82422 5.68359 5.75391 5.76953 5.75391L7.06055 5.75977L9 8.07422L10.9395 5.76172L12.2285 5.75586C12.3145 5.75586 12.3848 5.82422 12.3848 5.91211C12.3848 5.94922 12.3711 5.98438 12.3477 6.01367L9.81055 9.03906L12.3496 12.0664C12.373 12.0957 12.3867 12.1309 12.3867 12.168C12.3867 12.2539 12.3164 12.3242 12.2305 12.3242Z"
-        fill="#F472B6"
+        fill="currentColor"
       />
     </svg>
   );
@@ -99,6 +99,17 @@ const CloudMigrateIcon: React.FC = () => {
   );
 };
 
+const StatusPageIcon: React.FC = () => {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.5003 22.5C14.5003 22.8978 14.6583 23.2794 14.9396 23.5607C15.2209 23.842 15.6025 24 16.0003 24C16.3981 24 16.7797 23.842 17.061 23.5607C17.3423 23.2794 17.5003 22.8978 17.5003 22.5C17.5003 22.1022 17.3423 21.7206 17.061 21.4393C16.7797 21.158 16.3981 21 16.0003 21C15.6025 21 15.2209 21.158 14.9396 21.4393C14.6583 21.7206 14.5003 22.1022 14.5003 22.5ZM15.0003 13V18.75C15.0003 18.8875 15.1128 19 15.2503 19H16.7503C16.8878 19 17.0003 18.8875 17.0003 18.75V13C17.0003 12.8625 16.8878 12.75 16.7503 12.75H15.2503C15.1128 12.75 15.0003 12.8625 15.0003 13ZM29.8659 26.75L16.8659 4.25C16.6722 3.91563 16.3378 3.75 16.0003 3.75C15.6628 3.75 15.3253 3.91563 15.1347 4.25L2.13468 26.75C1.7503 27.4188 2.23155 28.25 3.0003 28.25H29.0003C29.7691 28.25 30.2503 27.4188 29.8659 26.75ZM5.38155 25.8781L16.0003 7.49687L26.6191 25.8781H5.38155Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 export default {
   CogIcon,
   DocumentationIcon,
@@ -111,4 +122,5 @@ export default {
   DelayIcon,
   AbortingStatusIcon,
   CloudMigrateIcon,
+  StatusPageIcon,
 };
diff --git a/src/components/atoms/Icon/types.ts b/src/components/atoms/Icon/types.ts
@@ -18,7 +18,12 @@ export type IconProps = {
     | 'error'
     | 'queued'
     | 'success'
-    | 'cloudMigrate';
+    | 'cloudMigrate'
+    | 'statusPage'
+    | 'operational'
+    | 'major_outage'
+    | 'partial_outage'
+    | 'unknown';
   component?: IconComponentProps['component'];
   style?: React.CSSProperties;
 };
diff --git a/src/components/atoms/StatusIcon/StatusIcon.tsx b/src/components/atoms/StatusIcon/StatusIcon.tsx
@@ -14,22 +14,27 @@ interface IconStyle {
 
 const iconStyles: Record<string, IconStyle> = {
   failed: {
+    color: Colors.pink400,
     borderColor: Colors.pink600,
     background: Colors.pink900,
   },
   error: {
+    color: Colors.pink400,
     borderColor: Colors.pink600,
     background: Colors.pink900,
   },
   passed: {
+    color: Colors.lime300,
     borderColor: Colors.lime600,
     background: Colors.lime900,
   },
   success: {
+    color: Colors.lime300,
     borderColor: Colors.lime600,
     background: Colors.lime900,
   },
   running: {
+    color: Colors.sky400,
     borderColor: Colors.sky600,
     background: Colors.sky900,
   },
@@ -39,25 +44,51 @@ const iconStyles: Record<string, IconStyle> = {
     color: Colors.slate400,
   },
   queued: {
+    color: Colors.slate400,
     borderColor: Colors.slate600,
     background: Colors.slate900,
   },
   cancelled: {
+    color: Colors.pink400,
     borderColor: Colors.pink600,
     background: Colors.pink900,
   },
   timeout: {
+    color: Colors.pink400,
     borderColor: Colors.pink600,
     background: Colors.pink900,
   },
   aborted: {
+    color: Colors.pink400,
     borderColor: Colors.pink600,
     background: Colors.pink900,
   },
   aborting: {
+    color: Colors.pink400,
     borderColor: Colors.pink600,
     background: Colors.pink900,
   },
+
+  partial_outage: {
+    color: Colors.amber400,
+    borderColor: Colors.amber600,
+    background: Colors.amber900,
+  },
+  major_outage: {
+    color: Colors.pink400,
+    borderColor: Colors.pink600,
+    background: Colors.pink900,
+  },
+  operational: {
+    color: Colors.lime400,
+    borderColor: Colors.lime600,
+    background: Colors.lime900,
+  },
+  unknown: {
+    color: Colors.slate400,
+    borderColor: Colors.slate600,
+    background: Colors.slate900,
+  },
 };
 
 type StatusIconProps = {

diff --git a/src/components/atoms/Tag/Tag.styled.tsx b/src/components/atoms/Tag/Tag.styled.tsx
@@ -48,4 +48,28 @@ export const TagContainer = styled.div`
     border: 1px solid ${Colors.sky600};
     color: ${Colors.sky300};
   }
+
+  &.critical {
+    background: ${Colors.pink900};
+    border: 1px solid ${Colors.pink600};
+    color: ${Colors.pink300};
+  }
+
+  &.major {
+    background: ${Colors.rose900};
+    border: 1px solid ${Colors.rose600};
+    color: ${Colors.rose300};
+  }
+
+  &.minor {
+    background: ${Colors.amber900};
+    border: 1px solid ${Colors.amber600};
+    color: ${Colors.amber300};
+  }
+
+  &.low {
+    background: ${Colors.yellow900};
+    border: 1px solid ${Colors.yellow600};
+    color: ${Colors.yellow300};
+  }
 `;
diff --git a/src/components/atoms/Tag/Tag.tsx b/src/components/atoms/Tag/Tag.tsx
@@ -8,7 +8,7 @@ import {TagContainer} from './Tag.styled';
 
 export interface TagProps {
   title: string;
-  type?: 'success' | 'warning' | 'error' | 'info';
+  type?: 'success' | 'warning' | 'error' | 'info' | 'critical' | 'major' | 'minor' | 'low';
   tooltipMessage?: string;
   icon?: ReactNode;
 }