Alerting: Update width to instance details drawer in Triage page (#113209)

* add depreacted width to instance details drawer

* prettier

* use percentage instead

* use width aligned with the left column in the parent

* clamp value for wide screen monitors

* refactor: use hook instead of function for calculations

* refactor: use context provider for right column for the calculation of the width

* remove unnecessary changes exporting styles values

public/app/features/alerting/unified/triage/Workbench.tsx

@@ -133,8 +133,10 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
   });
 
   // this will measure the size of the left most column of the splitter, so we can use it to set the width of the group items
-  const [ref, rect] = useMeasure<HTMLDivElement>();
-  const leftColumnWidth = rect.width;
+  const [leftColumnRef, leftColumnRect] = useMeasure<HTMLDivElement>();
+  const leftColumnWidth = leftColumnRect.width;
+  const [rightColumnRef, rightColumnRect] = useMeasure<HTMLDivElement>();
+  const rightColumnWidth = rightColumnRect.width;
 
   const itemsToRender = pageIndex * DEFAULT_PER_PAGE_PAGINATION;
   const dataSlice = take(data, itemsToRender);
@@ -145,11 +147,11 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
       {/* dummy splitter to handle flex width of group items */}
       <div {...splitter.containerProps}>
         <div {...splitter.primaryProps}>
-          <div ref={ref} className={cx(styles.flexFull, styles.minColumnWidth)} />
+          <div ref={leftColumnRef} className={cx(styles.flexFull, styles.minColumnWidth)} />
         </div>
         <div {...splitter.splitterProps} />
         <div {...splitter.secondaryProps}>
-          <div className={cx(styles.flexFull, styles.minColumnWidth)} />
+          <div ref={rightColumnRef} className={cx(styles.flexFull, styles.minColumnWidth)} />
         </div>
       </div>
       {/* content goes here */}
@@ -160,7 +162,12 @@ export function Workbench({ domain, data, queryRunner, groupBy }: WorkbenchProps
         </div>
         {/* Render actual data */}
         <div className={styles.virtualizedContainer}>
-          <WorkbenchProvider leftColumnWidth={leftColumnWidth} domain={domain} queryRunner={queryRunner}>
+          <WorkbenchProvider
+            leftColumnWidth={leftColumnWidth}
+            rightColumnWidth={rightColumnWidth}
+            domain={domain}
+            queryRunner={queryRunner}
+          >
             <ScrollContainer height="100%" width="100%" scrollbarWidth="none" showScrollIndicators>
               {isLoading ? (
                 <>

public/app/features/alerting/unified/triage/WorkbenchContext.tsx

@@ -6,6 +6,7 @@ import { Domain } from './types';
 
 interface WorkbenchContextValue {
   leftColumnWidth: number;
+  rightColumnWidth: number;
   domain: Domain;
   queryRunner: SceneQueryRunner;
 }
@@ -22,13 +23,22 @@ export function useWorkbenchContext(): WorkbenchContextValue {
 
 interface WorkbenchProviderProps {
   leftColumnWidth: number;
+  rightColumnWidth: number;
   domain: Domain;
   queryRunner: SceneQueryRunner;
   children: React.ReactNode;
 }
 
-export function WorkbenchProvider({ leftColumnWidth, domain, queryRunner, children }: WorkbenchProviderProps) {
+export function WorkbenchProvider({
+  leftColumnWidth,
+  rightColumnWidth,
+  domain,
+  queryRunner,
+  children,
+}: WorkbenchProviderProps) {
   return (
-    <WorkbenchContext.Provider value={{ leftColumnWidth, domain, queryRunner }}>{children}</WorkbenchContext.Provider>
+    <WorkbenchContext.Provider value={{ leftColumnWidth, rightColumnWidth, domain, queryRunner }}>
+      {children}
+    </WorkbenchContext.Provider>
   );
 }

public/app/features/alerting/unified/triage/instance-details/InstanceDetailsDrawer.tsx

@@ -17,6 +17,7 @@ import { EventState } from '../../components/rules/central-state-history/EventLi
 import { LogRecord, historyDataFrameToLogRecords } from '../../components/rules/state-history/common';
 import { isAlertQueryOfAlertData } from '../../rule-editor/formProcessing';
 import { stringifyErrorLike } from '../../utils/misc';
+import { useWorkbenchContext } from '../WorkbenchContext';
 
 import { InstanceDetailsDrawerTitle } from './InstanceDetailsDrawerTitle';
 import { QueryVisualization } from './QueryVisualization';
@@ -25,6 +26,13 @@ import { convertStateHistoryToAnnotations } from './stateHistoryUtils';
 const { useGetAlertRuleQuery } = alertRuleApi;
 const { useGetRuleHistoryQuery } = stateHistoryApi;
 
+function calculateDrawerWidth(rightColumnWidth: number): number {
+  //first add the padding from the Page (32px)
+  const calculatedWidth = rightColumnWidth + 32;
+  // now clamp the width to a max of 1400px
+  return Math.min(calculatedWidth, 1400);
+}
+
 interface InstanceDetailsDrawerProps {
   ruleUID: string;
   instanceLabels: Labels;
@@ -34,6 +42,9 @@ interface InstanceDetailsDrawerProps {
 export function InstanceDetailsDrawer({ ruleUID, instanceLabels, onClose }: InstanceDetailsDrawerProps) {
   const [ref, { width: loadingBarWidth }] = useMeasure<HTMLDivElement>();
   const [timeRange] = useTimeRange();
+  const { rightColumnWidth } = useWorkbenchContext();
+
+  const drawerWidth = calculateDrawerWidth(rightColumnWidth);
 
   const { data: rule, isLoading: loading, error } = useGetAlertRuleQuery({ uid: ruleUID });
 
@@ -66,7 +77,11 @@ export function InstanceDetailsDrawer({ ruleUID, instanceLabels, onClose }: Inst
 
   if (error) {
     return (
-      <Drawer title={<InstanceDetailsDrawerTitle instanceLabels={instanceLabels} />} onClose={onClose} size="md">
+      <Drawer
+        title={<InstanceDetailsDrawerTitle instanceLabels={instanceLabels} />}
+        onClose={onClose}
+        width={drawerWidth}
+      >
         <ErrorContent error={error} />
       </Drawer>
     );
@@ -74,7 +89,11 @@ export function InstanceDetailsDrawer({ ruleUID, instanceLabels, onClose }: Inst
 
   if (loading || !rule) {
     return (
-      <Drawer title={<InstanceDetailsDrawerTitle instanceLabels={instanceLabels} />} onClose={onClose} size="md">
+      <Drawer
+        title={<InstanceDetailsDrawerTitle instanceLabels={instanceLabels} />}
+        onClose={onClose}
+        width={drawerWidth}
+      >
         <LoadingPlaceholder text={t('alerting.common.loading', 'Loading...')} />
       </Drawer>
     );
@@ -84,7 +103,7 @@ export function InstanceDetailsDrawer({ ruleUID, instanceLabels, onClose }: Inst
     <Drawer
       title={<InstanceDetailsDrawerTitle instanceLabels={instanceLabels} rule={rule.grafana_alert} />}
       onClose={onClose}
-      size="md"
+      width={drawerWidth}
     >
       <Stack direction="column" gap={3}>
         <Stack justifyContent="flex-end">

public/app/features/alerting/unified/triage/rows/GenericRow.tsx

@@ -117,7 +117,7 @@ export const getStyles = (theme: GrafanaTheme2) => {
       css({
         padding: 5,
         width: '100%',
-        paddingLeft: depth ? `calc(${theme.spacing(depth)} + 5px)` : 5,
+        addingLeft: depth ? `calc(${theme.spacing(depth)} + 5px)` : 5,
       }),
     groupItemWrapper: (width: number) =>
       css({