refactor: simplify LogEntry component and enhance log message display (#446)

* refactor: simplify LogEntry component and enhance log message display

- Removed unnecessary hover state management from LogEntry component.
- Updated log message styling to support multiline display with a maximum of three lines.
- Adjusted layout for log action buttons to improve alignment and user experience.

Signed-off-by: Akila-I <akila.99g@gmail.com>

* feat: add info color palette to openChoreoTheme

- Introduced a new color palette for info states, including light, main, and dark shades.
- This enhancement improves the theme's versatility for displaying informational messages.

Signed-off-by: Akila-I <akila.99g@gmail.com>

---------

Signed-off-by: Akila-I <akila.99g@gmail.com>

Author: akila-i

packages/design-system/src/theme/openChoreoTheme.ts

@@ -13,6 +13,11 @@ const colors = {
     main: '#6b7280', // Darker gray for better contrast
     dark: '#374151', // Darker for better readability
   },
+  info: {
+    light: '#dbeafe',
+    main: '#3b82f6',
+    dark: '#1d4ed8',
+  },
   error: {
     light: '#fef2f2',
     main: '#ef4444',

plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx

@@ -30,21 +30,12 @@ export const LogEntry: FC<LogEntryProps> = ({
 }) => {
   const classes = useLogEntryStyles();
   const [expanded, setExpanded] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
   const [copySuccess, setCopySuccess] = useState(false);
 
   const handleRowClick = () => {
     setExpanded(!expanded);
   };
 
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-
   const handleCopyLog = async (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
 
@@ -90,8 +81,6 @@ export const LogEntry: FC<LogEntryProps> = ({
       <TableRow
         className={`${classes.logRow} ${expanded ? classes.expandedRow : ''}`}
         onClick={handleRowClick}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
       >
         {selectedFields.map(field => {
           if (field === LogEntryField.Timestamp) {
@@ -126,15 +115,19 @@ export const LogEntry: FC<LogEntryProps> = ({
 
           return (
             <TableCell key={field} className={classes.logCell}>
-              <Box display="flex" alignItems="center">
-                <Typography
-                  className={`${classes.logMessage} ${
-                    expanded ? classes.expandedLogMessage : ''
-                  }`}
+              <Box className={classes.logCellContent}>
+                <Box className={classes.logTextContainer}>
+                  <Typography
+                    className={`${classes.logMessage} ${
+                      expanded ? classes.expandedLogMessage : ''
+                    }`}
+                  >
+                    {log.log}
+                  </Typography>
+                </Box>
+                <Box
+                  className={`${classes.logActionColumn} ${classes.hoverActionButton}`}
                 >
-                  {log.log}
-                </Typography>
-                {isHovered && (
                   <Tooltip title={copySuccess ? 'Copied!' : 'Copy log message'}>
                     <IconButton
                       className={classes.copyButton}
@@ -144,7 +137,7 @@ export const LogEntry: FC<LogEntryProps> = ({
                       <FileCopyOutlined fontSize="inherit" />
                     </IconButton>
                   </Tooltip>
-                )}
+                </Box>
               </Box>
             </TableCell>
           );

plugins/openchoreo-observability/src/components/RuntimeLogs/styles.ts

@@ -129,16 +129,41 @@ export const useLogEntryStyles = makeStyles(theme => ({
     wordBreak: 'break-word',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    whiteSpace: 'pre-wrap',
+    display: '-webkit-box',
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: 'vertical',
     maxWidth: '100%',
   },
   expandedLogMessage: {
     whiteSpace: 'pre-wrap',
     overflow: 'visible',
+    display: 'block',
+    WebkitLineClamp: 'unset' as any,
+    WebkitBoxOrient: 'unset' as any,
   },
   logCell: {
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
+    textOverflow: 'clip',
+    whiteSpace: 'normal',
+  },
+  logCellContent: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    width: '100%',
+  },
+  logTextContainer: {
+    flex: 1,
+    minWidth: 0,
+  },
+  logActionColumn: {
+    width: theme.spacing(3),
+    minWidth: theme.spacing(3),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    flexShrink: 0,
+    marginLeft: theme.spacing(1),
   },
   containerCell: {
     fontSize: '0.75rem',
@@ -195,8 +220,7 @@ export const useLogEntryStyles = makeStyles(theme => ({
     color: theme.palette.text.secondary,
   },
   copyButton: {
-    padding: 0,
-    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
   },
   fullLogMessage: {
     fontFamily: 'monospace',