fix: layout issues

2025-12-12 11:26:16 +01:00
parent a832e5f222
commit 9ec87fda9b
6 changed files with 44 additions and 71 deletions
@@ -38,6 +38,7 @@ export interface DashboardControlsState extends SceneObjectState {
  refreshPicker: SceneRefreshPicker;
  hideTimeControls?: boolean;
  hideVariableControls?: boolean;
+  hideAnnotationControls?: boolean;
  hideLinksControls?: boolean;
  // Hides the dashboard-controls dropdown menu
  hideDashboardControls?: boolean;
@@ -63,7 +64,8 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
  }

  updateFromUrl(values: SceneObjectUrlValues) {
-    const { hideTimeControls, hideVariableControls, hideLinksControls, hideDashboardControls } = this.state;
+    const { hideTimeControls, hideVariableControls, hideLinksControls, hideDashboardControls, hideAnnotationControls } =
+      this.state;
    const isEnabledViaUrl = (key: string) => values[key] === 'true' || values[key] === '';

    // Only allow hiding, never "unhiding" from url
@@ -77,6 +79,10 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
      this.setState({ hideVariableControls: true });
    }

+    if (!hideAnnotationControls && isEnabledViaUrl('_dash.hideAnnotations')) {
+      this.setState({ hideAnnotationControls: true });
+    }
+
    if (!hideLinksControls && isEnabledViaUrl('_dash.hideLinks')) {
      this.setState({ hideLinksControls: true });
    }
@@ -126,11 +132,12 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
    const hasAnnotations = sceneGraph.getDataLayers(this).some((d) => d.state.isEnabled && !d.state.isHidden);
    const hasLinks = getDashboardSceneFor(this).state.links?.length > 0;
    const hideLinks = this.state.hideLinksControls || !hasLinks;
-    const hideVariables = this.state.hideVariableControls || (!hasAnnotations && !hasVariables);
+    const hideVariables = this.state.hideVariableControls || !hasVariables;
+    const hideAnnotationControls = this.state.hideAnnotationControls || !hasAnnotations;
    const hideTimePicker = this.state.hideTimeControls;
    const hideDashboardControls = this.state.hideDashboardControls || !hasDashboardControls(dashboard);

-    return !(hideVariables && hideLinks && hideTimePicker && hideDashboardControls);
+    return !(hideVariables && hideLinks && hideTimePicker && hideDashboardControls && hideAnnotationControls);
  }
 }

@@ -140,6 +147,7 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
    timePicker,
    hideTimeControls,
    hideVariableControls,
+    hideAnnotationControls,
    hideLinksControls,
    hideDashboardControls,
  } = model.useState();
@@ -159,27 +167,32 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
      data-testid={selectors.pages.Dashboard.Controls}
      className={cx(styles.controls, editPanel && styles.controlsPanelEdit)}
    >
+      {/* Right controls */}
      <div className={cx(styles.rightControls, editPanel && styles.rightControlsWrap)}>
+        {/* Time controls */}
        {!hideTimeControls && (
          <div className={styles.fixedControls}>
            <timePicker.Component model={timePicker} />
            <refreshPicker.Component model={refreshPicker} />
          </div>
        )}
+
+        {/* Actions (edit, play, share, etc.) */}
        {config.featureToggles.dashboardNewLayouts && (
          <div className={styles.fixedControls}>
            <DashboardControlActions dashboard={dashboard} />
          </div>
        )}
-        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
      </div>
-      {!hideVariableControls && (
-        <>
-          <VariableControls dashboard={dashboard} />
-          <DashboardDataLayerControls dashboard={dashboard} />
-        </>
-      )}
-      {!hideDashboardControls && hasDashboardControls && <DashboardControlsButton dashboard={dashboard} />}
+
+      {/* Left controls */}
+      <div className={styles.leftControls}>
+        {/* Variables */}
+        {!hideVariableControls && <VariableControls dashboard={dashboard} />}
+        {!hideAnnotationControls && <DashboardDataLayerControls dashboard={dashboard} />}
+        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
+        {!hideDashboardControls && hasDashboardControls(dashboard) && <DashboardControlsButton dashboard={dashboard} />}
+      </div>
      {editPanel && <PanelEditControls panelEditor={editPanel} />}
      {showDebugger && <SceneDebugger scene={model} key={'scene-debugger'} />}
    </div>
@@ -260,6 +273,15 @@ function getStyles(theme: GrafanaTheme2) {
      background: 'unset',
      position: 'unset',
    }),
+    leftControls: css({
+      display: 'flex',
+      gap: theme.spacing(1),
+      float: 'left',
+      alignItems: 'flex-start',
+      flexWrap: 'wrap',
+      maxWidth: '100%',
+      minWidth: 0,
+    }),
    rightControls: css({
      display: 'flex',
      gap: theme.spacing(1),
@@ -1,8 +1,5 @@
-import { css } from '@emotion/css';
-
-import { GrafanaTheme2 } from '@grafana/data';
 import { SceneDataLayerProvider, sceneGraph } from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/ui';

 import { isDashboardDataLayerSetState } from './DashboardDataLayerSet';
 import { DashboardScene } from './DashboardScene';
@@ -16,29 +13,16 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
  // It is possible to render the controls for the annotation data layers in separate places using the `placement` property.
  // In case it's not specified, we are rendering the controls here (default).
  const isDefaultPlacement = (layer: SceneDataLayerProvider) => layer.state.placement === undefined;
-  const styles = useStyles2(getStyles);

  if (isDashboardDataLayerSetState(state)) {
    return (
-      <>
+      <Stack gap={1}>
        {state.annotationLayers.filter(isDefaultPlacement).map((layer) => (
-          <div key={layer.state.key} className={styles.container}>
-            <DataLayerControl layer={layer} />
-          </div>
+          <DataLayerControl key={layer.state.key} layer={layer} />
        ))}
-      </>
+      </Stack>
    );
  }

  return null;
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css({
-    display: 'inline-flex',
-    alignItems: 'center',
-    verticalAlign: 'middle',
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  }),
-});
@@ -64,7 +64,6 @@ function getStyles(theme: GrafanaTheme2) {
      alignItems: 'center',
      verticalAlign: 'middle',
      marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
    }),
  };
 }
@@ -1,9 +1,6 @@
-import { css } from '@emotion/css';
-
-import { GrafanaTheme2 } from '@grafana/data';
 import { sceneGraph } from '@grafana/scenes';
 import { DashboardLink } from '@grafana/schema';
-import { useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/ui';

 import { DashboardLinkRenderer } from './DashboardLinkRenderer';
 import { DashboardScene } from './DashboardScene';
@@ -16,33 +13,18 @@ export interface Props {
 export function DashboardLinksControls({ links, dashboard }: Props) {
  sceneGraph.getTimeRange(dashboard).useState();
  const uid = dashboard.state.uid;
-  const styles = useStyles2(getStyles);

  if (!links || !uid) {
    return null;
  }

  return (
-    <div className={styles.linksContainer}>
+    <Stack gap={1}>
      {links
        .filter((link) => link.placement === undefined)
        .map((link: DashboardLink, index: number) => (
          <DashboardLinkRenderer link={link} dashboardUID={uid} key={`${link.title}-$${index}`} />
        ))}
-    </div>
+    </Stack>
  );
 }
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    linksContainer: css({
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: theme.spacing(1),
-      maxWidth: '100%',
-      minWidth: 0,
-      order: 1,
-      flex: '1 1 0%',
-    }),
-  };
-}
@@ -12,28 +12,23 @@ import {
  ControlsLayout,
  sceneUtils,
 } from '@grafana/scenes';
-import { useElementSelection, useStyles2 } from '@grafana/ui';
+import { Stack, useElementSelection, useStyles2 } from '@grafana/ui';

 import { DashboardScene } from './DashboardScene';
 import { AddVariableButton } from './VariableControlsAddButton';

 export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
  const { variables } = sceneGraph.getVariables(dashboard)!.useState();
-  const styles = useStyles2(getStyles);

  return (
-    <>
+    <Stack gap={1}>
      {variables
        .filter((v) => v.state.hide !== VariableHide.inControlsMenu)
        .map((variable) => (
          <VariableValueSelectWrapper key={variable.state.key} variable={variable} />
        ))}
-      {config.featureToggles.dashboardNewLayouts ? (
-        <div className={styles.addButton}>
-          <AddVariableButton dashboard={dashboard} />
-        </div>
-      ) : null}
-    </>
+      {config.featureToggles.dashboardNewLayouts ? <AddVariableButton dashboard={dashboard} /> : null}
+    </Stack>
  );
 }

@@ -179,7 +174,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
      borderBottomLeftRadius: 'unset',
    }),
    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
  }),
  verticalContainer: css({
    display: 'flex',
@@ -211,11 +205,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
    display: 'flex',
    alignItems: 'center',
  }),
-  addButton: css({
-    display: 'inline-flex',
-    alignItems: 'center',
-    verticalAlign: 'middle',
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  }),
 });
@@ -182,7 +182,6 @@ function getStyles(theme: GrafanaTheme2) {
      alignItems: 'center',
      verticalAlign: 'middle',
      marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
    }),
  };
 }