i18n support

Author: sunlinyao

package.json

@@ -225,6 +225,8 @@
     "file-saver": "1.3.8",
     "hoist-non-react-statics": "3.3.0",
     "i18next": "19.0.2",
+    "i18next-xhr-backend": "^3.2.2",
+    "i18next-browser-languagedetector":"4.0.1",
     "immutable": "3.8.2",
     "is-hotkey": "0.1.4",
     "jquery": "3.4.1",

packages/grafana-ui/src/components/TimePicker/TimePicker.tsx

@@ -16,6 +16,7 @@ import { withTheme, useTheme } from '../../themes/ThemeContext';
 import { isDateTime, DateTime, rangeUtil, GrafanaTheme, TIME_FORMAT } from '@grafana/data';
 import { TimeRange, TimeOption, TimeZone, dateMath } from '@grafana/data';
 import { Themeable } from '../../types';
+import { Translation } from "react-i18next";
 
 const quickOptions: TimeOption[] = [
   { from: 'now-5m', to: 'now', display: 'Last 5 minutes', section: 3 },
@@ -198,7 +199,11 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
 
 const ZoomOutTooltip = () => (
   <>
-    Time range zoom out <br /> CTRL+Z
+    <Translation>
+      {
+        (t) => <>{t("Time range zoom out")} <br /> CTRL+Z</>
+      }
+    </Translation>
   </>
 );
 

packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerContent.tsx

@@ -9,6 +9,7 @@ import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
 import { TimeRangeList } from './TimeRangeList';
 import { mapRangeToTimeOption } from './mapper';
 import { getThemeColors } from './colors';
+import { Trans, useTranslation } from "react-i18next";
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const colors = getThemeColors(theme);
@@ -140,6 +141,7 @@ interface FormProps extends Omit<Props, 'history'> {
 }
 
 export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = props => {
+  const { t } = useTranslation();
   const theme = useTheme();
   const styles = getStyles(theme);
   const historyOptions = mapToHistoryOptions(props.history, props.timeZone);
@@ -153,15 +155,15 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = pr
       <CustomScrollbar className={styles.rightSide}>
         <NarrowScreenForm {...props} visible={!isFullscreen} historyOptions={historyOptions} />
         <TimeRangeList
-          title="Relative time ranges"
+          title={t("Relative time ranges")}
           options={quickOptions}
           onSelect={props.onChange}
           value={props.value}
           timeZone={props.timeZone}
         />
         <div className={styles.spacing} />
         <TimeRangeList
-          title="Other quick ranges"
+          title={t("Other quick ranges")}
           options={otherOptions}
           onSelect={props.onChange}
           value={props.value}
@@ -180,6 +182,7 @@ export const TimePickerContent: React.FC<Props> = props => {
 };
 
 const NarrowScreenForm: React.FC<FormProps> = props => {
+  const { t } = useTranslation();
   if (!props.visible) {
     return null;
   }
@@ -192,7 +195,9 @@ const NarrowScreenForm: React.FC<FormProps> = props => {
   return (
     <>
       <div className={styles.header} onClick={() => setCollapsed(!collapsed)}>
-        <TimePickerTitle>Absolute time range</TimePickerTitle>
+        <TimePickerTitle>
+          {t("Absolute time range")}
+        </TimePickerTitle>
         {collapsed ? <i className="fa fa-caret-up" /> : <i className="fa fa-caret-down" />}
       </div>
       {collapsed && (
@@ -206,7 +211,7 @@ const NarrowScreenForm: React.FC<FormProps> = props => {
             />
           </div>
           <TimeRangeList
-            title="Recently used absolute ranges"
+            title={t("Recently used absolute ranges")}
             options={props.historyOptions || []}
             onSelect={props.onChange}
             value={props.value}
@@ -220,6 +225,7 @@ const NarrowScreenForm: React.FC<FormProps> = props => {
 };
 
 const FullScreenForm: React.FC<FormProps> = props => {
+  const { t } = useTranslation();
   if (!props.visible) {
     return null;
   }
@@ -231,13 +237,13 @@ const FullScreenForm: React.FC<FormProps> = props => {
     <>
       <div className={styles.container}>
         <div className={styles.title}>
-          <TimePickerTitle>Absolute time range</TimePickerTitle>
+          <TimePickerTitle>{t("Absolute time range")}</TimePickerTitle>
         </div>
         <TimeRangeForm value={props.value} timeZone={props.timeZone} onApply={props.onChange} isFullscreen={true} />
       </div>
       <div className={styles.recent}>
         <TimeRangeList
-          title="Recently used absolute ranges"
+          title={t("Recently used absolute ranges")}
           options={props.historyOptions || []}
           onSelect={props.onChange}
           value={props.value}
@@ -250,22 +256,22 @@ const FullScreenForm: React.FC<FormProps> = props => {
 };
 
 const EmptyRecentList = memo(() => {
+  const { t } = useTranslation();
   const theme = useTheme();
   const styles = getEmptyListStyles(theme);
 
   return (
     <div className={styles.container}>
       <div>
         <span>
-          It looks like you haven't used this timer picker before. As soon as you enter some time intervals, recently
-          used intervals will appear here.
+          <Trans>time.history.null</Trans>
         </span>
       </div>
       <div>
         <a className={styles.link} href="https://grafana.com/docs/grafana/latest/reference/timerange/" target="_new">
-          Read the documentation
+          {t("Read the documentation")}
         </a>
-        <span> to find out more about how to enter custom time ranges.</span>
+        <span> {t("to find out more about how to enter custom time ranges.")}</span>
       </div>
     </div>
   );

packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx

@@ -5,6 +5,7 @@ import { mapStringsToTimeRange } from './mapper';
 import { TimePickerCalendar } from './TimePickerCalendar';
 import Forms from '../../Forms';
 import { isMathString } from '@grafana/data/src/datetime/datemath';
+import { useTranslation } from "react-i18next";
 
 interface Props {
   isFullscreen: boolean;
@@ -22,6 +23,7 @@ interface InputState {
 const errorMessage = 'Please enter a past date or "now"';
 
 export const TimeRangeForm: React.FC<Props> = props => {
+  const { t } = useTranslation();
   const { value, isFullscreen = false, timeZone, roundup } = props;
 
   const [from, setFrom] = useState<InputState>(valueToState(value.raw.from, false, timeZone));
@@ -65,7 +67,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
 
   return (
     <>
-      <Forms.Field label="From" invalid={from.invalid} error={errorMessage}>
+      <Forms.Field label={t("time.From")} invalid={from.invalid} error={errorMessage}>
         <Forms.Input
           onClick={event => event.stopPropagation()}
           onFocus={onFocus}
@@ -74,7 +76,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
           value={from.value}
         />
       </Forms.Field>
-      <Forms.Field label="To" invalid={to.invalid} error={errorMessage}>
+      <Forms.Field label={t("time.To")} invalid={to.invalid} error={errorMessage}>
         <Forms.Input
           onClick={event => event.stopPropagation()}
           onFocus={onFocus}
@@ -83,7 +85,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
           value={to.value}
         />
       </Forms.Field>
-      <Forms.Button onClick={onApply}>Apply time range</Forms.Button>
+  <Forms.Button onClick={onApply}>{t("Apply time range")}</Forms.Button>
 
       <TimePickerCalendar
         isFullscreen={isFullscreen}

public/app/app.ts

@@ -13,8 +13,6 @@ import 'react-dom';
 import 'vendor/bootstrap/bootstrap';
 import 'vendor/angular-other/angular-strap';
 
-import i18n from './core/i18n';
-
 import $ from 'jquery';
 import angular from 'angular';
 import config from 'app/core/config';
@@ -58,7 +56,6 @@ export class GrafanaApp {
   preBootModules: any[] | null;
 
   constructor() {
-    console.log("Current: " + i18n.locale);
     addClassIfNoOverlayScrollbar('no-overlay-scrollbar');
     this.preBootModules = [];
     this.registerFunctions = {};

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEvent, useContext } from 'react';
 import { CallToActionCard, LinkButton, ThemeContext } from '@grafana/ui';
 import { css } from 'emotion';
+import { Trans } from 'react-i18next';
 
 export interface Props {
   title: string;
@@ -46,7 +47,7 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
         {proTip ? (
           <span key="proTipFooter">
             <i className="fa fa-rocket" />
-            <> ProTip: {proTip} </>
+            <> <Trans>ProTip</Trans>: {proTip} </>
             <a href={proTipLink} target={proTipTarget} className="text-link">
               {proTipLinkTitle}
             </a>

public/app/core/i18n/index.ts

@@ -3,35 +3,41 @@ import { initReactI18next } from "react-i18next";
 import config from '../config';
 
 
-async function LoadLanguage() {
+function LoadLanguage(callback: () => void) {
     let name = config.bootData.user.language;
     if (name === "") {
         name = "en_US";
     }
-    config.bootData.ready = false;
     let locale: any;
     switch (name) {
         case "zh_CN":
             require.ensure([], (require: NodeRequire) => {
                 locale = require("./translate/zh_CN.js");
                 initI18n(locale, name);
-                config.bootData.ready = true;
+                callback();
             }, "zh_CN");
             break;
         default:
             require.ensure([], (require: NodeRequire) => {
                 locale = require("./translate/en_US.js");
                 initI18n(locale, name);
-                config.bootData.ready = true;
+                callback();
             }, "en_US");
             break;
     }
-    return await locale;
 }
 
+export const T = (text: string) => {
+    const locale = config.bootData.translate;
+    if (locale.hasOwnProperty(text)) {
+        return Object.getOwnPropertyDescriptor(locale, text).value;
+    }
+    return text;
+};
 
 export const initI18n = (locale: object, name: string) => {
     try {
+        config.bootData.translate = locale;
         const resources: { [index: string]: any } = {};
         resources[name] = {
             translation: locale
@@ -41,7 +47,11 @@ export const initI18n = (locale: object, name: string) => {
             .init({
                 resources,
                 lng: name,
-
+                saveMissing: false,
+                react: {
+                    useSuspense: true,
+                },
+                debug: true,
                 keySeparator: false, // we do not use keys in form messages.welcome
 
                 interpolation: {
@@ -86,6 +96,6 @@ function depthTrans(locale: object, nav: NavTree[]) {
     });
 }
 
-LoadLanguage();
 
-export default { "locale": config.bootData.user.language };
+
+export default LoadLanguage;

public/app/core/i18n/translate/en_US.js

@@ -1,4 +1,35 @@
 module.exports = {
     "Full name": "Name",
     "Login Name": "Login",
+    "time.history.null": "It looks like you haven't used this timer picker before. As soon as you enter some time intervals, recentlyused intervals will appear here.",
+    "playlist.tip": "You can use playlists to cycle dashboards on TVs without user control",
+    "playlist.description": "A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.",
+    "playlist.dashboards.empty": "Playlist is empty, add dashboards below.",
+    "variavble.describe": ` <p>
+    Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or
+    sensor names in your metric queries you can use variables in their place. Variables are shown as dropdown
+    select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in
+    your dashboard. Check out the
+    <a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
+      Templating documentation
+    </a>
+    for more information.
+  </p>`,
+    "dashboard.link.describe": `<p>
+  Dashboard Links allow you to place links to other dashboards and web sites directly in below the dashboard
+  header.
+</p>`,
+    "dashboard.annotation.describe": `<p>Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines
+and icons on all graph panels. When you hover over an annotation icon you can get event text &amp; tags for
+the event. You can add annotation events directly from grafana by holding CTRL or CMD + click on graph (or
+drag region). These will be stored in Grafana's annotation database.
+</p>
+Checkout the
+<a class='external-link' target='_blank' href='http://docs.grafana.org/reference/annotations/'
+>Annotations documentation</a
+>
+for more information.`,
+    "time.delay.tooltip": "Enter 1m to ignore the last minute (because it can contain incomplete metrics)",
+    "dashboard.editable.tooltip": "Uncheck, then save and reload to disable all dashboard editing",
+    "dashboard.tooltip.tooltip": "Cycle between options using Shortcut: CTRL+O or CMD+O",
 };