From cdbb093a52ba78dd8d95c5c94f23b62f9de45acc Mon Sep 17 00:00:00 2001 From: Eric Ciccotti Date: Thu, 23 Jan 2025 16:46:31 +0100 Subject: [PATCH] feat(pci.savings-plan): improve dashbard ui ref: TAPC-2358 Signed-off-by: Eric Ciccotti --- .../apps/pci-savings-plan/package.json | 1 + .../dashboard/Messages_fr_FR.json | 14 +++- .../ConsumptionDatagrid.tsx | 5 +- .../components/Dashboard/Filters/Filters.tsx | 68 +++++++++++-------- .../src/components/Dashboard/Kpis/Kpis.tsx | 67 ++++++++++++++---- .../Dashboard/TabsDashboard/TabsDashboard.tsx | 2 +- .../src/pages/dashboard/index.tsx | 5 +- yarn.lock | 21 ------ 8 files changed, 118 insertions(+), 65 deletions(-) diff --git a/packages/manager/apps/pci-savings-plan/package.json b/packages/manager/apps/pci-savings-plan/package.json index 705bec6f6ec3..c7f3c7e76020 100644 --- a/packages/manager/apps/pci-savings-plan/package.json +++ b/packages/manager/apps/pci-savings-plan/package.json @@ -29,6 +29,7 @@ "@ovh-ux/manager-react-shell-client": "^0.8.5", "@ovh-ux/manager-tailwind-config": "^0.2.1", "@ovh-ux/request-tagger": "^0.4.0", + "@ovhcloud/ods-common-theming": "17.2.2", "@ovhcloud/ods-components": "^18.4.1", "@ovhcloud/ods-themes": "^18.4.1", "@tanstack/react-query": "5.51.11", diff --git a/packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_FR.json index 3a7c199d5d19..283f57873984 100644 --- a/packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_FR.json +++ b/packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_FR.json @@ -1,7 +1,7 @@ { "dashboard_tabs": "Tableau de Bord des Savings Plan", "listing_tabs": "Liste des Savings Plans", - "dashboard": "Tableau de Bord", + "dashboard": "Tableau de Bord des Savings Plan", "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", @@ -23,5 +23,15 @@ "dashboard_kpis_savings_tooltip": "Total des économies réalisées (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_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_select_label_resource": "Service", + "dashboard_select_label_flavor": "Gamme d'instance", + "dashboard_select_label_model": "Modèle", + "dashboard_select_label_period": "Période", + + "dashboard_select_placeholder_resource": "Service", + "dashboard_select_placeholder_flavor": "Gamme d'instance", + "dashboard_select_placeholder_model": "Modèle", + "dashboard_select_placeholder_period": "Période" } diff --git a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx index 6b42e2639bc0..1ab00eadf1fe 100644 --- a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx +++ b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx @@ -5,6 +5,7 @@ import { } from '@ovh-ux/manager-react-components'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import { OdsText } from '@ovhcloud/ods-components/react'; import { savingsPlanConsumptionMocked } from '@/_mock_/savingsPlanConsumption'; const ConsumptionDatagrid = () => { @@ -39,7 +40,9 @@ const ConsumptionDatagrid = () => { const items = savingsPlanConsumptionMocked.flavors[0].periods; return (
- {t('dashboard_table_title')} + + {t('dashboard_table_title')} +
); diff --git a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Filters/Filters.tsx b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Filters/Filters.tsx index 6a02932bcccf..d6dd323c8aed 100644 --- a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Filters/Filters.tsx +++ b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Filters/Filters.tsx @@ -9,13 +9,15 @@ import { getInstancesInformation } from '@/utils/savingsPlan'; import { InstanceTechnicalName, ResourceType } from '@/types/CreatePlan.type'; import useTechnicalInfo from '@/hooks/useCatalogCommercial'; -const SelectList = ({ +const SelectWithLabel = ({ + label, options, placeholder, name, onChange, value, }: { + label: string; options: T[]; placeholder: string; name: string; @@ -28,21 +30,29 @@ const SelectList = ({ onChange(event.target.value as T); }; - return options.length > 0 ? ( - - {options.map((option) => ( - - ))} - - ) : null; + return ( +
+ + {options.length > 0 ? ( + + {options.map((option) => ( + + ))} + + ) : null} +
+ ); }; const Filters = () => { @@ -63,36 +73,40 @@ const Filters = () => { ); return ( -
- + { setResource(value); setFlavor(''); }} options={[ResourceType.instance, ResourceType.rancher]} - placeholder="Select a resource" + placeholder={t('dashboard_select_placeholder_resource')} name="resource" /> - instance.label)} - placeholder="Gamme" + placeholder={t('dashboard_select_placeholder_flavor')} name="flavor" value={flavor} key="flavor" onChange={(value) => setFlavor(value)} /> - console.log(value)} /> - console.log(value)} /> diff --git a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Kpis/Kpis.tsx b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Kpis/Kpis.tsx index 817a5dcb5a32..d6490107cf6d 100644 --- a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Kpis/Kpis.tsx +++ b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/Kpis/Kpis.tsx @@ -1,37 +1,80 @@ -import { OdsText } from '@ovhcloud/ods-components/react'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components'; +import { OdsText, OdsTooltip, OdsIcon } from '@ovhcloud/ods-components/react'; import React from 'react'; import { useTranslation } from 'react-i18next'; -const Kpi = ({ title, value }: { title: string; value: number }) => ( -
- - {title} - - {value} -
-); +const Kpi = ({ + title, + value, + tooltip, + index, +}: { + title: string; + value: number; + tooltip: string; + index: number; +}) => { + return ( +
+ + {title}{' '} + + + + {tooltip} + + + + {value} +
+ ); +}; const Kpis = () => { const { t } = useTranslation('dashboard'); const data = [ { title: t('dashboard_kpis_active_plans_name'), + tooltip: t('dashboard_kpis_active_plans_tooltip'), value: 5, }, { title: t('dashboard_kpis_usage_percent_name'), + tooltip: t('dashboard_kpis_usage_percent_tooltip'), value: 12, }, { title: t('dashboard_kpis_coverage_percent_name'), + tooltip: t('dashboard_kpis_coverage_percent_tooltip'), value: 5, }, ]; return ( -
- {data.map((item) => ( - +
+ {data.map((item, index) => ( + +
+ + {index < data.length - 1 && ( +
+ )} +
+ ))}
); diff --git a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/TabsDashboard/TabsDashboard.tsx b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/TabsDashboard/TabsDashboard.tsx index 074de312ca92..b3acdd039a4b 100644 --- a/packages/manager/apps/pci-savings-plan/src/components/Dashboard/TabsDashboard/TabsDashboard.tsx +++ b/packages/manager/apps/pci-savings-plan/src/components/Dashboard/TabsDashboard/TabsDashboard.tsx @@ -15,7 +15,7 @@ const TabsDashboard: React.FC<{ projectId: string }> = ({ projectId }) => { return ( Loading...
}> - + { return ( <> {t('dashboard')} + + {t('dashboard_description')} + {projectId && } diff --git a/yarn.lock b/yarn.lock index 5f6dfae4a8a8..682a2da98736 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6038,13 +6038,6 @@ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31" integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA== -"@playwright/test@^1.34.3", "@playwright/test@^1.41.2": - version "1.43.0" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.43.0.tgz#5d90f247b26d404dd5d81c60f9c7c5e5159eb664" - integrity sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q== - dependencies: - playwright "1.43.0" - "@playwright/test@^1.49.1": version "1.49.1" resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.49.1.tgz#55fa360658b3187bfb6371e2f8a64f50ef80c827" @@ -22543,25 +22536,11 @@ pkg-types@^1.0.3: mlly "^1.2.0" pathe "^1.1.0" -playwright-core@1.43.0: - version "1.43.0" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.0.tgz#d8079acb653abebb0b63062e432479647a4e1271" - integrity sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w== - playwright-core@1.49.1: version "1.49.1" resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.1.tgz#32c62f046e950f586ff9e35ed490a424f2248015" integrity sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg== -playwright@1.43.0: - version "1.43.0" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.43.0.tgz#2c2efd4ee2a25defd8c24c98ccb342bdd9d435f5" - integrity sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ== - dependencies: - playwright-core "1.43.0" - optionalDependencies: - fsevents "2.3.2" - playwright@1.49.1: version "1.49.1" resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.1.tgz#830266dbca3008022afa7b4783565db9944ded7c"