Alerting: Edit thresholds by handle in timeseries panel (#38881)

* POC/Thresholds: Allow thresholds modification directly from the time series panel

* Snapshot updates

* Optimize styles memoization

* change threshold from graph

* renames and logging

* using useeffect to update graph

* Fix react worning about setting state on unmounted component

* revert panelrenderer

* using onFieldConfig change

* use a useeffect

* simplied fieldConfig state

* Do not use plot context in ThresholdControlsPlugin

* Do not throw setState warnings when drag handle is dropped

* Update thresholds position on the graph when updating threshold drag handle

* fix issues with rerenders

* prevent thresholds on conditions with range

* only edit the first threshold

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -10,6 +10,7 @@ import { ExemplarsPlugin } from './plugins/ExemplarsPlugin';
 import { TimeSeriesOptions } from './types';
 import { prepareGraphableFields } from './utils';
 import { AnnotationEditorPlugin } from './plugins/AnnotationEditorPlugin';
+import { ThresholdControlsPlugin } from './plugins/ThresholdControlsPlugin';
 
 interface TimeSeriesPanelProps extends PanelProps<TimeSeriesOptions> {}
 
@@ -20,10 +21,11 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
   width,
   height,
   options,
+  fieldConfig,
   onChangeTimeRange,
   replaceVariables,
 }) => {
-  const { sync, canAddAnnotations, onSplitOpen } = usePanelContext();
+  const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, onSplitOpen } = usePanelContext();
 
   const getFieldLinks = (field: Field, rowIndex: number) => {
     return getFieldLinksForExplore({ field, rowIndex, splitOpenFn: onSplitOpen, range: timeRange });
@@ -110,6 +112,14 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
                 getFieldLinks={getFieldLinks}
               />
             )}
+
+            {canEditThresholds && onThresholdsChange && (
+              <ThresholdControlsPlugin
+                config={config}
+                fieldConfig={fieldConfig}
+                onThresholdsChange={onThresholdsChange}
+              />
+            )}
           </>
         );
       }}