mirror of https://github.com/grafana/grafana
Feat: New homepage design (#93354)
* wip: homepage (new user) * fix: spacing between button and text; wip refactor: separating bookmarks and recent metrics from home page * feat: new user homepage; wip: need to clean up code * fix: change rocket icon to svg * wip feat: rendering recent metrics * chore: add comments to understand code, will need to delete / cleanup later / pare down into documentation comments * wip: new recent metric card design * wip: display recent metrics cards in rows of 3 (height still incorrect) * feat: apply conditional styling to remainder recent metrics exploration cards (any cards that are not a complete row of 3) * fix: render new recent metrics explorations without refresh * style: render recent metrics explorations in rows of 3 using grid instead of flex; fix: remove remainder card styling * fix: remove delete button from recent metrics exp cards * style: make background color for each card take up the entire card/grid space; make height of cards for each row the tallest card * chore: clean up code * fix: fix eslint errors * style: implement recent metrics card header styling * style: in recent metrics exp cards, format datasource line * fix: add initial value for _lastModified to fix eslint err * style: format date correctly; chore: clean up code; wip: get date to render properly on bottom left * style: make inner card height match outer card height; style: add date footer; style: wrap last metric name; style: wrap labels * style: adjust font for label name and label value * style: truncate singular label if value is greater than 35 characters * style: truncate singular long labels at 44 characters; style: truncate multiple labels at 3 lines; style: correct the border width and radius * style: make background border radius match the border * style: correct gap between rows and columns of cards; style: correct padding inside card * chore: clean up code * refactor: apply new card UI to DataTrailCard component * feat: add bookmarks (not formatted correctly), only render section if there are bookmarks, hook up delete functionality * style: add horizontal line above bookmarks header; style: add bookmarks header * style: add additional padding above bookmarks divider; chore: delete unused code * style: add carrot button to bookmarks; style: format heading font style * refactor: separate bookmarks into functional component; feat: make bookmarks section collapsed by default; feat: allow toggle to expand bookmarks section * style: position delete button for bookmarks in bottom right of card * fix: only render recent metrics and bookmarks headings if there are any * style: add show more button (not functional); style: fix padding around show more button * chore: delete unused code * fix: add back gap underneath bookmarks header * feat: implement show more/less button for recent metrics * fix: do not show select metric card if user does not actually select a metric * chore: preliminary code clean up * chore: delete console.logs, comments * chore: clean up styling * Update public/app/features/trails/DataTrailCard.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * fix: add i18nKey to Trans tags * fix: attempt to remove go.work.sum changes that are unrelated to my PR * fix: add Trans tags * refactor: sepearate recent metrics into functional component; chore: delete unused code; fix: add Trans tags * chore: generate translation json * trigger drone * trigger drone * fix: add trans tag to date * chore: abbreviate descriptive key, regenerate json * Update public/app/features/trails/DataTrailBookmarks.tsx Co-authored-by: ismail simsek <ismailsimsek09@gmail.com> * Update public/app/features/trails/DataTrailsRecentMetrics.tsx Co-authored-by: ismail simsek <ismailsimsek09@gmail.com> * Update public/app/features/trails/DataTrailBookmarks.tsx Co-authored-by: ismail simsek <ismailsimsek09@gmail.com> * fix: revert trans tag on date created to fix formatting * chore: return null immediately if no recent metrics * style: add margin between bookmarks header and carrot toggle button * style: adjust margin to 8px between bookmarks header and carrot toggle button * style: make margins multiples of 4 * Update public/app/features/trails/DataTrailBookmarks.tsx Co-authored-by: Brendan O'Handley <brendan.ohandley@grafana.com> * style: fix light mode styles; style: fix border radius * fix: save select metric view as recent metric card if labels are applied * Update public/app/features/trails/DataTrailCard.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * refactor: move rocket svgs into assets folder * chore: add back accidentally deleted console log * Update public/app/features/trails/DataTrail.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * Update public/app/features/trails/DataTrailBookmarks.tsx Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> * chore: revert lastModified related changes since behavior appears to remain the same * fix: add back lastModified changes because they make the recent metrics show more functionality work --------- Co-authored-by: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> Co-authored-by: ismail simsek <ismailsimsek09@gmail.com> Co-authored-by: Brendan O'Handley <brendan.ohandley@grafana.com>pull/95626/head
Kat Yang
7 months ago
committed by
GitHub
parent
55bcbcef83
commit
a2755117ac
@ -0,0 +1,97 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useState } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { SceneComponentProps } from '@grafana/scenes'; |
||||
import { IconButton, useStyles2 } from '@grafana/ui'; |
||||
import { Trans } from 'app/core/internationalization'; |
||||
|
||||
import { DataTrailCard } from './DataTrailCard'; |
||||
import { DataTrailsHome } from './DataTrailsHome'; |
||||
import { getTrailStore, getBookmarkKey } from './TrailStore/TrailStore'; |
||||
|
||||
interface Props extends SceneComponentProps<DataTrailsHome> { |
||||
onDelete: (index: number) => void; |
||||
} |
||||
|
||||
export function DataTrailsBookmarks({ model, onDelete }: Props) { |
||||
const [toggleBookmark, setToggleBookmark] = useState(false); |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
if (getTrailStore().bookmarks.length === 0) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<div className={styles.horizontalLine} /> |
||||
<div className={css(styles.gap20, styles.bookmarkHeader, styles.bottomGap24)}> |
||||
<div className={styles.header} style={{ marginRight: '8px' }}> |
||||
<Trans i18nKey="trails.bookmarks.or-view-bookmarks">Or view bookmarks</Trans> |
||||
</div> |
||||
<IconButton |
||||
name={toggleBookmark ? 'angle-up' : 'angle-down'} |
||||
size="xxxl" |
||||
aria-label="bookmarkCarrot" |
||||
variant="secondary" |
||||
onClick={() => setToggleBookmark(!toggleBookmark)} |
||||
/> |
||||
</div> |
||||
{toggleBookmark && ( |
||||
<div className={styles.trailList}> |
||||
{getTrailStore().bookmarks.map((bookmark, index) => { |
||||
return ( |
||||
<DataTrailCard |
||||
key={getBookmarkKey(bookmark)} |
||||
bookmark={bookmark} |
||||
onSelect={() => model.onSelectBookmark(index)} |
||||
onDelete={() => onDelete(index)} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
trailList: css({ |
||||
display: 'grid', |
||||
gridTemplateColumns: 'repeat(3, 1fr)', |
||||
gap: `${theme.spacing(4)}`, |
||||
alignItems: 'stretch', |
||||
justifyItems: 'center', |
||||
}), |
||||
gap20: css({ |
||||
marginTop: theme.spacing(3), |
||||
}), |
||||
bottomGap24: css({ |
||||
marginBottom: theme.spacing(3), |
||||
}), |
||||
bookmarkHeader: css({ |
||||
display: 'flex', |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
}), |
||||
header: css({ |
||||
color: theme.colors.text.primary, |
||||
textAlign: 'center', |
||||
/* H4 */ |
||||
fontFamily: 'Inter', |
||||
fontSize: '18px', |
||||
fontStyle: 'normal', |
||||
fontWeight: '400', |
||||
lineHeight: '22px' /* 122.222% */, |
||||
letterSpacing: '0.045px', |
||||
}), |
||||
horizontalLine: css({ |
||||
width: '400px', |
||||
height: '1px', |
||||
background: theme.colors.border.weak, |
||||
margin: '0 auto', // Center line horizontally
|
||||
marginTop: '32px', |
||||
}), |
||||
}; |
||||
} |
||||
@ -0,0 +1,85 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useState } from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { SceneComponentProps } from '@grafana/scenes'; |
||||
import { Button, useStyles2, useTheme2 } from '@grafana/ui'; |
||||
import { Trans } from 'app/core/internationalization'; |
||||
|
||||
import { DataTrailCard } from './DataTrailCard'; |
||||
import { DataTrailsHome } from './DataTrailsHome'; |
||||
import { getTrailStore } from './TrailStore/TrailStore'; |
||||
|
||||
export function DataTrailsRecentMetrics({ model }: SceneComponentProps<DataTrailsHome>) { |
||||
const styles = useStyles2(getStyles); |
||||
const recentMetrics = getTrailStore().recent; |
||||
const theme = useTheme2(); |
||||
|
||||
const [showAll, setShowAll] = useState(false); |
||||
const handleToggleShow = () => { |
||||
setShowAll(!showAll); |
||||
}; |
||||
|
||||
if (recentMetrics.length === 0) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<div className={styles.recentExplorationHeader}> |
||||
<div className={styles.header}> |
||||
<Trans i18nKey="trails.recent-metrics.or-view-a-recent-exploration">Or view a recent exploration</Trans> |
||||
</div> |
||||
</div> |
||||
<div className={css(styles.trailList, styles.bottomGap24)}> |
||||
{getTrailStore() |
||||
.recent.slice(0, showAll ? recentMetrics.length : 3) |
||||
.map((trail, index) => { |
||||
const resolvedTrail = trail.resolve(); |
||||
return ( |
||||
<DataTrailCard |
||||
key={(resolvedTrail.state.key || '') + index} |
||||
trail={resolvedTrail} |
||||
onSelect={() => model.onSelectRecentTrail(resolvedTrail)} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
{recentMetrics.length > 3 && ( |
||||
<Button variant="secondary" size="sm" onClick={handleToggleShow} fill={theme.isLight ? 'outline' : 'solid'}> |
||||
{showAll ? 'Show less' : 'Show more'} |
||||
</Button> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
recentExplorationHeader: css({ |
||||
marginTop: theme.spacing(6), |
||||
marginBottom: theme.spacing(3), |
||||
}), |
||||
header: css({ |
||||
color: theme.colors.text.primary, |
||||
textAlign: 'center', |
||||
/* H4 */ |
||||
fontFamily: 'Inter', |
||||
fontSize: '18px', |
||||
fontStyle: 'normal', |
||||
fontWeight: '400', |
||||
lineHeight: '22px' /* 122.222% */, |
||||
letterSpacing: '0.045px', |
||||
}), |
||||
trailList: css({ |
||||
display: 'grid', |
||||
gridTemplateColumns: 'repeat(3, 1fr)', |
||||
gap: `${theme.spacing(4)}`, |
||||
alignItems: 'stretch', |
||||
justifyItems: 'center', |
||||
}), |
||||
bottomGap24: css({ |
||||
marginBottom: theme.spacing(3), |
||||
}), |
||||
}; |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
export const LightModeRocket = () => ( |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="73" height="72" viewBox="0 0 73 72" fill="none"> |
||||
<path |
||||
d="M65.3 8.09993C65.3 7.49993 64.7 7.19993 64.1 6.89993C52.7 3.89993 40.4 7.79993 32.9 16.7999L29 21.2999L20.9 19.1999C17.6 17.9999 14.3 19.4999 12.8 22.4999L6.49999 33.5999C6.49999 33.5999 6.49999 33.8999 6.19999 33.8999C5.89999 34.7999 6.49999 35.3999 7.39999 35.6999L17.6 37.7999C16.7 40.4999 15.8 43.1999 15.5 45.8999C15.5 46.4999 15.5 46.7999 15.8 47.0999L24.8 55.7999C25.1 56.0999 25.4 56.0999 26 56.0999C28.7 55.7999 31.7 55.1999 34.4 54.2999L36.5 64.1999C36.5 64.7999 37.4 65.3999 38 65.3999C38.3 65.3999 38.6 65.3999 38.6 65.0999L49.7 58.7999C52.4 57.2999 53.6 53.9999 53 50.9999L50.9 42.2999L55.1 38.3999C64.4 31.4999 68.3 19.4999 65.3 8.09993ZM10.1 33.2999L15.2 23.9999C16.1 22.1999 17.9 21.5999 19.7 22.1999L26.6 23.9999L23.6 27.5999C21.8 29.9999 20 32.3999 18.8 35.0999L10.1 33.2999ZM48.5 56.9999L39.2 62.3999L37.4 53.6999C40.1 52.4999 42.5 50.6999 44.9 48.8999L48.8 45.2999L50.6 52.1999C50.6 53.9999 50 56.0999 48.5 56.9999ZM53.3 36.8999L42.8 46.4999C38.3 50.3999 32.6 52.7999 26.6 53.3999L18.8 45.5999C19.7 39.5999 22.1 33.8999 26 29.3999L30.8 23.9999L31.1 23.6999L35.3 18.8999C41.9 11.0999 52.7 7.49993 62.6 9.59993C64.7 19.7999 61.4 30.2999 53.3 36.8999ZM49.7 16.7999C46.4 16.7999 44 19.4999 44 22.4999C44 25.4999 46.7 28.1999 49.7 28.1999C53 28.1999 55.4 25.4999 55.4 22.4999C55.4 19.4999 53 16.7999 49.7 16.7999ZM49.7 25.4999C48.2 25.4999 47 24.2999 47 22.7999C47 21.2999 48.2 20.0999 49.7 20.0999C51.2 20.0999 52.4 21.2999 52.4 22.7999C52.4 24.2999 51.2 25.4999 49.7 25.4999Z" |
||||
fill="#24292E" |
||||
fillOpacity="0.75" |
||||
/> |
||||
</svg> |
||||
); |
||||
|
||||
export const DarkModeRocket = () => ( |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="73" height="72" viewBox="0 0 73 72" fill="none"> |
||||
<path |
||||
d="M65.3 8.09993C65.3 7.49993 64.7 7.19993 64.1 6.89993C52.7 3.89993 40.4 7.79993 32.9 16.7999L29 21.2999L20.9 19.1999C17.6 17.9999 14.3 19.4999 12.8 22.4999L6.49999 33.5999C6.49999 33.5999 6.49999 33.8999 6.19999 33.8999C5.89999 34.7999 6.49999 35.3999 7.39999 35.6999L17.6 37.7999C16.7 40.4999 15.8 43.1999 15.5 45.8999C15.5 46.4999 15.5 46.7999 15.8 47.0999L24.8 55.7999C25.1 56.0999 25.4 56.0999 26 56.0999C28.7 55.7999 31.7 55.1999 34.4 54.2999L36.5 64.1999C36.5 64.7999 37.4 65.3999 38 65.3999C38.3 65.3999 38.6 65.3999 38.6 65.0999L49.7 58.7999C52.4 57.2999 53.6 53.9999 53 50.9999L50.9 42.2999L55.1 38.3999C64.4 31.4999 68.3 19.4999 65.3 8.09993ZM10.1 33.2999L15.2 23.9999C16.1 22.1999 17.9 21.5999 19.7 22.1999L26.6 23.9999L23.6 27.5999C21.8 29.9999 20 32.3999 18.8 35.0999L10.1 33.2999ZM48.5 56.9999L39.2 62.3999L37.4 53.6999C40.1 52.4999 42.5 50.6999 44.9 48.8999L48.8 45.2999L50.6 52.1999C50.6 53.9999 50 56.0999 48.5 56.9999ZM53.3 36.8999L42.8 46.4999C38.3 50.3999 32.6 52.7999 26.6 53.3999L18.8 45.5999C19.7 39.5999 22.1 33.8999 26 29.3999L30.8 23.9999L31.1 23.6999L35.3 18.8999C41.9 11.0999 52.7 7.49993 62.6 9.59993C64.7 19.7999 61.4 30.2999 53.3 36.8999ZM49.7 16.7999C46.4 16.7999 44 19.4999 44 22.4999C44 25.4999 46.7 28.1999 49.7 28.1999C53 28.1999 55.4 25.4999 55.4 22.4999C55.4 19.4999 53 16.7999 49.7 16.7999ZM49.7 25.4999C48.2 25.4999 47 24.2999 47 22.7999C47 21.2999 48.2 20.0999 49.7 20.0999C51.2 20.0999 52.4 21.2999 52.4 22.7999C52.4 24.2999 51.2 25.4999 49.7 25.4999Z" |
||||
fill="#CCCCDC" |
||||
fillOpacity="0.65" |
||||
/> |
||||
</svg> |
||||
); |
||||
Loading…
Reference in new issue