relocate metric source field (#437)

* metric source comp * screens * screens after merge master * link const --------- Co-authored-by: Eduard Zaidler <zaidler@skbkontur.ru>
moira-alert · Oct 6, 2023 · 966a9e6 · 966a9e6
1 parent a5880f6
commit 966a9e6
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 36 deletions.
diff --git a/.creevey/images/ContactList/invalid item/chrome.png b/.creevey/images/ContactList/invalid item/chrome.png
diff --git a/src/Components/TriggerEditForm/MetricSourceSelect.tsx b/src/Components/TriggerEditForm/MetricSourceSelect.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Gapped, Radio, RadioGroup } from "@skbkontur/react-ui";
+import TriggerSource from "../../Domain/Trigger";
+import { Link } from "@skbkontur/react-ui/components/Link";
+
+interface Props {
+    triggerSource?: TriggerSource;
+    onSourceChange: (value: TriggerSource) => void;
+}
+
+const remoteTriggerLink =
+    "http://moira.readthedocs.io/en/latest/user_guide/advanced.html#data-source";
+
+export const MetricSourceSelect: React.FC<Props> = ({ triggerSource, onSourceChange }) => {
+    return (
+        <RadioGroup<TriggerSource>
+            name="data-source"
+            defaultValue={triggerSource}
+            onValueChange={onSourceChange}
+        >
+            <Gapped vertical gap={10}>
+                <Radio value={TriggerSource.GRAPHITE_LOCAL}> Local (default)</Radio>
+                <Radio value={TriggerSource.GRAPHITE_REMOTE}>
+                    Graphite Remote. Be careful, it may cause&nbsp;
+                    <Link href={remoteTriggerLink}>extra load</Link>
+                </Radio>
+                <Radio value={TriggerSource.PROMETHEUS_REMOTE}> Prometheus Remote </Radio>
+            </Gapped>
+        </RadioGroup>
+    );
+};
diff --git a/src/Components/TriggerEditForm/TriggerEditForm.tsx b/src/Components/TriggerEditForm/TriggerEditForm.tsx
@@ -4,17 +4,7 @@ import { Remarkable } from "remarkable";
 import { sanitize } from "dompurify";
 import RemoveIcon from "@skbkontur/react-icons/Remove";
 import AddIcon from "@skbkontur/react-icons/Add";
-import {
-    RadioGroup,
-    Radio,
-    Checkbox,
-    Gapped,
-    Input,
-    Textarea,
-    Button,
-    Link,
-    Tabs,
-} from "@skbkontur/react-ui";
+import { Checkbox, Input, Textarea, Button, Tabs } from "@skbkontur/react-ui";
 import { RowStack, Fill, Fit } from "@skbkontur/react-stack-layout";
 import {
     DEFAULT_TRIGGER_TTL,
@@ -36,6 +26,8 @@ import CodeRef from "../CodeRef/CodeRef";
 import HighlightInput from "../HighlightInput/HighlightInput";
 import HelpTooltip from "../HelpTooltip/HelpTooltip";
 import EditDescriptionHelp from "./EditDescritionHelp";
+import { MetricSourceSelect } from "./MetricSourceSelect";
+
 import classNames from "classnames/bind";
 
 import styles from "./TriggerEditForm.less";
@@ -183,6 +175,16 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                         />
                     )}
                 </FormRow>
+                {remoteAllowed && (
+                    <FormRow label="Data source" singleLineControlGroup>
+                        <MetricSourceSelect
+                            triggerSource={triggerSource}
+                            onSourceChange={(value: TriggerSource) =>
+                                onChange({ trigger_source: value })
+                            }
+                        />
+                    </FormRow>
+                )}
                 <FormRow label="Target" useTopAlignForLabel>
                     {targets?.map((x, i) => (
                         <div key={`target-${i}`} className={cn("target")}>
@@ -311,31 +313,6 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                         />
                     </ValidationWrapperV1>
                 </FormRow>
-                {remoteAllowed && (
-                    <FormRow label="Data source" singleLineControlGroup>
-                        <RadioGroup<TriggerSource>
-                            name="data-source"
-                            defaultValue={triggerSource}
-                            onValueChange={(value: TriggerSource) =>
-                                onChange({ trigger_source: value })
-                            }
-                        >
-                            <Gapped vertical gap={10}>
-                                <Radio value={TriggerSource.GRAPHITE_LOCAL}> Local (default)</Radio>
-                                <Radio value={TriggerSource.GRAPHITE_REMOTE}>
-                                    Graphite Remote. Be careful, it may cause&nbsp;
-                                    <Link href="http://moira.readthedocs.io/en/latest/user_guide/advanced.html#data-source">
-                                        extra load
-                                    </Link>
-                                </Radio>
-                                <Radio value={TriggerSource.PROMETHEUS_REMOTE}>
-                                    {" "}
-                                    Prometheus Remote{" "}
-                                </Radio>
-                            </Gapped>
-                        </RadioGroup>
-                    </FormRow>
-                )}
             </Form>
         );
     }