#RI-3644-fix data undefined

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx

@@ -31,7 +31,7 @@ const SummaryPerData = ({ data, loading }: Props) => {
   })
 
   useEffect(() => {
-    if (data) {
+    if (data && totalMemory && totalKeys) {
       setMemoryData(totalMemory?.types?.map(getChartData) as ChartData[])
       setKeysData(totalKeys?.types?.map(getChartData) as ChartData[])
     }
@@ -46,7 +46,7 @@ const SummaryPerData = ({ data, loading }: Props) => {
     )
   }
 
-  if ((!totalMemory || memoryData.length === 0) && (!totalKeys || keysData.length === 0)) {
+  if ((!totalMemory || memoryData?.length === 0) && (!totalKeys || keysData?.length === 0)) {
     return null
   }
 

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/Table.tsx

@@ -95,6 +95,7 @@ const Table = (props: Props) => {
       truncateText: true,
       render: (name: string) => {
         const tooltipContent = formatLongName(name)
+        const cellContent = name.substring(0, 200)
         return (
           <div data-testid="top-keys-table-name" className={cx(styles.delimiter, 'truncateText')}>
             <EuiToolTip
@@ -107,7 +108,7 @@ const Table = (props: Props) => {
                 style={{ height: 'auto' }}
                 onClick={() => handleRedirect(name)}
               >
-                {name}
+                {cellContent}
               </EuiButtonEmpty>
             </EuiToolTip>
           </div>

redisinsight/ui/src/pages/databaseAnalysis/components/top-keys/styles.module.scss

@@ -53,16 +53,22 @@
   }
 
   :global {    
-    .euiTableRowCell:first-child,
-    .euiTableHeaderCell:first-child {
+    .euiTableRowCell:first-child {
       padding-left: 12px;
     }
 
-    .euiTableRowCell:last-child,
-    .euiTableHeaderCell:last-child {
+    .euiTableRowCell:last-child  {
       padding-right: 12px;
     }
 
+    .euiTableHeaderCell:first-child .euiTableCellContent {
+      padding-left: 24px;
+    }
+
+    .euiTableHeaderCell:last-child .euiTableCellContent {
+      padding-right: 24px;
+    }
+
     .euiTableHeaderCell {
       min-width: 42px;
       background-color: var(--euiColorEmptyShade);
@@ -103,12 +109,12 @@
       }
     }
 
-    .euiTableCellContent {
-      padding: 12px 12px 12px 12px;
+    .euiTableRowCell .euiTableCellContent {
+      padding: 10px;
       font: normal normal normal 14px/24px Graphik;
 
       &:global(.dataType) {
-        padding: 12px 6px 4px;
+        padding: 10px 6px 2px;
       }
     }
 

redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/Table.tsx

@@ -117,7 +117,9 @@ const NameSpacesTable = (props: Props) => {
       className: 'nsp-cell',
       render: (nsp: string, { types }: { types: any[] }) => {
         const filterType = types.length > 1 ? null : types[0].type
-        const tooltipContent = formatLongName(`${nsp}${delimiter}*`)
+        const textWithDelimiter = `${nsp}${delimiter}*`
+        const cellContent = textWithDelimiter?.substring(0, 200)
+        const tooltipContent = formatLongName(textWithDelimiter)
         return (
           <div className={cx(styles.delimiter, 'truncateText')}>
             <EuiToolTip
@@ -129,7 +131,7 @@ const NameSpacesTable = (props: Props) => {
                 className={styles.link}
                 onClick={() => handleRedirect(nsp, filterType)}
               >
-                {`${nsp}${delimiter}*`}
+                {cellContent}
               </EuiButtonEmpty>
             </EuiToolTip>
           </div>

redisinsight/ui/src/pages/databaseAnalysis/components/top-namespace/styles.module.scss

@@ -100,16 +100,22 @@
       height: 42px;
     }
 
-    .euiTableRowCell:first-child,
-    .euiTableHeaderCell:first-child {
+    .euiTableRowCell:first-child {
       padding-left: 12px;
     }
 
-    .euiTableRowCell:last-child,
-    .euiTableHeaderCell:last-child {
+    .euiTableRowCell:last-child  {
       padding-right: 12px;
     }
 
+    .euiTableHeaderCell:first-child .euiTableCellContent {
+      padding-left: 24px;
+    }
+
+    .euiTableHeaderCell:last-child .euiTableCellContent {
+      padding-right: 24px;
+    }
+
     .euiTableHeaderCell {
       min-width: 42px;
       background-color: var(--euiColorEmptyShade);
@@ -155,11 +161,11 @@
     }
 
     .euiTableCellContent {
-      padding: 12px;
+      padding: 10px;
       font: normal normal normal 14px/24px Graphik;
 
       &:global(.dataType) {
-        padding: 12px 6px 4px;
+        padding: 10px 6px 2px;
       }
     }