Log line details: Update styles (#110472)

* LogLineDetails: show border right when controls are disabled

* LogLineDetails: update styles

* Update types in test

* Update background, border, and shadow

* Close details: fix tooltip

public/app/features/logs/components/panel/LogLineDetails.test.tsx

@@ -67,6 +67,7 @@ const setup = (
     onResize: jest.fn(),
     timeRange: getDefaultTimeRange(),
     timeZone: 'browser',
+    showControls: true,
     ...(propOverrides || {}),
   };
 
@@ -581,6 +582,7 @@ describe('LogLineDetails', () => {
         logs: [logs[0]],
         timeRange: getDefaultTimeRange(),
         timeZone: 'browser',
+        showControls: true,
         onResize: jest.fn(),
       };
 

public/app/features/logs/components/panel/LogLineDetails.tsx

@@ -20,50 +20,53 @@ export interface Props {
   timeRange: TimeRange;
   timeZone: string;
   onResize(): void;
+  showControls: boolean;
 }
 
 export type LogLineDetailsMode = 'inline' | 'sidebar';
 
-export const LogLineDetails = memo(({ containerElement, focusLogLine, logs, timeRange, timeZone, onResize }: Props) => {
+export const LogLineDetails = memo(
-  const { detailsWidth, noInteractions, setDetailsWidth } = useLogListContext();
+  ({ containerElement, focusLogLine, logs, timeRange, timeZone, onResize, showControls }: Props) => {
-  const styles = useStyles2(getStyles, 'sidebar');
+    const { detailsWidth, noInteractions, setDetailsWidth } = useLogListContext();
-  const dragStyles = useStyles2(getDragStyles);
+    const styles = useStyles2(getStyles, 'sidebar', showControls);
-  const containerRef = useRef<HTMLDivElement | null>(null);
+    const dragStyles = useStyles2(getDragStyles);
+    const containerRef = useRef<HTMLDivElement | null>(null);
 
-  const handleResize = useCallback(() => {
+    const handleResize = useCallback(() => {
-    if (containerRef.current) {
+      if (containerRef.current) {
-      setDetailsWidth(containerRef.current.clientWidth);
+        setDetailsWidth(containerRef.current.clientWidth);
-    }
+      }
-    onResize();
+      onResize();
-  }, [onResize, setDetailsWidth]);
+    }, [onResize, setDetailsWidth]);
 
-  const reportResize = useCallback(() => {
+    const reportResize = useCallback(() => {
-    if (containerRef.current && !noInteractions) {
+      if (containerRef.current && !noInteractions) {
-      reportInteraction('logs_log_line_details_sidebar_resized', {
+        reportInteraction('logs_log_line_details_sidebar_resized', {
-        width: Math.round(containerRef.current.clientWidth),
+          width: Math.round(containerRef.current.clientWidth),
-      });
+        });
-    }
+      }
-  }, [noInteractions]);
+    }, [noInteractions]);
 
-  const maxWidth = containerElement.clientWidth - LOG_LIST_MIN_WIDTH;
+    const maxWidth = containerElement.clientWidth - LOG_LIST_MIN_WIDTH;
 
-  return (
+    return (
-    <Resizable
+      <Resizable
-      onResize={handleResize}
+        onResize={handleResize}
-      onResizeStop={reportResize}
+        onResizeStop={reportResize}
-      handleClasses={{ left: dragStyles.dragHandleVertical }}
+        handleClasses={{ left: dragStyles.dragHandleVertical }}
-      defaultSize={{ width: detailsWidth, height: containerElement.clientHeight }}
+        defaultSize={{ width: detailsWidth, height: containerElement.clientHeight }}
-      size={{ width: detailsWidth, height: containerElement.clientHeight }}
+        size={{ width: detailsWidth, height: containerElement.clientHeight }}
-      enable={{ left: true }}
+        enable={{ left: true }}
-      minWidth={40}
+        minWidth={40}
-      maxWidth={maxWidth}
+        maxWidth={maxWidth}
-    >
+      >
-      <div className={styles.container} ref={containerRef}>
+        <div className={styles.container} ref={containerRef}>
-        <LogLineDetailsTabs focusLogLine={focusLogLine} logs={logs} timeRange={timeRange} timeZone={timeZone} />
+          <LogLineDetailsTabs focusLogLine={focusLogLine} logs={logs} timeRange={timeRange} timeZone={timeZone} />
-      </div>
+        </div>
-    </Resizable>
+      </Resizable>
-  );
+    );
-});
+  }
+);
 LogLineDetails.displayName = 'LogLineDetails';
 
 const LogLineDetailsTabs = memo(
@@ -181,7 +184,7 @@ export const InlineLogLineDetails = memo(({ logs, log, onResize, timeRange, time
 
   return (
     <div className={`${styles.inlineWrapper} log-line-inline-details`} style={{ maxWidth: detailsWidth }}>
-      <div className={styles.container}>
+      <div className={styles.inlineContainer}>
         <div className={styles.scrollContainer} ref={scrollRef} onScroll={saveScroll}>
           <LogLineDetailsComponent log={log} logs={logs} timeRange={timeRange} timeZone={timeZone} />
         </div>
@@ -193,19 +196,29 @@ InlineLogLineDetails.displayName = 'InlineLogLineDetails';
 
 export const LOG_LINE_DETAILS_HEIGHT = 35;
 
-const getStyles = (theme: GrafanaTheme2, mode: LogLineDetailsMode) => ({
+const getStyles = (theme: GrafanaTheme2, mode: LogLineDetailsMode, showControls?: boolean) => ({
   inlineWrapper: css({
     gridColumn: '1 / -1',
     height: `${LOG_LINE_DETAILS_HEIGHT}vh`,
     padding: theme.spacing(1, 2, 1.5, 2),
     marginRight: 1,
   }),
-  container: css({
+  inlineContainer: css({
-    overflow: 'auto',
+    backgroundColor: theme.colors.background.secondary,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.default,
     height: '100%',
-    boxShadow: theme.shadows.z1,
+    overflow: 'auto',
-    border: `1px solid ${theme.colors.border.medium}`,
+  }),
-    borderRight: mode === 'sidebar' ? 'none' : undefined,
+  container: css({
+    backgroundColor: theme.colors.background.elevated,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderBottomRightRadius: showControls ? undefined : theme.shape.radius.default,
+    borderRight: mode === 'sidebar' && showControls ? 'none' : undefined,
+    borderTopRightRadius: showControls ? undefined : theme.shape.radius.default,
+    boxShadow: theme.shadows.z3,
+    height: '100%',
+    overflow: 'auto',
   }),
   scrollContainer: css({
     overflow: 'auto',

public/app/features/logs/components/panel/LogLineDetailsHeader.tsx

@@ -247,7 +247,7 @@ export const LogLineDetailsHeader = ({ focusLogLine, log, search, onSearch }: Pr
         />
         <IconButton
           name="times"
-          aria-label={t('logs.log-line-details.close', 'Close log details')}
+          tooltip={t('logs.log-line-details.close', 'Close log details')}
           onClick={closeDetails}
         />
       </div>

public/app/features/logs/components/panel/LogList.tsx

@@ -423,6 +423,7 @@ const LogListComponent = ({
           timeRange={timeRange}
           timeZone={timeZone}
           onResize={handleLogDetailsResize}
+          showControls={showControls}
         />
       )}
       <div className={styles.logListWrapper} ref={wrapperRef}>