feat/tapc 2358 svp dashboard mock

packages/manager-react-components/src/components/guides-header/pci/translations/Messages_fr_FR.json

@@ -30,5 +30,6 @@
   "pci_project_guides_header_deploying_a_custom_model": "Déployer un modèle personnalisé (EN)",
   "pci_project_guides_header_models_definition": "Modèles - définition (EN)",
   "pci_project_guides_header_exporting_a_tensorflow_model": "Exporter un modèle TensorFlow (EN)",
-  "pci_project_guides_header_public_cloud_guides": "Tous les guides Public Cloud"
+  "pci_project_guides_header_public_cloud_guides": "Tous les guides Public Cloud",
+  "pci_project_guides_header_savings_plans": "Comment fonctionnent les Savings Plans ?"
 }

packages/manager/apps/pci-savings-plan/package.json

@@ -30,28 +30,37 @@
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
     "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-theme-blue-jeans": "^17.1.0",
     "@ovhcloud/ods-themes": "^18.4.1",
+    "@radix-ui/react-select": "^2.0.0",
     "@tanstack/react-query": "5.51.11",
     "@tanstack/react-query-devtools": "5.29.2",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "axios": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "date-fns": "^3.6.0",
     "i18next": "^23.16.4",
     "i18next-http-backend": "^2.4.2",
     "jest-environment-jsdom": "^29.7.0",
+    "lucide-react": "^0.334.0",
     "msw": "^2.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^15.1.0",
     "react-router-dom": "^6.25.1",
+    "tailwind-merge": "^2.2.1",
+    "recharts": "^2.13.3",
     "tailwindcss": "^3.4.6",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@cucumber/cucumber": "^10.3.1",
     "@ovh-ux/manager-vite-config": "^0.9.3",
     "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react-hooks": "^8.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^2.1.9",
     "autoprefixer": "^10.4.16",

packages/manager/apps/pci-savings-plan/proxy.go

@@ -0,0 +1,59 @@
+package main
+
+import (
+	"fmt"
+	"io"
+	"log"
+	"net/http"
+)
+
+func main() {
+	http.HandleFunc("/proxy", func(w http.ResponseWriter, r *http.Request) {
+    w.Header().Set("Access-Control-Allow-Origin", "*")
+    w.Header().Set("Access-Control-Allow-Headers", "*")
+    w.Header().Set("Access-Control-Allow-Methods", "*")
+		if r.Method == http.MethodOptions {
+			return
+		}
+
+		// Récupération des paramètres projectId, year et month depuis la requête
+		projectId := r.URL.Query().Get("projectId")
+		year := r.URL.Query().Get("year")
+		month := r.URL.Query().Get("month")
+
+		// Construction de l'URL externe avec les paramètres récupérés
+		externalURL := fmt.Sprintf("https://interne.ovh.net/uservice/gateway/rating/1.0/cloud/project/%s/usage/plans?year=%s&month=%s", projectId, year, month)
+		req, err := http.NewRequest("GET", externalURL, nil)
+		if err != nil {
+			http.Error(w, "Failed to create request", http.StatusInternalServerError)
+			return
+		}
+
+		req.Header.Set("Authorization", "Basic ZXJpYy5jaWNjb3R0aS5leHQ6RXprODlqVng5YlFrV1Q=")
+		req.Header.Set("Accept", "application/json")
+
+		client := &http.Client{}
+		resp, err := client.Do(req)
+		if err != nil {
+			http.Error(w, "Failed to perform request", http.StatusInternalServerError)
+			return
+		}
+		defer resp.Body.Close()
+
+		for key, values := range resp.Header {
+			for _, value := range values {
+				w.Header().Add(key, value)
+			}
+		}
+
+		w.WriteHeader(resp.StatusCode)
+
+		_, err = io.Copy(w, resp.Body)
+		if err != nil {
+			log.Println("Failed to copy response body:", err)
+		}
+	})
+
+	log.Println("Starting proxy server on :8080")
+	log.Fatal(http.ListenAndServe(":8080", nil))
+}

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_de_DE.json

@@ -0,0 +1,32 @@
+{
+  "dashboard_tabs": "Savings Plan Dashboard",
+  "listing_tabs": "Meine Savings-Pläne",
+  "dashboard_description": "Das Dashboard zeigt die Details Ihrer Savings Plan für den angegebenen Zeitraum an, einschließlich Verwendung, Abdeckung und Liste Ihrer Savings Plans",
+  "dashboard_kpis_title": "KPIs",
+  "dashboard_table_title": "Savings Plan - Verbrauchsdetails",
+  "dashboard_columns_start": "Anfang",
+  "dashboard_columns_end": "Ende",
+  "dashboard_columns_consumption_size": "Verwendung",
+  "dashboard_columns_cumul_plan_size": "Gesamtabdeckung",
+  "dashboard_kpis_active_plans_name": "Anzahl der aktiven Savings Plans",
+  "dashboard_kpis_active_plans_tooltip": "Gesamtanzahl der aktiven Savings-Pläne für die ausgewählte Ressource in der angegebenen Periode",
+  "dashboard_kpis_usage_percent_name": "% Savings-Pläne verwenden",
+  "dashboard_kpis_usage_percent_tooltip": "Durchschnittliche Auslastung der Savings Plans (über den ausgewählten Zeitraum für die ausgewählte Ressource)",
+  "dashboard_kpis_coverage_percent_name": "% Abdeckung der Savings Plans",
+  "dashboard_kpis_coverage_percent_tooltip": "Durchschnittliche Abdeckung Ihrer Savings Plans (über den ausgewählten Zeitraum für die ausgewählte Ressource)",
+  "dashboard_kpis_non_discounted_name": "Nicht gestufter Rechnungsbetrag",
+  "dashboard_kpis_non_discounted_tooltip": "Rechnungsbetrag, der die Savings Plan-Konfigurationen übersteigt (in der ausgewählten Periode für die ausgewählte Ressource)",
+  "dashboard_kpis_saved_amount_name": "Erreichte Einsparungen",
+  "dashboard_kpis_saved_amount_name_tooltip": "Gesamte Einsparungen (über den ausgewählten Zeitraum für die ausgewählte Ressource)",
+  "dashboard_kpis_not_available": "Nicht verfügbar",
+  "dashboard_select_label_service": "Dienst",
+  "dashboard_select_label_period": "Zeitraum",
+  "dashboard_select_no_service": "Keine Dienste",
+  "dashboard_banner_no_savings_plan": "Sie haben keinen aktiven Savings Plan für diesen Monat. Sie können Ihren bisherigen Verbrauch einsehen, indem Sie den Zeitraum ändern.",
+  "dashboard_graph_title": "Nutzung und Abdeckung der Savings Plans",
+  "dashboard_graph_y_axis_label": "Anzahl der Instanzen",
+  "dashboard_graph_y_axis_label_vcpu": "Anzahl der vCPU(s)",
+  "dashboard_graph_x_axis_label": "Tag",
+  "dashboard_graph_included": "In den Savings Plans inklusive",
+  "dashboard_graph_excluded": "Von den Savings Plans ausgeschlossen"
+}

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_en_GB.json

@@ -0,0 +1,32 @@
+{
+  "dashboard_tabs": "Savings Plan Dashboard",
+  "listing_tabs": "My Savings Plans",
+  "dashboard_description": "The Dashboard shows details of your Savings Plans for the specified period, including usage, coverage, and list of your Savings Plans",
+  "dashboard_kpis_title": "Kpis",
+  "dashboard_table_title": "Savings Plan Usage Detail",
+  "dashboard_columns_start": "Start",
+  "dashboard_columns_end": "End",
+  "dashboard_columns_consumption_size": "Usage",
+  "dashboard_columns_cumul_plan_size": "Total coverage",
+  "dashboard_kpis_active_plans_name": "Number of active Savings Plans",
+  "dashboard_kpis_active_plans_tooltip": "The total number of active Savings Plans in the given time period for the selected resource",
+  "dashboard_kpis_usage_percent_name": "% Savings Plan Utilization",
+  "dashboard_kpis_usage_percent_tooltip": "Average usage of your Savings Plans (over the selected time period for the selected resource)",
+  "dashboard_kpis_coverage_percent_name": "% Savings Plan Coverage",
+  "dashboard_kpis_coverage_percent_tooltip": "Average coverage of your Savings Plans (over the selected period for the selected resource)",
+  "dashboard_kpis_non_discounted_name": "Unremitted invoice amount",
+  "dashboard_kpis_non_discounted_tooltip": "Invoice amount exceeding your Savings Plans configurations (in the selected time period for the selected resource)",
+  "dashboard_kpis_saved_amount_name": "Savings realized",
+  "dashboard_kpis_saved_amount_name_tooltip": "Total savings (over the selected time period for the selected resource)",
+  "dashboard_kpis_not_available": "Not available ",
+  "dashboard_select_label_service": "Service",
+  "dashboard_select_label_period": "Period",
+  "dashboard_select_no_service": "No service",
+  "dashboard_banner_no_savings_plan": "You do not have any active Savings Plans for this month. You can view your past consumption by changing the period.",
+  "dashboard_graph_title": "Use and coverage of Savings Plans",
+  "dashboard_graph_y_axis_label": "Number of instances",
+  "dashboard_graph_y_axis_label_vcpu": "Number of vCPUs",
+  "dashboard_graph_x_axis_label": "Day",
+  "dashboard_graph_included": "Included in Savings Plans",
+  "dashboard_graph_excluded": "Excluded from Savings Plans"
+}

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_es_ES.json

@@ -0,0 +1,32 @@
+{
+  "dashboard_tabs": "Panel de control de Savings Plan",
+  "listing_tabs": "Mis Savings Planes",
+  "dashboard_description": "El panel de control muestra los detalles de los planes de ahorro para el período especificado, incluido el uso, la cobertura y la lista de planes de ahorro",
+  "dashboard_kpis_title": "Kpis",
+  "dashboard_table_title": "Detalle de consumo de los Savings Planes",
+  "dashboard_columns_start": "Inicio",
+  "dashboard_columns_end": "Fin",
+  "dashboard_columns_consumption_size": "Uso",
+  "dashboard_columns_cumul_plan_size": "Cobertura total",
+  "dashboard_kpis_active_plans_name": "Número de planes de ahorro activos",
+  "dashboard_kpis_active_plans_tooltip": "Número total de planes de ahorro activos durante el período de tiempo especificado para el recurso seleccionado",
+  "dashboard_kpis_usage_percent_name": "% uso de Savings Planes",
+  "dashboard_kpis_usage_percent_tooltip": "Uso medio de sus planes de ahorro (durante el período seleccionado para el recurso seleccionado)",
+  "dashboard_kpis_coverage_percent_name": "% Cobertura de Savings Planes",
+  "dashboard_kpis_coverage_percent_tooltip": "Cobertura media de sus planes de ahorro (durante el período seleccionado para el recurso seleccionado)",
+  "dashboard_kpis_non_discounted_name": "Importe de factura no entregado",
+  "dashboard_kpis_non_discounted_tooltip": "Importe de la factura que supera las configuraciones de Savings Planes (durante el período seleccionado para el recurso seleccionado)",
+  "dashboard_kpis_saved_amount_name": "Ahorro",
+  "dashboard_kpis_saved_amount_name_tooltip": "Ahorro total (en el período seleccionado para el recurso seleccionado)",
+  "dashboard_kpis_not_available": "No disponible",
+  "dashboard_select_label_service": "Servicio",
+  "dashboard_select_label_period": "Período",
+  "dashboard_select_no_service": "Ningún servicio",
+  "dashboard_banner_no_savings_plan": "No tiene ningún Savings Plan activo para este mes, puede consultar su consumo anterior cambiando el período.",
+  "dashboard_graph_title": "Uso y cobertura de los Savings Planes",
+  "dashboard_graph_y_axis_label": "Número de instancias",
+  "dashboard_graph_y_axis_label_vcpu": "Número de vCPU(s)",
+  "dashboard_graph_x_axis_label": "Día",
+  "dashboard_graph_included": "Incluido en los planes de ahorro",
+  "dashboard_graph_excluded": "Excluido de los Savings Planes"
+}

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_CA.json

@@ -0,0 +1,41 @@
+{
+  "dashboard_tabs": "Tableau de Bord des Savings Plan",
+  "listing_tabs": "Mes Savings Plans",
+  "dashboard_description": "Le Tableau de bord présente les détails de vos Savings Plan pour la période spécifiée, y compris l'utilisation, la couverture et la liste de vos Savings Plans",
+  "dashboard_kpis_title": "Kpis",
+  "dashboard_table_title": "Détail de consommation des Savings Plans",
+  "dashboard_columns_start": "Début",
+  "dashboard_columns_end": "Fin",
+  "dashboard_columns_consumption_size": "Utilisation",
+  "dashboard_columns_cumul_plan_size": "Couverture totale",
+
+  "dashboard_kpis_active_plans_name": "Nombre de Savings Plans actifs",
+  "dashboard_kpis_active_plans_tooltip": "Nombre total de vos Savings plans actifs sur la période donnée pour la ressource sélectionnée",
+
+  "dashboard_kpis_usage_percent_name": "% utilisation des Savings Plans",
+  "dashboard_kpis_usage_percent_tooltip": "Moyenne d'utilisation de vos Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
+
+  "dashboard_kpis_coverage_percent_name": "% Couverture des Savings Plans",
+  "dashboard_kpis_coverage_percent_tooltip": "Moyenne de couverture de vos Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
+
+  "dashboard_kpis_non_discounted_name": "Montant de facture non remisé",
+  "dashboard_kpis_non_discounted_tooltip": "Montant de la facture dépassant vos configurations Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
+  "dashboard_kpis_saved_amount_name": "Économies réalisées",
+  "dashboard_kpis_saved_amount_name_tooltip": "Total des économies réalisées (sur la période sélectionnée pour la ressource sélectionnée)",
+
+  "dashboard_kpis_not_available": "Non disponible",
+
+  "dashboard_select_label_service": "Service",
+  "dashboard_select_label_period": "Période",
+
+  "dashboard_select_no_service": "Aucun service",
+
+  "dashboard_banner_no_savings_plan": "Vous n'avez pas de Savings Plan actif pour ce mois, vous pouvez consulter vos consommations passées en changeant la période.",
+
+  "dashboard_graph_title": "Utilisation et couverture des Savings Plans",
+  "dashboard_graph_y_axis_label": "Nombre d'instance(s)",
+  "dashboard_graph_y_axis_label_vcpu": "Nombre de vCPU(s)",
+  "dashboard_graph_x_axis_label": "Jour",
+  "dashboard_graph_included": "Inclus dans les Savings Plans",
+  "dashboard_graph_excluded": "Exclus des Savings Plans"
+}

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_FR.json

@@ -0,0 +1,41 @@
+{
+  "dashboard_tabs": "Tableau de Bord des Savings Plan",
+  "listing_tabs": "Mes Savings Plans",
+  "dashboard_description": "Le Tableau de bord présente les détails de vos Savings Plan pour la période spécifiée, y compris l'utilisation, la couverture et la liste de vos Savings Plans",
+  "dashboard_kpis_title": "Kpis",
+  "dashboard_table_title": "Détail de consommation des Savings Plans",
+  "dashboard_columns_start": "Début",
+  "dashboard_columns_end": "Fin",
+  "dashboard_columns_consumption_size": "Utilisation",
+  "dashboard_columns_cumul_plan_size": "Couverture totale",
+
+  "dashboard_kpis_active_plans_name": "Nombre de Savings Plans actifs",
+  "dashboard_kpis_active_plans_tooltip": "Nombre total de vos Savings plans actifs sur la période donnée pour la ressource sélectionnée",
+
+  "dashboard_kpis_usage_percent_name": "% utilisation des Savings Plans",
+  "dashboard_kpis_usage_percent_tooltip": "Moyenne d'utilisation de vos Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
+
+  "dashboard_kpis_coverage_percent_name": "% Couverture des Savings Plans",
+  "dashboard_kpis_coverage_percent_tooltip": "Moyenne de couverture de vos Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
+
+  "dashboard_kpis_non_discounted_name": "Montant de facture non remisé",
+  "dashboard_kpis_non_discounted_tooltip": "Montant de la facture dépassant vos configurations Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
+  "dashboard_kpis_saved_amount_name": "Économies réalisées",
+  "dashboard_kpis_saved_amount_name_tooltip": "Total des économies réalisées (sur la période sélectionnée pour la ressource sélectionnée)",
+
+  "dashboard_kpis_not_available": "Non disponible",
+
+  "dashboard_select_label_service": "Service",
+  "dashboard_select_label_period": "Période",
+
+  "dashboard_select_no_service": "Aucun service",
+
+  "dashboard_banner_no_savings_plan": "Vous n'avez pas de Savings Plan actif pour ce mois, vous pouvez consulter vos consommations passées en changeant la période.",
+
+  "dashboard_graph_title": "Utilisation et couverture des Savings Plans",
+  "dashboard_graph_y_axis_label": "Nombre d'instance(s)",
+  "dashboard_graph_y_axis_label_vcpu": "Nombre de vCPU(s)",
+  "dashboard_graph_x_axis_label": "Jour",
+  "dashboard_graph_included": "Inclus dans les Savings Plans",
+  "dashboard_graph_excluded": "Exclus des Savings Plans"
+}

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_it_IT.json

@@ -0,0 +1,32 @@
+{
+  "dashboard_tabs": "Dashboard di Savings Plan",
+  "listing_tabs": "I miei Savings Plan",
+  "dashboard_description": "Il pannello di controllo visualizza i dettagli dei Savings Plan per il periodo specificato, inclusi l'utilizzo, la copertura e l'elenco dei Savings Plan",
+  "dashboard_kpis_title": "Kopi",
+  "dashboard_table_title": "Dettagli di consumo dei Savings Plans",
+  "dashboard_columns_start": "Inizio",
+  "dashboard_columns_end": "Fine",
+  "dashboard_columns_consumption_size": "Utilizzo",
+  "dashboard_columns_cumul_plan_size": "Copertura totale",
+  "dashboard_kpis_active_plans_name": "Numero di Savings Plans attivi",
+  "dashboard_kpis_active_plans_tooltip": "Numero totale dei piani di Savings attivi nel periodo specificato per la risorsa selezionata",
+  "dashboard_kpis_usage_percent_name": "% utilizzo dei Savings Plans",
+  "dashboard_kpis_usage_percent_tooltip": "Media di utilizzo dei Savings Plans (nel periodo selezionato per la risorsa selezionata)",
+  "dashboard_kpis_coverage_percent_name": "% Copertura dei Savings Plans",
+  "dashboard_kpis_coverage_percent_tooltip": "Media di copertura dei tuoi Savings Plans (nel periodo selezionato per la risorsa selezionata)",
+  "dashboard_kpis_non_discounted_name": "Importo della fattura non rimborsato",
+  "dashboard_kpis_non_discounted_tooltip": "Importo della fattura che supera le configurazioni di Savings Plans (nel periodo selezionato per la risorsa selezionata)",
+  "dashboard_kpis_saved_amount_name": "Risparmio realizzato",
+  "dashboard_kpis_saved_amount_name_tooltip": "Totale risparmi realizzati (nel periodo selezionato per la risorsa selezionata)",
+  "dashboard_kpis_not_available": "Non disponibile",
+  "dashboard_select_label_service": "Servizio",
+  "dashboard_select_label_period": "Periodo",
+  "dashboard_select_no_service": "Nessun servizio",
+  "dashboard_banner_no_savings_plan": "Non hai un Savings Plan attivo per questo mese, puoi consultare i tuoi consumi passati modificando il periodo.",
+  "dashboard_graph_title": "Utilizzo e copertura dei Savings Plans",
+  "dashboard_graph_y_axis_label": "Numero di istanze",
+  "dashboard_graph_y_axis_label_vcpu": "Numero di vCPU",
+  "dashboard_graph_x_axis_label": "Giorno",
+  "dashboard_graph_included": "Incluso nei Savings Plans",
+  "dashboard_graph_excluded": "Esclusi i Savings Plans"
+}