feat(web.hosting): add chart for hosting database

[ghyenne]

Description

Ticket Reference: #MANAGER-17885

Additional Information

[StephaneRavet]

🟠 Assessment: Review of PR #17706 – “feat(web.hosting): add chart for hosting database”

---

✅ Strengths

✔️ Clean architecture – Good separation into components: constants, service, controller, template.
✔️ Well-designed chart integration using ChartFactory and chartjs-plugin-datasource-prometheus for optimized performance.
✔️ Data normalization hook (dataSetHook) ensures safety for null values from Prometheus.
✔️ Typed internationalization – Proper use of $translate.instant with integration of i18n labels.
✔️ UX performance – Chart animation disabled (duration: 0), smooth zooming, responsive behavior.

---

⚠️ Suggested Improvements

1. Network error handling

• 📛 The .then(response => response.json()...) chain lacks error handling for JSON or failed network calls.

2. Controller responsibility

• ⚠️ The controller contains too much PromQL logic and formatting. Suggested improvements:
  • Move PromQL query and URL construction to a dedicated service.
  • Feed ChartFactory with a simple array of { timestamp, value } or datasets, keeping the controller focused on orchestration.

3. Chart update on period/aggregateMode changes

• ⚠️ Currently, initDatabaseChart() is only called once during initialization.
  → If the user changes period or aggregateMode, the chart does not update.
  🔁 Add $watch listeners to these variables to re-trigger initDatabaseChart() dynamically.

---

ℹ️ Secondary Remarks

• Code comments: Consider adding TODO or JSDoc to document what DatabaseStatistics.getDatabaseMetricsToken() returns.

---

🛠️ Refactor Example for PromQL Request

async initDatabaseChart() {
  try {
    this.loadingDatabaseGraph = true;
    const { endpoint, token } = await this.DatabaseStatistics.getDatabaseMetricsToken(...);
    const query =
      this.aggregateMode.label === 'ALL'
        ? `sum(sharedsql_queries_allowed_denied{database="${dbName}"})`
        : `sharedsql_queries_allowed_denied{database="${dbName}"}`;
    const url = `${endpoint}/prometheus/api/v1/query_range?query=${encodeURIComponent(query)}...`;
    const response = await fetch(url, {
      headers: { authorization: `bearer ${token}`, 'content-type': 'application/x-www-form-urlencoded' },
    });
    if (!response.ok) throw new Error(response.statusText);
    const json = await response.json();
    // Add a safety check for json.data here
    const datasets = json.data;
    this.renderChart(datasets);
  } catch (error) {
    this.$translate.instant('hosting_tab_STATISTICS_none');
    // Show user-friendly error message
  } finally {
    this.loadingDatabaseGraph = false;
  }
}

[ghyenne]

For the recommendation of #17706 (comment).
In fact i made same that another component in same page for to be consistent. There is a refresh, as opposed to what the AI says (data-ng-change).