[GEN-1784]: apply icons for "monitors" in drawer card-details (#1882)

This pull request includes several changes to the `frontend/webapp/components` directory, focusing on refactoring components and improving the styling and functionality of the `CardDetails`, `ConfiguredFields`, and `MonitorsLegend` components. Refactoring and Interface Updates: * [`frontend/webapp/components/common/card-details/index.tsx`](diffhunk://#diff-a1aeb311b15066559d3a82bef324c454a7de3a09e06ab8637b9b36c2a79e655dL3-R6): Renamed `CardDetailsProps` to `Props` and moved the `ConfiguredFields` import to the top of the file. The `CardDetails` component was restructured and re-exported at the bottom of the file. [[1]](diffhunk://#diff-a1aeb311b15066559d3a82bef324c454a7de3a09e06ab8637b9b36c2a79e655dL3-R6) [[2]](diffhunk://#diff-a1aeb311b15066559d3a82bef324c454a7de3a09e06ab8637b9b36c2a79e655dL14-L26) [[3]](diffhunk://#diff-a1aeb311b15066559d3a82bef324c454a7de3a09e06ab8637b9b36c2a79e655dR28-R38) * [`frontend/webapp/components/common/configured-fields/index.tsx`](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022L4-R15): Renamed `TypeDetail` to `Detail` and `ConfiguredFieldsProps` to `Props`. Added a new `renderValue` function to handle different types of values. [[1]](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022L4-R15) [[2]](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022L36-R37) [[3]](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022L47-R49) [[4]](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022R79-R97) * [`frontend/webapp/components/overview/monitors-legend/index.tsx`](diffhunk://#diff-a4d5b4e054905b04e1d8a5d67e6844925c981e65138fe5be7cec01cfe42ba2dcL3-L43): Added a `Props` interface and updated the `MonitorsLegend` component to use the new props. The component now filters signals and adjusts styles based on the provided props. Styling Improvements: * [`frontend/webapp/components/common/configured-fields/index.tsx`](diffhunk://#diff-03463bf02731c500640be42702debbd088df7a64298eac7d7474f5864f0c6022L25-R26): Updated the `ItemTitle` component to use theme-based coloring. * [`frontend/webapp/components/overview/monitors-legend/index.tsx`](diffhunk://#diff-a4d5b4e054905b04e1d8a5d67e6844925c981e65138fe5be7cec01cfe42ba2dcL3-L43): Updated `List`, `ListItem`, and `MonitorTitle` components to use dynamic styling based on the new props.
odigos-io · Nov 28, 2024 · 8805253 · 8805253
1 parent 000bb78
commit 8805253
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 50 deletions.
diff --git a/frontend/webapp/components/common/card-details/index.tsx b/frontend/webapp/components/common/card-details/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
-import { ConfiguredFields } from '@/components';
 import { Text } from '@/reuseable-components';
-interface CardDetailsProps {
+import { ConfiguredFields } from '@/components';
+
+interface Props {
   title?: string;
   data: {
     title: string;
@@ -11,19 +12,6 @@ interface CardDetailsProps {
   }[];
 }
 
-const CardDetails: React.FC<CardDetailsProps> = ({ data, title = 'Details' }) => {
-  return (
-    <Container>
-      <TitleWrapper>
-        <Text>{title}</Text>
-      </TitleWrapper>
-      <ConfiguredFields details={data} />
-    </Container>
-  );
-};
-
-export { CardDetails };
-
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -37,3 +25,14 @@ const Container = styled.div`
 `;
 
 const TitleWrapper = styled.div``;
+
+export const CardDetails: React.FC<Props> = ({ title = 'Details', data }) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <Text>{title}</Text>
+      </TitleWrapper>
+      <ConfiguredFields details={data} />
+    </Container>
+  );
+};
diff --git a/frontend/webapp/components/common/configured-fields/index.tsx b/frontend/webapp/components/common/configured-fields/index.tsx
@@ -1,17 +1,18 @@
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { Text, Status, Tooltip } from '@/reuseable-components';
-import Image from 'next/image';
+import { MonitorsLegend } from '@/components/overview';
+import theme from '@/styles/theme';
 
-type TypeDetail = {
+interface Detail {
   title: string;
   tooltip?: string;
   value: string;
-};
+}
 
-type ConfiguredFieldsProps = {
-  details: TypeDetail[];
-};
+interface Props {
+  details: Detail[];
+}
 
 const ListContainer = styled.div`
   display: flex;
@@ -22,7 +23,7 @@ const ListContainer = styled.div`
 const ListItem = styled.div``;
 
 const ItemTitle = styled(Text)`
-  color: #b8b8b8;
+  color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
   line-height: 16px;
 `;
@@ -33,7 +34,7 @@ const ItemValue = styled(Text)`
   line-height: 18px;
 `;
 
-export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({ details }) => {
+export const ConfiguredFields: React.FC<Props> = ({ details }) => {
   const parseValue = (value: string) => {
     let str = '';
 
@@ -44,11 +45,8 @@ export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({ details }) =
       if (Array.isArray(parsed)) {
         str = parsed
           .map((item) => {
-            if (typeof item === 'object' && item !== null) {
-              return `${item.key}: ${item.value}`;
-            }
-
-            return item;
+            if (typeof item === 'object' && item !== null) return `${item.key}: ${item.value}`;
+            else return item;
           })
           .join(', ');
       }
@@ -78,15 +76,25 @@ export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({ details }) =
     ));
   };
 
+  const renderValue = (title: string, value: string) => {
+    switch (title) {
+      case 'Status':
+        return <Status isActive={value == 'true'} withIcon withBorder withSmaller withSpecialFont />;
+      case 'Monitors':
+        return <MonitorsLegend color={theme.colors.text} signals={value.split(', ')} />;
+      default:
+        return <ItemValue>{parseValue(value)}</ItemValue>;
+    }
+  };
+
   return (
     <ListContainer>
       {details.map((detail, index) => (
         <ListItem key={index}>
           <Tooltip text={detail.tooltip || ''} withIcon>
             <ItemTitle>{detail.title}</ItemTitle>
           </Tooltip>
-
-          {detail.title === 'Status' ? <Status isActive={detail.value == 'true'} withIcon withBorder withSmaller withSpecialFont /> : <ItemValue>{parseValue(detail.value)}</ItemValue>}
+          {renderValue(detail.title, detail.value)}
         </ListItem>
       ))}
     </ListContainer>

diff --git a/frontend/webapp/components/overview/monitors-legend/index.tsx b/frontend/webapp/components/overview/monitors-legend/index.tsx
@@ -1,43 +1,51 @@
 import React from 'react';
 import Image from 'next/image';
-import theme from '@/styles/theme';
 import styled from 'styled-components';
 import { MONITORS_OPTIONS } from '@/utils';
 import { Text } from '@/reuseable-components';
 
-const List = styled.div`
+interface Props {
+  size?: number;
+  color?: string;
+  signals?: string[];
+}
+
+const List = styled.div<{ $size: number }>`
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: ${({ $size }) => $size}px;
 `;
 
-const ListItem = styled.div`
+const ListItem = styled.div<{ $size: number }>`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: ${({ $size }) => $size / 3}px;
 `;
 
-const MonitorTitle = styled(Text)`
-  color: ${({ theme }) => theme.text.grey};
-  font-size: 12px;
+const MonitorTitle = styled(Text)<{ $size: number; $color?: string }>`
+  color: ${({ $color, theme }) => $color || theme.text.grey};
+  font-size: ${({ $size }) => $size}px;
   font-weight: 300;
   line-height: 150%;
 `;
 
-const MonitorsLegend = () => {
+export const MonitorsLegend: React.FC<Props> = ({ size = 12, color, signals }) => {
   return (
-    <List>
-      {MONITORS_OPTIONS.map(({ id, value }) => (
-        <ListItem key={`monitors-legend-${id}`}>
-          <Image src={`/icons/monitors/${id}.svg`} width={14} height={14} alt={value} style={{ filter: 'invert(40%) brightness(80%) grayscale(100%)' }} />
+    <List $size={size}>
+      {MONITORS_OPTIONS.map(({ id, value }) => {
+        const ok = !signals || !signals.length || signals.find((str) => str.toLowerCase() === id);
+
+        if (!ok) return null;
 
-          <MonitorTitle size={14} color={theme.text.grey}>
-            {value}
-          </MonitorTitle>
-        </ListItem>
-      ))}
+        return (
+          <ListItem key={`monitors-legend-${id}`} $size={size}>
+            <Image src={`/icons/monitors/${id}.svg`} width={size + 2} height={size + 2} alt={value} style={{ filter: 'invert(40%) brightness(80%) grayscale(100%)' }} />
+            <MonitorTitle $size={size} $color={color}>
+              {value}
+            </MonitorTitle>
+          </ListItem>
+        );
+      })}
     </List>
   );
 };
-
-export { MonitorsLegend };