prometheus/web/ui/mantine-ui/eslint.config.mjs
Julius Volz 2b25bbf997 UI: Speed up alerts/rules/... pages by not rendering collapsed content
In contrast to Bootstrap, Mantine's Accordion component didn't remove its
panel contents from the DOM when collapsed, so rendering pages with lots of
collapsed Accordion items was way slower and more resource-intensive in the
new Mantine UI. While I talked to Vitaly from Mantine and he managed to add
unmounting of collapsed panel contents in Mantine 9, this will only be
available next year. So for now, I'm forking over the Accordion component
from Mantine and adding a hacky modification to it that removes contents
for collapsed panels. This fork can be removed after upgrading to Mantine 9
sometime in 2026. I removed all the unnecessary test files and so on and
just kept the core Accordion code files.

This should really help with the following issues:

https://github.com/prometheus/prometheus/issues/17254
https://github.com/prometheus/prometheus/issues/16830

The /alerts and /rules pages should be the most affected since the panels
on those are collapsed by default. The /targets and /service-discovery
pages have expanded panels by default, but I still swapped out the
Accordion implementation for consistency and in case someone collapses a
bunch of panels.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2025-11-06 11:32:59 +01:00

72 lines
2.2 KiB
JavaScript

import { fixupConfigRules } from '@eslint/compat';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
import tsParser from '@typescript-eslint/parser';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import js from '@eslint/js';
import { FlatCompat } from '@eslint/eslintrc';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});
export default [{
ignores: ['**/dist', '**/.eslintrc.cjs', 'src/components/Accordion/**'],
}, ...fixupConfigRules(compat.extends(
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
)), {
plugins: {
'react-refresh': reactRefresh,
},
languageOptions: {
globals: {
...globals.browser,
},
parser: tsParser,
},
rules: {
'react-refresh/only-export-components': ['warn', {
allowConstantExport: true,
}],
// Disable the base rule as it can report incorrect errors
'no-unused-vars': 'off',
// Use the TypeScript-specific rule for unused vars
'@typescript-eslint/no-unused-vars': ['warn', {
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
}],
'prefer-const': ['error', {
destructuring: 'all',
}],
},
},
// Override for Node.js-based config files
{
files: ['postcss.config.cjs'], // Specify any other config files
languageOptions: {
ecmaVersion: 2021, // Optional, set ECMAScript version
sourceType: 'script', // For CommonJS (non-ESM) modules
globals: {
module: 'readonly',
require: 'readonly',
process: 'readonly',
__dirname: 'readonly', // Include other Node.js globals if needed
},
},
},
];