PMM-12377 Custom Labels

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/CustomLabels/CustomLabels.styles.ts

@@ -0,0 +1,35 @@
+import { css } from '@emotion/css';
+
+export const styles = {
+  QueryBuilder: css`
+    min-width: 500px;
+
+    & > div {
+      background-color: transparent;
+      padding: 0;
+      padding-bottom: 10px;
+    }
+
+    & > div:first-child label {
+      display: none;
+    }
+
+    div[data-testid='prometheus-dimensions-filter-item'] > div > div:nth-child(2) {
+      background-color: transparent;
+      pointer-events: none;
+      border: none;
+      cursor: initial;
+      padding: 0 10px;
+
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      /* caret */
+      & > div > div:nth-child(2) {
+        display: none;
+      }
+    }
+  `,
+};

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/CustomLabels/CustomLabels.tsx

@@ -0,0 +1,52 @@
+import React, { FC, useMemo, useState } from 'react';
+import { useField } from 'react-final-form';
+
+import { getDataSourceSrv } from '@grafana/runtime';
+import { PrometheusDatasource } from 'app/plugins/datasource/prometheus/datasource';
+import { promQueryModeller } from 'app/plugins/datasource/prometheus/querybuilder/PromQueryModeller';
+import { PromQueryBuilder } from 'app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder';
+import { buildVisualQueryFromString } from 'app/plugins/datasource/prometheus/querybuilder/parsing';
+import { PromVisualQuery } from 'app/plugins/datasource/prometheus/querybuilder/types';
+import { PromQuery } from 'app/plugins/datasource/prometheus/types';
+
+import { styles } from './CustomLabels.styles';
+
+const CustomLabels: FC = () => {
+  const { input } = useField('custom_labels');
+  const source = getDataSourceSrv().getInstanceSettings();
+  const datasource = source ? new PrometheusDatasource(source) : undefined;
+  const [query, setQuery] = useState<PromQuery>({
+    refId: '',
+    expr: input.value,
+  });
+  const visualQuery = useMemo(() => buildVisualQueryFromString(query.expr).query, [query.expr]);
+
+  if (!datasource) {
+    return null;
+  }
+
+  const handleQueryChange = (visualQuery: PromVisualQuery) => {
+    const expr = promQueryModeller.renderQuery(visualQuery);
+    const labels = visualQuery.labels;
+
+    input.onChange(labels.map(({ label, value }) => label + ':' + value).join('\n'));
+
+    setQuery((prev) => ({ ...prev, expr: expr || '' }));
+  };
+
+  return (
+    <div className={styles.QueryBuilder}>
+      <PromQueryBuilder
+        datasource={datasource}
+        onChange={handleQueryChange}
+        onRunQuery={console.log}
+        query={visualQuery}
+        showExplain={false}
+        hideMetric
+        hideOperations
+      />
+    </div>
+  );
+};
+
+export default CustomLabels;

public/app/percona/add-instance/components/AddRemoteInstance/FormParts/Labels/Labels.tsx

@@ -6,6 +6,7 @@ import { TextInputField } from 'app/percona/shared/components/Form/TextInput';
 import { TextareaInputField } from 'app/percona/shared/components/Form/TextareaInput';
 import Validators from 'app/percona/shared/helpers/validators';
 
+import CustomLabels from '../CustomLabels/CustomLabels';
 import { Messages } from '../FormParts.messages';
 import { getStyles } from '../FormParts.styles';
 
@@ -47,6 +48,7 @@ export const LabelsFormPart: FC = () => {
         placeholder={Messages.form.placeholders.labels.customLabels}
         validators={customLabelsValidators}
       />
+      <CustomLabels />
     </div>
   );
 };