fix(metric_alerts): Graph y-axis to behave like discover (#24990)

* fix(metric_alerts): Graph y-axis to behave like discover

Metric Alerts builder graph y-axis should behave like discover and show the units if a time based graph, etc.

FIXES WOR-89

* refactor and add check for data

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/chart/index.tsx

@@ -311,6 +311,10 @@ class TriggersChart extends React.PureComponent<Props, State> {
                           ])}
                           onChange={this.handleStatsPeriodChange}
                         />
+                        <React.Fragment>
+                          <SectionHeading>{t('Y-Axis')}</SectionHeading>
+                          <SectionValue>{aggregate}</SectionValue>
+                        </React.Fragment>
                       </InlineContainer>
                     </ChartControls>
                   </React.Fragment>
@@ -346,4 +350,5 @@ const PeriodSelectControl = styled(SelectControl)`
   font-weight: normal;
   text-transform: none;
   border: 0;
+  margin-right: ${space(2)};
 `;

src/sentry/static/sentry/app/views/settings/incidentRules/triggers/chart/thresholdsChart.tsx

@@ -8,6 +8,7 @@ import LineChart, {LineChartSeries} from 'app/components/charts/lineChart';
 import space from 'app/styles/space';
 import {GlobalSelection} from 'app/types';
 import {ReactEchartsRef, Series} from 'app/types/echarts';
+import {axisLabelFormatter, tooltipFormatter} from 'app/utils/discover/charts';
 import theme from 'app/utils/theme';
 
 import {AlertRuleThresholdType, IncidentRule, Trigger} from '../../types';
@@ -173,6 +174,8 @@ export default class ThresholdsChart extends React.PureComponent<Props, State> {
       this.state.width - parseInt(CHART_GRID.right.slice(0, -2), 10) - yAxisSize;
     // Distance from the top of the chart to save for the legend
     const legendPadding = 20;
+    // Shave off the left margin
+    const graphAreaMargin = 7;
 
     const isCritical = trigger.label === 'critical';
     const LINE_STYLE = {
@@ -189,7 +192,7 @@ export default class ThresholdsChart extends React.PureComponent<Props, State> {
         invisible: position === null,
         draggable: false,
         position: [yAxisSize, position],
-        shape: {y1: 1, y2: 1, x1: 0, x2: graphAreaWidth},
+        shape: {y1: 1, y2: 1, x1: graphAreaMargin, x2: graphAreaWidth},
         style: LINE_STYLE,
       },
 
@@ -205,10 +208,10 @@ export default class ThresholdsChart extends React.PureComponent<Props, State> {
 
               position:
                 isResolution !== isInverted
-                  ? [yAxisSize, position + 1]
-                  : [yAxisSize, legendPadding],
+                  ? [yAxisSize + graphAreaMargin, position + 1]
+                  : [yAxisSize + graphAreaMargin, legendPadding],
               shape: {
-                width: graphAreaWidth,
+                width: graphAreaWidth - graphAreaMargin,
                 height:
                   isResolution !== isInverted
                     ? yAxisPosition - position
@@ -263,6 +266,20 @@ export default class ThresholdsChart extends React.PureComponent<Props, State> {
       selected,
     };
 
+    const chartOptions = {
+      tooltip: {
+        valueFormatter: (value, seriesName) => {
+          return tooltipFormatter(value, seriesName);
+        },
+      },
+      yAxis: {
+        max: this.state.yAxisMax ?? undefined,
+        axisLabel: {
+          formatter: (value: number) =>
+            axisLabelFormatter(value, data.length ? data[0].seriesName : ''),
+        },
+      },
+    };
     return (
       <LineChart
         isGroupedByDate
@@ -270,9 +287,7 @@ export default class ThresholdsChart extends React.PureComponent<Props, State> {
         period={period}
         forwardedRef={this.handleRef}
         grid={CHART_GRID}
-        yAxis={{
-          max: this.state.yAxisMax ?? undefined,
-        }}
+        {...chartOptions}
         legend={legend}
         graphic={Graphic({
           elements: flatten(