[Observability] Add alert details action button !! (#213195)

## Summary

Add alert details action button !!

if you have opened up the flyout, reason action button gets hidden.

Also fixed dark theme issues for the chart !!

<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/e9ba3330-2378-418a-91b7-52b67fdc4c09"
/>

x-pack/solutions/observability/plugins/observability/public/components/alert_actions/alert_actions.tsx

@@ -23,6 +23,7 @@ import { useRouteMatch } from 'react-router-dom';
 import { SLO_ALERTS_TABLE_ID } from '@kbn/observability-shared-plugin/common';
 import { DefaultAlertActions } from '@kbn/response-ops-alerts-table/components/default_alert_actions';
 import { useAlertsTableContext } from '@kbn/response-ops-alerts-table/contexts/alerts_table_context';
+import { ALERT_UUID } from '@kbn/rule-data-utils';
 import type { EventNonEcsData } from '../../../common/typings';
 import { GetObservabilityAlertsTableProp } from '../alerts_table/types';
 import { RULE_DETAILS_PAGE_ID } from '../../pages/rule_details/constants';
@@ -283,8 +284,25 @@ export const AlertActions: GetObservabilityAlertsTableProp<'renderActionsCell'>
           defaultMessage: 'More actions',
         });
 
+  const onExpandEvent = () => {
+    const parsedAlert = parseAlert(observabilityRuleTypeRegistry)(alert);
+
+    openAlertInFlyout?.(parsedAlert.fields[ALERT_UUID]);
+  };
+
   return (
     <>
+      <EuiFlexItem>
+        <EuiToolTip data-test-subj="expand-event-tool-tip" content={VIEW_DETAILS}>
+          <EuiButtonIcon
+            data-test-subj="expand-event"
+            iconType="expand"
+            onClick={onExpandEvent}
+            size="s"
+            color="text"
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
       {viewInAppUrl !== '' && !isInApp ? (
         <EuiFlexItem>
           <EuiToolTip
@@ -346,4 +364,8 @@ export const AlertActions: GetObservabilityAlertsTableProp<'renderActionsCell'>
 // eslint-disable-next-line import/no-default-export
 export default AlertActions;
 
+const VIEW_DETAILS = i18n.translate('xpack.observability.alertsTable.viewDetailsTextLabel', {
+  defaultMessage: 'Alert details',
+});
+
 export type AlertActions = typeof AlertActions;

x-pack/solutions/observability/plugins/observability/public/components/alerts_table/alerts_table.tsx

@@ -67,6 +67,7 @@ export function ObservabilityAlertsTable(props: Omit<ObservabilityAlertsTablePro
       }}
       renderCellValue={AlertsTableCellValue}
       renderActionsCell={AlertActions}
+      actionsColumnWidth={120}
       renderFlyoutHeader={AlertsFlyoutHeader}
       renderFlyoutBody={AlertsFlyoutBody}
       renderFlyoutFooter={AlertsFlyoutFooter}

x-pack/solutions/observability/plugins/observability/public/pages/alerts/alerts.tsx

@@ -146,10 +146,7 @@ function InternalAlertsPage() {
       alertSearchBarStateProps.onRangeToChange(new Date(end).toISOString());
     }
   };
-  const chartProps = {
-    baseTheme: charts.theme.useChartsBaseTheme(),
-    onBrushEnd,
-  };
+
   const [ruleStatsLoading, setRuleStatsLoading] = useState<boolean>(false);
   const [ruleStats, setRuleStats] = useState<RuleStatsState>({
     total: 0,
@@ -281,7 +278,10 @@ function InternalAlertsPage() {
               filter={esQuery}
               fullSize
               timeRange={alertSummaryTimeRange}
-              chartProps={chartProps}
+              chartProps={{
+                themeOverrides: charts.theme.useChartsBaseTheme(),
+                onBrushEnd,
+              }}
             />
           </EuiFlexItem>
           <EuiFlexItem>