diff --git a/src/page/HomePage.test.tsx b/src/page/HomePage.test.tsx index aa2234d9c..fd89368ea 100644 --- a/src/page/HomePage.test.tsx +++ b/src/page/HomePage.test.tsx @@ -33,5 +33,5 @@ test('shows usage', async () => { await assertBigValue('Total checks', '1'); await assertBigValue('Total active series', '81'); await assertBigValue('Checks executions per month', '43,800'); - await assertBigValue('Logs', '0.04GB'); + await assertBigValue('Logs per month', '0.04GB'); }); diff --git a/src/page/HomePage.tsx b/src/page/HomePage.tsx index dedbd9cd9..eda1cbe2a 100644 --- a/src/page/HomePage.tsx +++ b/src/page/HomePage.tsx @@ -67,7 +67,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, usageGrid: css` display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, auto)); + grid-template-columns: repeat(auto-fit, minmax(160px, auto)); grid-gap: ${theme.spacing(1)}; `, usageHeader: css` @@ -167,14 +167,14 @@ const HomePage = () => { -

Your Grafana Cloud synthetic monitoring usage

+

Your Grafana Cloud Synthetic Monitoring usage

{ textMode={BigValueTextMode.ValueAndName} colorMode={BigValueColorMode.Value} graphMode={BigValueGraphMode.Area} - height={100} - width={150} + height={80} + width={115} value={{ numeric: usage?.activeSeries ?? 0, color: config.theme2.colors.text.primary, @@ -201,8 +201,8 @@ const HomePage = () => { textMode={BigValueTextMode.ValueAndName} colorMode={BigValueColorMode.Value} graphMode={BigValueGraphMode.Area} - height={100} - width={225} + height={80} + width={175} value={{ numeric: usage?.checksPerMonth ?? 0, color: config.theme2.colors.text.primary, @@ -215,12 +215,12 @@ const HomePage = () => { textMode={BigValueTextMode.ValueAndName} colorMode={BigValueColorMode.Value} graphMode={BigValueGraphMode.Area} - height={100} - width={200} + height={80} + width={150} value={{ numeric: usage?.logsGbPerMonth ?? 0, color: config.theme2.colors.text.primary, - title: 'Logs', + title: 'Logs per month', text: `${usage?.logsGbPerMonth.toFixed(2) ?? 0}GB`, }} />