IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Internationalisation: Translates RefreshPicker and the dashboard toolbar (#51827)

Browse Source
This commit is contained in:
Joao Silva
2022-07-20 17:28:32 +01:00
committed by GitHub
parent 60da9eaac5
commit e3567c21d1
8 changed files with 401 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/app/features/dashboard/components/DashNav/DashNav.tsx
View File

@@ -1,3 +1,4 @@
import { t, Trans } from '@lingui/macro';
import React, { FC, ReactNode } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { useLocation } from 'react-router-dom';
@@ -120,7 +121,9 @@ export const DashNav = React.memo<Props>((props) => {
}
if (canStar) {
let desc = isStarred ? 'Unmark as favorite' : 'Mark as favorite';
let desc = isStarred
? t({ id: 'dashboard.toolbar.unmark-favorite', message: 'Unmark as favorite' })
: t({ id: 'dashboard.toolbar.mark-favorite', message: 'Mark as favorite' });
buttons.push(
<DashNavButton
tooltip={desc}
@@ -134,12 +137,11 @@ export const DashNav = React.memo<Props>((props) => {
}
if (canShare) {
let desc = 'Share dashboard or panel';
buttons.push(
<ModalsController key="button-share">
{({ showModal, hideModal }) => (
<DashNavButton
tooltip={desc}
tooltip={t({ id: 'dashboard.toolbar.share', message: 'Share dashboard or panel' })}
icon="share-alt"
iconSize="lg"
onClick={() => {
@@ -163,7 +165,7 @@ export const DashNav = React.memo<Props>((props) => {
<ModalsController key="button-dashboard-comments">
{({ showModal, hideModal }) => (
<DashNavButton
tooltip="Show dashboard comments"
tooltip={t({ id: 'dashboard.toolbar.comments-show', message: 'Show dashboard comments' })}
icon="comment-alt-message"
iconSize="lg"
onClick={() => {
@@ -185,9 +187,21 @@ export const DashNav = React.memo<Props>((props) => {
const renderPlaylistControls = () => {
return (
<ButtonGroup key="playlist-buttons">
<ToolbarButton tooltip="Go to previous dashboard" icon="backward" onClick={onPlaylistPrev} narrow />
<ToolbarButton onClick={onPlaylistStop}>Stop playlist</ToolbarButton>
<ToolbarButton tooltip="Go to next dashboard" icon="forward" onClick={onPlaylistNext} narrow />
<ToolbarButton
tooltip={t({ id: 'dashboard.toolbar.playlist-previous', message: 'Go to previous dashboard' })}
icon="backward"
onClick={onPlaylistPrev}
narrow
/>
<ToolbarButton onClick={onPlaylistStop}>
<Trans id="dashboard.toolbar.playlist-stop">Stop playlist</Trans>
</ToolbarButton>
<ToolbarButton
tooltip={t({ id: 'dashboard.toolbar.playlist-next', message: 'Go to next dashboard' })}
icon="forward"
onClick={onPlaylistNext}
narrow
/>
</ButtonGroup>
);
};
@@ -211,7 +225,12 @@ export const DashNav = React.memo<Props>((props) => {
const snapshotUrl = snapshot && snapshot.originalUrl;
const buttons: ReactNode[] = [];
const tvButton = (
<ToolbarButton tooltip="Cycle view mode" icon="monitor" onClick={onToggleTVMode} key="tv-button" />
<ToolbarButton
tooltip={t({ id: 'dashboard.toolbar.tv-button', message: 'Cycle view mode' })}
icon="monitor"
onClick={onToggleTVMode}
key="tv-button"
/>
);
if (isPlaylistRunning()) {
@@ -223,7 +242,14 @@ export const DashNav = React.memo<Props>((props) => {
}
if (canEdit && !isFullscreen) {
buttons.push(<ToolbarButton tooltip="Add panel" icon="panel-add" onClick={onAddPanel} key="button-panel-add" />);
buttons.push(
<ToolbarButton
tooltip={t({ id: 'dashboard.toolbar.add-panel', message: 'Add panel' })}
icon="panel-add"
onClick={onAddPanel}
key="button-panel-add"
/>
);
}
if (canSave && !isFullscreen) {
@@ -231,7 +257,7 @@ export const DashNav = React.memo<Props>((props) => {
<ModalsController key="button-save">
{({ showModal, hideModal }) => (
<ToolbarButton
tooltip="Save dashboard"
tooltip={t({ id: 'dashboard.toolbar.save', message: 'Save dashboard' })}
icon="save"
onClick={() => {
showModal(SaveDashboardDrawer, {
@@ -248,7 +274,7 @@ export const DashNav = React.memo<Props>((props) => {
if (snapshotUrl) {
buttons.push(
<ToolbarButton
tooltip="Open original dashboard"
tooltip={t({ id: 'dashboard.toolbar.open-original', message: 'Open original dashboard' })}
onClick={() => gotoSnapshotOrigin(snapshotUrl)}
icon="link"
key="button-snapshot"
@@ -258,7 +284,12 @@ export const DashNav = React.memo<Props>((props) => {
if (showSettings) {
buttons.push(
<ToolbarButton tooltip="Dashboard settings" icon="cog" onClick={onOpenSettings} key="button-settings" />
<ToolbarButton
tooltip={t({ id: 'dashboard.toolbar.settings', message: 'Dashboard settings' })}
icon="cog"
onClick={onOpenSettings}
key="button-settings"
/>
);
}

15
public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
View File

@@ -1,3 +1,4 @@
import { t } from '@lingui/macro';
import React, { Component } from 'react';
import { Unsubscribable } from 'rxjs';
@@ -103,8 +104,20 @@ export class DashNavTimeControls extends Component<Props> {
onRefresh={this.onRefresh}
value={dashboard.refresh}
intervals={intervals}
tooltip="Refresh dashboard"
tooltip={t({ id: 'dashboard.toolbar.refresh', message: 'Refresh dashboard' })}
noIntervalPicker={hideIntervalPicker}
offDescriptionAriaLabelMsg={t({
id: 'dashboard.refresh-picker.off-description',
message: 'Auto refresh turned off. Choose refresh time interval',
})}
onDescriptionAriaLabelMsg={(durationAriaLabel) =>
t({
id: 'dashboard.refresh-picker.on-description',
message: `Choose refresh time interval with current interval ${durationAriaLabel} selected`,
})
}
offOptionLabelMsg={t({ id: 'dashboard.refresh-picker.off-label', message: 'Off' })}
offOptionAriaLabelMsg={t({ id: 'dashboard.refresh-picker.off-arialabel', message: 'Turn off auto refresh' })}
/>
</ToolbarButtonRow>
);