Merge pull request #890 from amitamrutiya/pass-container

pass the container resource in the useResourceCleanData function

Author: amitamrutiya

src/custom/ResourceDetailFormatters/Formatter.tsx

@@ -35,6 +35,7 @@ import {
   StyledEnvironmentVariablesCode,
   StyledEnvironmentVariablesPre,
   StyledTitle,
+  TextValue,
   Wrap
 } from './styles';
 import {
@@ -201,7 +202,7 @@ export const OperatorDynamicFormatter: React.FC<OperatorDynamicFormatterProps> =
     return (
       <>
         <ElementData>
-          {data}
+          <TextValue>{data}</TextValue>
           {regex.test(data) && <CopyToClipboard data={data} />}
         </ElementData>
       </>

src/custom/ResourceDetailFormatters/styles.ts

@@ -52,7 +52,7 @@ export const Title = styled('span')({
   fontFamily: 'Qanelas Soft, sans-serif'
 });
 
-export const ElementData = styled('span')({
+export const ElementData = styled('div')({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -184,14 +184,21 @@ export const EnvironmentVariableValue = styled('span')({
 export const CodeFormatterPre = styled('pre')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121',
   color: theme.palette.text.primary,
-  width: '100%',
   wordWrap: 'break-word',
   overflowWrap: 'break-word',
   wordBreak: 'break-all',
   margin: 0,
-  padding: '0.5rem'
+  padding: '0.5rem',
+  maxWidth: '-moz-available'
 }));
 
+export const TextValue = styled(Box)({
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  width: 'inherit',
+  overflow: 'hidden'
+});
+
 export const CodeFormatterCode = styled('code')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121',
   color: theme.palette.text.primary,

src/custom/ResourceDetailFormatters/types.ts

@@ -264,4 +264,5 @@ export interface GetResourceCleanDataProps {
   dispatchMsgToEditor?: (msg: any) => void;
   activeLabels?: string[];
   showStatus?: boolean;
+  container?: any;
 }

src/custom/ResourceDetailFormatters/useResourceCleanData.ts

@@ -67,13 +67,15 @@ export const useResourceCleanData = () => {
     resource,
     activeLabels,
     dispatchMsgToEditor,
-    showStatus = true
+    showStatus = true,
+    container
   }: GetResourceCleanDataProps) => {
     const parsedStatus = resource?.status?.attribute && JSON.parse(resource?.status?.attribute);
     const parsedSpec = resource?.spec?.attribute && JSON.parse(resource?.spec.attribute);
     const numberStates = structureNumberStates(parsedStatus, parsedSpec);
     const kind = resource?.kind ?? resource?.component?.kind;
     const cleanData = {
+      container: container,
       age: getAge(resource?.metadata?.creationTimestamp),
       kind: kind,
       status: showStatus && getStatus(parsedStatus),