From 66c0322e7e0a51ff6be5d49001533b5cdc3ac1de Mon Sep 17 00:00:00 2001 From: Kat Yang <69819079+yangkb09@users.noreply.github.com> Date: Mon, 2 Dec 2024 10:08:54 -0500 Subject: [PATCH] Style: Update homepage styles (#96860) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: increase size of the ‘let’s start’ section; decrease number of filter lines in the trail cards; remove DS line; change select metric to all metrics * chore: delete unused get datasource test mock * fix: adjust test to account for select metric to all metrics change * chore: update i18n * text: update truncate long labels test to truncate after 2 lines * style: shrink card height --- .../trails/DataTrailBookmarks.test.tsx | 4 +-- .../features/trails/DataTrailCard.test.tsx | 8 +++--- public/app/features/trails/DataTrailCard.tsx | 25 ++++--------------- public/app/features/trails/DataTrailsHome.tsx | 5 ++-- public/app/features/trails/utils.ts | 2 +- public/locales/en-US/grafana.json | 4 +-- public/locales/pseudo-LOCALE/grafana.json | 4 +-- 7 files changed, 15 insertions(+), 37 deletions(-) diff --git a/public/app/features/trails/DataTrailBookmarks.test.tsx b/public/app/features/trails/DataTrailBookmarks.test.tsx index a74146ddaee..e1648217e3f 100644 --- a/public/app/features/trails/DataTrailBookmarks.test.tsx +++ b/public/app/features/trails/DataTrailBookmarks.test.tsx @@ -49,9 +49,9 @@ describe('DataTrailsBookmarks', () => { render(); const button = screen.getByLabelText('bookmarkCarrot'); fireEvent.click(button); - expect(screen.getByText('Select metric')).toBeInTheDocument(); + expect(screen.getByText('All metrics')).toBeInTheDocument(); fireEvent.click(button); - expect(screen.queryByText('Select metric')).not.toBeInTheDocument(); + expect(screen.queryByText('All metrics')).not.toBeInTheDocument(); }); it('calls onDelete when the delete button is clicked', () => { diff --git a/public/app/features/trails/DataTrailCard.test.tsx b/public/app/features/trails/DataTrailCard.test.tsx index c13a9470788..29ee36ac808 100644 --- a/public/app/features/trails/DataTrailCard.test.tsx +++ b/public/app/features/trails/DataTrailCard.test.tsx @@ -6,8 +6,6 @@ import { DataTrailBookmark } from './TrailStore/TrailStore'; jest.mock('./utils', () => ({ ...jest.requireActual('./utils'), - getDataSource: jest.fn(() => 'Test DataSource'), - getDataSourceName: jest.fn(() => 'Test DataSource Name'), })); describe('DataTrailCard', () => { @@ -55,19 +53,19 @@ describe('DataTrailCard', () => { expect(screen.getByText('...', { exact: false })).toBeInTheDocument(); }); - it('truncates long list of labels after 3 lines in recent explorations', () => { + it('truncates long list of labels after 2 lines in recent explorations', () => { const bookmarkWithLongLabel: DataTrailBookmark = { urlValues: { key: '1', metric: 'metric', // labels are in a comma separated list - 'var-filters': `zone|=|averylonglabeltotakeupspace,zone=averylonglabeltotakeupspace,zone1=averylonglabeltotakeupspace,zone2=averylonglabeltotakeupspace,zone3=averylonglabeltotakeupspace,zone4=averylonglabeltotakeupspace`, + 'var-filters': `zone|=|averylonglabeltotakeupspace,zone1=averylonglabeltotakeupspace,zone2=averylonglabeltotakeupspace,zone3=averylonglabeltotakeupspace,zone4=averylonglabeltotakeupspace`, }, createdAt: Date.now(), }; render(); // to test the non-existence of a truncated label we need queryByText - const truncatedLabel = screen.queryByText('zone4'); + const truncatedLabel = screen.queryByText('zone3'); expect(truncatedLabel).not.toBeInTheDocument(); }); }); diff --git a/public/app/features/trails/DataTrailCard.tsx b/public/app/features/trails/DataTrailCard.tsx index 52d130172fd..b64afe1ed71 100644 --- a/public/app/features/trails/DataTrailCard.tsx +++ b/public/app/features/trails/DataTrailCard.tsx @@ -9,7 +9,7 @@ import { Trans } from 'app/core/internationalization'; import { DataTrail } from './DataTrail'; import { getTrailStore, DataTrailBookmark } from './TrailStore/TrailStore'; import { VAR_FILTERS } from './shared'; -import { getDataSource, getDataSourceName, getMetricName } from './utils'; +import { getMetricName } from './utils'; export type Props = { trail?: DataTrail; @@ -46,7 +46,6 @@ export function DataTrailCard(props: Props) { const createdAt = bookmark?.createdAt || trail.state.createdAt; return { - dsValue: getDataSource(trail), filters: filtersVariable.state.filters, metric: trail.state.metric, createdAt, @@ -57,16 +56,13 @@ export function DataTrailCard(props: Props) { return null; } - const { dsValue, filters, metric, createdAt } = values; + const { filters, metric, createdAt } = values; return (
-
- Metric: -
-
{getMetricName(metric)}
+
{truncateValue('', getMetricName(metric), 39)}
 {filters.map((f) => ( @@ -76,12 +72,6 @@ export function DataTrailCard(props: Props) { ))} -
-
- Data source: -
-
{dsValue && getDataSourceName(dsValue)}
-
{onDelete && ( @@ -124,7 +114,6 @@ export function getStyles(theme: GrafanaTheme2) { fontSize: '14px', fontStyle: 'normal', fontWeight: 500, - marginLeft: '8px', // Add space between the label and the value wordBreak: 'break-all', }), tag: css({ @@ -136,7 +125,7 @@ export function getStyles(theme: GrafanaTheme2) { position: 'relative', width: '318px', padding: `12px ${theme.spacing(2)} ${theme.spacing(1)} ${theme.spacing(2)}`, - height: '152px', + height: '110px', alignItems: 'start', marginBottom: 0, borderTop: `1px solid ${theme.colors.border.weak}`, @@ -150,9 +139,6 @@ export function getStyles(theme: GrafanaTheme2) { color: theme.colors.text.secondary, fontSize: '12px', }), - datasource: css({ - gridArea: 'Description', - }), date: css({ border: `1px solid ${theme.colors.border.weak}`, // eslint-disable-next-line @grafana/no-border-radius-literal @@ -164,8 +150,7 @@ export function getStyles(theme: GrafanaTheme2) { flexWrap: 'wrap', overflow: 'hidden', textOverflow: 'ellipsis', - maxHeight: '54px', - width: '100%', + maxHeight: '36px', // 2 lines * 18px line-height margin: 0, gridArea: 'Meta', color: theme.colors.text.secondary, diff --git a/public/app/features/trails/DataTrailsHome.tsx b/public/app/features/trails/DataTrailsHome.tsx index fd9abab0bf4..479e9e6d5e3 100644 --- a/public/app/features/trails/DataTrailsHome.tsx +++ b/public/app/features/trails/DataTrailsHome.tsx @@ -111,9 +111,8 @@ function getStyles(theme: GrafanaTheme2) { }), homepageBox: css({ backgroundColor: theme.colors.background.secondary, - width: '725px', - height: '294px', - padding: '40px 32px', + width: '904px', + padding: '80px 32px', boxSizing: 'border-box', // Ensure padding doesn't cause overflow flexShrink: 0, }), diff --git a/public/app/features/trails/utils.ts b/public/app/features/trails/utils.ts index 4045fffba3d..758f560edfb 100644 --- a/public/app/features/trails/utils.ts +++ b/public/app/features/trails/utils.ts @@ -83,7 +83,7 @@ export function getDataSourceName(dataSourceUid: string) { export function getMetricName(metric?: string) { if (!metric) { - return 'Select metric'; + return 'All metrics'; } if (metric === LOGS_METRIC) { diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 3aca6723ded..bf8c92baf02 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -3229,9 +3229,7 @@ "or-view-bookmarks": "Or view bookmarks" }, "card": { - "data-source": "Data source: ", - "date-created": "Date created: ", - "metric": "Metric:" + "date-created": "Date created: " }, "home": { "learn-more": "Learn more", diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 71c193eb5b1..b6d68de3c92 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -3229,9 +3229,7 @@ "or-view-bookmarks": "Øř vįęŵ þőőĸmäřĸş" }, "card": { - "data-source": "Đäŧä şőūřčę: ", - "date-created": "Đäŧę čřęäŧęđ: ", - "metric": "Męŧřįč:" + "date-created": "Đäŧę čřęäŧęđ: " }, "home": { "learn-more": "Ŀęäřʼn mőřę",