@@ -1089,13 +1099,17 @@ function DBDashboardImportPage() {
) : isTemplateNotFound ? (
- Oops! We couldn't find that template.
+ {t('import.templateNotFound')}
- Try{' '}
-
- browsing available templates
-
- .
+
+ ),
+ }}
+ />
) : !isTemplate ? (
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index c6892ae767..c86b0536a6 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -23,6 +23,7 @@ import {
import { ErrorBoundary } from 'react-error-boundary';
import RGL from 'react-grid-layout';
import { useForm, useWatch } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
import { TableConnection } from '@hyperdx/common-utils/dist/core/metadata';
import {
convertToDashboardTemplate,
@@ -223,6 +224,7 @@ function HeatmapTile({
dateRange: [Date, Date];
enabled?: boolean;
}) {
+ const { t } = useTranslation('dashboard');
const { heatmapConfig, scaleType } = toHeatmapChartConfig(queriedConfig);
const [clickPos, setClickPos] = useState<{ x: number; y: number } | null>(
@@ -326,7 +328,7 @@ function HeatmapTile({
>
- View in Event Deltas
+ {t('heatmap.viewEventDeltas')}
@@ -418,6 +420,7 @@ const Tile = forwardRef(
},
ref: ForwardedRef
,
) => {
+ const { t } = useTranslation('dashboard');
const [isFullscreen, setIsFullscreen] = useState(false);
const [isFocused, setIsFocused] = useState(false);
@@ -623,16 +626,20 @@ const Tile = forwardRef(
const alertTooltip = useMemo(() => {
if (!alert) {
- return 'Add alert';
+ return t('tile.addAlert');
}
- let tooltip = `Has alert and is in ${alert.state} state`;
+ let tooltip = t('tile.alertState', { state: alert.state ?? '' });
if (alert.silenced?.at) {
const silencedAt = new Date(alert.silenced.at);
// eslint-disable-next-line no-restricted-syntax
- tooltip += `. Ack'd ${formatRelative(silencedAt, new Date())}`;
+ const currentTime = new Date();
+
+ tooltip += `. ${t('tile.acknowledged', {
+ time: formatRelative(silencedAt, currentTime),
+ })}`;
}
return tooltip;
- }, [alert]);
+ }, [alert, t]);
// Firing/recovery markers for this tile's alert, scoped to the *visible*
// window — the fullscreen range while the fullscreen view is open, else the
@@ -672,17 +679,17 @@ const Tile = forwardRef(
return null;
const message = isMissingFiltersMacro
- ? 'Filters are not applied because the SQL does not include the required $__filters macro'
+ ? t('tile.filtersMacroMissing')
: isMetricsSourceWithLuceneFilter
- ? 'Lucene filters are not applied because they are not supported for metrics sources.'
- : 'Filters are not applied because no Source is set for this chart';
+ ? t('tile.luceneMetricsUnsupported')
+ : t('tile.filterSourceMissing');
return (
);
- }, [filters, queriedConfig, source]);
+ }, [filters, queriedConfig, source, t]);
const hoverToolbar = useMemo(() => {
const isRawSql = isRawSqlSavedChartConfig(chart.config);
@@ -741,7 +748,7 @@ const Tile = forwardRef(
@@ -860,6 +867,7 @@ const Tile = forwardRef(
onEditClick,
onMoveToGroup,
openFullscreen,
+ t,
]);
// Flat Menu.Item list for the collapsed (narrow-tile) toolbar.
@@ -894,30 +902,30 @@ const Tile = forwardRef(
leftSection={}
onClick={onDuplicateClick}
>
- Duplicate
+ {t('tile.duplicate')}
}
onClick={() => openFullscreen()}
>
- View fullscreen
+ {t('tile.fullscreen')}
}
onClick={onEditClick}
>
- Edit
+ {t('tile.edit')}
{canMoveToGroup && (
<>
- Move to Group
+ {t('tile.moveToGroup')}
{chart.containerId && (
}
onClick={() => onMoveToGroup(undefined)}
>
- (Ungrouped)
+ {t('tile.ungrouped')}
)}
{moveTargets
@@ -974,7 +982,7 @@ const Tile = forwardRef(
leftSection={}
onClick={onDeleteClick}
>
- Delete
+ {t('tile.delete')}
);
@@ -990,6 +998,7 @@ const Tile = forwardRef(
onEditClick,
onMoveToGroup,
openFullscreen,
+ t,
]);
const title = useMemo(
@@ -1042,7 +1051,7 @@ const Tile = forwardRef(
onError={console.error}
fallback={
- An error occurred while rendering the chart.
+ {t('tile.renderError')}
}
>
@@ -1050,8 +1059,7 @@ const Tile = forwardRef(
- The data source for this tile no longer exists. Edit the
- tile to select a new source.
+ {t('tile.sourceMissing')}
@@ -1059,8 +1067,7 @@ const Tile = forwardRef(
- The data source for this tile is not set. Edit the tile to
- select a data source.
+ {t('tile.sourceUnset')}
@@ -1285,6 +1292,7 @@ const Tile = forwardRef(
isSourceUnset,
hasBeenVisible,
alertAnnotations,
+ t,
],
);
@@ -1405,6 +1413,7 @@ const EditTileModal = ({
isSaving?: boolean;
onSave: (chart: Tile) => void;
}) => {
+ const { t } = useTranslation('dashboard');
const contextZIndex = useZIndex();
const modalZIndex = contextZIndex + 10;
const confirm = useConfirm();
@@ -1423,10 +1432,7 @@ const EditTileModal = ({
const handleClose = useCallback(() => {
if (isSaving) return;
if (hasUnsavedChanges) {
- confirm(
- 'You have unsaved changes. Discard them and close the editor?',
- 'Discard',
- ).then(ok => {
+ confirm(t('editor.discardPrompt'), t('editor.discard')).then(ok => {
if (ok) {
// Reset dirty state before closing so any re-invocation of
// handleClose (e.g. from Mantine focus management after the
@@ -1438,7 +1444,7 @@ const EditTileModal = ({
} else {
onClose();
}
- }, [confirm, isSaving, hasUnsavedChanges, onClose]);
+ }, [confirm, hasUnsavedChanges, isSaving, onClose, t]);
return (
{
notifications.show({
color: 'green',
- title: 'Query saved and executed',
- message:
- 'Filter query and dropdown values have been saved with the dashboard',
+ title: t('page.querySavedTitle'),
+ message: t('page.querySavedMessage'),
autoClose: 3000,
});
},
@@ -1924,6 +1930,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
getValues,
rawFilterQueries,
onSubmit,
+ t,
]);
const handleRemoveSavedQuery = useCallback(() => {
if (!dashboard || isLocalDashboard) return;
@@ -1937,13 +1944,13 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
() => {
notifications.show({
color: 'green',
- title: 'Default query and filters removed',
- message: 'Dashboard will no longer auto-apply saved defaults',
+ title: t('page.defaultsRemovedTitle'),
+ message: t('page.defaultsRemovedMessage'),
autoClose: 3000,
});
},
);
- }, [dashboard, isLocalDashboard, setDashboard]);
+ }, [dashboard, isLocalDashboard, setDashboard, t]);
const [editedTile, setEditedTile] = useState();
@@ -2158,14 +2165,13 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
if (dashboard != null) {
if (
!(await confirm(
- <>
- Duplicate {'"'}
-
- {chart.config.name}
-
- {'"'}?
- ,
- 'Duplicate',
+ }}
+ />,
+ t('tile.duplicate'),
))
) {
return;
@@ -2190,14 +2196,13 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
if (dashboard != null) {
if (
!(await confirm(
- <>
- Delete{' '}
-
- {chart.config.name}
-
- ?
- ,
- 'Delete',
+ }}
+ />,
+ t('tile.delete'),
{ variant: 'danger' },
))
) {
@@ -2236,6 +2241,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
handleMoveTileToGroup,
selectedTileIds,
handleToggleTileSelect,
+ t,
],
);
@@ -2493,7 +2499,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
() => {
notifications.show({
color: 'green',
- message: 'Tags updated successfully',
+ message: t('page.tagsUpdated'),
});
},
() => {
@@ -2501,7 +2507,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
color: 'red',
message: (
<>
- An error occurred.
+ {t('page.updateError')}
),
});
@@ -2509,14 +2515,14 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
);
}
},
- [dashboard, setDashboard],
+ [dashboard, setDashboard, t],
);
const createDashboard = useCreateDashboard();
const onCreateDashboard = useCallback(() => {
createDashboard.mutate(
{
- name: 'My Dashboard',
+ name: t('page.defaultName'),
tiles: [],
tags: [],
},
@@ -2526,7 +2532,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
},
},
);
- }, [createDashboard, router]);
+ }, [createDashboard, router, t]);
const [isSaving, setIsSaving] = useState(false);
@@ -2540,7 +2546,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
{dashboard.createdBy && (
- Created by {dashboard.createdBy.name || dashboard.createdBy.email}.{' '}
+ {t('page.createdBy')}{' '}
+ {dashboard.createdBy.name || dashboard.createdBy.email}.{' '}
)}
{dashboard.updatedAt && (
@@ -2549,12 +2556,18 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
<>
{dashboard.updatedBy
- ? ` by ${dashboard.updatedBy.name || dashboard.updatedBy.email}`
+ ? ` ${t('page.updatedBy')} ${dashboard.updatedBy.name || dashboard.updatedBy.email}`
: ''}
}
>
- {`Updated ${formatDistanceToNow(new Date(dashboard.updatedAt), { addSuffix: true })}.`}
+
+ {t('page.updated', {
+ time: formatDistanceToNow(new Date(dashboard.updatedAt), {
+ addSuffix: true,
+ }),
+ })}
+
)}
@@ -2564,12 +2577,12 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
- Dashboards
+ {t('page.dashboards')}
{isLocalDashboard
- ? 'Temporary Dashboard'
- : (dashboard?.name ?? 'Untitled')}
+ ? t('page.temporary')
+ : (dashboard?.name ?? t('page.untitled'))}
{dashboardMeta}
@@ -2609,8 +2622,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
style={{ flexShrink: 0 }}
>
- {dashboard?.tags?.length || 0}{' '}
- {dashboard?.tags?.length === 1 ? 'Tag' : 'Tags'}
+ {t('page.tagCount', { count: dashboard?.tags?.length || 0 })}
)}
@@ -2629,7 +2641,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
{(hasTiles || containers.length > 0) && (
<>
- View
+ {t('page.view')}
{hasTiles && (
}
@@ -2637,8 +2649,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
data-testid="toggle-alert-annotations-menu-item"
>
{showAlertAnnotations
- ? 'Hide alert annotations'
- : 'Show alert annotations'}
+ ? t('page.hideAnnotations')
+ : t('page.showAnnotations')}
)}
{containers.length > 0 && (
@@ -2654,9 +2666,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
onClick={() => setTocVisible(v => !v)}
data-testid="toggle-toc-menu-item"
>
- {tocVisible
- ? 'Hide table of contents'
- : 'Show table of contents'}
+ {tocVisible ? t('page.hideToc') : t('page.showToc')}
}
@@ -2664,7 +2674,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
disabled={collapsibleContainers.length === 0}
data-testid="collapse-all-sections-menu-item"
>
- Collapse all sections
+ {t('page.collapseAll')}
}
@@ -2672,7 +2682,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
disabled={collapsibleContainers.length === 0}
data-testid="expand-all-sections-menu-item"
>
- Expand all sections
+ {t('page.expandAll')}
)}
@@ -2687,7 +2697,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
if (!sources || !dashboard) {
notifications.show({
color: 'red',
- message: 'Export Failed',
+ message: t('page.exportFailed'),
});
return;
}
@@ -2702,7 +2712,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
);
}}
>
- Export Dashboard
+ {t('page.export')}
)}
- {hasTiles ? 'Import New Dashboard' : 'Import Dashboard'}
+ {hasTiles ? t('page.importNew') : t('page.import')}
{hasSavedQueryAndFilterDefaults
- ? 'Update Default Query & Filters'
- : 'Save Query & Filters as Default'}
+ ? t('page.updateDefaults')
+ : t('page.saveDefaults')}
{hasSavedQueryAndFilterDefaults && (
- Remove Default Query & Filters
+ {t('page.removeDefaults')}
)}
@@ -2749,7 +2759,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
})
}
>
- Delete Dashboard
+ {t('page.delete')}
@@ -2781,7 +2791,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
onLanguageChange={(lang: 'sql' | 'lucene') =>
setValue('whereLanguage', lang)
}
- label="WHERE"
+ label={t('page.where')}
enableHotkey
allowMultiline
minWidth={300}
@@ -2799,8 +2809,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
withArrow
label={
isRefreshEnabled
- ? `Auto-refreshing with ${granularityOverride} interval`
- : 'Enable auto-refresh'
+ ? t('page.autoRefresh', { interval: granularityOverride })
+ : t('page.enableAutoRefresh')
}
fz="xs"
color="gray"
@@ -2809,24 +2819,26 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
onClick={() => setIsLive(prev => !prev)}
size="sm"
variant={isLive ? 'primary' : 'secondary'}
- title={isLive ? 'Disable auto-refresh' : 'Enable auto-refresh'}
+ title={
+ isLive ? t('page.disableAutoRefresh') : t('page.enableAutoRefresh')
+ }
>
- Live
+ {t('page.live')}
-
+
-
+
setShowFiltersModal(true)}
@@ -2843,7 +2855,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
leftSection={}
style={{ flexShrink: 0 }}
>
- Run
+ {t('page.run')}
);
@@ -2855,7 +2867,10 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
<>
- {dashboard?.name ? `${dashboard.name}` : 'Dashboard'} – {brandName}
+ {t('page.browserTitle', {
+ name: dashboard?.name || t('page.defaultTitle'),
+ brandName,
+ })}
@@ -2897,16 +2912,14 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
{isLocalDashboard && (
-
- This is a temporary dashboard and can not be saved.
-
+ {t('page.temporaryDescription')}
@@ -2917,18 +2930,16 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
mt="sm"
color="yellow"
icon={}
- title="Some filters could not be applied"
+ title={t('page.ignoredTitle')}
data-testid="ignored-url-filters-banner"
withCloseButton
- closeButtonLabel="Dismiss"
+ closeButtonLabel={t('page.dismiss')}
onClose={() => setShouldShowIgnoredFiltersBanner(false)}
>
- No dashboard filter(s) found for{' '}
- {ignoredFilterExpressions.length === 1
- ? 'expression'
- : 'expressions'}{' '}
- in the URL: {ignoredFilterExpressions.join(', ')}. Add a filter with
- a matching expression to apply these filters.
+ {t('page.ignoredDescription', {
+ count: ignoredFilterExpressions.length,
+ expressions: ignoredFilterExpressions.join(', '),
+ })}
)}
- {selectedTileIds.size} tile{selectedTileIds.size > 1 ? 's' : ''}{' '}
- selected
+ {t('page.selected', { count: selectedTileIds.size })}
@@ -2971,7 +2981,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
onError={console.error}
fallback={
- An error occurred while rendering the dashboard.
+ {t('page.renderError')}
}
>
@@ -3064,7 +3074,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
w="100%"
leftSection={}
>
- Add
+ {t('page.add')}
@@ -3073,7 +3083,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
leftSection={}
onClick={() => onAddTile()}
>
- New Tile
+ {t('page.newTile')}
}
onClick={() => handleAddContainer()}
>
- New Group
+ {t('page.newGroup')}
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 9995a976dd..147d399b27 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -23,6 +23,7 @@ import {
useQueryStates,
} from 'nuqs';
import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import HyperDX from '@hyperdx/browser';
@@ -166,13 +167,6 @@ import { FormatTime } from './useFormatTime';
import searchPageStyles from '@styles/SearchPage.module.scss';
-const LIVE_TAIL_REFRESH_FREQUENCY_OPTIONS = [
- { value: '1000', label: '1s' },
- { value: '2000', label: '2s' },
- { value: '4000', label: '4s' },
- { value: '10000', label: '10s' },
- { value: '30000', label: '30s' },
-];
const DEFAULT_REFRESH_FREQUENCY = 10000;
const ALLOWED_SOURCE_KINDS = [SourceKind.Log, SourceKind.Trace];
@@ -237,8 +231,14 @@ function SourceEditModal({
onClose: () => void;
inputSource: string | undefined;
}) {
+ const { t } = useTranslation('search');
return (
-
+
);
@@ -253,14 +253,19 @@ function NewSourceModal({
onClose: () => void;
onCreate: (source: TSource) => void;
}) {
+ const { t } = useTranslation('search');
return (
-
+
);
}
@@ -270,6 +275,7 @@ function ResumeLiveTailButton({
}: {
handleResumeLiveTail: () => void;
}) {
+ const { t } = useTranslation('search');
const { themeName } = useAppTheme();
const variant = themeName === 'clickstack' ? 'secondary' : 'primary';
@@ -280,7 +286,7 @@ function ResumeLiveTailButton({
onClick={handleResumeLiveTail}
leftSection={}
>
- Resume Live Tail
+ {t('page.resumeLiveTail')}
);
}
@@ -290,6 +296,7 @@ function SearchSubmitButton({
}: {
isFormStateDirty: boolean;
}) {
+ const { t } = useTranslation('search');
return (
);
}
function ExpandFiltersButton({ onExpand }: { onExpand: () => void }) {
+ const { t } = useTranslation('search');
return (
-
+
@@ -359,6 +367,7 @@ export function SearchNumRows({
isSearching: boolean;
isLiveTail?: boolean;
}) {
+ const { t } = useTranslation('search');
const [statsOpened, { open: openStats, close: closeStats }] =
useDisclosure(false);
const { data, isLoading, error } = useExplainQuery(config, {
@@ -387,7 +396,11 @@ export function SearchNumRows({
@@ -395,10 +408,12 @@ export function SearchNumRows({
{isLoading
- ? 'Scanned Rows ...'
+ ? t('page.scannedRowsLoading')
: error || numRows == null
? ''
- : `Scanned Rows: ${Number(numRows).toLocaleString()}`}
+ : t('page.scannedRows', {
+ displayCount: Number(numRows).toLocaleString(),
+ })}
{showElapsed && (
<>
@@ -409,8 +424,10 @@ export function SearchNumRows({
)}
{showElapsedLoading
- ? 'Elapsed Time: ...'
- : `Elapsed Time: ${formatDurationMs(searchElapsedMs!)}`}
+ ? t('page.elapsedLoading')
+ : t('page.elapsed', {
+ duration: formatDurationMs(searchElapsedMs!),
+ })}
)}
@@ -418,13 +435,13 @@ export function SearchNumRows({
explain query, so it renders unconditionally. Gating it on explain
loading/data would make it flicker on every live-tail poll, since
each poll changes the dateRange (and thus the explain queryKey). */}
-
+
@@ -447,6 +464,7 @@ function SaveSearchModalComponent({
isUpdate: boolean;
savedSearchId: string | undefined | null;
}) {
+ const { t } = useTranslation('search');
const { data: savedSearch } = useSavedSearch(
{ id: savedSearchId ?? '' },
{
@@ -528,9 +546,8 @@ function SaveSearchModalComponent({
console.error('Error updating saved search:', error);
notifications.show({
color: 'red',
- title: 'Error',
- message:
- 'An error occurred while updating your saved search. Please try again.',
+ title: t('page.error'),
+ message: t('page.updateSavedSearchError'),
});
},
},
@@ -555,9 +572,8 @@ function SaveSearchModalComponent({
console.error('Error creating saved search:', error);
notifications.show({
color: 'red',
- title: 'Error',
- message:
- 'An error occurred while saving your search. Please try again.',
+ title: t('page.error'),
+ message: t('page.saveSearchError'),
});
}
}
@@ -573,7 +589,7 @@ function SaveSearchModalComponent({
data-testid="save-search-modal"
opened={opened}
onClose={closeAndReset}
- title="Save Search"
+ title={t('page.saveSearch')}
centered
size="lg"
>
@@ -598,7 +614,7 @@ function SaveSearchModalComponent({
{chartConfig.where}
) : (
- None
+ {t('page.none')}
)}
@@ -623,11 +639,11 @@ function SaveSearchModalComponent({
)}
) : (
- Loading Chart Config...
+ {t('page.loadingChartConfig')}
)}
- Name
+ {t('page.name')}
- Tags
+ {t('page.tags')}
{tags.map(tag => (
@@ -670,7 +686,7 @@ function SaveSearchModalComponent({
size="xs"
>
- Add Tag
+ {t('page.addTag')}
@@ -682,7 +698,7 @@ function SaveSearchModalComponent({
disabled={!formState.isValid}
loading={isPending}
>
- {isUpdate ? 'Update' : 'Save'}
+ {isUpdate ? t('page.update') : t('page.save')}
@@ -961,6 +977,17 @@ export function useSearchTelemetry({
}
export function DBSearchPage() {
+ const { t } = useTranslation('search');
+ const liveTailRefreshFrequencyOptions = useMemo(
+ () => [
+ { value: '1000', label: t('page.refresh1s') },
+ { value: '2000', label: t('page.refresh2s') },
+ { value: '4000', label: t('page.refresh4s') },
+ { value: '10000', label: t('page.refresh10s') },
+ { value: '30000', label: t('page.refresh30s') },
+ ],
+ [t],
+ );
const brandName = useBrandDisplayName();
// Next router is laggy behind window.location, which causes race
// conditions with useQueryStates, so we'll parse it directly
@@ -1462,7 +1489,7 @@ export function DBSearchPage() {
onSuccess: () => {
notifications.show({
color: 'green',
- message: 'Tags updated successfully',
+ message: t('page.tagsUpdated'),
});
},
onError: () => {
@@ -1470,7 +1497,7 @@ export function DBSearchPage() {
color: 'red',
message: (
<>
- An error occurred.
+ {t('page.genericError')}
),
});
@@ -1479,7 +1506,7 @@ export function DBSearchPage() {
);
}
},
- [savedSearch, searchedConfig, updateSavedSearch],
+ [savedSearch, searchedConfig, updateSavedSearch, t],
);
const [newSourceModalOpened, setNewSourceModalOpened] = useState(false);
@@ -2014,7 +2041,12 @@ export function DBSearchPage() {
>
- {savedSearch ? `${savedSearch.name} Search` : 'Search'} - {brandName}
+ {savedSearch
+ ? t('page.savedBrowserTitle', {
+ name: savedSearch.name,
+ brandName,
+ })
+ : t('page.browserTitle', { brandName })}
{!IS_LOCAL_MODE && isAlertModalOpen && (
@@ -2031,7 +2063,7 @@ export function DBSearchPage() {
- Saved Searches
+ {t('page.savedSearches')}
{savedSearch.name}
@@ -2040,7 +2072,7 @@ export function DBSearchPage() {
{savedSearch.createdBy && (
- Created by{' '}
+ {t('page.createdBy')}{' '}
{savedSearch.createdBy.name || savedSearch.createdBy.email}.{' '}
)}
@@ -2053,12 +2085,22 @@ export function DBSearchPage() {
format="short"
/>
{savedSearch.updatedBy
- ? ` by ${savedSearch.updatedBy.name || savedSearch.updatedBy.email}`
+ ? ` ${t('page.by')} ${
+ savedSearch.updatedBy.name ||
+ savedSearch.updatedBy.email
+ }`
: ''}
}
>
- {`Updated ${formatDistanceToNow(new Date(savedSearch.updatedAt), { addSuffix: true })}.`}
+
+ {t('page.updated', {
+ time: formatDistanceToNow(
+ new Date(savedSearch.updatedAt),
+ { addSuffix: true },
+ ),
+ })}
+
)}
@@ -2067,7 +2109,7 @@ export function DBSearchPage() {
{
updateSavedSearch.mutate({
id: savedSearch.id,
@@ -2180,7 +2222,7 @@ export function DBSearchPage() {
onClick={onSaveSearch}
style={{ flexShrink: 0 }}
>
- Save
+ {t('page.save')}
) : (
)}
{!IS_LOCAL_MODE && (
@@ -2204,7 +2246,7 @@ export function DBSearchPage() {
style={{ flexShrink: 0 }}
>
- Alerts
+ {t('page.alerts')}
@@ -2257,12 +2299,12 @@ export function DBSearchPage() {
size="xs"
/>
{isLive && (
-
+
@@ -429,6 +430,7 @@ export const DBSearchPageAlertModal = ({
onClose: () => void;
open: boolean;
}) => {
+ const { t } = useTranslation('alerts');
const brandName = useBrandDisplayName();
const queryClient = useQueryClient();
const createAlert = api.useCreateAlert();
@@ -464,7 +466,7 @@ export const DBSearchPageAlertModal = ({
if (!name) {
notifications.show({
color: 'red',
- message: 'Please provide a name for the saved search.',
+ message: t('searchModal.savedSearchNameRequired'),
autoClose: 5000,
});
return;
@@ -511,7 +513,10 @@ export const DBSearchPageAlertModal = ({
}
notifications.show({
color: 'green',
- message: `Alert ${activeIndex === 'stage' ? 'created' : 'updated'}!`,
+ message:
+ activeIndex === 'stage'
+ ? t('searchModal.created')
+ : t('searchModal.updated'),
autoClose: 5000,
});
}
@@ -519,7 +524,7 @@ export const DBSearchPageAlertModal = ({
console.error('Error creating/updating alert:', error);
notifications.show({
color: 'red',
- message: `Something went wrong. Please contact ${brandName} team.`,
+ message: t('searchModal.contactTeam', { brandName }),
autoClose: 5000,
});
}
@@ -532,14 +537,14 @@ export const DBSearchPageAlertModal = ({
await deleteAlert.mutateAsync(id);
notifications.show({
color: 'green',
- message: 'Alert deleted!',
+ message: t('searchModal.deleted'),
autoClose: 5000,
});
} catch (error) {
console.error('Failed to delete alert:', error);
notifications.show({
color: 'red',
- message: `Something went wrong. Please contact ${brandName} team.`,
+ message: t('searchModal.contactTeam', { brandName }),
autoClose: 5000,
});
}
@@ -568,12 +573,12 @@ export const DBSearchPageAlertModal = ({
- Alerts for {savedSearch?.name}
+ {t('searchModal.alertsFor')} {savedSearch?.name}
{!id && (
setName(e.currentTarget.value)}
required
@@ -589,7 +594,7 @@ export const DBSearchPageAlertModal = ({
{getWebhookChannelIcon(alert.channel.type)}
- Alert {index + 1}
+ {t('searchModal.alertNumber', { number: index + 1 })}
@@ -597,7 +602,7 @@ export const DBSearchPageAlertModal = ({
- New Alert
+ {t('searchModal.newAlert')}
diff --git a/packages/app/src/DBServiceMapPage.tsx b/packages/app/src/DBServiceMapPage.tsx
index e717c31921..019ea16255 100644
--- a/packages/app/src/DBServiceMapPage.tsx
+++ b/packages/app/src/DBServiceMapPage.tsx
@@ -10,6 +10,7 @@ import {
useQueryStates,
} from 'nuqs';
import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
import { SourceKind, TTraceSource } from '@hyperdx/common-utils/dist/types';
import {
@@ -82,6 +83,7 @@ const searchQueryStateMap = {
};
function DBServiceMapPage() {
+ const { t } = useTranslation('services');
const brandName = useBrandDisplayName();
const { data: sources } = useSources();
@@ -211,12 +213,12 @@ function DBServiceMapPage() {
() => (
<>
- Service Map - {brandName}
+ {t('map.browserTitle', { brandName })}
),
- [brandName],
+ [brandName, t],
);
const sourceSelect = source ? (
@@ -241,7 +243,7 @@ function DBServiceMapPage() {
const headerActions = (
- Sampling {samplingLabel}
+ {t('map.sampling', { label: samplingLabel })}
setIsCreateSourceModalOpen(false)}
- title="Configure New Trace Source"
+ title={t('map.createSourceTitle')}
>
}
- title="No trace sources configured"
- description="The Service Map visualizes relationships between your services using trace data. Configure a trace source to get started."
+ title={t('map.emptyTitle')}
+ description={t('map.emptyDescription')}
maw={600}
>
{IS_LOCAL_MODE ? (
@@ -300,7 +302,7 @@ function DBServiceMapPage() {
mt="sm"
onClick={() => setIsCreateSourceModalOpen(true)}
>
- Create Trace Source
+ {t('map.createTraceSource')}
) : (
)}
@@ -341,7 +343,9 @@ function DBServiceMapPage() {
>
(null);
const playerContainer = useRef(null);
@@ -494,7 +496,7 @@ export default function DOMPlayer({
@@ -509,13 +511,10 @@ export default function DOMPlayer({
{isLoading || isBuffering ? (
- {isBuffering ? 'Buffering to time...' : 'Loading replay...'}
+ {isBuffering ? t('player.buffering') : t('player.loading')}
) : isReplayFullyLoaded && replayer.current == null ? (
-
- No replay available for this session, most likely due to this
- session starting and ending in a background tab.
-
+ {t('player.unavailable')}
) : null}
{
- const count = filter.appliesToSourceIds?.length ?? 0;
- if (count === 0) return 'Applies to all sources';
- return `Applies to ${count} source${count === 1 ? '' : 's'}`;
-};
-
const DashboardFilterSelect = ({
filter,
onChange,
@@ -30,8 +25,12 @@ const DashboardFilterSelect = ({
isLoading,
isError,
}: DashboardFilterSelectProps) => {
+ const { t } = useTranslation('dashboards');
const valuesOrEmptyMemo = useMemo(() => values ?? [], [values]);
- const tooltipText = getAppliesToTooltip(filter);
+ const sourceCount = filter.appliesToSourceIds?.length ?? 0;
+ const tooltipText = sourceCount
+ ? t('filterBar.sourceCount', { count: sourceCount })
+ : t('filterBar.allSources');
return (
@@ -47,10 +46,7 @@ const DashboardFilterSelect = ({
/>
{isError && (
-
+
{
+ const { t } = useTranslation('dashboards');
const { handleSubmit, register, formState, control, reset } =
useForm({
defaultValues: {
@@ -148,7 +150,7 @@ const DashboardFilterEditForm = ({
return (
-
+
{!presetSource && (
@@ -311,6 +316,8 @@ interface EmptyStateProps {
}
const EmptyState = ({ onCreateFilter, onClose }: EmptyStateProps) => {
+ const { t } = useTranslation('dashboards');
+
return (
{
data-testid="dashboard-filters-empty-state"
>
- No filters yet.
+ {t('filters.empty')}
- Add filters to let users quickly narrow data on key columns. Saved
- filters will stay with this dashboard.
+ {t('filters.emptyDescription')}
@@ -357,13 +363,14 @@ const DashboardFiltersList = ({
onClose,
onAddNew,
}: DashboardFiltersListProps) => {
+ const { t } = useTranslation('dashboards');
const { data: sources } = useSources();
return (
@@ -383,7 +390,7 @@ const DashboardFiltersList = ({
: undefined;
const appliedDisplay = appliedSourceNames
? appliedSourceNames.join(', ')
- : 'All sources';
+ : t('filters.allSources');
return (
-
+
@@ -430,7 +434,7 @@ const DashboardFiltersList = ({
data-testid={`dashboard-filter-applies-to-${filter.name}`}
>
- Close
+ {t('filters.close')}
diff --git a/packages/app/src/EditablePageName.tsx b/packages/app/src/EditablePageName.tsx
index 24351ab0b9..b7ecc2d2db 100644
--- a/packages/app/src/EditablePageName.tsx
+++ b/packages/app/src/EditablePageName.tsx
@@ -1,4 +1,5 @@
import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { Box, Button, Input, Title } from '@mantine/core';
import { useHover } from '@mantine/hooks';
import { IconPencil } from '@tabler/icons-react';
@@ -10,6 +11,7 @@ export function EditablePageName({
name: string;
onSave: (name: string) => void;
}) {
+ const { t } = useTranslation('dashboards');
const [editing, setEditing] = useState(false);
const [editedName, setEditedName] = useState(name);
@@ -26,7 +28,7 @@ export function EditablePageName({
pe="md"
onDoubleClick={() => setEditing(true)}
className="cursor-pointer"
- title="Double click to edit"
+ title={t('editableName.editHint')}
>
{editing ? (
) : (
diff --git a/packages/app/src/GranularityPicker.tsx b/packages/app/src/GranularityPicker.tsx
index f6af477edd..9020897e36 100644
--- a/packages/app/src/GranularityPicker.tsx
+++ b/packages/app/src/GranularityPicker.tsx
@@ -1,5 +1,6 @@
import { memo } from 'react';
import { useController, UseControllerProps } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
import { Granularity } from '@hyperdx/common-utils/dist/core/utils';
import { Select } from '@mantine/core';
@@ -12,6 +13,7 @@ export function GranularityPicker({
onChange: (granularity: Granularity | 'auto' | undefined) => void;
disabled?: boolean;
}) {
+ const { t } = useTranslation('charts');
return (