feat(pci.savings-plan): improve dashbard ui

ref: TAPC-2358 Signed-off-by: Eric Ciccotti <[email protected]>
ovh · Jan 23, 2025 · cdbb093 · cdbb093
1 parent ac26224
commit cdbb093
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 65 deletions.
diff --git 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
@@ -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/...pps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx b/...pps/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 (
     <div>
-      <Title className="text-xl">{t('dashboard_table_title')}</Title>
+      <OdsText preset="heading-4" className="my-8">
+        {t('dashboard_table_title')}
+      </OdsText>
       <Datagrid columns={columns} items={items} totalItems={items.length} />
     </div>
   );

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
@@ -9,13 +9,15 @@ import { getInstancesInformation } from '@/utils/savingsPlan';
 import { InstanceTechnicalName, ResourceType } from '@/types/CreatePlan.type';
 import useTechnicalInfo from '@/hooks/useCatalogCommercial';
 
-const SelectList = <T extends string>({
+const SelectWithLabel = <T extends string>({
+  label,
   options,
   placeholder,
   name,
   onChange,
   value,
 }: {
+  label: string;
   options: T[];
   placeholder: string;
   name: string;
@@ -28,21 +30,29 @@ const SelectList = <T extends string>({
     onChange(event.target.value as T);
   };
 
-  return options.length > 0 ? (
-    <OdsSelect
-      placeholder={placeholder}
-      name={name}
-      className="w-64"
-      onOdsChange={onChangeEvent}
-      value={value}
-    >
-      {options.map((option) => (
-        <option key={option} value={option}>
-          {option}
-        </option>
-      ))}
-    </OdsSelect>
-  ) : null;
+  return (
+    <div className="flex flex-col w-64">
+      <label htmlFor={name} className="mb-1 text-sm font-medium text-[#4D5592]">
+        {label}
+      </label>
+      {options.length > 0 ? (
+        <OdsSelect
+          placeholder={placeholder}
+          name={name}
+          id={name}
+          className="w-full"
+          onOdsChange={onChangeEvent}
+          value={value}
+        >
+          {options.map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </OdsSelect>
+      ) : null}
+    </div>
+  );
 };
 
 const Filters = () => {
@@ -63,36 +73,40 @@ const Filters = () => {
   );
 
   return (
-    <div className="flex flex-row gap-2">
-      <SelectList
+    <div className="flex flex-row gap-4">
+      <SelectWithLabel
+        label={t('dashboard_select_label_resource')}
         value={resource}
         onChange={(value) => {
           setResource(value);
           setFlavor('');
         }}
         options={[ResourceType.instance, ResourceType.rancher]}
-        placeholder="Select a resource"
+        placeholder={t('dashboard_select_placeholder_resource')}
         name="resource"
       />
-      <SelectList
+      <SelectWithLabel
+        label={t('dashboard_select_label_flavor')}
         options={activeInformations.map((instance) => instance.label)}
-        placeholder="Gamme"
+        placeholder={t('dashboard_select_placeholder_flavor')}
         name="flavor"
         value={flavor}
         key="flavor"
         onChange={(value) => setFlavor(value)}
       />
-      <SelectList
+      <SelectWithLabel
+        label={t('dashboard_select_label_model')}
         options={['fr', 'it', 'de']}
-        placeholder="Select a country"
-        name="country"
+        placeholder={t('dashboard_select_placeholder_model')}
+        name="model"
         value="fr"
         onChange={(value) => console.log(value)}
       />
-      <SelectList
+      <SelectWithLabel
+        label={t('dashboard_select_label_period')}
         options={['fr', 'it', 'de']}
-        placeholder="Select a country"
-        name="country"
+        placeholder={t('dashboard_select_placeholder_period')}
+        name="period"
         value="fr"
         onChange={(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
@@ -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 }) => (
-  <div className="flex flex-col gap-2">
-    <OdsText preset="heading-5" className="max-w-lg">
-      {title}
-    </OdsText>
-    <OdsText preset="heading-6">{value}</OdsText>
-  </div>
-);
+const Kpi = ({
+  title,
+  value,
+  tooltip,
+  index,
+}: {
+  title: string;
+  value: number;
+  tooltip: string;
+  index: number;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 w-[200px]">
+      <OdsText preset="heading-5" className="max-w-lg">
+        {title}{' '}
+        <OdsIcon
+          className="my-auto"
+          aria-labelledby="tooltip-default"
+          name="circle-question"
+          id={`trigger-${index}`}
+        />
+        <OdsTooltip
+          triggerId={`trigger-${index}`}
+          id={`tooltip-default-${index}`}
+        >
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>
+            <span>{tooltip}</span>
+          </OdsText>
+        </OdsTooltip>
+      </OdsText>
+      <span className="text-[20px] font-bold mb-0 text-[#0050D7]">{value}</span>
+    </div>
+  );
+};
 
 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 (
-    <div className="flex flex-row gap-4">
-      {data.map((item) => (
-        <Kpi key={item.title} title={item.title} value={item.value} />
+    <div className="flex flex-row gap-4 items-center mt-7">
+      {data.map((item, index) => (
+        <React.Fragment key={item.title}>
+          <div key={item.title}>
+            <Kpi
+              title={item.title}
+              value={item.value}
+              tooltip={item.tooltip}
+              index={index}
+            />
+            {index < data.length - 1 && (
+              <div className="h-16 w-px bg-gray-300 mx-2"></div>
+            )}
+          </div>
+        </React.Fragment>
       ))}
     </div>
   );

diff --git a/...es/manager/apps/pci-savings-plan/src/components/Dashboard/TabsDashboard/TabsDashboard.tsx b/...es/manager/apps/pci-savings-plan/src/components/Dashboard/TabsDashboard/TabsDashboard.tsx
@@ -15,7 +15,7 @@ const TabsDashboard: React.FC<{ projectId: string }> = ({ projectId }) => {
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <OdsTabs className="my-tabs" id="css-tabs">
+      <OdsTabs className="my-tabs mb-8" id="css-tabs">
         <OdsTab
           className="my-tab"
           id="css-tab-1"

diff --git a/packages/manager/apps/pci-savings-plan/src/pages/dashboard/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/dashboard/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { OdsSelect } from '@ovhcloud/ods-components/react';
+import { OdsSelect, OdsText } from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
 import {
   OdsSelectChangeEventDetail,
@@ -45,6 +45,9 @@ const Dashboard: React.FC = () => {
   return (
     <>
       <Title>{t('dashboard')}</Title>
+      <OdsText preset="span" className="inline-block mb-4 w-[750px]">
+        {t('dashboard_description')}
+      </OdsText>
       {projectId && <TabsDashboard projectId={projectId} />}
 
       <Filters />

diff --git 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"
 
-[email protected]:
-  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==
-
 [email protected]:
   version "1.49.1"
   resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.1.tgz#32c62f046e950f586ff9e35ed490a424f2248015"
   integrity sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==
 
-[email protected]:
-  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"
-
 [email protected]:
   version "1.49.1"
   resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.1.tgz#830266dbca3008022afa7b4783565db9944ded7c"