frontend: Add a date format property to the DateLabel

frontend/src/components/common/Label.tsx

@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
-import { localeDate, timeAgo } from '../../lib/util';
+import { DateFormatOptions, localeDate, timeAgo } from '../../lib/util';
 import { LightTooltip, TooltipIcon } from './Tooltip';
 
 const useStyles = makeStyles(theme => ({
@@ -176,9 +176,16 @@ export function HoverInfoLabel(props: HoverInfoLabelProps) {
 
 export interface DateLabelProps {
   date: number | string | Date;
+  format?: DateFormatOptions;
 }
 
 export function DateLabel(props: DateLabelProps) {
-  const { date } = props;
-  return <HoverInfoLabel label={timeAgo(date)} hoverInfo={localeDate(date)} icon="mdi:calendar" />;
+  const { date, format = 'brief' } = props;
+  return (
+    <HoverInfoLabel
+      label={timeAgo(date, { format })}
+      hoverInfo={localeDate(date)}
+      icon="mdi:calendar"
+    />
+  );
 }