[GEN-1844]: refactor "status" component (#1900)

This pull request includes several changes to the `frontend/webapp` components, mainly focusing on refactoring the `Status` component and its usage across different files. The changes also include adding new components `ActiveStatus` and `ConnectionStatus` to replace the existing `Status` component in various parts of the codebase. Refactoring and component updates: * [`frontend/webapp/components/main/header/index.tsx`](diffhunk://#diff-2c96f91ec30d2116981a9c0a562820ff9fd87c8292cb5dca11a45d6fb2ac6c04L6-R6): Replaced `Status` with `ConnectionStatus` for displaying connection status. [[1]](diffhunk://#diff-2c96f91ec30d2116981a9c0a562820ff9fd87c8292cb5dca11a45d6fb2ac6c04L6-R6) [[2]](diffhunk://#diff-2c96f91ec30d2116981a9c0a562820ff9fd87c8292cb5dca11a45d6fb2ac6c04L43-R43) * [`frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx`](diffhunk://#diff-ce146776b402d3e7c41f2ebb82b32a2b8636ec73200d70a6f30f0f08dc1da6d0L3-R3): Replaced `Status` with `ActiveStatus` for displaying active status and updated `MonitorsIcons` to support labels. [[1]](diffhunk://#diff-ce146776b402d3e7c41f2ebb82b32a2b8636ec73200d70a6f30f0f08dc1da6d0L3-R3) [[2]](diffhunk://#diff-ce146776b402d3e7c41f2ebb82b32a2b8636ec73200d70a6f30f0f08dc1da6d0L77-R80) * [`frontend/webapp/reuseable-components/data-tab/index.tsx`](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L5-R5): Replaced `Status` with `ActiveStatus` for displaying active status. [[1]](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L5-R5) [[2]](diffhunk://#diff-afbf1606ee29d25bd9273d63b66a4746dbdd1cd8406ad651cfd123ac28f72006L92-R92) * [`frontend/webapp/reuseable-components/status/index.tsx`](diffhunk://#diff-8828fa39eed82424bd382e5bd240ee5efc607723527e6dc649d92a3d0c32aed3L3-L100): Refactored the `Status` component to support new props and styles, and added exports for `ActiveStatus` and `ConnectionStatus`. * [`frontend/webapp/reuseable-components/status/active-status/index.tsx`](diffhunk://#diff-9485e5934f1643bf9cae8c13ff4ea216eb2e1767bb7ccdb7ed6b6ac3a41d8efeR1-R8): Added new `ActiveStatus` component to encapsulate the active status display logic. * [`frontend/webapp/reuseable-components/status/connection-status/index.tsx`](diffhunk://#diff-11d70e0e626f4e9e67f4ca7da05f0bba5a6b28cd20f0fd793daefcc719a7e61fR1-R8): Added new `ConnectionStatus` component to encapsulate the connection status display logic. * [`frontend/webapp/reuseable-components/status/instrument-status/index.tsx`](diffhunk://#diff-f9c075bcca116adc3ebceca4be3815854c4caefa7f7416907232cc09138275efL2-R18): Refactored `InstrumentStatus` to use the updated `Status` component for displaying instrumentation status. Overall, these changes aim to improve the consistency and maintainability of the status display components across the application.
odigos-io · Dec 2, 2024 · cf9e48f · cf9e48f
1 parent 437271f
commit cf9e48f
Show file tree

Hide file tree

Showing 14 changed files with 119 additions and 128 deletions.
diff --git a/frontend/webapp/components/main/header/cp-title/index.tsx b/frontend/webapp/components/main/header/cp-title/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { PlatformTypes } from '@/types';
 import { Text } from '@/reuseable-components';
 
-interface PlatformProps {
-  type: 'k8s' | 'vm';
+interface Props {
+  type: PlatformTypes;
 }
 
 const PlatformWrapper = styled.div`
@@ -28,21 +29,14 @@ const Title = styled(Text)`
   color: ${({ theme }) => theme.colors.white};
 `;
 
-const PlatformTitle: React.FC<PlatformProps> = ({ type }) => {
+const PlatformTitle: React.FC<Props> = ({ type }) => {
   return (
     <PlatformWrapper>
       <IconWrapper>
-        <Image
-          src={`/icons/cp/${type}.svg`}
-          alt={type}
-          width={28}
-          height={28}
-        />
+        <Image src={`/icons/cp/${type}.svg`} alt={type} width={28} height={28} />
       </IconWrapper>
       <TextWrapper>
-        <Title>
-          {type === 'k8s' ? 'Kubernetes Cluster' : 'Virtual Machine'}
-        </Title>
+        <Title>{type === PlatformTypes.K8S ? 'Kubernetes Cluster' : 'Virtual Machine'}</Title>
       </TextWrapper>
     </PlatformWrapper>
   );

diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
@@ -1,32 +1,29 @@
 import React from 'react';
 import Image from 'next/image';
+import { FlexRow } from '@/styles';
 import styled from 'styled-components';
+import { PlatformTypes } from '@/types';
 import { PlatformTitle } from './cp-title';
 import { useConnectionStore } from '@/store';
-import { Status } from '@/reuseable-components';
+import { ConnectionStatus } from '@/reuseable-components';
 import { NotificationManager } from '@/components/notification';
 
 interface MainHeaderProps {}
 
-const Flex = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const HeaderContainer = styled(Flex)`
+const HeaderContainer = styled(FlexRow)`
   width: 100%;
   padding: 12px 0;
   background-color: ${({ theme }) => theme.colors.darker_grey};
   border-bottom: 1px solid rgba(249, 249, 249, 0.16);
 `;
 
-const AlignLeft = styled(Flex)`
+const AlignLeft = styled(FlexRow)`
   margin-right: auto;
   margin-left: 32px;
   gap: 16px;
 `;
 
-const AlignRight = styled(Flex)`
+const AlignRight = styled(FlexRow)`
   margin-left: auto;
   margin-right: 32px;
   gap: 16px;
@@ -39,8 +36,8 @@ export const MainHeader: React.FC<MainHeaderProps> = () => {
     <HeaderContainer>
       <AlignLeft>
         <Image src='/brand/transparent-logo-white.svg' alt='logo' width={84} height={20} />
-        <PlatformTitle type='k8s' />
-        {!connecting && <Status title={title} subtitle={message} isActive={active} withIcon withBackground />}
+        <PlatformTitle type={PlatformTypes.K8S} />
+        {!connecting && <ConnectionStatus title={title} subtitle={message} isActive={active} />}
       </AlignLeft>
 
       <AlignRight>

diff --git a/frontend/webapp/containers/main/actions/action-drawer/build-card.ts b/frontend/webapp/containers/main/actions/action-drawer/build-card.ts
@@ -23,10 +23,10 @@ const buildCard = (action: ActionDataParsed) => {
 
   const arr: DataCardRow[] = [
     { title: DISPLAY_TITLES.TYPE, value: type },
+    { type: DataCardFieldTypes.ACTIVE_STATUS, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
     { title: DISPLAY_TITLES.NAME, value: actionName },
     { title: DISPLAY_TITLES.NOTES, value: notes },
     { type: DataCardFieldTypes.DIVIDER, width: '100%' },
-    { type: DataCardFieldTypes.ACTIVE_STATUS, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
     { type: DataCardFieldTypes.MONITORS, title: DISPLAY_TITLES.SIGNALS_FOR_PROCESSING, value: signals.map((str) => str.toLowerCase()).join(', ') },
   ];
 

diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-card.ts b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-card.ts
@@ -7,10 +7,10 @@ const buildCard = (rule: InstrumentationRuleSpec) => {
 
   const arr: DataCardRow[] = [
     { title: DISPLAY_TITLES.TYPE, value: type },
+    { type: DataCardFieldTypes.ACTIVE_STATUS, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
     { title: DISPLAY_TITLES.NAME, value: ruleName },
     { title: DISPLAY_TITLES.NOTES, value: notes },
     { type: DataCardFieldTypes.DIVIDER, width: '100%' },
-    { type: DataCardFieldTypes.ACTIVE_STATUS, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
   ];
 
   if (payloadCollection) {

diff --git a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx
@@ -1,6 +1,6 @@
 import React, { useId } from 'react';
 import styled from 'styled-components';
-import { DataTab, Divider, InstrumentStatus, MonitorsIcons, Status, Text, Tooltip } from '@/reuseable-components';
+import { ActiveStatus, DataTab, Divider, InstrumentStatus, MonitorsIcons, Text, Tooltip } from '@/reuseable-components';
 import { capitalizeFirstLetter, getProgrammingLanguageIcon, parseJsonStringToPrettyString, safeJsonParse, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils';
 
 export enum DataCardFieldTypes {
@@ -74,10 +74,10 @@ const renderValue = (type: DataCardRow['type'], value: DataCardRow['value']) =>
       return <Divider length='100%' margin='0' />;
 
     case DataCardFieldTypes.MONITORS:
-      return <MonitorsIcons monitors={value?.split(', ') || []} withLabels size={12} />;
+      return <MonitorsIcons monitors={value?.split(', ') || []} withLabels />;
 
     case DataCardFieldTypes.ACTIVE_STATUS:
-      return <Status isActive={value == 'true'} withIcon withBorder withSmaller withSpecialFont />;
+      return <ActiveStatus isActive={value == 'true'} size={10} withIcon withBorder />;
 
     case DataCardFieldTypes.SOURCE_CONTAINER: {
       const { containerName, language, runtimeVersion } = safeJsonParse(value, {

diff --git a/frontend/webapp/reuseable-components/data-tab/index.tsx b/frontend/webapp/reuseable-components/data-tab/index.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useCallback } from 'react';
 import Image from 'next/image';
 import { FlexColumn } from '@/styles';
 import styled, { css } from 'styled-components';
-import { MonitorsIcons, Status, Text } from '@/reuseable-components';
+import { ActiveStatus, MonitorsIcons, Text } from '@/reuseable-components';
 
 interface Props extends PropsWithChildren {
   title: string;
@@ -89,7 +89,7 @@ export const DataTab: React.FC<Props> = ({ title, subTitle, logo, monitors, isAc
     return (
       <>
         <SubTitle>{'•'}</SubTitle>
-        <Status isActive={isActive} withSmaller withSpecialFont />
+        <ActiveStatus isActive={isActive} size={10} />
       </>
     );
   }, [isActive]);

diff --git a/frontend/webapp/reuseable-components/divider/index.tsx b/frontend/webapp/reuseable-components/divider/index.tsx
@@ -1,29 +1,29 @@
 import React from 'react';
 import styled from 'styled-components';
+import { hexPercentValues } from '@/styles';
+import type { NotificationType } from '@/types';
 
 interface Props {
   orientation?: 'horizontal' | 'vertical';
+  type?: NotificationType; // this is to apply coloring to the divider
   thickness?: number;
   length?: string;
-  color?: string;
   margin?: string;
 }
 
 const StyledDivider = styled.div<{
   $orientation?: Props['orientation'];
+  $type?: Props['type'];
   $thickness?: Props['thickness'];
   $length?: Props['length'];
-  $color?: Props['color'];
   $margin?: Props['margin'];
 }>`
   width: ${({ $orientation, $thickness, $length }) => ($orientation === 'vertical' ? `${$thickness}px` : $length || '100%')};
   height: ${({ $orientation, $thickness, $length }) => ($orientation === 'horizontal' ? `${$thickness}px` : $length || '100%')};
   margin: ${({ $orientation, $margin }) => $margin || ($orientation === 'horizontal' ? '8px 0' : '0 8px')};
-  background-color: ${({ $color, theme }) => $color || theme.colors.border};
+  background-color: ${({ $type, theme }) => (!!$type ? theme.text[$type] : theme.colors.border) + hexPercentValues['050']};
 `;
 
-const Divider: React.FC<Props> = ({ orientation = 'horizontal', thickness = 1, length, color, margin }) => {
-  return <StyledDivider $orientation={orientation} $thickness={thickness} $length={length} $color={color} $margin={margin} />;
+export const Divider: React.FC<Props> = ({ orientation = 'horizontal', type, thickness = 1, length, margin }) => {
+  return <StyledDivider $orientation={orientation} $type={type} $thickness={thickness} $length={length} $margin={margin} />;
 };
-
-export { Divider };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
@@ -30,7 +30,6 @@ export * from './auto-complete-input';
 export * from './drawer';
 export * from './input-table';
 export * from './status';
-export * from './status/instrument-status'
 export * from './field-label';
 export * from './field-error';
 export * from './extend-icon';

diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { Text } from '../text';
-import theme from '@/styles/theme';
 import { Divider } from '../divider';
 import styled from 'styled-components';
 import { getStatusIcon } from '@/utils';
@@ -106,7 +105,7 @@ const CloseButton = styled(Image)`
   }
 `;
 
-const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, action, onClose, style }) => {
+export const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, action, onClose, style }) => {
   // These are for handling transitions:
   // isEntering - to stop the progress bar from rendering before the toast is fully slide-in
   // isLeaving - to trigger the slide-out animation
@@ -166,7 +165,7 @@ const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, a
 
         <TextWrapper>
           {title && <Title $type={type}>{title}</Title>}
-          {title && message && <Divider orientation='vertical' color={theme.text[type] + '4D'} thickness={1} />}
+          {title && message && <Divider orientation='vertical' type={type} />}
           {message && <Message $type={type}>{message}</Message>}
         </TextWrapper>
 
@@ -182,5 +181,3 @@ const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, a
     </Container>
   );
 };
-
-export { NotificationNote };
diff --git a/frontend/webapp/reuseable-components/status/active-status/index.tsx b/frontend/webapp/reuseable-components/status/active-status/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Status, type StatusProps } from '@/reuseable-components';
+
+interface Props extends StatusProps {}
+
+export const ActiveStatus: React.FC<Props> = ({ isActive, ...props }) => {
+  return <Status title={isActive ? 'Active' : 'Inactive'} isActive={isActive} {...props} />;
+};
diff --git a/frontend/webapp/reuseable-components/status/connection-status/index.tsx b/frontend/webapp/reuseable-components/status/connection-status/index.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Status, type StatusProps } from '@/reuseable-components';
+
+interface Props extends StatusProps {}
+
+export const ConnectionStatus: React.FC<Props> = ({ ...props }) => {
+  return <Status size={14} family='primary' withIcon withBackground {...props} />;
+};