37bf6ba5e5
This commit adds the UI components for Postgres metrics, behind a feature flag. The charts are built on top of Apache ECharts [1]. After some prototyping and reading source code across d3.js, ApexCharts and ECharts, I decided to pick ECharts as it provides a good balance of flexibility, performance and out-of-the box features, with a navigable codebase and documentation. For this version, I have added the metrics as another card on the Postgres overview page. But this page is already pretty overcrowded. In a future version, I would like to split the metrics section to a separate place to clean things up and also avoid unnecessary requests to fetch metrics on each Postgres server overview visit. [1]: https://github.com/apache/echarts/
24 lines
537 B
JavaScript
24 lines
537 B
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./views/**/*.erb",
|
|
"./assets/**/*.js",
|
|
"./helpers/web.rb",
|
|
],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
safelist: [
|
|
...[...Array(101).keys()].flatMap(i => `w-[${i}%]`),
|
|
{
|
|
pattern: /bg-[a-z]+-500/,
|
|
},
|
|
...['text-blue-600', 'text-green-400', 'text-amber-400', 'text-red-400',
|
|
'text-sky-300', 'text-emerald-600', 'text-orange-500'],
|
|
]
|
|
}
|