Skip to content

Commit 04512f4

Browse files
arturminchukovarturminchukov
authored
Eslint config stylistic indent (#494)
* add stylistic rules to eslint config * fix eslint errors by running yarn lint:fix
1 parent a3ce1d0 commit 04512f4

File tree

13 files changed

+344
-244
lines changed

13 files changed

+344
-244
lines changed

‎eslint.config.mjs‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ import unusedImports from "eslint-plugin-unused-imports";
1212
import * as emotionPlugin from '@emotion/eslint-plugin';
1313
import { fixupPluginRules } from "@eslint/compat";
1414
import importPlugin from 'eslint-plugin-import';
15+
import stylistic from '@stylistic/eslint-plugin';
1516

1617
export default defineConfig([
1718
eslint.configs.recommended,
1819
tseslint.configs.recommended,
20+
prettier,
1921
grafanaEslintConfig,
2022
{
2123
ignores: [
@@ -49,6 +51,7 @@ export default defineConfig([
4951
'unused-imports': unusedImports,
5052
'@emotion': fixupPluginRules(emotionPlugin),
5153
'import': importPlugin,
54+
'@stylistic': stylistic,
5255
},
5356
languageOptions: {
5457
parser: tseslint.parser,
@@ -94,6 +97,22 @@ export default defineConfig([
9497
"@typescript-eslint/array-type": 0,
9598
"no-useless-escape": 0,
9699
"no-prototype-builtins": 0,
100+
'@stylistic/indent': ['error', 2, {
101+
'SwitchCase': 1,
102+
'FunctionDeclaration': { 'parameters': 'first' },
103+
'FunctionExpression': { 'parameters': 'first' },
104+
'CallExpression': { 'arguments': 'first' },
105+
'ObjectExpression': 'first',
106+
'ignoredNodes': [
107+
'TSTypeAnnotation *',
108+
],
109+
}],
110+
'@stylistic/jsx-max-props-per-line': ['error', {
111+
maximum: 1,
112+
when: 'multiline'
113+
}],
114+
'@stylistic/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
115+
'@stylistic/jsx-closing-bracket-location': ['error', 'tag-aligned'],
97116
"import/order": [
98117
"error",
99118
{
@@ -127,6 +146,5 @@ export default defineConfig([
127146
'@typescript-eslint/no-explicit-any': 'off',
128147
},
129148
},
130-
prettier,
131149
]
132150
);

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"@grafana/e2e-selectors": "^11.6.1",
2626
"@grafana/eslint-config": "^9.0.0",
2727
"@grafana/tsconfig": "^2.0.0",
28-
"@stylistic/eslint-plugin-ts": "^3.1.0",
28+
"@stylistic/eslint-plugin": "^5.6.1",
29+
"@stylistic/eslint-plugin-ts": "^4.4.1",
2930
"@swc/core": "^1.6.5",
3031
"@swc/helpers": "^0.5.11",
3132
"@swc/jest": "^0.2.37",

‎src/backendResultTransformer.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
2-
DataFrame, DataFrameType,
2+
DataFrame,
3+
DataFrameType,
34
DataQueryError,
45
DataQueryRequest,
56
DataQueryResponse,

‎src/components/QueryEditor/QueryBuilder/QueryBuilder.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -54,37 +54,39 @@ const QueryBuilderFilter = (props: QueryBuilderFilterProps) => {
5454
return (
5555
<div className={isRoot ? styles.builderWrapper : styles.filterWrapper}>
5656
{filters.values.map((filter, index) => (
57-
<Fragment key={index}>
58-
<div className={styles.filterItem}>
59-
{typeof filter === 'string'
60-
? <QueryBuilderFieldFilter
61-
datasource={datasource}
62-
indexPath={[...indexPath, index]}
63-
filter={filter}
64-
query={query}
65-
timeRange={timeRange}
66-
onChange={onChange}
67-
/>
68-
: <QueryBuilderFilter
69-
datasource={datasource}
70-
indexPath={[...indexPath, index]}
71-
filters={filter}
72-
query={query}
73-
timeRange={timeRange}
74-
onChange={onChange}
75-
/>
76-
}
77-
</div>
78-
{index !== filters.values.length - 1 && (
79-
<QueryBuilderSelectOperator
57+
<Fragment key={index}>
58+
<div className={styles.filterItem}>
59+
{typeof filter === 'string'
60+
?
61+
<QueryBuilderFieldFilter
62+
datasource={datasource}
63+
indexPath={[...indexPath, index]}
64+
filter={filter}
8065
query={query}
81-
operator={filters.operators[index] || DEFAULT_FILTER_OPERATOR}
66+
timeRange={timeRange}
67+
onChange={onChange}
68+
/>
69+
:
70+
<QueryBuilderFilter
71+
datasource={datasource}
8272
indexPath={[...indexPath, index]}
73+
filters={filter}
74+
query={query}
75+
timeRange={timeRange}
8376
onChange={onChange}
8477
/>
85-
)}
86-
</Fragment>
87-
)
78+
}
79+
</div>
80+
{index !== filters.values.length - 1 && (
81+
<QueryBuilderSelectOperator
82+
query={query}
83+
operator={filters.operators[index] || DEFAULT_FILTER_OPERATOR}
84+
indexPath={[...indexPath, index]}
85+
onChange={onChange}
86+
/>
87+
)}
88+
</Fragment>
89+
)
8890
)}
8991
{/* for new filters*/}
9092
{!filters.values.length && (

‎src/components/QueryEditor/QueryEditor.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,16 @@ const QueryEditor = React.memo<VictoriaLogsQueryEditorProps>((props) => {
4242
}, [query.expr]);
4343

4444
const onEditorModeChange = useCallback((newEditorMode: QueryEditorMode) => {
45-
if (newEditorMode === QueryEditorMode.Builder) {
46-
const result = buildVisualQueryFromString(query.expr || '');
47-
if (result.errors.length) {
48-
setParseModalOpen(true);
49-
return;
50-
}
45+
if (newEditorMode === QueryEditorMode.Builder) {
46+
const result = buildVisualQueryFromString(query.expr || '');
47+
if (result.errors.length) {
48+
setParseModalOpen(true);
49+
return;
5150
}
52-
changeEditorMode(query, newEditorMode, onChange);
53-
},
54-
[query, onChange]
51+
}
52+
changeEditorMode(query, newEditorMode, onChange);
53+
},
54+
[query, onChange]
5555
);
5656

5757
useEffect(() => {

‎src/components/QueryEditor/QueryEditorOptions.tsx‎

Lines changed: 91 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -37,108 +37,108 @@ export const queryTypeOptions: Array<SelectableValue<QueryType>> = [
3737
];
3838

3939
export const QueryEditorOptions = React.memo<Props>(({ app, query, maxLines, onChange, onRunQuery }) => {
40-
const filteredOptions = queryTypeOptions.filter(option => option.filter?.({ app }) ?? true);
41-
const queryType = query.queryType;
42-
43-
const isValidStep = useMemo(() => {
44-
return !query.step || isValidGrafanaDuration(query.step) || !isNaN(+query.step);
45-
}, [query.step]);
46-
47-
const collapsedInfo = getCollapsedInfo({
48-
query,
49-
queryType,
50-
maxLines,
51-
isValidStep,
52-
});
53-
54-
const onQueryTypeChange = (value: QueryType) => {
55-
onChange({ ...query, queryType: value });
40+
const filteredOptions = queryTypeOptions.filter(option => option.filter?.({ app }) ?? true);
41+
const queryType = query.queryType;
42+
43+
const isValidStep = useMemo(() => {
44+
return !query.step || isValidGrafanaDuration(query.step) || !isNaN(+query.step);
45+
}, [query.step]);
46+
47+
const collapsedInfo = getCollapsedInfo({
48+
query,
49+
queryType,
50+
maxLines,
51+
isValidStep,
52+
});
53+
54+
const onQueryTypeChange = (value: QueryType) => {
55+
onChange({ ...query, queryType: value });
56+
onRunQuery();
57+
};
58+
59+
const onLegendFormatChanged = (e: React.FormEvent<HTMLInputElement>) => {
60+
onChange({ ...query, legendFormat: e.currentTarget.value });
61+
onRunQuery();
62+
};
63+
64+
const onMaxLinesChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
65+
const maxLines = parseInt(e.currentTarget.value, 10);
66+
const newMaxLines = isNaN(maxLines) || maxLines < 0 ? undefined : maxLines;
67+
68+
if (query.maxLines !== newMaxLines) {
69+
onChange({ ...query, maxLines: newMaxLines });
5670
onRunQuery();
57-
};
58-
59-
const onLegendFormatChanged = (e: React.FormEvent<HTMLInputElement>) => {
60-
onChange({ ...query, legendFormat: e.currentTarget.value });
61-
onRunQuery();
62-
};
63-
64-
const onMaxLinesChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
65-
const maxLines = parseInt(e.currentTarget.value, 10);
66-
const newMaxLines = isNaN(maxLines) || maxLines < 0 ? undefined : maxLines;
67-
68-
if (query.maxLines !== newMaxLines) {
69-
onChange({ ...query, maxLines: newMaxLines });
70-
onRunQuery();
71-
}
7271
}
72+
}
7373

74-
const onStepChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
75-
onChange({ ...query, step: e.currentTarget.value.trim() });
76-
onRunQuery();
77-
}
74+
const onStepChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
75+
onChange({ ...query, step: e.currentTarget.value.trim() });
76+
onRunQuery();
77+
}
7878

79-
return (
80-
<EditorRow>
81-
<QueryEditorOptionsGroup
82-
title="Options"
83-
collapsedInfo={collapsedInfo}
79+
return (
80+
<EditorRow>
81+
<QueryEditorOptionsGroup
82+
title="Options"
83+
collapsedInfo={collapsedInfo}
84+
>
85+
<EditorField
86+
label="Legend"
87+
tooltip="Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname."
8488
>
89+
<AutoSizeInput
90+
placeholder="{{label}}"
91+
type="string"
92+
minWidth={14}
93+
defaultValue={query.legendFormat}
94+
onCommitChange={onLegendFormatChanged}
95+
/>
96+
</EditorField>
97+
<div>
98+
<EditorField label="Type">
99+
<RadioButtonGroup options={filteredOptions} value={queryType} onChange={onQueryTypeChange}/>
100+
</EditorField>
101+
<TextLink
102+
href="https://docs.victoriametrics.com/victorialogs/querying/"
103+
icon="external-link-alt"
104+
variant={"bodySmall"}
105+
external
106+
>
107+
Learn more about querying logs
108+
</TextLink>
109+
</div>
110+
{queryType === QueryType.Instant && (
111+
<EditorField label="Line limit" tooltip="Upper limit for number of log lines returned by query.">
112+
<AutoSizeInput
113+
className="width-4"
114+
placeholder={maxLines.toString()}
115+
type="number"
116+
min={0}
117+
defaultValue={query.maxLines?.toString() ?? ''}
118+
onCommitChange={onMaxLinesChange}
119+
/>
120+
</EditorField>
121+
)}
122+
{queryType === QueryType.StatsRange && (
85123
<EditorField
86-
label="Legend"
87-
tooltip="Series name override or template. Ex. {{hostname}} will be replaced with label value for hostname."
124+
label="Step"
125+
tooltip="Use the `step` parameter when making metric queries. If not specified, Grafana will use a calculated interval. Example values: 1s, 5m, 10h, 1d."
126+
invalid={!isValidStep}
127+
error={'Invalid step. Example valid values: 1s, 5m, 10h, 1d.'}
88128
>
89129
<AutoSizeInput
90-
placeholder="{{label}}"
130+
className="width-6"
131+
placeholder={'auto'}
91132
type="string"
92-
minWidth={14}
93-
defaultValue={query.legendFormat}
94-
onCommitChange={onLegendFormatChanged}
133+
defaultValue={query.step ?? ''}
134+
onCommitChange={onStepChange}
95135
/>
96136
</EditorField>
97-
<div>
98-
<EditorField label="Type">
99-
<RadioButtonGroup options={filteredOptions} value={queryType} onChange={onQueryTypeChange}/>
100-
</EditorField>
101-
<TextLink
102-
href="https://docs.victoriametrics.com/victorialogs/querying/"
103-
icon="external-link-alt"
104-
variant={"bodySmall"}
105-
external
106-
>
107-
Learn more about querying logs
108-
</TextLink>
109-
</div>
110-
{queryType === QueryType.Instant && (
111-
<EditorField label="Line limit" tooltip="Upper limit for number of log lines returned by query.">
112-
<AutoSizeInput
113-
className="width-4"
114-
placeholder={maxLines.toString()}
115-
type="number"
116-
min={0}
117-
defaultValue={query.maxLines?.toString() ?? ''}
118-
onCommitChange={onMaxLinesChange}
119-
/>
120-
</EditorField>
121-
)}
122-
{queryType === QueryType.StatsRange && (
123-
<EditorField
124-
label="Step"
125-
tooltip="Use the `step` parameter when making metric queries. If not specified, Grafana will use a calculated interval. Example values: 1s, 5m, 10h, 1d."
126-
invalid={!isValidStep}
127-
error={'Invalid step. Example valid values: 1s, 5m, 10h, 1d.'}
128-
>
129-
<AutoSizeInput
130-
className="width-6"
131-
placeholder={'auto'}
132-
type="string"
133-
defaultValue={query.step ?? ''}
134-
onCommitChange={onStepChange}
135-
/>
136-
</EditorField>
137-
)}
138-
</QueryEditorOptionsGroup>
139-
</EditorRow>
140-
);
141-
}
137+
)}
138+
</QueryEditorOptionsGroup>
139+
</EditorRow>
140+
);
141+
}
142142
);
143143

144144
QueryEditorOptions.displayName = 'QueryEditorOptions';

‎src/components/QueryEditor/VmuiLink.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,12 @@ const VmuiLink: FC<Props> = ({
133133
}, [baseVmuiUrl, datasource, panelData, query.expr, tenant]);
134134

135135
return (
136-
<a href={textUtil.sanitizeUrl(href)} target="_blank" rel="noopener noreferrer"
137-
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
136+
<a
137+
href={textUtil.sanitizeUrl(href)}
138+
target="_blank"
139+
rel="noopener noreferrer"
140+
style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
141+
>
138142
<IconButton
139143
key="vmui"
140144
name="external-link-alt"

0 commit comments

Comments
 (0)