[GEN-1841]: refactor "card-details" and "container-details" into "dat…

…a-card" (#1898)

frontend/webapp/components/common/index.ts

@@ -1,3 +1 @@
-export * from './card-details';
-export * from './configured-fields';
 export * from './dropdowns';

frontend/webapp/containers/main/actions/action-drawer/build-card.ts

@@ -1,4 +1,6 @@
+import { DISPLAY_TITLES } from '@/utils';
 import type { ActionDataParsed } from '@/types';
+import { DataCardFieldTypes, type DataCardRow } from '@/reuseable-components';
 
 const buildCard = (action: ActionDataParsed) => {
   const {
@@ -19,19 +21,20 @@ const buildCard = (action: ActionDataParsed) => {
     },
   } = action;
 
-  const arr = [
-    { title: 'Type', value: type },
-    { title: 'Status', value: String(!disabled) },
-    { title: 'Monitors', value: signals.map((str) => str.toLowerCase()).join(', ') },
-    { title: 'Name', value: actionName || 'N/A' },
-    { title: 'Notes', value: notes || 'N/A' },
+  const arr: DataCardRow[] = [
+    { title: DISPLAY_TITLES.TYPE, value: type },
+    { 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(', ') },
   ];
 
   if (clusterAttributes) {
     let str = '';
     clusterAttributes.forEach(({ attributeName, attributeStringValue }, idx) => {
       str += `${attributeName}: ${attributeStringValue}`;
-      if (idx < clusterAttributes.length - 1) str += '\n';
+      if (idx < clusterAttributes.length - 1) str += ', ';
     });
 
     arr.push({ title: 'Attributes', value: str });

frontend/webapp/containers/main/actions/action-drawer/index.tsx

@@ -3,9 +3,9 @@ import buildCard from './build-card';
 import { ActionFormBody } from '../';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { CardDetails } from '@/components';
-import { ACTION, getActionIcon } from '@/utils';
+import { ACTION, DATA_CARDS, getActionIcon } from '@/utils';
 import buildDrawerItem from './build-drawer-item';
+import { DataCard } from '@/reuseable-components';
 import { useActionCRUD, useActionFormData } from '@/hooks';
 import OverviewDrawer from '../../overview/overview-drawer';
 import { ACTION_OPTIONS } from '../action-modal/action-options';
@@ -120,7 +120,7 @@ export const ActionDrawer: React.FC<Props> = () => {
           />
         </FormContainer>
       ) : (
-        <CardDetails title='Action Details' data={cardData} />
+        <DataCard title={DATA_CARDS.ACTION_DETAILS} data={cardData} />
       )}
     </OverviewDrawer>
   );

frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { DeleteWarning } from '@/components';
 import { IAppState, useAppStore } from '@/store';
-import { ConfiguredFields, DeleteWarning } from '@/components';
-import { Button, Divider, ExtendIcon, Text } from '@/reuseable-components';
 import { OVERVIEW_ENTITY_TYPES, type ConfiguredDestination } from '@/types';
+import { Button, DataCardFields, Divider, ExtendIcon, Text } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
   margin-top: 24px;
-  align-self: stretch;
+  max-height: calc(100vh - 400px);
   height: 100%;
-  max-height: 548px;
-  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
 `;
 
 const ListItem = styled.div`
@@ -38,9 +38,9 @@ const ListItemHeader = styled.div`
 `;
 
 const ListItemContent = styled.div`
-  margin-left: 16px;
   display: flex;
   gap: 12px;
+  margin-left: 16px;
 `;
 
 const DestinationIconWrapper = styled.div`
@@ -135,8 +135,8 @@ const ConfiguredDestinationsListItem: React.FC<{ item: ConfiguredDestination; is
 
         {expand && (
           <ListItemBody>
-            <Divider margin='0 0 16px 0' />
-            <ConfiguredFields details={item.destinationTypeDetails} />
+            <Divider margin='0 0 16px 0' length='calc(100% - 32px)' />
+            <DataCardFields data={item.destinationTypeDetails} />
           </ListItemBody>
         )}
       </ListItem>

frontend/webapp/containers/main/destinations/destination-drawer/build-card.ts

@@ -1,17 +1,19 @@
-import { ActualDestination, DestinationDetailsResponse, ExportedSignals } from '@/types';
-import { safeJsonParse } from '@/utils';
+import { DISPLAY_TITLES, safeJsonParse } from '@/utils';
+import { DataCardRow, DataCardFieldTypes } from '@/reuseable-components';
+import type { ActualDestination, DestinationDetailsResponse, ExportedSignals } from '@/types';
 
 const buildMonitorsList = (exportedSignals: ExportedSignals): string =>
   Object.keys(exportedSignals)
     .filter((key) => exportedSignals[key])
-    .join(', ') || 'N/A';
+    .join(', ');
 
 const buildCard = (destination: ActualDestination, destinationTypeDetails: DestinationDetailsResponse['destinationTypeDetails']) => {
   const { exportedSignals, destinationType, fields } = destination;
 
-  const arr = [
-    { title: 'Destination', value: destinationType.displayName },
-    { title: 'Monitors', value: buildMonitorsList(exportedSignals) },
+  const arr: DataCardRow[] = [
+    { title: DISPLAY_TITLES.DESTINATION, value: destinationType.displayName },
+    { type: DataCardFieldTypes.MONITORS, title: DISPLAY_TITLES.MONITORS, value: buildMonitorsList(exportedSignals) },
+    { type: DataCardFieldTypes.DIVIDER, width: '100%' },
   ];
 
   Object.entries(safeJsonParse<Record<string, string>>(fields, {})).map(([key, value]) => {
@@ -22,7 +24,7 @@ const buildCard = (destination: ActualDestination, destinationTypeDetails: Desti
 
     arr.push({
       title: found?.displayName || key,
-      value: secret || value || 'N/A',
+      value: secret || value,
     });
   });
 

frontend/webapp/containers/main/destinations/destination-drawer/index.tsx

@@ -1,13 +1,12 @@
 import React, { useMemo, useState } from 'react';
-import { ACTION } from '@/utils';
+import { ACTION, DATA_CARDS } from '@/utils';
 import buildCard from './build-card';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { CardDetails } from '@/components';
 import buildDrawerItem from './build-drawer-item';
-import { ConditionDetails } from '@/reuseable-components';
 import OverviewDrawer from '../../overview/overview-drawer';
 import { DestinationFormBody } from '../destination-form-body';
+import { ConditionDetails, DataCard } from '@/reuseable-components';
 import { OVERVIEW_ENTITY_TYPES, type ActualDestination } from '@/types';
 import { useDestinationCRUD, useDestinationFormData, useDestinationTypes } from '@/hooks';
 
@@ -138,7 +137,7 @@ export const DestinationDrawer: React.FC<Props> = () => {
       ) : (
         <DataContainer>
           <ConditionDetails conditions={item.conditions} />
-          <CardDetails title='Destination Details' data={cardData} />
+          <DataCard title={DATA_CARDS.DESTINATION_DETAILS} data={cardData} />
         </DataContainer>
       )}
     </OverviewDrawer>

frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-card.ts

@@ -1,13 +1,16 @@
+import { DISPLAY_TITLES } from '@/utils';
 import type { InstrumentationRuleSpec } from '@/types';
+import { DataCardRow, DataCardFieldTypes } from '@/reuseable-components';
 
 const buildCard = (rule: InstrumentationRuleSpec) => {
   const { type, ruleName, notes, disabled, payloadCollection } = rule;
 
-  const arr = [
-    { title: 'Type', value: type || 'N/A' },
-    { title: 'Status', value: String(!disabled) },
-    { title: 'Name', value: ruleName || 'N/A' },
-    { title: 'Notes', value: notes || 'N/A' },
+  const arr: DataCardRow[] = [
+    { title: DISPLAY_TITLES.TYPE, value: type },
+    { 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) {

frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx

@@ -3,8 +3,8 @@ import buildCard from './build-card';
 import { RuleFormBody } from '../';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { CardDetails } from '@/components';
-import { ACTION, getRuleIcon } from '@/utils';
+import { ACTION, DATA_CARDS, getRuleIcon } from '@/utils';
+import { DataCard } from '@/reuseable-components';
 import buildDrawerItem from './build-drawer-item';
 import { RULE_OPTIONS } from '../rule-modal/rule-options';
 import OverviewDrawer from '../../overview/overview-drawer';
@@ -117,7 +117,7 @@ export const RuleDrawer: React.FC<Props> = () => {
           />
         </FormContainer>
       ) : (
-        <CardDetails title='Instrumentation Rule Details' data={cardData} />
+        <DataCard title={DATA_CARDS.RULE_DETAILS} data={cardData} />
       )}
     </OverviewDrawer>
   );

frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx

@@ -26,6 +26,10 @@ const InputWrapper = styled(SectionItemsWrapper)`
 const Title = styled(Text)`
   font-size: 18px;
   line-height: 26px;
+  max-width: 400px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 const DrawerItemImageWrapper = styled.div`

frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts

@@ -1,15 +1,17 @@
+import { DISPLAY_TITLES } from '@/utils';
 import type { K8sActualSource } from '@/types';
+import { DataCardRow } from '@/reuseable-components';
 
 const buildCard = (source: K8sActualSource) => {
   const { name, kind, namespace, instrumentedApplicationDetails } = source;
   const { containerName, language } = instrumentedApplicationDetails?.containers?.[0] || {};
 
-  const arr = [
-    { title: 'Namespace', value: namespace },
-    { title: 'Kind', value: kind },
-    { title: 'Name', value: name },
-    { title: 'Container Name', value: containerName || 'N/A' },
-    { title: 'Language', value: language || 'N/A' },
+  const arr: DataCardRow[] = [
+    { title: DISPLAY_TITLES.NAMESPACE, value: namespace },
+    { title: DISPLAY_TITLES.KIND, value: kind },
+    { title: DISPLAY_TITLES.CONTAINER_NAME, value: containerName },
+    { title: DISPLAY_TITLES.NAME, value: name },
+    { title: DISPLAY_TITLES.LANGUAGE, value: language },
   ];
 
   return arr;