Internationalisation: Translates "Inspect panel" drawer (#52324)

This commit is contained in:
Joao Silva
2022-07-15 14:38:14 +01:00
committed by GitHub
parent 0531e4efc0
commit 57273d4846
11 changed files with 775 additions and 42 deletions

View File

@@ -1,3 +1,4 @@
import { t } from '@lingui/macro';
import React, { useState } from 'react';
import { CoreApp, DataSourceApi, formattedValueToString, getValueFormat, PanelData, PanelPlugin } from '@grafana/data';
@@ -57,11 +58,15 @@ export const InspectContent: React.FC<Props> = ({
activeTab = InspectTab.JSON;
}
const title = getTemplateSrv().replace(panel.title, panel.scopedVars, 'text');
const panelTitle = getTemplateSrv().replace(panel.title, panel.scopedVars, 'text') || 'Panel';
const title = t({
id: 'dashboard.inspect.title',
message: `Inspect: ${panelTitle}`,
});
return (
<Drawer
title={`Inspect: ${title || 'Panel'}`}
title={title}
subtitle={data && formatStats(data)}
width="50%"
onClose={onClose}
@@ -119,5 +124,8 @@ function formatStats(data: PanelData) {
const requestTime = request.endTime ? request.endTime - request.startTime : 0;
const formatted = formattedValueToString(getValueFormat('ms')(requestTime));
return `${queryCount} queries with total query time of ${formatted}`;
return t({
id: 'dashboard.inspect.subtitle',
message: `${queryCount} queries with total query time of ${formatted}`,
});
}

View File

@@ -1,3 +1,4 @@
import { t } from '@lingui/macro';
import { useMemo } from 'react';
import useAsync from 'react-use/lib/useAsync';
@@ -47,29 +48,32 @@ export const useInspectTabs = (
return useMemo(() => {
const tabs = [];
if (supportsDataQuery(plugin)) {
tabs.push({ label: 'Data', value: InspectTab.Data });
tabs.push({ label: 'Stats', value: InspectTab.Stats });
tabs.push({ label: t({ id: 'dashboard.inspect.data-tab', message: 'Data' }), value: InspectTab.Data });
tabs.push({ label: t({ id: 'dashboard.inspect.stats-tab', message: 'Stats' }), value: InspectTab.Stats });
}
if (metaDs) {
tabs.push({ label: 'Meta Data', value: InspectTab.Meta });
tabs.push({ label: t({ id: 'dashboard.inspect.meta-tab', message: 'Meta Data' }), value: InspectTab.Meta });
}
tabs.push({ label: 'JSON', value: InspectTab.JSON });
tabs.push({ label: t({ id: 'dashboard.inspect.json-tab', message: 'JSON' }), value: InspectTab.JSON });
if (error && error.message) {
tabs.push({ label: 'Error', value: InspectTab.Error });
tabs.push({ label: t({ id: 'dashboard.inspect.error-tab', message: 'Error' }), value: InspectTab.Error });
}
// This is a quick internal hack to allow custom actions in inspect
// For 8.1, something like this should be exposed through grafana/runtime
const supplier = (window as any).grafanaPanelInspectActionSupplier as PanelInspectActionSupplier;
if (supplier && supplier.getActions(panel)) {
tabs.push({ label: 'Actions', value: InspectTab.Actions });
tabs.push({
label: t({ id: 'dashboard.inspect.actions-tab', message: 'Actions' }),
value: InspectTab.Actions,
});
}
if (dashboard.meta.canEdit && supportsDataQuery(plugin)) {
tabs.push({ label: 'Query', value: InspectTab.Query });
tabs.push({ label: t({ id: 'dashboard.inspect.query-tab', message: 'Query' }), value: InspectTab.Query });
}
return tabs;
}, [panel, plugin, metaDs, dashboard, error]);