[frontend] On Dashboard, display to the user that we show the activity < 180 days (#2123)

Author: RomuDeuxfois

openbas-front/src/admin/components/Dashboard.tsx

@@ -154,6 +154,7 @@ const Dashboard = () => {
       <Grid item xs={3}>
         <PaperMetric
           title={t('Scenarios')}
+          subTitle={t('(last 180 days)')}
           icon={<MovieFilterOutlined />}
           number={statistics?.scenarios_count?.global_count}
           progression={statistics?.scenarios_count?.progression_count}
@@ -162,6 +163,7 @@ const Dashboard = () => {
       <Grid item xs={3}>
         <PaperMetric
           title={t('Simulations')}
+          subTitle={t('(last 180 days)')}
           icon={<HubOutlined />}
           number={statistics?.exercises_count?.global_count}
           progression={statistics?.exercises_count?.progression_count}
@@ -170,6 +172,7 @@ const Dashboard = () => {
       <Grid item xs={3}>
         <PaperMetric
           title={t('Players')}
+          subTitle={t('(last 180 days)')}
           icon={<PersonOutlined />}
           number={statistics?.users_count?.global_count}
           progression={statistics?.users_count?.progression_count}
@@ -178,6 +181,7 @@ const Dashboard = () => {
       <Grid item xs={3}>
         <PaperMetric
           title={t('Assets')}
+          subTitle={t('(last 180 days)')}
           icon={<ComputerOutlined />}
           number={statistics?.assets_count?.global_count}
           progression={statistics?.assets_count?.progression_count}

openbas-front/src/admin/components/common/simulate/PaperMetric.tsx

@@ -10,8 +10,13 @@ import type { Theme } from '../../../../components/Theme';
 const useStyles = makeStyles((theme: Theme) => ({
   title: {
     textTransform: 'uppercase',
-    fontSize: 12,
-    fontWeight: 500,
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.h4.fontWeight,
+    color: theme.palette.text?.secondary,
+  },
+  subtitle: {
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.h4.fontWeight,
     color: theme.palette.text?.secondary,
   },
   number: {
@@ -29,13 +34,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 interface Props {
   title: string;
+  subTitle: string;
   icon: React.ReactElement;
   number?: number;
   progression?: number;
 }
 
 const PaperMetric: FunctionComponent<Props> = ({
   title,
+  subTitle,
   icon,
   number,
   progression,
@@ -47,7 +54,13 @@ const PaperMetric: FunctionComponent<Props> = ({
   return (
     <Paper variant="outlined" className={classes.container}>
       <div>
-        <div className={classes.title}>{t(title)}</div>
+        <div>
+          <span className={classes.title}>{t(title)}</span>
+          <span className={classes.subtitle}>
+            &nbsp;
+            {t(subTitle)}
+          </span>
+        </div>
         <div className={classes.number}>
           {number ?? '-'}
         </div>