diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx index 841c1866961ce..4dc25b7ddb829 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx @@ -36,7 +36,7 @@ export const RefreshableCountdown = (props: Props) => { ); }; -const RefreshButton = styled.button` +export const RefreshButton = styled.button` border: none; cursor: pointer; padding: 8px; diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx new file mode 100644 index 0000000000000..13b7628cd54c9 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx @@ -0,0 +1,73 @@ +import {Box, Button, Colors, Icon, RefreshButton, Tooltip} from '@dagster-io/ui-components'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import updateLocale from 'dayjs/plugin/updateLocale'; +import React from 'react'; + +dayjs.extend(relativeTime); +dayjs.extend(updateLocale); + +dayjs.updateLocale('en', { + relativeTime: { + future: 'in %s', + past: '%s ago', + s: '%d seconds', + m: 'a minute', + mm: '%d minutes', + h: 'an hour', + hh: '%d hours', + d: 'a day', + dd: '%d days', + M: 'a month', + MM: '%d months', + y: 'a year', + yy: '%d years', + }, +}); + +export const AssetDataRefreshButton = ({ + isRefreshing, + onRefresh, + oldestDataTimestamp, +}: { + isRefreshing: boolean; + onRefresh: () => void; + oldestDataTimestamp: number; +}) => { + return ( + + +
Click to refresh now
+ + ) + } + > +