VictoriaMetrics · arturminchukov · Dec 10, 2025 · Dec 10, 2025 · Dec 10, 2025
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -12,10 +12,12 @@ import unusedImports from "eslint-plugin-unused-imports";
 import * as emotionPlugin from '@emotion/eslint-plugin';
 import { fixupPluginRules } from "@eslint/compat";
 import importPlugin from 'eslint-plugin-import';
+import stylistic from '@stylistic/eslint-plugin';
 
 export default defineConfig([
     eslint.configs.recommended,
     tseslint.configs.recommended,
+    prettier,
     grafanaEslintConfig,
     {
       ignores: [
@@ -49,6 +51,7 @@ export default defineConfig([
         'unused-imports': unusedImports,
         '@emotion': fixupPluginRules(emotionPlugin),
         'import': importPlugin,
+        '@stylistic': stylistic,
       },
       languageOptions: {
         parser: tseslint.parser,
@@ -94,6 +97,22 @@ export default defineConfig([
         "@typescript-eslint/array-type": 0,
         "no-useless-escape": 0,
         "no-prototype-builtins": 0,
+        '@stylistic/indent': ['error', 2, {
+          'SwitchCase': 1,
+          'FunctionDeclaration': { 'parameters': 'first' },
+          'FunctionExpression': { 'parameters': 'first' },
+          'CallExpression': { 'arguments': 'first' },
+          'ObjectExpression': 'first',
+          'ignoredNodes': [
+            'TSTypeAnnotation *',
+          ],
+        }],
+        '@stylistic/jsx-max-props-per-line': ['error', {
+          maximum: 1,
+          when: 'multiline'
+        }],
+        '@stylistic/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+        '@stylistic/jsx-closing-bracket-location': ['error', 'tag-aligned'],
         "import/order": [
           "error",
           {
@@ -127,6 +146,5 @@ export default defineConfig([
         '@typescript-eslint/no-explicit-any': 'off',
       },
     },
-    prettier,
   ]
 );
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "@grafana/e2e-selectors": "^11.6.1",
     "@grafana/eslint-config": "^9.0.0",
     "@grafana/tsconfig": "^2.0.0",
-    "@stylistic/eslint-plugin-ts": "^3.1.0",
+    "@stylistic/eslint-plugin": "^5.6.1",
+    "@stylistic/eslint-plugin-ts": "^4.4.1",
     "@swc/core": "^1.6.5",
     "@swc/helpers": "^0.5.11",
     "@swc/jest": "^0.2.37",

diff --git a/src/backendResultTransformer.ts b/src/backendResultTransformer.ts
@@ -1,5 +1,6 @@
 import {
-  DataFrame, DataFrameType,
+  DataFrame,
+  DataFrameType,
   DataQueryError,
   DataQueryRequest,
   DataQueryResponse,

diff --git a/src/components/QueryEditor/QueryBuilder/QueryBuilder.tsx b/src/components/QueryEditor/QueryBuilder/QueryBuilder.tsx
@@ -54,37 +54,39 @@ const QueryBuilderFilter = (props: QueryBuilderFilterProps) => {
   return (
     <div className={isRoot ? styles.builderWrapper : styles.filterWrapper}>
       {filters.values.map((filter, index) => (
-          <Fragment key={index}>
-            <div className={styles.filterItem}>
-              {typeof filter === 'string'
-                ? <QueryBuilderFieldFilter
-                  datasource={datasource}
-                  indexPath={[...indexPath, index]}
-                  filter={filter}
-                  query={query}
-                  timeRange={timeRange}
-                  onChange={onChange}
-                />
-                : <QueryBuilderFilter
-                  datasource={datasource}
-                  indexPath={[...indexPath, index]}
-                  filters={filter}
-                  query={query}
-                  timeRange={timeRange}
-                  onChange={onChange}
-                />
-              }
-            </div>
-            {index !== filters.values.length - 1 && (
-              <QueryBuilderSelectOperator
+        <Fragment key={index}>
+          <div className={styles.filterItem}>
+            {typeof filter === 'string'
+              ?
+              <QueryBuilderFieldFilter
+                datasource={datasource}
+                indexPath={[...indexPath, index]}
+                filter={filter}
                 query={query}
-                operator={filters.operators[index] || DEFAULT_FILTER_OPERATOR}
+                timeRange={timeRange}
+                onChange={onChange}
+              />
+              :
+              <QueryBuilderFilter
+                datasource={datasource}
                 indexPath={[...indexPath, index]}
+                filters={filter}
+                query={query}
+                timeRange={timeRange}
                 onChange={onChange}
               />
-            )}
-          </Fragment>
-        )
+            }
+          </div>
+          {index !== filters.values.length - 1 && (
+            <QueryBuilderSelectOperator
+              query={query}
+              operator={filters.operators[index] || DEFAULT_FILTER_OPERATOR}
+              indexPath={[...indexPath, index]}
+              onChange={onChange}
+            />
+          )}
+        </Fragment>
+      )
       )}
       {/* for new filters*/}
       {!filters.values.length && (

diff --git a/src/components/QueryEditor/QueryEditor.tsx b/src/components/QueryEditor/QueryEditor.tsx
@@ -42,16 +42,16 @@ const QueryEditor = React.memo<VictoriaLogsQueryEditorProps>((props) => {
   }, [query.expr]);
 
   const onEditorModeChange = useCallback((newEditorMode: QueryEditorMode) => {
-      if (newEditorMode === QueryEditorMode.Builder) {
-        const result = buildVisualQueryFromString(query.expr || '');
-        if (result.errors.length) {
-          setParseModalOpen(true);
-          return;
-        }
+    if (newEditorMode === QueryEditorMode.Builder) {
+      const result = buildVisualQueryFromString(query.expr || '');
+      if (result.errors.length) {
+        setParseModalOpen(true);
+        return;
       }
-      changeEditorMode(query, newEditorMode, onChange);
-    },
-    [query, onChange]
+    }
+    changeEditorMode(query, newEditorMode, onChange);
+  },
+                                         [query, onChange]
   );
 
   useEffect(() => {

diff --git a/src/components/QueryEditor/QueryEditorOptions.tsx b/src/components/QueryEditor/QueryEditorOptions.tsx
@@ -37,108 +37,108 @@ export const queryTypeOptions: Array<SelectableValue<QueryType>> = [
 ];
 
 export const QueryEditorOptions = React.memo<Props>(({ app, query, maxLines, onChange, onRunQuery }) => {
-    const filteredOptions = queryTypeOptions.filter(option => option.filter?.({ app }) ?? true);
-    const queryType = query.queryType;
-
-    const isValidStep = useMemo(() => {
-      return !query.step || isValidGrafanaDuration(query.step) || !isNaN(+query.step);
-    }, [query.step]);
-
-    const collapsedInfo = getCollapsedInfo({
-      query,
-      queryType,
-      maxLines,
-      isValidStep,
-    });
-
-    const onQueryTypeChange = (value: QueryType) => {
-      onChange({ ...query, queryType: value });
+  const filteredOptions = queryTypeOptions.filter(option => option.filter?.({ app }) ?? true);
+  const queryType = query.queryType;
+
+  const isValidStep = useMemo(() => {
+    return !query.step || isValidGrafanaDuration(query.step) || !isNaN(+query.step);
+  }, [query.step]);
+
+  const collapsedInfo = getCollapsedInfo({
+    query,
+    queryType,
+    maxLines,
+    isValidStep,
+  });
+
+  const onQueryTypeChange = (value: QueryType) => {
+    onChange({ ...query, queryType: value });
+    onRunQuery();
+  };
+
+  const onLegendFormatChanged = (e: React.FormEvent<HTMLInputElement>) => {
+    onChange({ ...query, legendFormat: e.currentTarget.value });
+    onRunQuery();
+  };
+
+  const onMaxLinesChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    const maxLines = parseInt(e.currentTarget.value, 10);
+    const newMaxLines = isNaN(maxLines) || maxLines < 0 ? undefined : maxLines;
+
+    if (query.maxLines !== newMaxLines) {
+      onChange({ ...query, maxLines: newMaxLines });
       onRunQuery();
-    };
-
-    const onLegendFormatChanged = (e: React.FormEvent<HTMLInputElement>) => {
-      onChange({ ...query, legendFormat: e.currentTarget.value });
-      onRunQuery();
-    };
-
-    const onMaxLinesChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-      const maxLines = parseInt(e.currentTarget.value, 10);
-      const newMaxLines = isNaN(maxLines) || maxLines < 0 ? undefined : maxLines;
-
-      if (query.maxLines !== newMaxLines) {
-        onChange({ ...query, maxLines: newMaxLines });
-        onRunQuery();
-      }
     }
+  }
 
-    const onStepChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-      onChange({ ...query, step: e.currentTarget.value.trim() });
-      onRunQuery();
-    }
+  const onStepChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    onChange({ ...query, step: e.currentTarget.value.trim() });
+    onRunQuery();
+  }
 
-    return (
-      <EditorRow>
-        <QueryEditorOptionsGroup
-          title="Options"
-          collapsedInfo={collapsedInfo}
+  return (
+    <EditorRow>
+      <QueryEditorOptionsGroup
+        title="Options"
+        collapsedInfo={collapsedInfo}
+      >
+        <EditorField
+          label="Legend"
+          tooltip="Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname."
         >
+          <AutoSizeInput
+            placeholder="{{label}}"
+            type="string"
+            minWidth={14}
+            defaultValue={query.legendFormat}
+            onCommitChange={onLegendFormatChanged}
+          />
+        </EditorField>
+        <div>
+          <EditorField label="Type">
+            <RadioButtonGroup options={filteredOptions} value={queryType} onChange={onQueryTypeChange}/>
+          </EditorField>
+          <TextLink
+            href="https://docs.victoriametrics.com/victorialogs/querying/"
+            icon="external-link-alt"
+            variant={"bodySmall"}
+            external
+          >
+            Learn more about querying logs
+          </TextLink>
+        </div>
+        {queryType === QueryType.Instant && (
+          <EditorField label="Line limit" tooltip="Upper limit for number of log lines returned by query.">
+            <AutoSizeInput
+              className="width-4"
+              placeholder={maxLines.toString()}
+              type="number"
+              min={0}
+              defaultValue={query.maxLines?.toString() ?? ''}
+              onCommitChange={onMaxLinesChange}
+            />
+          </EditorField>
+        )}
+        {queryType === QueryType.StatsRange && (
           <EditorField
-            label="Legend"
-            tooltip="Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname."
+            label="Step"
+            tooltip="Use the `step` parameter when making metric queries. If not specified, Grafana will use a calculated interval. Example values: 1s, 5m, 10h, 1d."
+            invalid={!isValidStep}
+            error={'Invalid step. Example valid values: 1s, 5m, 10h, 1d.'}
           >
             <AutoSizeInput
-              placeholder="{{label}}"
+              className="width-6"
+              placeholder={'auto'}
               type="string"
-              minWidth={14}
-              defaultValue={query.legendFormat}
-              onCommitChange={onLegendFormatChanged}
+              defaultValue={query.step ?? ''}
+              onCommitChange={onStepChange}
             />
           </EditorField>
-          <div>
-            <EditorField label="Type">
-              <RadioButtonGroup options={filteredOptions} value={queryType} onChange={onQueryTypeChange}/>
-            </EditorField>
-            <TextLink
-              href="https://docs.victoriametrics.com/victorialogs/querying/"
-              icon="external-link-alt"
-              variant={"bodySmall"}
-              external
-            >
-              Learn more about querying logs
-            </TextLink>
-          </div>
-          {queryType === QueryType.Instant && (
-            <EditorField label="Line limit" tooltip="Upper limit for number of log lines returned by query.">
-              <AutoSizeInput
-                className="width-4"
-                placeholder={maxLines.toString()}
-                type="number"
-                min={0}
-                defaultValue={query.maxLines?.toString() ?? ''}
-                onCommitChange={onMaxLinesChange}
-              />
-            </EditorField>
-          )}
-          {queryType === QueryType.StatsRange && (
-            <EditorField
-              label="Step"
-              tooltip="Use the `step` parameter when making metric queries. If not specified, Grafana will use a calculated interval. Example values: 1s, 5m, 10h, 1d."
-              invalid={!isValidStep}
-              error={'Invalid step. Example valid values: 1s, 5m, 10h, 1d.'}
-            >
-              <AutoSizeInput
-                className="width-6"
-                placeholder={'auto'}
-                type="string"
-                defaultValue={query.step ?? ''}
-                onCommitChange={onStepChange}
-              />
-            </EditorField>
-          )}
-        </QueryEditorOptionsGroup>
-      </EditorRow>
-    );
-  }
+        )}
+      </QueryEditorOptionsGroup>
+    </EditorRow>
+  );
+}
 );
 
 QueryEditorOptions.displayName = 'QueryEditorOptions';

diff --git a/src/components/QueryEditor/VmuiLink.tsx b/src/components/QueryEditor/VmuiLink.tsx
@@ -133,8 +133,12 @@ const VmuiLink: FC<Props> = ({
   }, [baseVmuiUrl, datasource, panelData, query.expr, tenant]);
 
   return (
-    <a href={textUtil.sanitizeUrl(href)} target="_blank" rel="noopener noreferrer"
-       style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+    <a
+      href={textUtil.sanitizeUrl(href)}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
       <IconButton
         key="vmui"
         name="external-link-alt"