Localisation

docs/README.md

@@ -97,3 +97,7 @@ Also this server serves UI and API for watching gathered statistic on `http-host
 ## Prometheus
 
 Prometheus metrics available on API endpoint `/api/nodes/statistics/prometheus`.
+
+# Localisation
+
+You may contribute to project localisation at https://www.transifex.com/gometric/opcache-dashboard

example/config.yaml

@@ -44,7 +44,7 @@ ui:
 
 metrics:
   statsd:
-    enabled: true
+    enabled: false
     host: "127.0.0.1"
     port: 8125
     prefix: "some.metric.prefix"

go.mod

@@ -10,8 +10,8 @@ require (
 	github.com/kisielk/errcheck v1.6.0 // indirect
 	github.com/prometheus/client_golang v1.10.0
 	golang.org/x/lint v0.0.0-20210508222113-6edffad5e616 // indirect
-	golang.org/x/mod v0.5.0 // indirect
-	golang.org/x/sys v0.0.0-20210921065528-437939a70204 // indirect
+	golang.org/x/mod v0.5.1 // indirect
+	golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6 // indirect
 	golang.org/x/tools v0.1.6 // indirect
 	gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b
 )

go.sum

@@ -318,6 +318,8 @@ golang.org/x/mod v0.4.2 h1:Gz96sIWK3OalVv/I/qNygP42zyoKp3xptRVCWRFEBvo=
 golang.org/x/mod v0.4.2/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.5.0 h1:UG21uOlmZabA4fW5i7ZX6bjw1xELEGg/ZLgZq9auk/Q=
 golang.org/x/mod v0.5.0/go.mod h1:5OXOZSfqPIIbmVBIIKWRFfZjPR0E5r58TLhUjH0a2Ro=
+golang.org/x/mod v0.5.1 h1:OJxoQ/rynoF0dcCdI7cLPktw/hR2cueqYfjm43oqK38=
+golang.org/x/mod v0.5.1/go.mod h1:5OXOZSfqPIIbmVBIIKWRFfZjPR0E5r58TLhUjH0a2Ro=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -408,6 +410,10 @@ golang.org/x/sys v0.0.0-20210917161153-d61c044b1678 h1:J27LZFQBFoihqXoegpscI10Hp
 golang.org/x/sys v0.0.0-20210917161153-d61c044b1678/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210921065528-437939a70204 h1:JJhkWtBuTQKyz2bd5WG9H8iUsJRU3En/KRfN8B2RnDs=
 golang.org/x/sys v0.0.0-20210921065528-437939a70204/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210925032602-92d5a993a665 h1:QOQNt6vCjMpXE7JSK5VvAzJC1byuN3FgTNSBwf+CJgI=
+golang.org/x/sys v0.0.0-20210925032602-92d5a993a665/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6 h1:foEbQz/B0Oz6YIqu/69kfXPYeFQAuuMYFkjaqXzl5Wo=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=

ui/assets/.tx/config

@@ -0,0 +1,10 @@
+[main]
+host = https://www.transifex.com
+
+[opcache-dashboard.en-json]
+file_filter = lang/<lang>.json
+minimum_perc = 0
+source_file = lang/en.json
+source_lang = en
+type = STRUCTURED_JSON
+

ui/assets/components/Layout.jsx → ui/assets/components/Layout.tsx

@@ -27,6 +27,7 @@ import ApcuConfigurationPage from '/components/pages/apcu/ApcuConfigurationPage'
 import NotFoundPage from '/components/pages/NotFoundPage'
 import ClusterSelect from '/components/ClusterSelect';
 import OpcacheStatusRefreshButton from '/components/OpcacheStatusRefreshButton';
+import {FormattedMessage} from 'react-intl'
 
 import {
     Switch,
@@ -177,12 +178,12 @@ export default function Layout() {
                 <List>
                     <div>
                         <ListSubheader>Opcache</ListSubheader>
-                        <MenuItem to="/opcache/status" icon={(<EqualizerIcon />)} primary="Status"></MenuItem>
-                        <MenuItem to="/opcache/configuration" icon={(<SettingsIcon />)} primary="Configuration"></MenuItem>
-                        <MenuItem to="/opcache/scripts" icon={(<ListIcon />)} primary="Scripts"></MenuItem>
+                        <MenuItem to="/opcache/status" icon={(<EqualizerIcon />)} primary={(<FormattedMessage defaultMessage="Status"/>)}></MenuItem>
+                        <MenuItem to="/opcache/configuration" icon={(<SettingsIcon />)} primary={(<FormattedMessage defaultMessage="Configuration"/>)}></MenuItem>
+                        <MenuItem to="/opcache/scripts" icon={(<ListIcon />)} primary={(<FormattedMessage defaultMessage="Scripts"/>)}></MenuItem>
                         <ListSubheader>APCu</ListSubheader>
-                        <MenuItem to="/apcu/status" icon={(<EqualizerIcon />)} primary="Status"></MenuItem>
-                        <MenuItem to="/apcu/configuration" icon={(<SettingsIcon />)} primary="Configuration"></MenuItem>
+                        <MenuItem to="/apcu/status" icon={(<EqualizerIcon />)} primary={(<FormattedMessage defaultMessage="Status"/>)}></MenuItem>
+                        <MenuItem to="/apcu/configuration" icon={(<SettingsIcon />)} primary={(<FormattedMessage defaultMessage="Configuration"/>)}></MenuItem>
                     </div>
                 </List>
             </Drawer>

ui/assets/components/OpcacheStatusAlerts.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import AlertsPanel from '/components/AlertsPanel';
+import {FormattedMessage} from 'react-intl';
 
 const buildAlertsDataFromOpcacheStatus = function(opcacheStatus) {
     const alerts = [];
+    let message;
 
     if (opcacheStatus.CacheFull) {
+        message = <FormattedMessage defaultMessage='Cache is full, increase "opcache.memory_consumption" or decrease "opcache.max_wasted_percentage".' />;
+
         alerts.push({
             'severity': 'error',
-            'message': 'Cache is full, increase "opcache.memory_consumption" or decrease "opcache.max_wasted_percentage".',
+            'message': message
         });
     }
 

ui/assets/components/OpcacheStatusRefreshButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@material-ui/core';
 import { connect } from 'react-redux';
 import refreshOpcacheStatuses from '/actionCreators/refreshOpcacheStatuses';
+import {FormattedMessage} from 'react-intl';
 
 const mapDispatchToProps = (dispatch) => {
     return {
@@ -19,7 +20,7 @@ function OpcacheStatusRefreshButtonComponent(props) {
     return (
         <Button color="inherit" onClick={handleButtonClick}>
             <span>
-                Refresh
+                <FormattedMessage defaultMessage="Refresh"/>
             </span>
         </Button>
     );

ui/assets/components/pages/NotFoundPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Typography } from "@material-ui/core";
+import {FormattedMessage} from "react-intl";
+
+export default function StatusPage() {
+    return (
+        <Typography>
+            <FormattedMessage defaultMessage='Page not found'/>
+        </Typography>
+    );
+}

ui/assets/entrypoint.js

@@ -4,34 +4,51 @@ import { Provider } from 'react-redux'
 import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk'
 import { composeWithDevTools } from 'redux-devtools-extension';
-import Layout from '/components/Layout.jsx';
+import Layout from '/components/Layout.tsx';
 import { ThemeProvider } from '@material-ui/core/styles';
 import Theme from '/components/Theme.tsx';
 import reducer from '/reducers/reducer';
 import fetchOpcacheStatuses from '/actionCreators/fetchOpcacheStatuses'
 import {BrowserRouter as Router} from "react-router-dom";
+import {IntlProvider} from 'react-intl';
+import {loadLocaleData, detectLocale} from '/tools/l10n';
 
-// store
-let store = createStore(
-    reducer,
-    composeWithDevTools(
-        applyMiddleware(
-            thunkMiddleware
-        ),
-    )
-);
+async function bootstrapApplication(mainDiv) {
+    // store
+    let store = createStore(
+        reducer,
+        composeWithDevTools(
+            applyMiddleware(
+                thunkMiddleware
+            ),
+        )
+    );
+
+    // locale
+    const locale = detectLocale();
+    const messages = await loadLocaleData(locale)
+
+    // render layout
+    ReactDOM.render(
+        <ThemeProvider theme={Theme}>
+            <Provider store={store}>
+                <Router>
+                    <IntlProvider locale={locale} defaultLocale="en" messages={messages}>
+                        <Layout/>
+                    </IntlProvider>
+                </Router>
+            </Provider>
+        </ThemeProvider>,
+        mainDiv
+    );
 
-// render layout
-ReactDOM.render(
-    <ThemeProvider theme={Theme}>
-        <Provider store={store}>
-            <Router>
-                <Layout/>
-            </Router>
-        </Provider>
-    </ThemeProvider>,
+    // init data
+    store.dispatch(fetchOpcacheStatuses());
+}
+
+bootstrapApplication(
     document.getElementById('app')
 );
 
-// start app
-store.dispatch(fetchOpcacheStatuses());
+
+

ui/assets/lang/en.json

@@ -0,0 +1,20 @@
+{
+  "7OW8BT": {
+    "string": "Configuration"
+  },
+  "HCfIc7": {
+    "string": "Scripts"
+  },
+  "N1iczq": {
+    "string": "Cache is full, increase \"opcache.memory_consumption\" or decrease \"opcache.max_wasted_percentage\"."
+  },
+  "QRccCM": {
+    "string": "Page not found"
+  },
+  "rELDbB": {
+    "string": "Refresh"
+  },
+  "tzMNF3": {
+    "string": "Status"
+  }
+}

ui/assets/lang/uk_UA.json

@@ -0,0 +1,20 @@
+{
+  "7OW8BT": {
+    "string": "Конфігурація"
+  },
+  "HCfIc7": {
+    "string": "Скрипти"
+  },
+  "N1iczq": {
+    "string": "Кеш заповнений, збільште \"opcache.memory_consumption\" або зменшіть \"opcache.max_wasted_percentage\"."
+  },
+  "QRccCM": {
+    "string": "Сторінку не знайдено"
+  },
+  "rELDbB": {
+    "string": "Оновити"
+  },
+  "tzMNF3": {
+    "string": "Статус"
+  }
+}

ui/assets/package.json

@@ -6,6 +6,8 @@
   "author": "Dmytro Sokil <[email protected]>",
   "license": "MIT",
   "private": false,
+  "lang": "land",
+  "supportedLocales": ["en", "uk"],
   "dependencies": {
     "@babel/core": "^7.12.16",
     "@babel/plugin-proposal-class-properties": "^7.12.13",
@@ -19,27 +21,32 @@
     "@babel/preset-env": "^7.12.16",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
+    "@formatjs/intl-getcanonicallocales": "^1.7.3",
+    "@formatjs/intl-locale": "^2.4.37",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "babel-loader": "^8.2.2",
+    "babel-plugin-formatjs": "^10.3.8",
     "chart.js": "^2.9.4",
     "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.0.2",
     "eslint": "^7.23.0",
     "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
+    "json-loader": "^0.5.7",
     "lodash-es": "^4.17.20",
     "luxon": "^1.26.0",
     "material-table": "^1.69.3",
     "mini-css-extract-plugin": "^1.3.7",
     "pretty-bytes": "^5.5.0",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-chartjs-2": "^2.11.1",
     "react-dom": "^17.0.1",
+    "react-intl": "^5.20.10",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
@@ -57,6 +64,15 @@
     "build-dev": "NODE_ENV=development ./node_modules/.bin/webpack",
     "dev-serve": "NODE_ENV=development ./node_modules/.bin/webpack serve --hot --devtool source-map --liveReload --inline --content-base public --port 8050 --host 127.0.0.1 --config webpack.config.js",
     "lint": "NODE_ENV=development ./node_modules/.bin/eslint .",
-    "build-prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress"
+    "build-prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress",
+    "intl-extract": "formatjs extract 'components/**/*.tsx' --out-file lang/en.json --format=transifex",
+    "intl-compile": "formatjs compile-folder --ast lang dist/lang --format=transifex",
+    "transifex-push": "tx push --source",
+    "transifex-pull": "tx pull --all"
+  },
+  "devDependencies": {
+    "@formatjs/cli": "^4.2.33",
+    "@formatjs/ts-transformer": "^3.4.10",
+    "eslint-plugin-formatjs": "^2.17.7"
   }
 }

ui/assets/tools/l10n.js

@@ -0,0 +1,19 @@
+export async function loadLocaleData(locale: string) {
+    return import('/dist/lang/' + locale + '.json');
+}
+
+export function detectLocale() {
+    const supportedLanguages = ['en', 'uk'];
+    const currentLanguageTag = navigator.language;
+    const language = currentLanguageTag.split('-')[0];
+
+    if (supportedLanguages.indexOf(currentLanguageTag) !== -1) {
+        return currentLanguageTag;
+    }
+
+    if (language && supportedLanguages.indexOf(language) !== -1) {
+        return language;
+    }
+
+    return supportedLanguages[0];
+}

ui/assets/webpack.config.js

@@ -49,7 +49,8 @@ module.exports = {
     },
     output: {
         path: path.resolve(__dirname, 'dist'),
-        filename: './../dist/bundle.js'
+        publicPath: '/assets/',
+        filename: 'bundle.js'
     },
     // included externally but must be used in bundle
     externals: {},
@@ -59,7 +60,7 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /.(js|jsx|ts|tsx)?$/,
+                test: /.(js|jsx|ts|tsx)$/,
                 include: [
                     path.resolve(__dirname, ".")
                 ],
@@ -79,7 +80,11 @@ module.exports = {
                             '@babel/preset-react',
                             [
                                 "@babel/preset-typescript",
-                                { isTSX: true, allExtensions: true }
+                                {
+                                    isTSX: true,
+                                    allExtensions: true,
+                                    resolveJsonModule: true,
+                                }
                             ]
                         ],
                         plugins: [
@@ -91,6 +96,13 @@ module.exports = {
                             '@babel/plugin-proposal-function-bind',
                             '@babel/plugin-proposal-optional-chaining',
                             '@babel/plugin-proposal-json-strings',
+                            [
+                                "formatjs",
+                                {
+                                    "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+                                    "ast": true
+                                }
+                            ]
                         ]
                     }
                 },