Explore: Unified Logs Volume and Logs panels (#73825)

Wrap Logs Volume and Logs panels with PanelChrome instead of Collapse

public/app/features/explore/Logs/Logs.tsx

@@ -41,7 +41,7 @@ import {
   InlineSwitch,
   withTheme2,
   Themeable2,
-  Collapse,
+  PanelChrome,
 } from '@grafana/ui';
 import store from 'app/core/store';
 import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
@@ -121,16 +121,6 @@ interface State {
 }
 
 const scrollableLogsContainer = config.featureToggles.exploreScrollableLogsContainer;
-// We need to override css overflow of divs in Collapse element to enable sticky Logs navigation
-const styleOverridesForStickyNavigation = css`
-  ${scrollableLogsContainer && 'margin-bottom: 0px'};
-  & > div {
-    overflow: visible;
-    & > div {
-      overflow: visible;
-    }
-  }
-`;
 
 // we need to define the order of these explicitly
 const DEDUP_OPTIONS = [
@@ -292,11 +282,11 @@ class UnthemedLogs extends PureComponent<Props, State> {
     this.setState({ hiddenLogLevels });
   };
 
-  onToggleLogsVolumeCollapse = (isOpen: boolean) => {
-    this.props.onSetLogsVolumeEnabled(isOpen);
+  onToggleLogsVolumeCollapse = (collapsed: boolean) => {
+    this.props.onSetLogsVolumeEnabled(!collapsed);
     reportInteraction('grafana_explore_logs_histogram_toggle_clicked', {
       datasourceType: this.props.datasourceType,
-      type: isOpen ? 'open' : 'close',
+      type: !collapsed ? 'open' : 'close',
     });
   };
 
@@ -540,7 +530,12 @@ class UnthemedLogs extends PureComponent<Props, State> {
             timeZone={timeZone}
           />
         )}
-        <Collapse label="Logs volume" collapsible isOpen={logsVolumeEnabled} onToggle={this.onToggleLogsVolumeCollapse}>
+        <PanelChrome
+          title="Logs volume"
+          collapsible
+          collapsed={!logsVolumeEnabled}
+          onToggleCollapse={this.onToggleLogsVolumeCollapse}
+        >
           {logsVolumeEnabled && (
             <LogsVolumePanelList
               absoluteRange={absoluteRange}
@@ -552,16 +547,22 @@ class UnthemedLogs extends PureComponent<Props, State> {
               onLoadLogsVolume={loadLogsVolumeData}
               onHiddenSeriesChanged={this.onToggleLogLevel}
               eventBus={this.logsVolumeEventBus}
-              onClose={() => this.onToggleLogsVolumeCollapse(false)}
+              onClose={() => this.onToggleLogsVolumeCollapse(true)}
             />
           )}
-        </Collapse>
-        <Collapse
-          label={
+        </PanelChrome>
+        <PanelChrome
+          title={
+            config.featureToggles.logsExploreTableVisualisation
+              ? this.state.visualisationType === 'logs'
+                ? 'Logs'
+                : 'Table'
+              : 'Logs'
+          }
+          actions={
             <>
               {config.featureToggles.logsExploreTableVisualisation && (
                 <div className={styles.visualisationType}>
-                  {this.state.visualisationType === 'logs' ? 'Logs' : 'Table'}
                   <RadioButtonGroup
                     className={styles.visualisationTypeRadio}
                     options={[
@@ -582,13 +583,11 @@ class UnthemedLogs extends PureComponent<Props, State> {
                   />
                 </div>
               )}
-              {!config.featureToggles.logsExploreTableVisualisation && 'Logs'}
             </>
           }
-          loading={loading}
-          isOpen
-          className={styleOverridesForStickyNavigation}
+          loadingState={loading ? LoadingState.Loading : LoadingState.Done}
         >
+          <div className={styles.stickyNavigation}>
             {this.state.visualisationType !== 'table' && (
               <div className={styles.logOptions}>
                 <InlineFieldRow>
@@ -678,6 +677,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
               onEscapeNewlines={this.onEscapeNewlines}
               clearDetectedFields={this.clearDetectedFields}
             />
+          </div>
           <div className={styles.logsSection}>
             {this.state.visualisationType === 'table' && hasData && (
               <div className={styles.logRows} data-testid="logRowsTable">
@@ -757,7 +757,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
               clearCache={clearCache}
             />
           </div>
-        </Collapse>
+        </PanelChrome>
       </>
     );
   }
@@ -816,5 +816,9 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
     visualisationTypeRadio: css`
       margin: 0 0 0 ${theme.spacing(1)};
     `,
+    stickyNavigation: css`
+      ${scrollableLogsContainer && 'margin-bottom: 0px'}
+      overflow: visible;
+    `,
   };
 };