update formatMessage to t. add session replay labels

db/clickhouse/migrations/09_add_performance.sql

@@ -69,4 +69,4 @@ SELECT
     count() as sample_count,
     toStartOfHour(created_at) as created_at
 FROM umami.website_performance
-GROUP BY website_id, url_path, toStartOfHour(created_at);
+GROUP BY website_id, url_path, created_at;

db/clickhouse/schema.sql

@@ -353,7 +353,7 @@ SELECT
     count() as sample_count,
     toStartOfHour(created_at) as created_at
 FROM umami.website_performance
-GROUP BY website_id, url_path, toStartOfHour(created_at);
+GROUP BY website_id, url_path, created_at;
 
 -- Create session_replay
 CREATE TABLE umami.session_replay

public/intl/messages/en-US.json

@@ -29,6 +29,7 @@
     "back": "Back",
     "before": "Before",
     "behavior": "Behavior",
+    "block-selector": "Block selector",
     "boards": "Boards",
     "bounce-rate": "Bounce rate",
     "breakdown": "Breakdown",
@@ -100,6 +101,7 @@
     "domain": "Domain",
     "download": "Download",
     "dropoff": "Dropoff",
+    "duration": "Duration",
     "edit": "Edit",
     "edit-member": "Edit member",
     "email": "Email",
@@ -174,7 +176,9 @@
     "logout": "Logout",
     "manage": "Manage",
     "manager": "Manager",
+    "mask-level": "Mask level",
     "max": "Max",
+    "max-duration": "Max duration",
     "match": "Match",
     "match-all": "All",
     "match-any": "Any",
@@ -235,6 +239,7 @@
     "query": "Query",
     "query-parameters": "Query parameters",
     "realtime": "Realtime",
+    "recorded-at": "Recorded at",
     "referral": "Referral",
     "referrer": "Referrer",
     "referrers": "Referrers",
@@ -245,11 +250,15 @@
     "remaining": "Remaining",
     "remove": "Remove",
     "remove-member": "Remove member",
+    "replay": "Replay",
+    "replay-enabled": "Replay enabled",
+    "replays": "Replays",
     "reports": "Reports",
     "required": "Required",
     "reset": "Reset",
     "reset-website": "Reset website",
     "retention": "Retention",
+    "retention-days": "Retention days",
     "retention-description": "Measure your website stickiness by tracking how often users return.",
     "revenue": "Revenue",
     "revenue-description": "Look into your revenue data and how users are spending.",
@@ -258,6 +267,7 @@
     "save": "Save",
     "save-cohort": "Save cohort",
     "save-segment": "Save segment",
+    "sample-rate": "Sample rate",
     "sample-size": "Sample size",
     "screen": "Screen",
     "screens": "Screens",

src/app/(main)/websites/[websiteId]/replays/ReplaysTable.tsx

@@ -14,40 +14,40 @@ function formatDuration(ms: number) {
 }
 
 export function ReplaysTable({ websiteId, ...props }: DataTableProps & { websiteId: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
   const { formatValue } = useFormat();
 
   return (
     <DataTable {...props}>
-      <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
+      <DataColumn id="id" label={t(labels.session)} width="100px">
         {(row: any) => <Avatar seed={row.id} size={32} />}
       </DataColumn>
-      <DataColumn id="duration" label={formatMessage(labels.duration)} width="100px">
+      <DataColumn id="duration" label={t(labels.duration)} width="100px">
         {(row: any) => formatDuration(row.duration || 0)}
       </DataColumn>
-      <DataColumn id="eventCount" label={formatMessage(labels.events)} width="80px" />
-      <DataColumn id="country" label={formatMessage(labels.country)}>
+      <DataColumn id="eventCount" label={t(labels.events)} width="80px" />
+      <DataColumn id="country" label={t(labels.country)}>
         {(row: any) => (
           <TypeIcon type="country" value={row.country}>
             {formatValue(row.country, 'country')}
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="browser" label={formatMessage(labels.browser)}>
+      <DataColumn id="browser" label={t(labels.browser)}>
         {(row: any) => (
           <TypeIcon type="browser" value={row.browser}>
             {formatValue(row.browser, 'browser')}
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="os" label={formatMessage(labels.os)}>
+      <DataColumn id="os" label={t(labels.os)}>
         {(row: any) => (
           <TypeIcon type="os" value={row.os}>
             {formatValue(row.os, 'os')}
           </TypeIcon>
         )}
       </DataColumn>
-      <DataColumn id="createdAt" label={formatMessage(labels.recordedAt)}>
+      <DataColumn id="createdAt" label={t(labels.recordedAt)}>
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
       <DataColumn id="play" label="" width="80px">

src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx

@@ -21,8 +21,8 @@ interface ReplayConfig {
 
 export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
   const website = useWebsite();
-  const { formatMessage, labels, messages } = useMessages();
-  const { mutateAsync, error, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
+  const { t, labels, messages } = useMessages();
+  const { mutateAsync, touch, toast } = useUpdateQuery(`/websites/${websiteId}`);
   const [enabled, setEnabled] = useState(website?.replayEnabled ?? false);
 
   const config = (website?.replayConfig as ReplayConfig) || {};
@@ -41,7 +41,7 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
       },
       {
         onSuccess: async () => {
-          toast(formatMessage(messages.saved));
+          toast(t(messages.saved));
           touch('websites');
           touch(`website:${website.id}`);
         },
@@ -61,35 +61,35 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) {
       }}
     >
       <Column gap="4">
-        <Label>{formatMessage(labels.replays)}</Label>
+        <Label>{t(labels.replays)}</Label>
         <Switch isSelected={enabled} onChange={setEnabled}>
-          {formatMessage(labels.replayEnabled)}
+          {t(labels.replayEnabled)}
         </Switch>
         {enabled && (
           <>
-            <FormField name="sampleRate" label={formatMessage(labels.sampleRate)}>
+            <FormField name="sampleRate" label={t(labels.sampleRate)}>
               <TextField />
             </FormField>
             <FormField
               name="maskLevel"
-              label={`${formatMessage(labels.maskLevel)} (strict / moderate / relaxed)`}
+              label={`${t(labels.maskLevel)} (strict / moderate / relaxed)`}
             >
               <TextField />
             </FormField>
-            <FormField name="maxDuration" label={`${formatMessage(labels.maxDuration)} (ms)`}>
+            <FormField name="maxDuration" label={`${t(labels.maxDuration)} (ms)`}>
               <TextField />
             </FormField>
-            <FormField name="blockSelector" label={formatMessage(labels.blockSelector)}>
+            <FormField name="blockSelector" label={t(labels.blockSelector)}>
               <TextField />
             </FormField>
-            <FormField name="retentionDays" label={formatMessage(labels.retentionDays)}>
+            <FormField name="retentionDays" label={t(labels.retentionDays)}>
               <TextField />
             </FormField>
           </>
         )}
       </Column>
       <FormButtons>
-        <FormSubmitButton variant="primary">{formatMessage(labels.save)}</FormSubmitButton>
+        <FormSubmitButton variant="primary">{t(labels.save)}</FormSubmitButton>
       </FormButtons>
     </Form>
   );

src/components/messages.ts

@@ -355,6 +355,16 @@ export const labels: Record<string, string> = {
   needsImprovement: 'label.needs-improvement',
   poor: 'label.poor',
   sampleSize: 'label.sample-size',
+  replays: 'label.replays',
+  replay: 'label.replay',
+  replayEnabled: 'label.replay-enabled',
+  sampleRate: 'label.sample-rate',
+  maskLevel: 'label.mask-level',
+  maxDuration: 'label.max-duration',
+  blockSelector: 'label.block-selector',
+  retentionDays: 'label.retention-days',
+  duration: 'label.duration',
+  recordedAt: 'label.recorded-at',
 };
 
 export const messages: Record<string, string> = {