From dea61dce7a3ed8e32b556b30b2549f2d9f019074 Mon Sep 17 00:00:00 2001 From: "cyril.biencourt" Date: Wed, 23 Oct 2024 08:26:50 +0200 Subject: [PATCH] feat(vps): move metrics to mimir Signed-off-by: cyril.biencourt --- packages/components/ng-ovh-chart/package.json | 2 +- .../apps/dedicated/client/app/app.module.js | 13 + packages/manager/apps/dedicated/package.json | 2 +- packages/manager/apps/iplb/package.json | 2 +- packages/manager/apps/vps/package.json | 1 + packages/manager/apps/vps/src/app.module.js | 16 ++ packages/manager/apps/web/package.json | 2 +- packages/manager/modules/iplb/package.json | 2 +- packages/manager/modules/vps/package.json | 2 + .../translations/Messages_fr_FR.json | 4 +- .../monitoring/vps-monitoring.constants.js | 165 ++++++------ .../monitoring/vps-monitoring.controller.js | 250 ++++++++++-------- .../vps/src/monitoring/vps-monitoring.html | 51 +--- .../tools/webpack-dev-server/src/config.js | 10 +- yarn.lock | 70 ++--- 15 files changed, 307 insertions(+), 285 deletions(-) diff --git a/packages/components/ng-ovh-chart/package.json b/packages/components/ng-ovh-chart/package.json index 00493fe73952..e77c2802f7c9 100644 --- a/packages/components/ng-ovh-chart/package.json +++ b/packages/components/ng-ovh-chart/package.json @@ -44,7 +44,7 @@ "angular": "~1.6", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", - "chartjs-plugin-datasource-prometheus": "^2.1.3", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", "date-fns": "^2.24.0" } diff --git a/packages/manager/apps/dedicated/client/app/app.module.js b/packages/manager/apps/dedicated/client/app/app.module.js index 4cf4fe27769b..0650417c2772 100644 --- a/packages/manager/apps/dedicated/client/app/app.module.js +++ b/packages/manager/apps/dedicated/client/app/app.module.js @@ -52,6 +52,7 @@ import './css/source.scss'; import get from 'lodash/get'; import has from 'lodash/has'; import set from 'lodash/set'; +import * as dateFnsLocales from 'date-fns/locale'; import isString from 'lodash/isString'; import trustedNic from '@ovh-ux/manager-trusted-nic'; import '@ovh-ux/ng-at-internet'; @@ -131,6 +132,17 @@ const getLocale = (shellClient) => { return shellClient.i18n.getLocale(); }; +const getDateFnsLocale = (language) => { + if (language === 'en_GB') { + return 'enGB'; + } + if (language === 'fr_CA') { + return 'frCA'; + } + const [locale] = language.split('_'); + return locale; +}; + export default async (containerEl, shellClient) => { const moduleName = 'App'; @@ -233,6 +245,7 @@ export default async (containerEl, shellClient) => { ].filter(isString), ) .service('Polling', pollingService) + .constant('DATEFNS_LOCALE', dateFnsLocales[getDateFnsLocale(locale)]) .constant('shellClient', shellClient) .constant('constants', { prodMode: config.prodMode, diff --git a/packages/manager/apps/dedicated/package.json b/packages/manager/apps/dedicated/package.json index cb95a7d82b07..405fa644be56 100644 --- a/packages/manager/apps/dedicated/package.json +++ b/packages/manager/apps/dedicated/package.json @@ -113,7 +113,7 @@ "bootstrap4": "twbs/bootstrap#v4.6.2", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", - "chartjs-plugin-datasource-prometheus": "^2.1.3", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", "clipboard": "^2.0.4", "components-jqueryui": "^1.12.1", diff --git a/packages/manager/apps/iplb/package.json b/packages/manager/apps/iplb/package.json index abfb43320a05..e0cfe8f22ca6 100644 --- a/packages/manager/apps/iplb/package.json +++ b/packages/manager/apps/iplb/package.json @@ -60,7 +60,7 @@ "bootstrap": "~3.3.7", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", - "chartjs-plugin-datasource-prometheus": "^2.1.3", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", "clipboard": "^2.0.4", "core-js": "^3.6.5", diff --git a/packages/manager/apps/vps/package.json b/packages/manager/apps/vps/package.json index e0aa6db1c2f6..688f314667bd 100644 --- a/packages/manager/apps/vps/package.json +++ b/packages/manager/apps/vps/package.json @@ -64,6 +64,7 @@ "bootstrap": "~3.3.0", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", "clipboard": "^2.0.4", "core-js": "^3.6.5", diff --git a/packages/manager/apps/vps/src/app.module.js b/packages/manager/apps/vps/src/app.module.js index 16cbd3683e32..0f71c396d3f3 100644 --- a/packages/manager/apps/vps/src/app.module.js +++ b/packages/manager/apps/vps/src/app.module.js @@ -9,6 +9,7 @@ import { isString, get } from 'lodash-es'; import angular from 'angular'; import cloudUniverseComponents from '@ovh-ux/ng-ovh-cloud-universe-components'; +import * as dateFnsLocales from 'date-fns/locale'; import ngAtInternet from '@ovh-ux/ng-at-internet'; import ngOvhChart from '@ovh-ux/ng-ovh-chart'; import ngOvhFeatureFlipping from '@ovh-ux/ng-ovh-feature-flipping'; @@ -20,6 +21,17 @@ import ngOvhPaymentMethod from '@ovh-ux/ng-ovh-payment-method'; import '@ovh-ux/ui-kit/dist/css/oui.css'; import 'ovh-ui-kit-bs/dist/css/oui-bs3.css'; +const getDateFnsLocale = (language) => { + if (language === 'en_GB') { + return 'enGB'; + } + if (language === 'fr_CA') { + return 'frCA'; + } + const [locale] = language.split('_'); + return locale; +}; + export default (containerEl, environment) => { const moduleName = 'vpsApp'; angular @@ -57,6 +69,10 @@ export default (containerEl, environment) => { $urlRouterProvider.otherwise('/vps'); }, ) + .constant( + 'DATEFNS_LOCALE', + dateFnsLocales[getDateFnsLocale(environment.userLocale)], + ) .run( /* @ngInject */ ($translate) => { let lang = $translate.use(); diff --git a/packages/manager/apps/web/package.json b/packages/manager/apps/web/package.json index 81d36f6fc18e..1b9918bc50ee 100644 --- a/packages/manager/apps/web/package.json +++ b/packages/manager/apps/web/package.json @@ -93,7 +93,7 @@ "bootstrap4": "twbs/bootstrap#v4.6.2", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", - "chartjs-plugin-datasource-prometheus": "^2.1.3", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", "clipboard": "^2.0.4", "core-js": "^3.6.5", diff --git a/packages/manager/modules/iplb/package.json b/packages/manager/modules/iplb/package.json index ad41530f2cd3..809d0d8a8481 100644 --- a/packages/manager/modules/iplb/package.json +++ b/packages/manager/modules/iplb/package.json @@ -38,7 +38,7 @@ "bootstrap": "~3.3.0", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", - "chartjs-plugin-datasource-prometheus": "^2.1.3", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", "date-fns": "^2.24.0", "moment": "^2.24.0", diff --git a/packages/manager/modules/vps/package.json b/packages/manager/modules/vps/package.json index 7e591270da7c..fc255171db60 100644 --- a/packages/manager/modules/vps/package.json +++ b/packages/manager/modules/vps/package.json @@ -47,7 +47,9 @@ "bootstrap": "~3.3.0", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", + "chartjs-plugin-datasource-prometheus": "^2.3.0", "chartjs-plugin-zoom": "^2.0.1", + "date-fns": "^2.24.0", "jsurl": "0.1.5", "moment": "^2.24.0", "oclazyload": "^1.1.0", diff --git a/packages/manager/modules/vps/src/monitoring/translations/Messages_fr_FR.json b/packages/manager/modules/vps/src/monitoring/translations/Messages_fr_FR.json index 9ba1b148036b..7d03f4086b0c 100644 --- a/packages/manager/modules/vps/src/monitoring/translations/Messages_fr_FR.json +++ b/packages/manager/modules/vps/src/monitoring/translations/Messages_fr_FR.json @@ -1,3 +1,5 @@ { - "vps_monitoring": "Monitoring" + "vps_monitoring": "Monitoring", + "vps_monitoring_loading_data": "Chargement des données ...", + "vps_monitoring_data_none": "Il n'y a aucune statistique à afficher." } diff --git a/packages/manager/modules/vps/src/monitoring/vps-monitoring.constants.js b/packages/manager/modules/vps/src/monitoring/vps-monitoring.constants.js index c0c6ad39a26d..9bb6ad1253ca 100644 --- a/packages/manager/modules/vps/src/monitoring/vps-monitoring.constants.js +++ b/packages/manager/modules/vps/src/monitoring/vps-monitoring.constants.js @@ -1,49 +1,50 @@ -export const VPS_MONITORING_BPS_OPTIONS = { - data: { - datasets: [], - }, - options: { - scales: { - x: { - grid: { - display: false, - }, - }, - y: { - id: 'y-axis-1', - type: 'linear', - display: true, - position: 'left', - min: 0, - beginAtZero: true, - title: { - display: true, - text: 'BPS', - }, - }, +export const VPS_MONITORING_CHARTS = [ + { + title: 'vps_configuration_monitoring_usage_proc', + min: 0, + max: 100, + queries: (serviceName) => [ + `sum(rec_libvirtd_domain_cpu_usage{service_name="${serviceName}"})`, + ], + yTitle: '%', + bgColor: '#59d2ef', + borderColor: '#00a2bf', + legend: { + display: false, + labels: [], }, - elements: { - line: { - fill: true, - borderColor: '#00a2bf', - borderWidth: 4, - tension: 0.5, - }, - point: { - radius: 0, - }, + }, + { + title: 'vps_configuration_monitoring_usage_ram', + min: 0, + max: 100, + queries: (serviceName) => [ + `sum((rec_libvirtd_domain_balloon_rss{service_name="${serviceName}"} / rec_libvirtd_domain_balloon_current{service_name="${serviceName}"}) * 100)`, + ], + yTitle: '%', + bgColor: '#59d2ef', + borderColor: '#00a2bf', + legend: { + display: false, + labels: [], }, - plugins: { - legend: { - display: true, - }, - tooltip: { - mode: 'index', - intersect: false, - }, + }, + { + title: 'vps_configuration_monitoring_usage_trafic', + min: 0, + queries: (serviceName) => [ + `sum(rate(rec_libvirtd_domain_net_rx_bytes{service_name="${serviceName}"}[5m]) * 8)`, + `sum(rate(rec_libvirtd_domain_net_tx_bytes{service_name="${serviceName}"}[5m]) * 8)`, + ], + yTitle: 'BPS', + bgColor: ['rgba(241,196,15, .5)', 'rgba(52,152,219, .5)'], + borderColor: ['#F1C40F', '#00a2bf'], + legend: { + display: true, + labels: ['vps_monitoring_network_netRx', 'vps_monitoring_network_netTx'], }, }, -}; +]; export const VPS_MONITORING_COLORS = [ '#F1C40F', @@ -52,55 +53,41 @@ export const VPS_MONITORING_COLORS = [ '#72C02C', ]; -export const VPS_MONITORING_PERCENT_OPTIONS = { - data: { - datasets: [], +export const VPS_MONITORING_PERIODS = [ + { + label: 'TODAY', + value: '1d', + step: '1m', + timeRange: -(new Date() - new Date().setHours(0, 0, 0, 0)), }, - options: { - scales: { - x: { - grid: { - display: false, - }, - }, - - y: { - id: 'y-axe', - type: 'linear', - min: 0, - max: 100, - beginAtZero: true, - title: { - display: true, - text: '%', - }, - }, - }, - elements: { - line: { - fill: true, - backgroundColor: '#59d2ef', - borderColor: '#00a2bf', - borderWidth: 4, - }, - point: { - radius: 0, - }, - }, - plugins: { - legend: { - display: false, - }, - tooltip: { - mode: 'index', - intersect: false, - }, - }, + { + label: 'LASTDAY', + value: '1d', + step: '1m', + timeRange: -24 * 60 * 60 * 1000, }, -}; - + { + label: 'LASTWEEK', + value: '7d', + step: '1m', + timeRange: -7 * 24 * 60 * 60 * 1000, + isDefault: true, + }, + { + label: 'LASTMONTH', + value: '30d', + step: '5m', + timeRange: -1 * 30 * 24 * 60 * 60 * 1000, + }, + { + label: 'LASTYEAR', + value: '365d', + step: '60m', + timeRange: -365 * 24 * 60 * 60 * 1000, + }, +]; export default { - VPS_MONITORING_BPS_OPTIONS, + VPS_MONITORING_CHARTS, VPS_MONITORING_COLORS, - VPS_MONITORING_PERCENT_OPTIONS, + VPS_MONITORING_PERIODS, }; diff --git a/packages/manager/modules/vps/src/monitoring/vps-monitoring.controller.js b/packages/manager/modules/vps/src/monitoring/vps-monitoring.controller.js index 06ef30bf15a3..d74a88cbd65d 100644 --- a/packages/manager/modules/vps/src/monitoring/vps-monitoring.controller.js +++ b/packages/manager/modules/vps/src/monitoring/vps-monitoring.controller.js @@ -1,44 +1,36 @@ -import find from 'lodash/find'; -import forEach from 'lodash/forEach'; -import get from 'lodash/get'; -import 'moment'; +import ChartDatasourcePrometheusPlugin from 'chartjs-plugin-datasource-prometheus'; +import { format } from 'date-fns'; import { - VPS_MONITORING_BPS_OPTIONS, - VPS_MONITORING_PERCENT_OPTIONS, + VPS_MONITORING_CHARTS, + VPS_MONITORING_PERIODS, } from './vps-monitoring.constants'; export default class { /* @ngInject */ constructor( + $http, $q, $stateParams, $translate, ChartFactory, CucCloudMessage, - VpsService, + DATEFNS_LOCALE, ) { + this.$http = $http; this.$q = $q; this.$translate = $translate; this.ChartFactory = ChartFactory; this.CucCloudMessage = CucCloudMessage; + this.DATEFNS_LOCALE = DATEFNS_LOCALE; + this.VPS_MONITORING_PERIODS = VPS_MONITORING_PERIODS; this.serviceName = $stateParams.serviceName; - this.VpsService = VpsService; this.loaders = { init: false, }; this.data = {}; - this.period = 'LASTDAY'; - this.cpuChart = new this.ChartFactory( - angular.copy(VPS_MONITORING_PERCENT_OPTIONS), - ); - this.ramChart = new this.ChartFactory( - angular.copy(VPS_MONITORING_PERCENT_OPTIONS), - ); - this.netChart = new this.ChartFactory( - angular.copy(VPS_MONITORING_BPS_OPTIONS), - ); + [this.period] = this.VPS_MONITORING_PERIODS; } $onInit() { @@ -47,71 +39,144 @@ export default class { loadMonitoring() { this.loaders.init = true; - this.reset(); - this.VpsService.getMonitoring(this.serviceName, this.period) - .then((data) => { - this.data = data; - this.constructor.generateLabels( - data.cpu.values[0].points, - data.cpu.pointInterval, - data.cpu.pointStart, - this.monitoring.labels, - ); - this.cpuChart.data.labels = this.monitoring.labels; - this.ramChart.data.labels = this.monitoring.labels; - this.netChart.data.labels = this.monitoring.labels; + return this.$http + .get(`/vps/${this.serviceName}/metricsToken`) + .then(({ data }) => { + this.charts = VPS_MONITORING_CHARTS.map((chart) => { + return { + ...chart, + config: new this.ChartFactory({ + type: 'line', + plugins: [ChartDatasourcePrometheusPlugin], + options: { + animation: { + duration: 0, + }, + responsive: true, + maintainAspectRatio: true, + scales: { + x: { + type: 'time', + position: 'bottom', + adapters: { + date: { locale: this.DATEFNS_LOCALE }, + }, + grid: { + drawBorder: true, + display: false, + }, + time: { + displayFormats: { + hour: 'Ppp', + }, + }, + }, + y: { + beginAtZero: true, + type: 'linear', + display: true, + min: chart.min ?? 0, + max: chart.max, + position: 'left', + title: { + display: true, + text: chart.yTitle, + }, + grid: { + drawBorder: false, + display: true, + }, + }, + }, + elements: { + point: { + radius: 0, + }, + }, + plugins: { + legend: { + display: chart.legend.display, + }, + tooltip: { + mode: 'index', + intersect: false, + callbacks: { + title(item) { + return format(new Date(item[0].raw.x), 'Ppp'); + }, + }, + }, + 'datasource-prometheus': { + borderWidth: 1, + fill: true, + dataSetHook: (datastets) => + datastets.map((ds, i) => ({ + ...ds, + label: this.$translate.instant(chart.legend.labels[i]), + backgroundColor: Array.isArray(chart.bgColor) + ? chart.bgColor[i] + : chart.bgColor, + borderColor: Array.isArray(chart.borderColor) + ? chart.borderColor[i] + : chart.borderColor, + })), + findInBackgroundColorMap: () => chart.bgColor, + findInBorderColorMap: () => chart.borderColor, + loadingMsg: { + message: this.$translate.instant( + 'vps_monitoring_loading_data', + ), + }, + errorMsg: { + message: this.$translate.instant( + 'vps_monitoring_data_none', + ), + }, + noDataMsg: { + message: this.$translate.instant( + 'vps_monitoring_data_none', + ), + }, + query: chart.queries(this.serviceName).map((query) => { + return async (start, end, step) => { + const url = `${ + data.endpoint + }/prometheus/api/v1/query_range?query=${query}&start=${start.toISOString()}&end=${end.toISOString()}&step=${step}`; - // CPU - this.constructor.humanizeData( - get(data, 'cpu.values[0].points'), - this.monitoring.cpu, - ); - this.cpuChart.data.datasets = [{ data: this.monitoring.cpu }]; + const headers = { + authorization: `bearer ${data.token}`, + 'content-type': 'application/x-www-form-urlencoded', + }; - // RAM - this.constructor.humanizeData( - get(data, 'ram.values[0].points'), - this.monitoring.ram, - ); - this.ramChart.data.datasets = [{ data: this.monitoring.ram }]; + return fetch(url, { headers }) + .then((response) => { + if (response.ok) { + return response.json(); + } - // NET - this.constructor.humanizeData( - get(data, 'netRx.values[0].points'), - this.monitoring.net[0], - ); - this.constructor.humanizeData( - get(data, 'netTx.values[0].points'), - this.monitoring.net[1], - ); + if (response.status === 403) { + return this.loadMonitoring(); + } - this.netChart.data.datasets = [ - { - label: this.$translate.instant('vps_monitoring_network_netRx'), - data: this.monitoring.net[0], - borderColor: 'rgba(241, 196, 15, 1)', - backgroundColor: 'rgba(241, 196, 15, .2)', - }, - { - label: this.$translate.instant('vps_monitoring_network_netTx'), - data: this.monitoring.net[1], - borderColor: 'rgba(52, 152, 219, 1)', - backgroundColor: 'rgba(52, 152, 219, .2)', - }, - ]; + return null; + }) + .then((response) => response.data) + .catch(() => {}); + }; + }), - this.noCpuData = find( - get(this.data, 'messages'), - (type) => get(type, 'params.type').indexOf('cpu') !== -1, - ); - this.noRamData = find( - get(this.data, 'messages'), - (type) => get(type, 'params.type').indexOf('mem') !== -1, - ); - this.noNetData = find( - get(this.data, 'messages'), - (type) => get(type, 'params.type').indexOf('net') !== -1, - ); + timeRange: { + type: 'relative', + // Period + start: this.period.timeRange, + end: 0, + }, + }, + }, + }, + }), + }; + }); }) .catch(() => { this.error = true; @@ -120,33 +185,4 @@ export default class { this.loaders.init = false; }); } - - reset() { - this.monitoring = { - cpu: [], - ram: [], - net: [[], []], - labels: [], - }; - } - - static humanizeData(data, tab) { - forEach(data, (element) => { - if (element && element.y) { - tab.push(element.y); - } else { - tab.push(0); - } - }); - } - - static generateLabels(data, interval, start, tab) { - const unitInterval = 'minutes'; - const pointInterval = interval.standardMinutes; - let date = moment(start); - forEach(data, () => { - tab.push(date.format('MM/DD/YY - HH:mm:ss')); - date = moment(date).add(unitInterval, pointInterval); - }); - } } diff --git a/packages/manager/modules/vps/src/monitoring/vps-monitoring.html b/packages/manager/modules/vps/src/monitoring/vps-monitoring.html index d6e4c0dead02..8da0cc38305a 100644 --- a/packages/manager/modules/vps/src/monitoring/vps-monitoring.html +++ b/packages/manager/modules/vps/src/monitoring/vps-monitoring.html @@ -7,7 +7,7 @@