\n
\n \n \n updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {\n ...options.jsonData.tracesToMetrics,\n datasourceUid: ds.uid,\n })\n }\n />\n \n {options.jsonData.tracesToMetrics?.datasourceUid ? (\n \n ) : null}\n \n\n
\n {\n updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {\n ...options.jsonData.tracesToMetrics,\n spanStartTimeShift: val,\n });\n }}\n placeholder={'-2m'}\n isInvalidError={invalidTimeShiftError}\n />\n \n\n
\n {\n updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {\n ...options.jsonData.tracesToMetrics,\n spanEndTimeShift: val,\n });\n }}\n placeholder={'2m'}\n isInvalidError={invalidTimeShiftError}\n />\n \n\n
\n \n \n updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {\n ...options.jsonData.tracesToMetrics,\n tags: v,\n })\n }\n />\n \n \n\n {options.jsonData.tracesToMetrics?.queries?.map((query, i) => (\n
\n \n {\n const newQueries = (options.jsonData.tracesToMetrics?.queries ?? []).map(\n (traceToMetricQuery, index) => {\n return index === i ? { ...traceToMetricQuery, name: e.currentTarget.value } : traceToMetricQuery;\n }\n );\n updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {\n ...options.jsonData.tracesToMetrics,\n queries: newQueries,\n });\n }}\n />\n \n \n {\n const updatedQueries = (options.jsonData.tracesToMetrics?.queries ?? []).map(\n (traceToMetricQuery, index) => {\n return index === i ? { ...traceToMetricQuery, query: e.currentTarget.value } : traceToMetricQuery;\n }\n );\n updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToMetrics', {\n ...options.jsonData.tracesToMetrics,\n queries: updatedQueries,\n });\n }}\n />\n \n\n
\n ))}\n\n
\n
\n );\n}\n\nexport const TraceToMetricsSection = ({ options, onOptionsChange }: DataSourcePluginOptionsEditorProps) => {\n let suffix = options.type;\n suffix += options.type === 'tempo' ? '/configure-tempo-data-source/#trace-to-metrics' : '/#trace-to-metrics';\n\n return (\n \n You can compose TraceQL queries using either the Search tab (the TraceQL query builder) or the TraceQL tab (the\n TraceQL query editor). Both of these methods let you build queries and drill-down into result sets. (\n \n Learn more\n \n )\n
\n >\n );\n}\n","import { TimeRange } from '@grafana/data';\n\nfunction roundMsToMin(milliseconds: number): number {\n return roundSecToMin(milliseconds / 1000);\n}\n\nfunction roundSecToMin(seconds: number): number {\n return Math.floor(seconds / 60);\n}\n\nexport function shouldRefreshLabels(range?: TimeRange, prevRange?: TimeRange): boolean {\n if (range && prevRange) {\n const sameMinuteFrom = roundMsToMin(range.from.valueOf()) === roundMsToMin(prevRange.from.valueOf());\n const sameMinuteTo = roundMsToMin(range.to.valueOf()) === roundMsToMin(prevRange.to.valueOf());\n // If both are same, don't need to refresh\n return !(sameMinuteFrom && sameMinuteTo);\n }\n return false;\n}\n\n// Loki regular-expressions use the RE2 syntax (https://github.com/google/re2/wiki/Syntax),\n// so every character that matches something in that list has to be escaped.\n// the list of meta characters is: *+?()|\\.[]{}^$\n// we make a javascript regular expression that matches those characters:\nconst RE2_METACHARACTERS = /[*+?()|\\\\.\\[\\]{}^$]/g;\nfunction escapeLokiRegexp(value: string): string {\n return value.replace(RE2_METACHARACTERS, '\\\\$&');\n}\n\n// based on the openmetrics-documentation, the 3 symbols we have to handle are:\n// - \\n ... the newline character\n// - \\ ... the backslash character\n// - \" ... the double-quote character\nexport function escapeLabelValueInExactSelector(labelValue: string): string {\n return labelValue.replace(/\\\\/g, '\\\\\\\\').replace(/\\n/g, '\\\\n').replace(/\"/g, '\\\\\"');\n}\n\nexport function unescapeLabelValue(labelValue: string): string {\n return labelValue.replace(/\\\\n/g, '\\n').replace(/\\\\\"/g, '\"').replace(/\\\\\\\\/g, '\\\\');\n}\n\nexport function escapeLabelValueInRegexSelector(labelValue: string): string {\n return escapeLabelValueInExactSelector(escapeLokiRegexp(labelValue));\n}\n\nexport function escapeLabelValueInSelector(labelValue: string, selector?: string): string {\n return isRegexSelector(selector)\n ? escapeLabelValueInRegexSelector(labelValue)\n : escapeLabelValueInExactSelector(labelValue);\n}\n\nexport function isRegexSelector(selector?: string) {\n if (selector && (selector.includes('=~') || selector.includes('!~'))) {\n return true;\n }\n return false;\n}\n\nexport function isBytesString(string: string) {\n const BYTES_KEYWORDS = [\n 'b',\n 'kib',\n 'Kib',\n 'kb',\n 'KB',\n 'mib',\n 'Mib',\n 'mb',\n 'MB',\n 'gib',\n 'Gib',\n 'gb',\n 'GB',\n 'tib',\n 'Tib',\n 'tb',\n 'TB',\n 'pib',\n 'Pib',\n 'pb',\n 'PB',\n 'eib',\n 'Eib',\n 'eb',\n 'EB',\n ];\n const regex = new RegExp(`^(?:-?\\\\d+(?:\\\\.\\\\d+)?)(?:${BYTES_KEYWORDS.join('|')})$`);\n const match = string.match(regex);\n return !!match;\n}\n","import React, { Suspense } from 'react';\n\nimport { Props } from './MonacoQueryFieldProps';\n\nconst Field = React.lazy(() => import(/* webpackChunkName: \"loki-query-field\" */ './MonacoQueryField'));\n\nexport const MonacoQueryFieldLazy = (props: Props) => {\n return (\n