Update Helm values to v2.3.0-RC1

Signed-off-by: Johann Hoffmann <johann.hoffmann@mailbox.org>

.dockerignore

@@ -25,3 +25,4 @@ yarn-error.log*
 .git
 .github
 Dockerfile
+helm

.eslintignore

@@ -1 +1,4 @@
-/src/assets
+/src/assets
+/build
+/node_modules
+.github

.eslintrc

@@ -1,16 +1,11 @@
 {
-    "parser": "babel-eslint",
-    "parserOptions": {
-    "sourceType": "module",
-    "allowImportExportEverywhere": false,
-    "codeFrame": false
-},
-"extends": ["airbnb", "prettier"],
-"env": {
-    "browser": true,
-    "jest": true
-},
-"rules": {
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "env": {
+      "browser": true,
+      "jest": true
+  },
+  "rules": {
     "max-len": ["error", {"code": 150}],
     "prefer-promise-reject-errors": ["off"],
     "react/jsx-filename-extension": ["off"],
@@ -18,13 +13,22 @@
     "no-return-assign": ["off"],
     "react/jsx-props-no-spreading": ["off"],
     "react/destructuring-assignment": ["off"],
-    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"]
+    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-wrap-multilines": "off",
+    "react/jsx-curly-newline": "off"
   },
   "settings": {
     "import/resolver": {
       "node": {
         "paths": ["src"]
       }
-    },
+    }
   },
-}
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "sourceType": "module",
+      "allowImportExportEverywhere": false,
+      "codeFrame": false
+    }
+}

.github/workflows/ci.yml

@@ -0,0 +1,68 @@
+name: Build Docker image
+
+on:
+  push:
+    paths-ignore:
+      - '**.md'
+    branches:
+      - main
+      - 'release/*'
+    tags:
+      - 'v*'
+  pull_request:
+    branches:
+      - main
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  docker:
+    runs-on: ubuntu-20.04
+    env:
+      DOCKER_REGISTRY_URL: tip-tip-wlan-cloud-ucentral.jfrog.io
+      DOCKER_REGISTRY_USERNAME: ucentral
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Build Docker image
+      run: docker build -t owgw-ui:${{ github.sha }} .
+
+    - name: Tag Docker image
+      run: |
+        TAGS="${{ github.sha }}"
+
+        if [[ ${GITHUB_REF} == "refs/heads/"* ]]
+        then
+          CURRENT_TAG=$(echo ${GITHUB_REF#refs/heads/} | tr '/' '-')
+          TAGS="$TAGS $CURRENT_TAG"
+        else
+          if [[ ${GITHUB_REF} == "refs/tags/"* ]]
+          then
+            CURRENT_TAG=$(echo ${GITHUB_REF#refs/tags/} | tr '/' '-')
+            TAGS="$TAGS $CURRENT_TAG"
+          else # PR build
+            CURRENT_TAG=$(echo ${GITHUB_HEAD_REF#refs/heads/} | tr '/' '-')
+            TAGS="$TAGS $CURRENT_TAG"
+          fi
+        fi
+
+        echo "Result tags: $TAGS"
+
+        for tag in $TAGS; do
+          docker tag owgw-ui:${{ github.sha }} ${{ env.DOCKER_REGISTRY_URL }}/owgw-ui:$tag
+        done
+
+    - name: Log into Docker registry
+      if: startsWith(github.ref, 'refs/tags/') || startsWith(github.ref, 'refs/pull/') || github.ref == 'refs/heads/main'
+      uses: docker/login-action@v1
+      with:
+        registry: ${{ env.DOCKER_REGISTRY_URL }}
+        username: ${{ env.DOCKER_REGISTRY_USERNAME }}
+        password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}
+
+    - name: Push Docker images
+      if: startsWith(github.ref, 'refs/tags/') || startsWith(github.ref, 'refs/pull/') || github.ref == 'refs/heads/main'
+      run: |
+        docker images | grep ${{ env.DOCKER_REGISTRY_URL }}/owgw-ui | awk -F ' ' '{print $1":"$2}' | xargs -I {} docker push {}

.github/workflows/cleanup.yml

@@ -0,0 +1,19 @@
+name: Clean up PR Docker images
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [ closed ]
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          export PR_BRANCH_TAG=$(echo ${GITHUB_HEAD_REF#refs/heads/} | tr '/' '-')
+          curl -uucentral:${{ secrets.DOCKER_REGISTRY_PASSWORD }} -X DELETE "https://tip.jfrog.io/artifactory/tip-wlan-cloud-ucentral/owgw-ui/$PR_BRANCH_TAG"

.gitignore

@@ -1,4 +1,4 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
 
 # dependencies
 /node_modules

.prettierignore

@@ -0,0 +1,4 @@
+/src/assets
+build
+node_modules
+.github

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-alpine3.11 AS build
+FROM node:14-alpine3.11 AS build
 
 COPY package.json package-lock.json /
 
@@ -6,9 +6,10 @@ RUN npm install
 
 COPY . .
 
-RUN echo '{"DEFAULT_GATEWAY_URL": "https://ucentral.dpaas.arilia.com:16001","ALLOW_GATEWAY_CHANGE": true}' > public/config.json \
-    && npm run build
+RUN npm run build
 
 FROM nginx:1.20.1-alpine AS runtime
 
 COPY --from=build /build/ /usr/share/nginx/html/
+
+COPY --from=build docker-entrypoint.d/40-generate-config.sh /docker-entrypoint.d/40-generate-config.sh

README.md

@@ -9,18 +9,40 @@ NOTE: This UI will be evolving as micro services are added to the uCentral progr
 ## Running the solution
 
 ### Development
-Here are the instructions to run the solution on your machine for development purposes. You need to run these in the root folder of the project and also have npm installed on your machine. Please install `npm` for the platform you are using.
+You need to run these commands in the root folder of the project and also have npm installed on your machine.
 ```
 git clone https://github.com/Telecominfraproject/wlan-cloud-ucentralgw-ui
 cd wlan-cloud-ucentralgw-ui
 npm install
 npm start
 ```
+
+Run these commands if you want to run the solution on your machine while also doing development on the [uCentral UI Library](https://github.com/Telecominfraproject/wlan-cloud-ucentral-ui-libs).
+```
+git clone https://github.com/Telecominfraproject/wlan-cloud-ucentralgw-ui
+git clone https://github.com/Telecominfraproject/wlan-cloud-ucentral-ui-libs
+cd wlan-cloud-ucentralgw-ui
+npm link ../wlan-cloud-ucentral-ui-libs // Add sudo at the start of this command if it fails because of permissions
+npm start
+```
+
 ### Production
-Here are the instructions to build the production veresion of the application. You need to run this in the root folder of the project and also have npm installed on your machine.
+You need to run this in the root folder of the project and also have npm installed on your machine.
 ```
 git clone https://github.com/Telecominfraproject/wlan-cloud-ucentralgw-ui
 cd wlan-cloud-ucentralgw-ui
+npm install
 npm run build
 ```
-Once the build is done, you can move the `build` folder on your server.
+Once the build is done, you can move the `build` folder on your server.
+
+### Configuration
+You must change the `config.json` file in `public` directory to point to your uCentral Security Service URL (uCentralSec). You may also limit the ability for users to change the default uCentralSec. If you do not allow a uCentralSec change, the uCentralSec URL will not appear on the login screen. 
+
+Here are the current default values: 
+```
+{
+  "DEFAULT_UCENTRALSEC_URL": "https://ucentral.dpaas.arilia.com:16001",
+  "ALLOW_UCENTRALSEC_CHANGE": false
+}
+```

babel.config.json

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        "@babel/plugin-transform-react-inline-elements",
+        "@babel/plugin-transform-react-constant-elements",
+        [
+          "transform-react-remove-prop-types",
+          {
+            "removeImport": true
+          }
+        ]
+      ]
+    }
+  }
+}

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../build'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
+};

config/webpack.common.js

@@ -0,0 +1,79 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
+const path = require('path');
+const paths = require('./paths');
+
+module.exports = {
+  entry: [paths.src + '/index.js'],
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+  },
+  resolve: {
+    modules: [path.resolve('./node_modules'), path.resolve('./src')],
+    preferRelative: true,
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.VERSION': JSON.stringify(process.env.npm_package_version),
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[id].[contenthash].css',
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: paths.src + '/assets',
+          to: 'assets',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+        },
+        {
+          from: paths.public + '/locales',
+          to: 'locales',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+        },
+        {
+          from: paths.public + '/config.json',
+          to: 'config.json',
+        },
+      ],
+    }),
+    new HtmlWebpackPlugin({
+      title: 'uCentralGW',
+      favicon: paths.public + '/favicon.ico',
+      template: paths.public + '/index.html',
+      filename: 'index.html',
+    }),
+    new CleanWebpackPlugin(),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
+    ],
+  },
+};

config/webpack.dev.js

@@ -0,0 +1,54 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const { merge } = require('webpack-merge');
+const path = require('path');
+const paths = require('./paths');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'development',
+
+  target: 'web',
+
+  devtool: 'inline-source-map',
+
+  devServer: {
+    historyApiFallback: true,
+    contentBase: paths.build,
+    open: true,
+    compress: false,
+    hot: true,
+    port: 3000,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[js]sx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              plugins: [require.resolve('react-refresh/babel')],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      'node_modules',
+      'src',
+      path.resolve(__dirname, '../', 'node_modules', 'ucentral-libs', 'src'),
+    ],
+    alias: {
+      react: path.resolve(__dirname, '../', 'node_modules', 'react'),
+      'react-router-dom': path.resolve('./node_modules/react-router-dom'),
+      'ucentral-libs': path.resolve(__dirname, '../', 'node_modules', 'ucentral-libs', 'src'),
+      graphlib: path.resolve(__dirname, '../', 'node_modules', 'graphlib'),
+    },
+  },
+  plugins: [new ReactRefreshWebpackPlugin()],
+});

config/webpack.prod.js

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable prefer-template */
+const { merge } = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const path = require('path');
+const paths = require('./paths');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: false,
+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'js/[name].[contenthash].bundle.js',
+  },
+  plugins: [
+    // new BundleAnalyzerPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[contenthash].css',
+    }),
+    new CompressionPlugin({
+      filename: '[path]/[name].gz[query]',
+      algorithm: 'gzip',
+      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
+  ],
+  module: {
+    rules: [],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      '...',
+      new TerserPlugin({
+        terserOptions: {
+          warnings: false,
+          compress: {
+            comparisons: false,
+          },
+          parse: {},
+          mangle: true,
+          output: {
+            ascii_only: true,
+          },
+        },
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+    nodeEnv: 'production',
+    sideEffects: true,
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: 10,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+            return `npm.${packageName.replace('@', '')}`;
+          },
+        },
+      },
+    },
+  },
+  resolve: {
+    modules: [],
+    alias: {
+      graphlib: path.resolve(__dirname, '../', 'node_modules', 'graphlib'),
+    },
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+});

docker-entrypoint.d/40-generate-config.sh

@@ -0,0 +1,6 @@
+#!/bin/ash
+# Check if variables are set
+export DEFAULT_OWSEC_URL="${DEFAULT_OWSEC_URL:-https://ucentral.dpaas.arilia.com:16001}"
+export ALLOW_OWSEC_CHANGE="${ALLOW_OWSEC_CHANGE:-false}"
+
+echo '{"DEFAULT_UCENTRALSEC_URL": "'$DEFAULT_UCENTRALSEC_URL'","ALLOW_UCENTRALSEC_CHANGE": '$ALLOW_UCENTRALSEC_CHANGE'}' > /usr/share/nginx/html/config.json

helm/.gitignore

@@ -0,0 +1 @@
+*.swp

helm/.helmignore

@@ -0,0 +1,22 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

helm/Chart.yaml

@@ -0,0 +1,5 @@
+apiVersion: v1
+appVersion: "1.0"
+description: A Helm chart for Kubernetes
+name: owgwui
+version: 0.1.0

helm/README.md

@@ -0,0 +1,82 @@
+# owgwui
+
+This Helm chart helps to deploy OpenWIFI Web UI (further on refered as __Web UI__) to the Kubernetes clusters. It is mainly used in [assembly chart](https://github.com/Telecominfraproject/wlan-cloud-ucentral-deploy/tree/main/chart) as Web UI requires other services as dependencies that are considered in that Helm chart. This chart is purposed to define deployment logic close to the application code itself and define default values that could be overriden during deployment.
+
+
+## TL;DR;
+
+```bash
+$ helm install .
+```
+
+## Introduction
+
+This chart bootstraps the Web UI on a [Kubernetes](http://kubernetes.io) cluster using the [Helm](https://helm.sh) package manager.
+
+## Installing the Chart
+
+Currently this chart is not assembled in charts archives, so [helm-git](https://github.com/aslafy-z/helm-git) is required for remote the installation
+
+To install the chart with the release name `my-release`:
+
+```bash
+$ helm install --name my-release git+https://github.com/Telecominfraproject/wlan-cloud-ucentralgw-ui@helm/owgwui-0.1.0.tgz?ref=main
+```
+
+The command deploys the Web UI on the Kubernetes cluster in the default configuration. The [configuration](#configuration) section lists the parameters that can be configured during installation.
+
+> **Tip**: List all releases using `helm list`
+
+## Uninstalling the Chart
+
+To uninstall/delete the `my-release` deployment:
+
+```bash
+$ helm delete my-release
+```
+
+The command removes all the Kubernetes components associated with the chart and deletes the release.
+
+## Configuration
+
+The following table lists the configurable parameters of the chart and their default values. If Default value is not listed in the table, please refer to the [Values](values.yaml) files for details.
+
+| Parameter | Type | Description | Default |
+|-----------|------|-------------|---------|
+| replicaCount | number | Amount of replicas to be deployed | `1` |
+| nameOverride | string | Override to be used for application deployment |  |
+| fullnameOverride | string | Override to be used for application deployment (has priority over nameOverride) |  |
+| images.owgwui.repository | string | Docker image repository |  |
+| images.owgwui.tag | string | Docker image tag | `'master'` |
+| images.owgwui.pullPolicy | string | Docker image pull policy | `'Always'` |
+| services.owgwui.type | string | OpenWIFI Web UI service type | `'ClusterIP'` |
+| services.owgwui.ports.http.servicePort | number | Websocket endpoint port to be exposed on service | `80` |
+| services.owgwui.ports.http.targetPort | number | Websocket endpoint port to be targeted by service | `80` |
+| services.owgwui.ports.http.protocol | string | Websocket endpoint protocol | `'TCP'` |
+| checks.owgwui.liveness.httpGet.path | string | Liveness check path to be used | `'/'` |
+| checks.owgwui.liveness.httpGet.port | number | Liveness check port to be used (should be pointint to ALB endpoint) | `http` |
+| checks.owgwui.readiness.httpGet.path | string | Readiness check path to be used | `'/'` |
+| checks.owgwui.readiness.httpGet.port | number | Readiness check port to be used | `http` |
+| ingresses.default.enabled | boolean | Defines if the Web UI should be exposed via Ingress controller | `False` |
+| ingresses.default.hosts | array | List of hosts for the exposed Web UI |  |
+| ingresses.default.paths | array | List of paths to be exposed for the Web UI |  |
+| public_env_variables | hash | Defines list of environment variables to be passed to the Web UI (required for application configuration) | |
+
+
+Specify each parameter using the `--set key=value[,key=value]` argument to `helm install`. For example,
+
+```bash
+$ helm install --name my-release \
+  --set replicaCount=1 \
+    .
+```
+
+The above command sets that only 1 instance of your app should be running
+
+Alternatively, a YAML file that specifies the values for the parameters can be provided while installing the chart. For example,
+
+```bash
+$ helm install --name my-release -f values.yaml .
+```
+
+> **Tip**: You can use the default [values.yaml](values.yaml) as a base for customization.

helm/templates/_helpers.tpl

@@ -0,0 +1,32 @@
+{{/* vim: set filetype=mustache: */}}
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "owgwui.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" -}}
+{{- end -}}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "owgwui.fullname" -}}
+{{- if .Values.fullnameOverride -}}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" -}}
+{{- else -}}
+{{- $name := default .Chart.Name .Values.nameOverride -}}
+{{- if contains $name .Release.Name -}}
+{{- .Release.Name | trunc 63 | trimSuffix "-" -}}
+{{- else -}}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" -}}
+{{- end -}}
+{{- end -}}
+{{- end -}}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "owgwui.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" -}}
+{{- end -}}

helm/templates/deployment.yaml

@@ -0,0 +1,86 @@
+{{- $root := . -}}
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "owgwui.fullname" . }}
+  labels:
+    app.kubernetes.io/name: {{ include "owgwui.name" . }}
+    helm.sh/chart: {{ include "owgwui.chart" . }}
+    app.kubernetes.io/instance: {{ .Release.Name }}
+    app.kubernetes.io/managed-by: {{ .Release.Service }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: {{ include "owgwui.name" . }}
+      app.kubernetes.io/instance: {{ .Release.Name }}
+      {{- with .Values.services.owgwui.labels }}
+      {{- toYaml . | nindent 6 }}
+      {{- end }}
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: {{ include "owgwui.name" . }}
+        app.kubernetes.io/instance: {{ .Release.Name }}
+        {{- with .Values.services.owgwui.labels }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+    spec:
+
+      containers:
+
+        - name: owgwui
+          image: "{{ .Values.images.owgwui.repository }}:{{ .Values.images.owgwui.tag }}"
+          imagePullPolicy: {{ .Values.images.owgwui.pullPolicy }}
+
+          env:
+            - name: KUBERNETES_DEPLOYED
+              value: "{{ now }}"
+          {{- range $key, $value := .Values.public_env_variables }}
+            - name: {{ $key }}
+              value: {{ $value | quote }}
+          {{- end }}
+
+          ports:
+          {{- range $key, $value := .Values.services.owgwui.ports }}
+            - name: {{ $key }}
+              containerPort: {{ $value.targetPort }}
+              protocol: {{ $value.protocol }}
+          {{- end }}
+
+          {{- if .Values.checks.owgwui.liveness }}
+          livenessProbe:
+            {{- toYaml .Values.checks.owgwui.liveness | nindent 12 }}
+          {{- end }}
+          {{- if .Values.checks.owgwui.readiness }}
+          readinessProbe:
+            {{- toYaml .Values.checks.owgwui.readiness | nindent 12 }}
+          {{- end }}
+
+          {{- with .Values.resources }}
+          resources:
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
+
+      imagePullSecrets:
+      {{- range $image, $imageValue := .Values.images }}
+        {{- if $imageValue.regcred }}
+      - name: {{ include "owgwui.fullname" $root }}-{{ $image }}-regcred
+        {{- end }}
+      {{- end }}
+
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

helm/templates/ingress.yaml

@@ -0,0 +1,47 @@
+{{- $root := . -}}
+{{- range $ingress, $ingressValue := .Values.ingresses }}
+{{- if $ingressValue.enabled }}
+---
+apiVersion: extensions/v1beta1
+kind: Ingress
+metadata:
+  name: {{ include "owgwui.fullname" $root }}-{{ $ingress }}
+  labels:
+    app.kubernetes.io/name: {{ include "owgwui.name" $root }}
+    helm.sh/chart: {{ include "owgwui.chart" $root }}
+    app.kubernetes.io/instance: {{ $root.Release.Name }}
+    app.kubernetes.io/managed-by: {{ $root.Release.Service }}
+  {{- with $ingressValue.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+
+spec:
+
+{{- if $ingressValue.tls }}
+  tls:
+  {{- range $ingressValue.tls }}
+    - hosts:
+      {{- range .hosts }}
+        - {{ . | quote }}
+      {{- end }}
+      secretName: {{ tpl .secretName $root }}
+  {{- end }}
+{{- end }}
+
+  rules:
+  {{- range $ingressValue.hosts }}
+  - host: {{ . | quote }}
+    http:
+      paths:
+      {{- range $ingressValue.paths }}
+        - path: {{ .path }}
+          backend:
+            serviceName: {{ include "owgwui.fullname" $root }}-{{ .serviceName }}
+            servicePort: {{ .servicePort }}
+      {{- end }}
+  {{- end }}
+
+{{- end }}
+
+{{- end }}

helm/templates/secret-regcred.yaml

@@ -0,0 +1,21 @@
+{{- define "imagePullSecret" }}
+{{- printf "{\"auths\": {\"%s\": {\"auth\": \"%s\"}}}" .registry (printf "%s:%s" .username .password | b64enc) | b64enc }}
+{{- end }}
+{{- $root := . -}}
+{{- range $image, $imageValue := .Values.images }}
+{{- if $imageValue.regcred }}
+---
+apiVersion: v1
+kind: Secret
+type: kubernetes.io/dockerconfigjson
+metadata:
+  labels:
+    app.kuberentes.io/name: {{ include "owgwui.name" $root }}
+    helm.sh/chart: {{ include "owgwui.chart" $root }}
+    app.kubernetes.io/instance: {{ $root.Release.Name }}
+    app.kubernetes.io/managed-by: {{ $root.Release.Service }}
+  name: {{ include "owgwui.fullname" $root }}-{{ $image }}-regcred
+data:
+  .dockerconfigjson: {{ template "imagePullSecret" $imageValue.regcred }}
+{{- end }}
+{{- end }}

helm/templates/service.yaml

@@ -0,0 +1,48 @@
+{{- $root := . -}}
+{{- range $service, $serviceValue := .Values.services }}
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "owgwui.fullname" $root }}-{{ $service }}
+  {{- with $serviceValue.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+  labels:
+    app.kubernetes.io/name: {{ include "owgwui.name" $root }}
+    helm.sh/chart: {{ include "owgwui.chart" $root }}
+    app.kubernetes.io/instance: {{ $root.Release.Name }}
+    app.kubernetes.io/managed-by: {{ $root.Release.Service }}
+
+    {{- with $serviceValue.labels }}
+    {{- toYaml . | nindent 4 }}
+    {{- end }}
+
+    {{- if $serviceValue.serviceMonitor }}
+
+    {{- range $selector, $selectorValue := $serviceValue.serviceMonitor.serviceSelector }}
+    {{ $selector }}: {{ tpl $selectorValue $root }}
+    {{- end }}
+    {{- end }}
+spec:
+  type: {{ $serviceValue.type }}
+  ports:
+
+  {{- range $service_service, $service_value := $serviceValue.ports }}
+    - name: {{ $service_service }}
+      targetPort: {{ $service_value.targetPort }}
+      protocol: {{ $service_value.protocol }}
+      port: {{ $service_value.servicePort }}
+      {{- if and (eq "NodePort" $serviceValue.type) $service_value.nodePort }}
+      nodePort: {{ $service_value.nodePort }}
+      {{- end }}
+  {{- end }}
+  selector:
+    app.kubernetes.io/name: {{ include "owgwui.name" $root }}
+    app.kubernetes.io/instance: {{ $root.Release.Name }}
+    {{- with $serviceValue.labels }}
+    {{- toYaml . | nindent 4 }}
+    {{- end }}
+
+{{- end }}

helm/values.yaml

@@ -0,0 +1,75 @@
+# System
+replicaCount: 1
+
+nameOverride: ""
+fullnameOverride: ""
+
+images:
+  owgwui:
+    repository: tip-tip-wlan-cloud-ucentral.jfrog.io/owgw-ui
+    tag: v2.3.0-RC1
+    pullPolicy: Always
+
+services:
+  owgwui:
+    type: ClusterIP
+    ports:
+      http:
+        servicePort: 80
+        targetPort: 80
+        protocol: TCP
+
+checks:
+  owgwui:
+    liveness:
+      httpGet:
+        path: /
+        port: http
+    readiness:
+      httpGet:
+        path: /
+        port: http
+
+ingresses:
+  default:
+    enabled: false
+    annotations: {}
+      # kubernetes.io/ingress.class: nginx
+      # kubernetes.io/tls-acme: "true"
+    # tls:
+    # - secretName: '{{ include "owgwui.fullname" . }}-default-tls' # template may be used
+    #   cert: |
+    #     CERT_HERE_IN_PEM
+    #   key: |
+    #     KEY_HERE_IN_PEM
+    #   hosts:
+    #     - chart-example.local
+    hosts:
+    - chart-example.local
+    paths:
+    - path: /
+      serviceName: owgwui
+      servicePort: http
+
+resources: {}
+  # We usually recommend not to specify default resources and to leave this as a conscious
+  # choice for the user. This also increases chances charts run on environments with little
+  # resources, such as Minikube. If you do want to specify resources, uncomment the following
+  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
+  # requests:
+  #  cpu: 100m
+  #  memory: 128Mi
+  # limits:
+  #  cpu: 100m
+  #  memory: 128Mi
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}
+
+# Application
+public_env_variables:
+  DEFAULT_UCENTRALSEC_URL: https://ucentral.dpaas.arilia.com:16001
+  ALLOW_UCENTRALSEC_CHANGE: false

jsconfig.json

@@ -4,6 +4,6 @@
     "paths": {
       "*": ["*"]
     }
-  }, 
+  },
   "include": ["src"]
 }

package.json

@@ -1,23 +1,16 @@
 {
   "name": "ucentral-client",
-  "version": "0.9.3",
-  "private": true,
+  "version": "2.3.9",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
     "@coreui/icons-react": "^1.1.0",
     "@coreui/react": "^3.4.6",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.1.9",
+    "@coreui/react-chartjs": "^1.1.0",
     "apexcharts": "^3.27.1",
     "axios": "^0.21.1",
     "axios-retry": "^3.1.9",
-    "http": "^0.0.1-security",
-    "https": "^1.0.0",
+    "dagre": "^0.8.5",
     "i18next": "^20.3.1",
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-http-backend": "^1.2.6",
@@ -25,22 +18,23 @@
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
+    "react-flow-renderer": "^9.6.6",
     "react-i18next": "^11.11.0",
     "react-paginate": "^7.1.3",
-    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
     "react-select": "^4.3.1",
+    "react-tooltip": "^4.2.21",
     "react-widgets": "^5.1.1",
-    "redux": "^4.1.0",
     "sass": "^1.35.1",
+    "ucentral-libs": "^0.9.98",
     "uuid": "^8.3.2"
   },
+  "main": "index.js",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "webpack serve --config config/webpack.dev.js",
+    "build": "webpack --config config/webpack.prod.js",
+    "format": "prettier --write 'src/**/*.js'",
+    "eslint-fix": "eslint --fix 'src/**/*.js'"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -51,12 +45,56 @@
     }
   },
   "lint-staged": {
-    "src/**/*.{js,jsx}": [
+    "*.{js,jsx}": [
       "eslint",
-      "pretty-quick — staged",
-      "git add"
+      "prettier --write"
     ]
   },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@svgr/webpack": "^5.5.0",
+    "autoprefixer": "^10.2.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^8.0.1",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^2.0.0",
+    "dotenv-webpack": "^6.0.4",
+    "eslint": "^7.29.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.3.2",
+    "husky": "^4.3.8",
+    "lint-staged": "^11.0.0",
+    "mini-css-extract-plugin": "^1.6.1",
+    "node-sass": "^5.0.0",
+    "path": "^0.12.7",
+    "prettier": "^2.3.2",
+    "react-refresh": "^0.9.0",
+    "sass-loader": "^11.1.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.4",
+    "webpack": "^5.40.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.8.0"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -68,17 +106,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.28.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-react": "^7.24.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.1",
-    "pretty-quick": "^3.1.0"
   }
 }

public/config.json

@@ -1,4 +1,4 @@
 {
-  "DEFAULT_GATEWAY_URL": "https://ucentral.dpaas.arilia.com:16001",
-  "ALLOW_GATEWAY_CHANGE": false
-}
+  "DEFAULT_UCENTRALSEC_URL": "https://ucentral.dpaas.arilia.com:16001",
+  "ALLOW_UCENTRALSEC_CHANGE": false
+}

public/index.html

@@ -2,42 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>uCentralGW</title>
+    <title>Gateway</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

public/locales/de/translation.json

@@ -1,103 +1,280 @@
 {
 	"actions": {
-		"blink": "Blinken",
+		"actions": "Aktionen",
+		"blink": "LEDs Blinken",
 		"configure": "Konfigurieren",
-		"connect": "Verbinden",
-		"connecting": "Verbindung wird hergestellt ...",
-		"factory_reset": "Werkseinstellungen zurückgesetzt",
-		"firmware_upgrade": "Firmware-Aktualisierung",
-		"reboot": "Starten Sie neu",
-		"title": "Geräteaktionen",
-		"trace": "Spur",
-		"wifi_scan": "WLAN-Scan"
+		"connect": "Konsole öffnen",
+		"connecting": "Die Verbindung wird hergestellt ...",
+		"factory_reset": "Auf Werkseinstellungen zurückgesetzt",
+		"firmware_upgrade": "Firmware Aktualisierung",
+		"reboot": "Gerät neustarten",
+		"telemetry": "Telemetrie",
+		"title": "Geräte Administrations",
+		"trace": "Tcpdump starten",
+		"wifi_scan": "Wi-Fi Scan"
 	},
 	"blink": {
-		"blink": "Blinken",
-		"device_leds": "Geräte-LEDs",
+		"blink": "LEDs Blinken",
+		"device_leds": "LEDs",
+		"execute_now": "Möchten Sie dieses Muster jetzt einstellen?",
 		"pattern": "Wählen Sie das Muster, das Sie verwenden möchten:",
-		"when_blink_leds": "Wann möchten Sie die Geräte-LEDs blinken lassen?"
+		"set_leds": "LEDs einstellen",
+		"when_blink_leds": "Wann möchten Sie die LEDs blinken lassen?"
 	},
 	"commands": {
+		"command_success": "Befehl erfolgreich übermittelt",
 		"error": "Fehler beim Senden des Befehls!",
-		"success": "Befehl erfolgreich übermittelt",
-		"title": "Gerätebefehle"
+		"error_delete_log": "Fehler beim Versuch zu löschen: {{error}}",
+		"event_queue": "Ereigniswarteschlange",
+		"success": "Befehl wurde erfolgreich übermittelt",
+		"title": "Gerätebefehle",
+		"unable_queue": "Anfrage für Ereigniswarteschlange kann nicht abgeschlossen werden: {{error}}"
 	},
 	"common": {
+		"access_policy": "Zugangsrichtlinien",
+		"add": "Hinzufügen",
+		"add_items": "Füge Artikel hinzu",
+		"add_note": "Notiz hinzufügen",
+		"add_note_explanation": "Schreiben Sie unten Ihre neue Notiz und klicken Sie auf die Schaltfläche \"+\", wo Sie fertig sind",
+		"adding_ellipsis": "Hinzufügen ...",
 		"are_you_sure": "Bist du sicher?",
-		"cancel": "Stornieren",
+		"back_to_login": "Zurück zur Anmeldung",
+		"back_to_start": "Zurück zum Start",
+		"by": "Durch",
+		"cancel": "Abbrechen",
 		"certificate": "Zertifikat",
-		"clear": "klar",
+		"certificates": "Zertifikate",
+		"clear": "Löschen",
 		"close": "Schließen",
+		"code": "Code",
 		"command": "Befehl",
+		"commands": "Befehle",
+		"commands_executed": "Ausgeführte Befehle",
 		"compatible": "kompatibel",
 		"completed": "Abgeschlossen",
-		"config_id": "Konfig. Ich würde",
+		"config_id": "Konfigurations ID",
 		"confirm": "Bestätigen",
-		"connected": "In Verbindung gebracht",
+		"connected": "Verbindung wurde hergestellt",
 		"copied": "kopiert!",
 		"copy_to_clipboard": "In die Zwischenablage kopieren",
+		"create": "Erstellen",
+		"created": "Erstellt",
+		"created_by": "Erstellt von",
+		"current": "Aktuell",
+		"custom_date": "Benutzerdefiniertes Datum",
+		"dashboard": "Instrumententafel",
 		"date": "Datum",
+		"day": "tag",
+		"days": "tage",
 		"delete": "Löschen",
+		"delete_device": "Gerät löschen",
 		"details": "Einzelheiten",
+		"device": "Gerät #{{serialNumber}}",
+		"device_dashboard": "Geräte-Dashboard",
+		"device_delete": "Gerät Nr.{{serialNumber}}löschen",
+		"device_deleted": "Gerät erfolgreich gelöscht",
+		"device_health": "Gerätezustand",
 		"device_list": "Liste der Geräte",
-		"device_page": "Geräteseite",
+		"device_page": "Aussicht",
+		"device_status": "Gerätestatus",
 		"devices": "Geräte",
+		"devices_using_latest": "Geräte mit der neuesten Firmware",
+		"devices_using_unknown": "Geräte mit unbekannter Firmware",
 		"dismiss": "entlassen",
-		"do_now": "Jetzt tun!",
+		"do_now": "Sofort",
 		"download": "Herunterladen",
 		"duration": "Dauer",
-		"error": "Error",
-		"executed": "Hingerichtet",
+		"edit": "Bearbeiten",
+		"edit_user": "Bearbeiten",
+		"email_address": "E-Mail-Addresse",
+		"endpoint": "Endpunkt",
+		"endpoints": "Endpunkte",
+		"error": "Fehler",
+		"error_adding_note": "Fehler beim Hinzufügen einer Notiz",
+		"error_code": "Fehlercode",
+		"execute_now": "Möchten Sie diesen Befehl jetzt ausführen?",
+		"executed": "Ausgeführt",
+		"exit": "Ausgang",
 		"firmware": "Firmware",
+		"firmware_dashboard": "Firmware-Dashboard",
+		"firmware_installed": "Firmware installiert",
+		"forgot_password": "Haben Sie Ihr Passwort vergessen?",
+		"forgot_password_title": "Passwort vergessen",
 		"from": "Von",
-		"id": "Ich würde",
+		"general_error": "API-Fehler, wenden Sie sich bitte an Ihren Administrator",
+		"hide": "verbergen",
+		"hour": "stunde",
+		"hours": "std",
+		"id": "ID",
+		"invalid_file": "Die ausgewählte Datei war ungültig, bitte lesen Sie die Anweisungen und passen Sie Ihre Datei entsprechend an",
+		"invalid_pem": "Ihre PEM-Datei ist ungültig. Es sollte mit '-----BEGIN CERTIFICATE-----' ODER '-----BEGIN PRIVATE KEY-----' beginnen und mit '-----END CERTIFICATE--- enden. --' ODER '-----END PRIVATSCHLÜSSEL-----'",
 		"ip_address": "IP Adresse",
-		"later_tonight": "Heute Abend später",
+		"ips": "IPs",
+		"item": "Artikel",
+		"items": "Artikel",
+		"items_per_page": "Objekte pro Seite:",
+		"last_dashboard_refresh": "Letzte Dashboard-Aktualisierung",
+		"later_tonight": "Später am Abend",
+		"latest": "Neueste",
+		"list": "Liste",
 		"loading_ellipsis": "Wird geladen...",
 		"loading_more_ellipsis": "Mehr laden ...",
 		"logout": "Ausloggen",
 		"mac": "MAC-Adresse",
 		"manufacturer": "Hersteller",
-		"na": "N / A",
+		"memory_used": "Verwendeter Speicher",
+		"minute": "Minute",
+		"minutes": "protokoll",
+		"modified": "Geändert",
+		"na": "(unbekannt)",
 		"need_date": "Du brauchst ein Datum...",
+		"no": "Nein",
+		"no_addresses_found": "Keine Adressen gefunden",
+		"no_devices_found": "Keine Geräte gefunden",
+		"no_items": "Keine Gegenstände",
+		"none": "Keiner",
 		"not_connected": "Nicht verbunden",
-		"off": "aus",
-		"on": "auf",
+		"of_connected": "% der Geräte",
+		"off": "Aus",
+		"on": "An",
+		"optional": "Wahlweise",
+		"overall_health": "Allgemeine Gesundheit",
+		"password_policy": "Kennwortrichtlinie",
+		"preview": "Vorschau",
+		"program": "Programm",
 		"recorded": "Verzeichnet",
 		"refresh": "Aktualisierung",
 		"refresh_device": "Gerät aktualisieren",
+		"required": "Erforderlich",
 		"result": "Ergebnis",
+		"save": "Sparen",
+		"saved": "Gerettet!",
+		"saving": "Speichern ...",
 		"schedule": "Zeitplan",
-		"serial_number": "Ordnungsnummer",
+		"search": "Geräte suchen",
+		"second": "zweite",
+		"seconds": "sekunden",
+		"seconds_elapsed": "Sekunden verstrichen",
+		"select": "wählen",
+		"serial_number": "Seriennummer",
+		"show_all": "Zeige alles",
+		"socket_connection_closed": "Verbindung geschlossen!",
 		"start": "Start",
-		"submit": "einreichen",
+		"stop_editing": "Stoppen Sie die Bearbeitung",
+		"submit": "Absenden",
 		"submitted": "Eingereicht",
 		"success": "Erfolg",
+		"system": "System",
+		"table": "Tabelle",
+		"timestamp": "Zeit",
 		"to": "zu",
+		"type": "Art",
+		"type_for_options": "Geben Sie den Wert ein, den Sie erstellen müssen...",
+		"type_for_options_format": "Geben Sie einen Wert im gültigen Format ein ({{format}})...",
+		"unable_to_connect": "Keine Verbindung zum Gerät möglich",
+		"unable_to_delete": "Löschen nicht möglich",
 		"unknown": "unbekannte",
+		"up_to_date": "Aktuelle Geräte",
+		"uptimes": "Betriebszeiten",
+		"use_file": "Datei verwenden",
 		"uuid": "UUID",
-		"view_more": "Mehr sehen",
+		"vendors": "Anbieter",
+		"view_more": "Mehr anzeigen",
 		"yes": "Ja"
 	},
 	"configuration": {
+		"add_configuration": "Konfiguration hinzufügen",
+		"add_new_block": "Neuen Konfigurationsblock hinzufügen",
+		"add_or_link": "Verlinken oder hinzufügen",
+		"add_radio": "Radio hinzufügen",
+		"ca_cert_explanation": "Bitte verwenden Sie eine .pem-Datei, die mit \"-----BEGIN CERTIFICATE-----\" beginnt und mit \"-----END CERTIFICATE-----\" endet. Das Ergebnis wird im Feld darunter angezeigt. Sie können das Zertifikat, das Sie verwenden möchten, auch direkt kopieren und einfügen.",
+		"cannot_delete": "Diese Konfiguration kann nicht gelöscht werden, da sie von mindestens einer Entität, einem Veranstaltungsort oder einem Gerät verwendet wird",
+		"choose_radio_band": "Welche Radioband möchten Sie gründen?",
+		"choose_section": "Welchen Abschnitt soll dieser Block enthalten?",
+		"configuration_browser": "Konfigurationsbrowser",
+		"configurations": "Konfigurationen",
+		"create": "Konfiguration erstellen",
+		"create_config": "Neue Konfiguration erstellen",
+		"create_new_configuration": "Neues Konfigurationselement erstellen",
 		"created": "Erstellt",
+		"creation_success": "Konfiguration erfolgreich erstellt!",
+		"currently_associated": "Aktuell zugeordnete Konfiguration: {{config}}",
+		"currently_selected_config": "Derzeit ausgewählte Konfiguration: {{config}}",
+		"delete_config": "Konfiguration löschen",
 		"details": "Gerätedetails",
 		"device_password": "Passwort",
-		"last_configuration_change": "Letzte Konfigurationsänderung",
+		"device_type": "Gerätetyp",
+		"device_types": "Gerätetypen",
+		"edit_configuration": "Konfiguration bearbeiten",
+		"error_delete": "Fehler beim Versuch zu löschen: {{error}}",
+		"error_fetching_config": "Fehler beim Abrufen der Konfiguration",
+		"error_trying_delete": "Fehler beim Versuch zu löschen: {{error}}",
+		"error_update": "Fehler: {{error}}",
+		"explanation": "Erläuterung",
+		"key_pem_explanation": "Bitte .pem-Datei auswählen",
+		"last_configuration_change": "Konfigurationsänderung",
 		"last_configuration_download": "Letzter Konfigurations-Download",
 		"location": "Ort",
+		"need_device_type": "Jede Konfiguration muss mindestens einen Gerätetyp unterstützen",
+		"no_associated_config": "Keine zugehörige Konfiguration",
+		"no_associated_configuration": "Keine zugeordneten Konfigurationen",
+		"note": "Hinweis",
 		"notes": "Anmerkungen",
 		"owner": "Inhaber",
+		"select_configuration": "Wählen Sie diese Konfiguration",
+		"success_block_delete": "Konfigurationsblock erfolgreich gelöscht",
+		"success_update": "Konfiguration erfolgreich aktualisiert!",
+		"successful_delete": "Konfiguration gelöscht!",
+		"support_all": "Alle unterstützen",
+		"supported_device_types": "Unterstützte Gerätetypen",
 		"title": "Gerätekonfiguration",
 		"type": "Gerätetyp",
-		"view_json": "Rohes JSON anzeigen"
+		"used_by": "Benutzt von",
+		"used_by_details": "{{entities}} Entitäten, {{venues}} Veranstaltungsorte und {{devices}} Geräte",
+		"uuid": "Konfigurations-ID",
+		"view_config": "Konfiguration anzeigen",
+		"view_in_use": "In Verwendung anzeigen",
+		"view_json": "Rohe Konfiguration anzeigen"
 	},
 	"configure": {
 		"choose_file": "Sie müssen eine gültige .json-Datei auswählen:",
 		"enter_new": "Geben Sie die JSON für die neue Gerätekonfiguration ein:",
-		"placeholder": "JSON konfigurieren",
+		"placeholder": "Konfiguration",
 		"title": "Gerät konfigurieren",
-		"valid_json": "Sie müssen gültiges JSON eingeben"
+		"valid_json": "Sie müssen ein gültiges JSON eingeben"
+	},
+	"connect": {
+		"error_trying_to_connect": "Fehler beim Versuch, eine Verbindung zum Gerät herzustellen: {{error}}"
+	},
+	"contact": {
+		"access_pin": "Zugangs-PIN",
+		"add_contact": "Kontakt hinzufügen",
+		"create_contact": "Kontakt erstellen",
+		"delete": "Kontakt löschen?",
+		"error_assign": "Fehler beim Versuch, Kontakt zuzuweisen: {{error}}",
+		"error_creation": "Fehler beim Versuch, einen Kontakt zu erstellen: {{error}}",
+		"error_delete": "Fehler beim Versuch, den Kontakt zu löschen: {{error}}",
+		"error_fetching_list": "Fehler beim Abrufen der Kontakte",
+		"error_fetching_single": "Fehler beim Abrufen des Kontakts: {{error}}",
+		"error_unassign": "Fehler beim Versuch, die Zuweisung des Kontakts aufzuheben: {{error}}",
+		"first_name": "Vorname",
+		"identifier": "Identifikator",
+		"initials": "Initialen",
+		"last_name": "Nachname",
+		"no_associated_contact": "Kein zugehöriger Kontakt",
+		"primary_email": "Erste Email",
+		"salutation": "Anrede",
+		"secondary_email": "Alternative Email",
+		"successful_assign": "Kontakt erfolgreich zugewiesen!",
+		"successful_creation": "Kontakt Erstellt!",
+		"successful_delete": "Kontakt erfolgreich gelöscht!",
+		"successful_unassign": "Erfolgreich nicht zugewiesener Kontakt",
+		"successful_update": "Kontakt erfolgreich aktualisiert",
+		"title": "Kontakte",
+		"type": "Art",
+		"update_error": "Fehler beim Aktualisieren des Kontakts: {{error}}",
+		"user_title": "Titel",
+		"visual": "Korrespondenzname"
 	},
 	"delete_command": {
 		"explanation": "Möchten Sie diesen Befehl wirklich löschen? Diese Aktion ist nicht umkehrbar.",
@@ -109,60 +286,378 @@
 		"explanation": "Dadurch werden alle {{object}} vor dem von Ihnen gewählten Datum gelöscht. Seien Sie vorsichtig, diese Aktion ist nicht umkehrbar.",
 		"healthchecks_title": "Healthchecks löschen"
 	},
+	"device": {
+		"error_fetching_device": "Fehler beim Abrufen der Geräteinformationen: {{error}}",
+		"error_fetching_devices": "Fehler beim Abrufen von Geräten: {{error}}"
+	},
 	"device_logs": {
-		"log": "Log",
-		"severity": "Schwere",
+		"log": "Protokoll",
+		"severity": "Wichtigkeit",
 		"title": "Geräteprotokolle"
 	},
+	"entity": {
+		"add_child": "Untergeordnete Entität zu {{entityName}}hinzufügen",
+		"add_failure": "Fehler, der Server hat zurückgegeben: {{error}}",
+		"add_ips": "IPs verwalten",
+		"add_root": "Root-Entität hinzufügen",
+		"add_success": "Entität erfolgreich erstellt!",
+		"assigned_inventory": "Zugewiesenes Inventar",
+		"cannot_delete": "Entitäten mit untergeordneten Elementen können nicht gelöscht werden. Löschen Sie die untergeordneten Elemente dieser Entität, um sie löschen zu können.",
+		"currently_selected_entity": "Derzeit ausgewähltes Unternehmen: {{config}}",
+		"currently_selected_venue": "Aktuell ausgewählter Veranstaltungsort: {{config}}",
+		"delete_success": "Entität erfolgreich gelöscht",
+		"delete_warning": "Achtung: Dieser Vorgang kann nicht rückgängig gemacht werden",
+		"edit_failure": "Aktualisierung fehlgeschlagen : {{error}}",
+		"enter_here": "Geben Sie hier die IP(s) ein, die Sie hinzufügen möchten",
+		"entities": "Entitäten",
+		"entity": "Entität",
+		"error_fetch_entity": "Fehler beim Abrufen von Entitätsinformationen",
+		"error_fetching": "Fehler beim Abrufen von Entitäten",
+		"error_saving": "Fehler beim Speichern der Entität",
+		"higher_priority": "Stellen Sie eine höhere Priorität ein",
+		"ip_detection": "IP-Erkennung",
+		"ip_formats": "Sie können IPv4- oder IPv6-Adressen in den folgenden Formaten hinzufügen:",
+		"lower_priority": "Niedrigere Priorität setzen",
+		"need_select_entity": "sSie müssen eine Entität aus der folgenden Tabelle auswählen",
+		"no_ips": "Keine IPs ausgewählt",
+		"not_assigned": "Nicht zugeordnet",
+		"only_unassigned": "Nur nicht zugewiesen",
+		"select_entity": "Wählen Sie diese Entität aus",
+		"selected_entity": "Ausgewählte Einheit",
+		"update_failure_error": "Fehler beim Versuch, die Entität zu aktualisieren: {{error}}",
+		"valid_serial": "Muss eine gültige Seriennummer sein (12 HEX-Zeichen)",
+		"venues": "Veranstaltungsorte"
+	},
 	"factory_reset": {
-		"redirector": "Weiterleitung beibehalten:",
+		"redirector": "Gatewaykonfiguration beibehalten:",
+		"reset": "Zurücksetzen",
+		"resetting": "Zurücksetzen...",
 		"title": "Gerät auf Werkseinstellungen zurücksetzen",
 		"warning": "Achtung: Nach dem Absenden kann dies nicht rückgängig gemacht werden"
 	},
+	"firmware": {
+		"average_age": "Durchschnittliches Firmware-Alter",
+		"choose_custom": "Wählen",
+		"details_title": "Bild #{{image}} Details",
+		"device_type": "Gerätetyp",
+		"device_types": "Gerätetypen",
+		"downloads": "Downloads",
+		"error_fetching_latest": "Fehler beim Abrufen der neuesten Firmware",
+		"from_release": "Von",
+		"history_title": "Geschichte",
+		"image": "Bild",
+		"image_date": "Bilddatum",
+		"installed_firmware": "Installierte Firmware",
+		"latest_version_installed": "Neueste Version installiert Version",
+		"newer_firmware_available": "Neuere Versionen verfügbar",
+		"reinstall_latest": "Neu installieren",
+		"revision": "Revision",
+		"show_dev": "Dev-Releases anzeigen",
+		"size": "Größe",
+		"status": "Firmware-Status",
+		"title": "Firmware",
+		"to_release": "Zu",
+		"unknown_firmware_status": "Unbekannter Firmware-Status",
+		"upgrade": "Aktualisierung",
+		"upgrade_command_submitted": "Upgrade-Befehl erfolgreich gesendet",
+		"upgrade_to_latest": "Neueste",
+		"upgrade_to_version": "Upgrade auf diese Revision",
+		"upgrading": "Upgrade durchführen..."
+	},
 	"footer": {
 		"coreui_for_react": "CoreUI für React",
 		"powered_by": "Unterstützt von",
-		"version": "Ausführung"
+		"version": "Version"
 	},
 	"health": {
-		"sanity": "Gesundheit",
-		"title": "Gerätezustand"
+		"sanity": "Gesundheitzustand",
+		"title": "Gesundheitzustand"
+	},
+	"inventory": {
+		"add_child": "Untergeordneten Veranstaltungsort hinzufügen",
+		"add_child_venue": "Untergeordneten Veranstaltungsort zu {{entityName}}hinzufügen",
+		"add_tag": "Tag erstellen",
+		"add_tag_to": "Neues Gerät zu {{name}}hinzufügen",
+		"add_venue": "Veranstaltungsort hinzufügen",
+		"assign_ent_ven": "Zu Entität oder Veranstaltungsort zuweisen",
+		"assign_entity_instructions": "Sie können die Entität, der dieses Tag zugewiesen werden soll, entweder über das Menü unten finden oder die UUID der Entität manuell in das Feld oben einfügen.",
+		"assign_error": "Fehler beim Versuch, Tag zuzuweisen",
+		"assign_to_entity": "Zu Entität zuweisen",
+		"bulk_delete_assigned": "Möchten Sie zugewiesene Geräte in Ihrer Datei massenweise löschen?",
+		"bulk_delete_assigned_warning": "Achtung: Diese Aktion ist nicht umkehrbar",
+		"bulk_delete_devices": "Massenlöschgeräte",
+		"bulk_delete_devices_not_found": "{{number}} Geräte nicht gefunden",
+		"bulk_delete_explanation": "Verwenden Sie zum Massenlöschen von Geräten eine CSV-Datei mit einer Spalte namens SerialNumber",
+		"bulk_delete_test": "Datei validieren",
+		"close_entity_menu": "Menü \"Entität bearbeiten\" schließen",
+		"delete_devices": "Geräte löschen",
+		"delete_errors": "{{number}} Gerätefehler löschen",
+		"delete_tag": "Tag löschen",
+		"delete_venue": "Veranstaltungsort endgültig löschen",
+		"deleted_devices": "{{number}} Gelöschte Geräte",
+		"deleting": "Löschen ...",
+		"deletion_failure": "Löschfehler",
+		"devices_assigned": "{{number}} vorhandene Geräte zugewiesen und aktualisiert",
+		"devices_created": "{{number}} Geräte erstellt",
+		"devices_deleted": "Geräte gelöscht",
+		"devices_errors_while_creating": "{{number}} Geräteerstellung fehlgeschlagen",
+		"devices_errors_while_updating": "{{number}} Geräteupdates fehlgeschlagen",
+		"devices_found_assigned": "{{number}} Geräte gefunden und bereits einer Entität oder einem Veranstaltungsort zugewiesen",
+		"devices_found_unassigned": "{{number}} Geräte gefunden, aber nicht zugewiesen",
+		"devices_imported": " Importierte Geräte",
+		"devices_not_found": "{{number}} Geräte ohne Konflikt",
+		"devices_tested": "Getestete Geräte",
+		"duplicate_serial": "Seriennummer bereits in Datei verwendet (Duplikat)",
+		"error_create_venue": "Fehler beim Erstellen des Veranstaltungsortes",
+		"error_delete_tag": "Fehler beim Löschen des Inventar-Tags",
+		"error_get_venue": "Fehler beim Abrufen von Veranstaltungsorten",
+		"error_pushing_config": "Fehler beim Versuch, die Konfiguration auf das Gerät zu übertragen: {{error}}",
+		"error_retrieving": "Beim Abrufen von Inventar-Tags ist ein Fehler aufgetreten",
+		"error_unassign": "Fehler beim Aufheben der Zuweisung",
+		"error_update_venue": "Fehler beim Aktualisieren des Veranstaltungsorts",
+		"error_venue_delete": "Fehler beim Löschen des Veranstaltungsortes",
+		"error_within_file": "{{number}} Geräte mit falschen Informationen in der Datei (werden ignoriert)",
+		"file_error": "Es scheint ein Fehler in Ihrer Datei zu sein. Bitte stellen Sie sicher, dass die Datei im CSV-Format vorliegt und die oben genannten 5 Spalten in der ersten Zeile der Datei enthält",
+		"final_delete_results": "Endgültige Löschergebnisse",
+		"final_import_results": "Endgültige Importergebnisse",
+		"import_assigned_devices": "Möchten Sie sie mit diesem Import neu zuweisen?",
+		"import_assigned_devices_explanation": "Einige Geräte haben Konflikte mit bereits zugewiesenen Geräten. Sie sollten diese Probleme vor dem Importieren beheben.",
+		"import_devices": "Geräte importieren",
+		"import_devices_explanation": "Für den Massenimport von Geräten müssen Sie eine CSV-Datei mit den folgenden Spalten verwenden: SerialNumber,Name,Description,DeviceType,NoteText",
+		"import_devices_to": "Geräte nach {{name}}importieren",
+		"import_existing_devices": "Aktualisieren und zuweisen?",
+		"import_existing_devices_explanation": "Einige Geräte sind bereits im Inventar vorhanden und nicht zugewiesen.",
+		"importing": "Importieren ...",
+		"last_modification": "Letzte Änderung",
+		"no_devices_to_delete": "Keine Geräte zum Löschen",
+		"no_devices_to_import": "Keine gültigen Geräte zum Erstellen oder Aktualisieren!",
+		"note_text": "Text notieren",
+		"passed_tests": "Alle Tests wurden bestanden, Ihre Geräte sind bereit für den Import!",
+		"serial_number_required": "Fehler: Seriennummer fehlt",
+		"showing_top_10": "Hier ist eine Vorschau der Informationen, die wir aus Ihrer Datei abgerufen haben:",
+		"sub_venues": "Unterräume",
+		"subscriber": "Teilnehmer",
+		"successful_assign": "Tag erfolgreich zugewiesen",
+		"successful_tag_delete": "Inventar-Tag erfolgreich gelöscht",
+		"successful_tag_update": "Tag erfolgreich aktualisiert",
+		"successful_unassign": "Vorgang zum Aufheben der Zuweisung war erfolgreich",
+		"successful_venue_create": "Erfolgreich erstellter Veranstaltungsort",
+		"successful_venue_delete": "Veranstaltungsort erfolgreich gelöscht",
+		"successful_venue_update": "Erfolgreich aktualisierter Veranstaltungsort",
+		"tag_created": "Inventar-Tag erfolgreich erstellt",
+		"tag_creation_error": "Fehler beim Versuch, Inventar-Tag zu erstellen",
+		"tag_update_error": "Fehler beim Aktualisieren des Tags",
+		"tags_assigned_to": "Inventar-Tags {{name}}zugewiesen",
+		"test_import": "Importdaten validieren",
+		"test_results": "Testergebnisse",
+		"title": "Inventar",
+		"type_invalid": "Fehler: Ungültiger Gerätetyp",
+		"unassign": "Zuordnung aufheben",
+		"unassign_tag": "Tag von Entität zuweisen",
+		"unassigned_deleted_devices": "{{number}} Geräte gelöscht und nicht zugewiesen",
+		"unassigned_tags": "Nicht zugewiesene Tags",
+		"validating_import_file": "Importdatei und -daten werden validiert...",
+		"venue": "Tagungsort"
+	},
+	"location": {
+		"add": "Ort hinzufügen",
+		"building_name": "Gebäudename",
+		"city": "Stadt",
+		"country": "Land",
+		"create": "Standort erstellen",
+		"delete": "Ort löschen?",
+		"error_assign": "Fehler beim Versuch, den Standort zuzuweisen: {{error}}",
+		"error_creation": "Fehler beim Versuch, Standorte zu erstellen: {{error}}",
+		"error_delete": "Fehler beim Löschen des Standorts: {{error}}",
+		"error_fetching_single": "Fehler beim Versuch, den Standort abzurufen: {{error}}",
+		"geocode": "GeoCode",
+		"no_associated": "Kein zugeordneter Standort",
+		"postal": "Postleitzahl",
+		"search": "Suchen Sie nach Standorten, um die Felder unten automatisch auszufüllen",
+		"state": "Zustand",
+		"street_address": "Adresse",
+		"successful_creation": "Standort erfolgreich erstellt!",
+		"successful_delete": "Standort erfolgreich gelöscht!",
+		"successful_update": "Standort erfolgreich aktualisiert!",
+		"successfully_assigned": "Standort erfolgreich zugewiesen!",
+		"title": "Standorte",
+		"update_error": "Fehler beim Aktualisieren des Standorts: {{error}}"
 	},
 	"login": {
+		"account_verification": "Bestätigung des Kontos",
+		"authentication_expired": "Authentifizierung abgelaufen, bitte starten Sie den Anmeldevorgang erneut",
+		"change_password": "Ändere das Passwort",
+		"change_password_error": "Fehler beim Ändern des Passworts. Stellen Sie sicher, dass das neue Passwort gültig ist, indem Sie die Seite \"Passwortrichtlinie\" besuchen",
+		"change_password_instructions": "Geben Sie Ihr neues Passwort ein und bestätigen Sie es",
+		"changing_password": "Passwort ändern...",
+		"confirm_new_password": "Bestätige neues Passwort",
+		"different_passwords": "Sie müssen das gleiche Passwort zweimal eingeben",
+		"email_code_validation": "Bitte überprüfen Sie Ihr E-Mail-Postfach und geben Sie den Bestätigungscode, den wir Ihnen gerade gesendet haben, in das Feld unten ein",
+		"forgot_password_error": "Fehler beim Versuch, eine E-Mail mit vergessenem Passwort zu senden. Stellen Sie sicher, dass diese Benutzer-ID mit einem Konto verknüpft ist.",
+		"forgot_password_explanation": "Geben Sie Ihren Benutzernamen ein, um eine E-Mail mit Anweisungen zum Zurücksetzen Ihres Passworts zu erhalten",
+		"forgot_password_success": "Sie sollten in Kürze eine E-Mail mit Anweisungen zum Zurücksetzen Ihres Passworts erhalten. Bitte überprüfen Sie Ihren Spam, wenn Sie die E-Mail nicht finden können",
+		"logging_in": "Einloggen...",
 		"login": "Anmeldung",
-		"login_error": "Anmeldefehler, bestätigen Sie, dass Ihr Benutzername, Ihr Passwort und Ihre Gateway-URL gültig sind",
+		"login_error": "Anmeldefehler, stellen Sie sicher, dass die von Ihnen angegebenen Informationen gültig sind",
+		"new_password": "Neues Kennwort",
 		"password": "Passwort",
-		"please_enter_gateway": "Bitte geben Sie eine Gateway-URL ein",
+		"phone_validation_explanation": "Bitte überprüfen Sie Ihr Mobilgerät und geben Sie den Bestätigungscode, den wir Ihnen gerade gesendet haben, in das Feld unten ein",
+		"please_enter_gateway": "Bitte geben Sie eine uCentralSec-URL ein",
 		"please_enter_password": "Bitte geben Sie Ihr Passwort ein",
 		"please_enter_username": "Bitte geben Sie Ihren Benutzernamen ein",
+		"previously_used": "Passwort wurde zuvor verwendet",
+		"send_forgot": "E-Mail senden",
+		"sending_ellipsis": "Senden…",
 		"sign_in_to_account": "Melden Sie sich bei Ihrem Konto an",
-		"username": "Nutzername"
+		"url": "uCentralSec-URL",
+		"username": "Benutzername",
+		"verification_code": "Geben Sie hier Ihre Bestätigung ein",
+		"wrong_code": "Der eingegebene Bestätigungscode ist ungültig."
 	},
 	"reboot": {
 		"directions": "Wann möchten Sie dieses Gerät neu starten?",
+		"now": "Möchten Sie dieses Gerät jetzt neu starten?",
 		"title": "Gerät neustarten"
 	},
 	"scan": {
 		"active": "Aktiven Scan aktivieren",
 		"channel": "Kanal",
-		"directions": "Starten Sie einen WLAN-Scan dieses Geräts, der ungefähr 25 Sekunden dauern sollte.",
-		"results": "Ergebnisse des WLAN-Scans"
+		"directions": "Starten Sie einen WiFi-Scan dieses Geräts, der ungefähr 25 Sekunden dauern sollte.",
+		"re_scan": "Erneut scannen",
+		"result_directions": "Bitte klicken Sie auf die Schaltfläche '$t(scan.re_scan)', wenn Sie einen Scan mit derselben Konfiguration wie beim letzten Scan durchführen möchten.",
+		"results": "Ergebnisse des WiFi-Scans",
+		"scan": "Scan",
+		"scanning": "Scannen... ",
+		"waiting_directions": "Bitte warten Sie auf das Scanergebnis. Dies kann bis zu 25 Sekunden dauern. Sie können den Vorgang später beenden und die Ergebnisse aus der Befehlstabelle anzeigen."
+	},
+	"settings": {
+		"title": "die Einstellungen"
 	},
 	"statistics": {
 		"data": "Daten (KB)",
+		"latest_statistics": "Neueste Statistiken",
+		"lifetime_stats": "Lifetime-Statistik",
+		"no_interfaces": "Keine Statistiken zur Schnittstellenlebensdauer verfügbar",
+		"show_latest": "Letzte Statistik",
 		"title": "Statistiken"
 	},
+	"status": {
+		"connection_status": "Status",
+		"error": "Statusdaten sind nicht verfügbar",
+		"last_contact": "Letzter Kontakt",
+		"load_averages": "Belastung (1/5/15 m.)",
+		"localtime": "Ortszeit",
+		"memory": "Verwendeter Speicher",
+		"percentage_free": "{{percentage}}% von {{total}} kostenlos",
+		"percentage_used": "{{percentage}}% von {{total}} verwendet",
+		"title": "#{{serialNumber}} Status",
+		"uptime": "Betriebszeit",
+		"used_total_memory": "{{used}} verwendet / {{total}} insgesamt"
+	},
+	"system": {
+		"error_fetching": "Fehler beim Abrufen von Systeminformationen",
+		"error_reloading": "Fehler beim Neuladen: {{error}}",
+		"hostname": "Hostname",
+		"os": "Betriebssystem",
+		"processors": "Prozessoren",
+		"reload": "Neu laden",
+		"reload_subsystems": "Subsysteme",
+		"subsystems": "Subsysteme",
+		"success_reload": "Reload-Befehl erfolgreich gesendet!"
+	},
+	"telemetry": {
+		"connection_failed": "Verbindung konnte nicht hergestellt werden. Fehler: {{error}}",
+		"interval": "Intervall",
+		"last_update": "Letztes Update",
+		"types": "Typen"
+	},
 	"trace": {
 		"choose_network": "Netzwerk auswählen",
-		"directions": "Starten Sie eine Fernverfolgung dieses Geräts für eine bestimmte Dauer oder eine Anzahl von Paketen",
+		"directions": "Starten Sie eine Tcpdump auf diesem Geräts für eine bestimmte Dauer oder eine Anzahl von Paketen",
+		"download_trace": "Trace-Datei herunterladen",
 		"packets": "Pakete",
-		"title": "Trace-Gerät"
+		"title": "Tcpdump",
+		"trace": "Spur",
+		"trace_not_successful": "Trace nicht erfolgreich: Gateway hat folgenden Fehler gemeldet: {{error}}",
+		"wait_for_file": "Möchten Sie warten, bis die Trace-Datei fertig ist?",
+		"waiting_directions": "Bitte warten Sie auf die Trace-Datendatei. Dies könnte eine Weile dauern. Sie können das Warten beenden und die Ablaufverfolgungsdatei später aus der Befehlstabelle abrufen.",
+		"waiting_seconds": "Verstrichene Zeit: {{seconds}} Sekunden"
 	},
 	"upgrade": {
+		"command_submitted": "Befehl gesendet",
+		"device_disconnected": "Gerät getrennt",
+		"device_reconnected": "Gerät wieder verbunden",
+		"device_upgrading_firmware": "Geräte-Firmware-Upgrade",
 		"directions": "Wählen Sie eine Uhrzeit und eine Firmware-Version für dieses Gerät",
-		"firmware_uri": "Firmware-URI:",
-		"need_uri": "Du brauchst eine URI...",
-		"time": "Zeitpunkt der Aktualisierung:",
-		"title": "Firmware-Aktualisierung"
+		"firmware_uri": "Firmware-URL:",
+		"need_uri": "Sie brauchen eine URL...",
+		"new_version": "Neue Version ist",
+		"offline_device": "Diese Option ist gesperrt, da dieses Gerät nicht verbunden ist",
+		"time": "Zeitpunkt für Aktualisierung:",
+		"title": "Firmware Aktualisieren",
+		"upgrade": "Aktualisierung",
+		"wait_for_upgrade": "Möchten Sie warten, bis das Upgrade abgeschlossen ist?",
+		"waiting_for_device": "Warten, bis das Gerät wieder verbunden ist"
+	},
+	"user": {
+		"add_phone_number": "Telefonnummer hinzufügen",
+		"avatar": "Dein Avatar",
+		"avatar_file": "Dein Avatar (max. 2 MB)",
+		"check_phone": "Bitte überprüfen Sie Ihr Telefon auf Ihren Validierungscode",
+		"confirm_new_password": "Bestätige neues Passwort",
+		"create": "Benutzer erstellen",
+		"create_failure": "Fehler beim Erstellen des Benutzers. Bitte stellen Sie sicher, dass diese E-Mail-Adresse nicht bereits mit einem Konto verknüpft ist.",
+		"create_success": "Benutzer erfolgreich erstellt",
+		"creating": "Benutzer erstellen ...",
+		"delete_avatar": "Avatar löschen",
+		"delete_failure": "Fehler beim Versuch, den Benutzer zu löschen: {{error}}",
+		"delete_success": "Benutzer erfolgreich gelöscht!",
+		"delete_title": "Benutzer löschen",
+		"delete_warning": "Warnung: Sobald Sie einen Benutzer gelöscht haben, können Sie ihn nicht wiederherstellen",
+		"deleting": "Löschen ...",
+		"description": "Beschreibung",
+		"edit": "Benutzer bearbeiten",
+		"email_address": "E-Mail-Addresse",
+		"enter_new_phone": "Geben Sie Ihre neue Telefonnummer ein:",
+		"error_fetching_users": "Fehler beim Abrufen der Nutzer: {{error}}",
+		"error_sending_code": "Fehler beim Versuch, den Validierungscode zu senden. Bitte bestätigen Sie, dass Ihre Telefonnummer gültig ist.",
+		"force_password_change": "Passwortänderung bei der Anmeldung erzwingen",
+		"id": "Benutzeridentifikation.",
+		"last_login": "Letzte Anmeldung",
+		"login_id": "Anmelde-ID.",
+		"make_sure_same_password": "Stellen Sie sicher, dass beide Passwörter gleich und gültig sind",
+		"my_profile": "Mein Profil",
+		"name": "Name",
+		"new_code_sent": "Neuer Code gesendet!",
+		"nickname": "Spitzname",
+		"nickname_explanation": "Spitzname (optional)",
+		"not_validated": "Nicht validiert",
+		"note": "Hinweis",
+		"password": "Passwort",
+		"phone_number": "Telefonnummer",
+		"provide_email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+		"provide_password": "Bitte geben Sie ein gültiges Passwort ein",
+		"save_avatar": "Avatar speichern",
+		"send_code": "Code senden",
+		"send_code_again": "Code nochmal senden",
+		"show_hide_password": "Passwort anzeigen/verbergen",
+		"successful_validation": "Telefonnummer bestätigt! Klicken Sie auf die Schaltfläche Speichern, um es mit Ihrem Profil zu verknüpfen",
+		"update_failure": "Fehler beim Aktualisieren: {{error}}",
+		"update_failure_title": "Update fehlgeschlagen",
+		"update_success": "Benutzer erfolgreich aktualisiert",
+		"update_success_title": "Erfolg",
+		"user_role": "Rolle",
+		"users": "Benutzer",
+		"validate_phone": "Bestätigen",
+		"validated": "Bestätigt",
+		"wrong_validation_code": "Sie haben keinen gültigen Code eingegeben. Bitte versuchen Sie es erneut und vergewissern Sie sich, dass Sie die richtige Telefonnummer eingegeben haben"
+	},
+	"wifi_analysis": {
+		"association": "Verband",
+		"associations": "Verbände",
+		"mode": "Modus",
+		"network_diagram": "Netzwerkdiagramm",
+		"radios": "Radios",
+		"title": "WLAN-Analyse"
 	}
 }

public/locales/en/translation.json

@@ -1,5 +1,6 @@
 {
 	"actions": {
+		"actions": "Actions",
 		"blink": "Blink",
 		"configure": "Configure",
 		"connect": "Connect",
@@ -7,28 +8,48 @@
 		"factory_reset": "Factory Reset",
 		"firmware_upgrade": "Firmware Upgrade",
 		"reboot": "Reboot",
-		"title": "Device Actions",
+		"telemetry": "Telemetry",
+		"title": "Commands",
 		"trace": "Trace",
-		"wifi_scan": "Wifi Scan"
+		"wifi_scan": "Wi-Fi Scan"
 	},
 	"blink": {
 		"blink": "Blink",
 		"device_leds": "Device LEDs",
-		"pattern": "Choose the pattern you would like to use: ",
+		"execute_now": "Would you like to set this pattern now?",
+		"pattern": "LEDs pattern: ",
+		"set_leds": "Set LEDs",
 		"when_blink_leds": "When would you like to make the device LEDs blink?"
 	},
 	"commands": {
+		"command_success": "Command Submitted Successfully",
 		"error": "Error while submitting command!",
-		"success": "Command submitted successfully",
-		"title": "Device Commands"
+		"error_delete_log": "Error while trying to delete: {{error}}",
+		"event_queue": "Event Queue",
+		"success": "Command submitted successfully, you can look at the Commands log for the result",
+		"title": "Command History",
+		"unable_queue": "Unable to complete event queue request: {{error}}"
 	},
 	"common": {
+		"access_policy": "Access Policy",
+		"add": "Add",
+		"add_items": "Add Items",
+		"add_note": "Add Note",
+		"add_note_explanation": "Write your new note below and click the '+' button where you are done",
+		"adding_ellipsis": "Adding...",
 		"are_you_sure": "Are you sure?",
+		"back_to_login": "Back to Login",
+		"back_to_start": "Back to start",
+		"by": "By",
 		"cancel": "Cancel",
 		"certificate": "Certificate",
+		"certificates": "Certificates",
 		"clear": "Clear",
 		"close": "Close",
+		"code": "Code",
 		"command": "Command",
+		"commands": "Commands",
+		"commands_executed": "Commands Executed",
 		"compatible": "Compatible",
 		"completed": "Completed",
 		"config_id": "Config. Id",
@@ -36,69 +57,225 @@
 		"connected": "Connected",
 		"copied": "Copied!",
 		"copy_to_clipboard": "Copy to clipboard",
+		"create": "Create",
+		"created": "Created",
+		"created_by": "Created By",
+		"current": "Current ",
+		"custom_date": "Custom Date",
+		"dashboard": "Dashboard",
 		"date": "Date",
+		"day": "day",
+		"days": "days",
 		"delete": "Delete",
+		"delete_device": "Delete Device",
 		"details": "Details",
+		"device": "Device #{{serialNumber}}",
+		"device_dashboard": "Device Dashboard",
+		"device_delete": "Delete Device #{{serialNumber}}",
+		"device_deleted": "Device Successfully Deleted",
+		"device_health": "Device Health",
 		"device_list": "List of Devices",
-		"device_page": "Device Page",
+		"device_page": "View",
+		"device_status": "Device Status",
 		"devices": "Devices",
+		"devices_using_latest": "Devices Using Latest Firmware",
+		"devices_using_unknown": "Devices Using Unknown Firmware",
 		"dismiss": "Dismiss",
 		"do_now": "Do Now!",
 		"download": "Download",
 		"duration": "Duration",
+		"edit": "Edit",
+		"edit_user": "Edit",
+		"email_address": "Email Address",
+		"endpoint": "Endpoint",
+		"endpoints": "Endpoints",
 		"error": "Error",
+		"error_adding_note": "Error while adding note",
+		"error_code": "Error Code",
+		"execute_now": "Would you like to execute this command now?",
 		"executed": "Executed",
+		"exit": "Exit",
 		"firmware": "Firmware",
+		"firmware_dashboard": "Firmware Dashboard",
+		"firmware_installed": "Firmware Installed",
+		"forgot_password": "Forgot your Password?",
+		"forgot_password_title": "Forgot Password",
 		"from": "From",
+		"general_error": "API Error, please consult your administrator",
+		"hide": "Hide",
+		"hour": "hour",
+		"hours": "hours",
 		"id": "Id",
-		"ip_address": "Ip Address",
+		"invalid_file": "The chosen file was invalid, please read the instructions and adjust your file accordingly",
+		"invalid_pem": "Your .pem file is invalid. It should start with '-----BEGIN CERTIFICATE-----' OR '-----BEGIN PRIVATE KEY-----' and it should end with '-----END CERTIFICATE-----' OR '-----END PRIVATE KEY-----'",
+		"ip_address": "IP Address",
+		"ips": "IPs",
+		"item": "Item",
+		"items": "Items",
+		"items_per_page": "Items per page: ",
+		"last_dashboard_refresh": "Last Dashboard Refresh",
 		"later_tonight": "Later tonight",
+		"latest": "Latest",
+		"list": "List",
 		"loading_ellipsis": "Loading...",
 		"loading_more_ellipsis": "Loading more...",
 		"logout": "Logout",
 		"mac": "MAC Address",
 		"manufacturer": "Manufacturer",
+		"memory_used": "Memory Used",
+		"minute": "minute",
+		"minutes": "minutes",
+		"modified": "Modified",
 		"na": "N/A",
 		"need_date": "You need a date...",
+		"no": "No",
+		"no_addresses_found": "No Addresses Found",
+		"no_devices_found": "No Devices Found",
+		"no_items": "No Items",
+		"none": "None",
 		"not_connected": "Not Connected",
+		"of_connected": "% of devices",
 		"off": "Off",
 		"on": "On",
+		"optional": "Optional",
+		"overall_health": "Overall Health",
+		"password_policy": "Password Policy",
+		"preview": "Preview",
+		"program": "Program",
 		"recorded": "Recorded",
 		"refresh": "Refresh",
 		"refresh_device": "Refresh Device",
+		"required": "Required",
 		"result": "Result",
+		"save": "Save",
+		"saved": "Saved!",
+		"saving": "Saving... ",
 		"schedule": "Schedule",
+		"search": "Search Devices",
+		"second": "second",
+		"seconds": "seconds",
+		"seconds_elapsed": "Seconds elapsed",
+		"select": "Select",
 		"serial_number": "Serial Number",
+		"show_all": "Show All",
+		"socket_connection_closed": "Connection closed!",
 		"start": "Start",
+		"stop_editing": "Stop Editing",
 		"submit": "Submit",
 		"submitted": "Submitted",
 		"success": "Success",
+		"system": "System",
+		"table": "Table",
+		"timestamp": "Time",
 		"to": "To",
+		"type": "Type",
+		"type_for_options": "Type the value you need to create...",
+		"type_for_options_format": "Type a value of the valid format ({{format}})...",
+		"unable_to_connect": "Unable to Connect to Device",
+		"unable_to_delete": "Unable to Delete",
 		"unknown": "Unknown",
+		"up_to_date": "Up to Date Devices",
+		"uptimes": "Uptimes",
+		"use_file": "Use File",
 		"uuid": "UUID",
+		"vendors": "Vendors",
 		"view_more": "View more",
 		"yes": "Yes"
 	},
 	"configuration": {
+		"add_configuration": "Add Configuration",
+		"add_new_block": "Add new Configuration Block",
+		"add_or_link": "Link or Add",
+		"add_radio": "Add Radio",
+		"ca_cert_explanation": "Please use a .pem file that starts with \"-----BEGIN CERTIFICATE-----\" and ends with \"-----END CERTIFICATE-----\". The result will be shown in the field below. You can also copy and paste the certificate you would like to use directly.",
+		"cannot_delete": "This configuration cannot be deleted because it is being used by at least one entity, venue or device",
+		"choose_radio_band": "What radio band you would like to create?",
+		"choose_section": "Which section you would like this block to contain?",
+		"configuration_browser": "Configuration Browser",
+		"configurations": "Configurations",
+		"create": "Create Configuration",
+		"create_config": "Create New Configuration",
+		"create_new_configuration": "Create New Configuration Element",
 		"created": "Created",
-		"details": "Device Details",
+		"creation_success": "Configuration successfully created!",
+		"currently_associated": "Currently Associated Configuration: {{config}}",
+		"currently_selected_config": "Currently Selected Configuration: {{config}}",
+		"delete_config": "Delete Config",
+		"details": "Details",
 		"device_password": "Password",
-		"last_configuration_change": "Last Configuration Change",
+		"device_type": "Device Type",
+		"device_types": "Device Types",
+		"edit_configuration": "Edit Configuration",
+		"error_delete": "Error while trying to delete: {{error}}",
+		"error_fetching_config": "Error while fetching configuration",
+		"error_trying_delete": "Error while trying to delete: {{error}}",
+		"error_update": "Error: {{error}}",
+		"explanation": "Explanation",
+		"key_pem_explanation": "Please select .pem file",
+		"last_configuration_change": "Configuration Change",
 		"last_configuration_download": "Last Configuration Download",
 		"location": "Location",
+		"need_device_type": "Every configuration needs to support at least one device type",
+		"no_associated_config": "No Associated Configuration",
+		"no_associated_configuration": "No Associated Configurations",
+		"note": "Note",
 		"notes": "Notes",
 		"owner": "Owner",
-		"title": "Device Configuration",
+		"select_configuration": "Select this Configuration",
+		"success_block_delete": "Successfully deleted configuration block",
+		"success_update": "Configuration Successfully Updated!",
+		"successful_delete": "Deleted Configuration!",
+		"support_all": "Support All",
+		"supported_device_types": "Supported Device Types",
+		"title": "Configuration",
 		"type": "Device Type",
+		"used_by": "Used By",
+		"used_by_details": "{{entities}} Entities, {{venues}} Venues and {{devices}} Devices",
+		"uuid": "Config ID",
+		"view_config": "View Configuration",
+		"view_in_use": "View In Use",
 		"view_json": "View raw JSON"
 	},
 	"configure": {
 		"choose_file": "You need to choose a valid .json file: ",
 		"enter_new": "Enter new device configuration JSON: ",
 		"placeholder": "Config JSON",
-		"title": "Configure Device",
+		"title": "Configure",
 		"valid_json": "You need to enter valid JSON"
 	},
+	"connect": {
+		"error_trying_to_connect": "Error while trying to connect to device: {{error}}"
+	},
+	"contact": {
+		"access_pin": "Access PIN",
+		"add_contact": "Add Contact",
+		"create_contact": "Create Contact",
+		"delete": "Delete Contact?",
+		"error_assign": "Error while trying to assign contact: {{error}}",
+		"error_creation": "Error while trying to create contact: {{error}}",
+		"error_delete": "Error trying to delete contact: {{error}}",
+		"error_fetching_list": "Error fetching contacts",
+		"error_fetching_single": "Error fetching contact: {{error}}",
+		"error_unassign": "Error while trying to unassign contact: {{error}}",
+		"first_name": "First Name",
+		"identifier": "Identifier",
+		"initials": "Initials",
+		"last_name": "Last Name",
+		"no_associated_contact": "No Associated Contact",
+		"primary_email": "Primary Email",
+		"salutation": "Salutation",
+		"secondary_email": "Secondary Email",
+		"successful_assign": "Successfully assigned contact!",
+		"successful_creation": "Contact Created!",
+		"successful_delete": "Successfully Deleted Contact!",
+		"successful_unassign": "Successfully Unassigned Contact",
+		"successful_update": "Successfully Updated Contact",
+		"title": "Contacts",
+		"type": "Type",
+		"update_error": "Error updating contact: {{error}}",
+		"user_title": "Title",
+		"visual": "Correspondence Name"
+	},
 	"delete_command": {
 		"explanation": "Are you sure you want to delete this command? This action is not reversible.",
 		"title": "Delete Command"
@@ -109,16 +286,84 @@
 		"explanation": "This will delete all of the {{object}} before the date you choose. Be careful, this action is not reversible.",
 		"healthchecks_title": "Delete Healthchecks"
 	},
+	"device": {
+		"error_fetching_device": "Error fetching device information: {{error}}",
+		"error_fetching_devices": "Error while fetching devices: {{error}}"
+	},
 	"device_logs": {
 		"log": "Log",
 		"severity": "Severity",
-		"title": "Device Logs"
+		"title": "Logs"
+	},
+	"entity": {
+		"add_child": "Add Child Entity to {{entityName}}",
+		"add_failure": "Error, the server returned : {{error}}",
+		"add_ips": "Manage IPs",
+		"add_root": "Add Root Entity",
+		"add_success": "Entity Successfully Created!",
+		"assigned_inventory": "Assigned Inventory",
+		"cannot_delete": "You cannot delete entities which have children. Delete this entity's children to be able to delete it.",
+		"currently_selected_entity": "Currently Selected Entity: {{config}}",
+		"currently_selected_venue": "Currently Selected Venue: {{config}}",
+		"delete_success": "Entity Successfully Deleted",
+		"delete_warning": "Warning: this operation cannot be reverted",
+		"edit_failure": "Update unsuccessful : {{error}}",
+		"enter_here": "Enter the IP(s) you'd like to add here",
+		"entities": "Entities",
+		"entity": "Entity",
+		"error_fetch_entity": "Error while fetching entity information",
+		"error_fetching": "Error while fetching entities",
+		"error_saving": "Error while saving entity",
+		"higher_priority": "Make Higher Priority",
+		"ip_detection": "IP Detection",
+		"ip_formats": "You can add IPv4 or IPv6 addresses in the following formats:",
+		"lower_priority": "Make Lower Priority",
+		"need_select_entity": "You need to select an entity from the table below",
+		"no_ips": "No IPs selected",
+		"not_assigned": "Not Assigned",
+		"only_unassigned": "Only Unassigned",
+		"select_entity": "Select this Entity",
+		"selected_entity": "Selected Entity",
+		"update_failure_error": "Error while trying to update entity: {{error}}",
+		"valid_serial": "Needs to be a valid serial number (12 HEX characters)",
+		"venues": "Venues"
 	},
 	"factory_reset": {
 		"redirector": "Keep redirector: ",
-		"title": "Factory Reset Device",
+		"reset": "Reset",
+		"resetting": "Resetting... ",
+		"title": "Factory Reset",
 		"warning": "Warning: Once you submit this cannot be reverted"
 	},
+	"firmware": {
+		"average_age": "Average Firmware Age",
+		"choose_custom": "Choose",
+		"details_title": "Image #{{image}} Details",
+		"device_type": "Device Type",
+		"device_types": "Device Types",
+		"downloads": "Downloads",
+		"error_fetching_latest": "Error while fetching latest firmware",
+		"from_release": "From",
+		"history_title": "History",
+		"image": "Image",
+		"image_date": "Image Date",
+		"installed_firmware": "Installed Firmware",
+		"latest_version_installed": "Latest Version Installed",
+		"newer_firmware_available": "Newer Revisions Available",
+		"reinstall_latest": "Reinstall ",
+		"revision": "Revision",
+		"show_dev": "Show Dev Releases",
+		"size": "Size",
+		"status": "Firmware Status",
+		"title": "Firmware",
+		"to_release": "To",
+		"unknown_firmware_status": "Unknown Firmware Status",
+		"upgrade": "Upgrade",
+		"upgrade_command_submitted": "Upgrade Command Submitted Successfully",
+		"upgrade_to_latest": "Latest",
+		"upgrade_to_version": "Upgrade to this Revision",
+		"upgrading": "Upgrading..."
+	},
 	"footer": {
 		"coreui_for_react": "CoreUI for React",
 		"powered_by": "Powered by",
@@ -126,43 +371,293 @@
 	},
 	"health": {
 		"sanity": "Sanity",
-		"title": "Device Health"
+		"title": "Health"
+	},
+	"inventory": {
+		"add_child": "Add Child Venue",
+		"add_child_venue": "Add Child Venue to {{entityName}}",
+		"add_tag": "Create Tag",
+		"add_tag_to": "Add New Device to {{name}}",
+		"add_venue": "Add Venue",
+		"assign_ent_ven": "Assign to Entity or Venue",
+		"assign_entity_instructions": "You can either find the entity you want this tag to be assigned to by using the menu below, or you can manually paste the entity's UUID in the field above.",
+		"assign_error": "Error while trying to assign tag",
+		"assign_to_entity": "Assign to Entity",
+		"bulk_delete_assigned": "Would you like to bulk delete assigned devices within your file?",
+		"bulk_delete_assigned_warning": "Warning: this action is not reversible",
+		"bulk_delete_devices": "Bulk Delete Devices",
+		"bulk_delete_devices_not_found": "{{number}} devices not found",
+		"bulk_delete_explanation": "To bulk delete devices, use a CSV file with one column called SerialNumber",
+		"bulk_delete_test": "Validate File",
+		"close_entity_menu": "Close Edit Entity Menu",
+		"delete_devices": "Delete Devices",
+		"delete_errors": "{{number}} Delete Device Errors",
+		"delete_tag": "Delete Tag",
+		"delete_venue": "Permanently Delete Venue",
+		"deleted_devices": "{{number}} Deleted Devices",
+		"deleting": "Deleting... ",
+		"deletion_failure": "Deletion error",
+		"devices_assigned": "{{number}} existing devices assigned and updated",
+		"devices_created": "{{number}} devices created",
+		"devices_deleted": "Devices Deleted",
+		"devices_errors_while_creating": "{{number}} device creations failed",
+		"devices_errors_while_updating": "{{number}} device updates failed",
+		"devices_found_assigned": "{{number}} devices found and already assigned to an entity or venue",
+		"devices_found_unassigned": "{{number}} devices found, but not assigned",
+		"devices_imported": " Devices Imported",
+		"devices_not_found": "{{number}} devices with no conflict",
+		"devices_tested": "Devices Tested",
+		"duplicate_serial": "Serial Number already used in file (duplicate)",
+		"error_create_venue": "Error while creating venue",
+		"error_delete_tag": "Error while deleting inventory tag",
+		"error_get_venue": "Error while retrieving venues",
+		"error_pushing_config": "Error while trying to push configuration to device: {{error}}",
+		"error_retrieving": "Error occurred while retrieving inventory tags",
+		"error_unassign": "Error during unassign operation",
+		"error_update_venue": "Error while updating venue",
+		"error_venue_delete": "Error while deleting venue",
+		"error_within_file": "{{number}} devices with wrong information in file (will be ignored)",
+		"file_error": "There seems to be a mistake in your file. Please make sure the file is in CSV format and contains the 5 columns mentioned above in the first line of the file",
+		"final_delete_results": "Final Delete Results",
+		"final_import_results": "Final Import Results",
+		"import_assigned_devices": "Do you want to reassign them with this import?",
+		"import_assigned_devices_explanation": "Some devices conflict with already assigned devices. You should resolve those problems before importing. ",
+		"import_devices": "Import Devices",
+		"import_devices_explanation": "To bulk import devices, you need to use a CSV file with the following columns: SerialNumber,Name,Description,DeviceType,NoteText",
+		"import_devices_to": "Import Devices to {{name}}",
+		"import_existing_devices": "Update and assign them?",
+		"import_existing_devices_explanation": "Some devices already exist in the inventory and are unassigned.",
+		"importing": "Importing...",
+		"last_modification": "Last Modification",
+		"no_devices_to_delete": "No Devices to Delete",
+		"no_devices_to_import": "No valid devices to create or update!",
+		"note_text": "Note Text",
+		"passed_tests": "All tests were passed, your devices are ready to import!",
+		"serial_number_required": "Error: Missing Serial Number",
+		"showing_top_10": "Here is a preview of the information we have retrieved from your file:",
+		"sub_venues": "Subvenues",
+		"subscriber": "Subscriber",
+		"successful_assign": "Tag successfully assigned",
+		"successful_tag_delete": "Inventory Tag Successfully Deleted",
+		"successful_tag_update": "Successfully updated tag",
+		"successful_unassign": "Unassign operation was successful",
+		"successful_venue_create": "Successfully Created Venue",
+		"successful_venue_delete": "Venue successfully deleted",
+		"successful_venue_update": "Successfully Updated Venue",
+		"tag_created": "Inventory tag successfully created",
+		"tag_creation_error": "Error while trying to create inventory tag",
+		"tag_update_error": "Error while updating tag",
+		"tags_assigned_to": "Inventory tags assigned to {{name}}",
+		"test_import": "Validate Import Data",
+		"test_results": "Test Results",
+		"title": "Inventory",
+		"type_invalid": "Error: Invalid Device Type",
+		"unassign": "Unassign",
+		"unassign_tag": "Unassign Tag from Entity",
+		"unassigned_deleted_devices": "{{number}} Devices Deleted and Unassigned",
+		"unassigned_tags": "Unassigned tags",
+		"validating_import_file": "Validating import file and data...",
+		"venue": "Venue"
+	},
+	"location": {
+		"add": "Add Location",
+		"building_name": "Building Name",
+		"city": "City",
+		"country": "Country",
+		"create": "Create Location",
+		"delete": "Delete Location?",
+		"error_assign": "Error while trying to assign location: {{error}}",
+		"error_creation": "Error while trying to create locations: {{error}}",
+		"error_delete": "Error while deleting location: {{error}}",
+		"error_fetching_single": "Error while trying to fetch location: {{error}}",
+		"geocode": "GeoCode",
+		"no_associated": "No Associated Location",
+		"postal": "ZIP/Postal Code",
+		"search": "Search locations to auto fill the fields below",
+		"state": "State",
+		"street_address": "Street Address",
+		"successful_creation": "Location Successfully Created!",
+		"successful_delete": "Successfully Deleted Location!",
+		"successful_update": "Successfully updated location!",
+		"successfully_assigned": "Location Successfully Assigned!",
+		"title": "Locations",
+		"update_error": "Error updating location: {{error}}"
 	},
 	"login": {
+		"account_verification": "Account Verification",
+		"authentication_expired": "Authentication expired, please start the login process again",
+		"change_password": "Change Password",
+		"change_password_error": "Error while changing password. Make sure the new password is valid by visiting the 'Password Policy' page",
+		"change_password_instructions": "Enter and confirm your new password",
+		"changing_password": "Changing Password... ",
+		"confirm_new_password": "Confirm New Password",
+		"different_passwords": "You need to enter the same password twice",
+		"email_code_validation": "Please check your email box and enter the verification code we have just sent you in the box below",
+		"forgot_password_error": "Error while trying to send Forgot Password email. Please make sure this userId is associated to an account.",
+		"forgot_password_explanation": "Enter your username  to receive an email containing the instructions to reset your password",
+		"forgot_password_success": "You should soon receive an email containing the instructions to reset your password. Please make sure to check your spam if you can't find the email",
+		"logging_in": "Logging In... ",
 		"login": "Login",
-		"login_error": "Login error, confirm that your username, password and gateway url are valid",
+		"login_error": "Login error, make sure the information you are providing is valid",
+		"new_password": "New Password",
 		"password": "Password",
-		"please_enter_gateway": "Please enter a gateway URL",
+		"phone_validation_explanation": "Please check your mobile device and enter the verification code we have just sent you in the box below",
+		"please_enter_gateway": "Please enter a uCentralSec URL",
 		"please_enter_password": "Please enter your password",
 		"please_enter_username": "Please enter your username",
+		"previously_used": "Password was previously used",
+		"send_forgot": "Send Email",
+		"sending_ellipsis": "Sending... ",
 		"sign_in_to_account": "Sign in to your account",
-		"username": "Username"
+		"url": "uCentralSec URL",
+		"username": "Username",
+		"verification_code": "Enter your verification here",
+		"wrong_code": "The verification code that was entered is not valid. "
 	},
 	"reboot": {
 		"directions": "When would you like to reboot this device?",
-		"title": "Reboot Device"
+		"now": "Would you like to reboot this device now?",
+		"title": "Reboot"
 	},
 	"scan": {
 		"active": "Enable active scan",
 		"channel": "Channel",
 		"directions": "Launch a wifi scan of this device, which should take approximately 25 seconds.",
-		"results": "Wifi Scan Results"
+		"re_scan": "Re-Scan",
+		"result_directions": "Please click the '$t(scan.re_scan)' button if you would like to do a scan with the same configuration as the last.",
+		"results": "Wi-Fi Scan Results",
+		"scan": "Scan",
+		"scanning": "Scanning... ",
+		"waiting_directions": "Please wait for the scan result. This may take up to 25 seconds. You can exit and look at the results from the commands table later."
+	},
+	"settings": {
+		"title": "Settings"
 	},
 	"statistics": {
 		"data": "Data (KB)",
+		"latest_statistics": "Latest Statistics",
+		"lifetime_stats": "Lifetime Statistics",
+		"no_interfaces": "No interface lifetime statistics available",
+		"show_latest": "Last Statistics",
 		"title": "Statistics"
 	},
+	"status": {
+		"connection_status": "Status",
+		"error": "Status data is unavailable",
+		"last_contact": "Last Contact",
+		"load_averages": "Load (1/5/15 m.)",
+		"localtime": "Localtime",
+		"memory": "Memory Used",
+		"percentage_free": "{{percentage}}% of {{total}} free",
+		"percentage_used": "{{percentage}}% of {{total}} used",
+		"title": "#{{serialNumber}} Status",
+		"uptime": "Uptime",
+		"used_total_memory": "{{used}} used / {{total}} total "
+	},
+	"system": {
+		"error_fetching": "Error while fetching system information",
+		"error_reloading": "Error while reloading: {{error}}",
+		"hostname": "Host Name",
+		"os": "Operation System",
+		"processors": "Processors",
+		"reload": "Reload",
+		"reload_subsystems": "Reload",
+		"subsystems": "Subsystems",
+		"success_reload": "Reload command successfully submitted!"
+	},
+	"telemetry": {
+		"connection_failed": "Failed to create connection. Error: {{error}}",
+		"interval": "Interval",
+		"last_update": "Last Update",
+		"types": "Types"
+	},
 	"trace": {
 		"choose_network": "Choose network",
 		"directions": "Launch a remote trace of this device for either a specific duration or a number of packets",
+		"download_trace": "Download Trace File",
 		"packets": "Packets",
-		"title": "Trace Device"
+		"title": "Trace",
+		"trace": "Trace",
+		"trace_not_successful": "Trace not successful: gateway reported the following error : {{error}}",
+		"wait_for_file": "Would you like to wait until the trace file is ready?",
+		"waiting_directions": "Please wait for the trace data file. This may take some time. You can exit the wait and retrieve the trace file from the commands table later.",
+		"waiting_seconds": "Time Elapsed: {{seconds}} seconds"
 	},
 	"upgrade": {
+		"command_submitted": "Command submitted",
+		"device_disconnected": "Device disconnected",
+		"device_reconnected": "Device reconnected",
+		"device_upgrading_firmware": "Device upgrading firmware",
 		"directions": "Choose a time and a firmware version for this device",
 		"firmware_uri": "Firmware URI:",
 		"need_uri": "You need a URI...",
+		"new_version": "New version is ",
+		"offline_device": "This option is blocked because this device is not connected",
 		"time": "Time of upgrade:",
-		"title": "Firmware Upgrade"
+		"title": "Firmware Upgrade",
+		"upgrade": "Upgrade",
+		"wait_for_upgrade": "Would you like to wait for the upgrade to finish?",
+		"waiting_for_device": "Waiting for device to reconnect"
+	},
+	"user": {
+		"add_phone_number": "Add Phone Number",
+		"avatar": "Your Avatar",
+		"avatar_file": "Your Avatar (max. of 2 MB)",
+		"check_phone": "Please check your phone for your validation code",
+		"confirm_new_password": "Confirm New Password",
+		"create": "Create User",
+		"create_failure": "Error while creating user. Please make sure this email address is not already linked to an account.",
+		"create_success": "User Created Successfully",
+		"creating": "Creating User...",
+		"delete_avatar": "Delete Avatar",
+		"delete_failure": "Error while trying to delete user: {{error}}",
+		"delete_success": "User successfully deleted!",
+		"delete_title": "Delete User",
+		"delete_warning": "Warning: Once you delete a user you cannot revert",
+		"deleting": "Deleting... ",
+		"description": "Description",
+		"edit": "Edit User",
+		"email_address": "Email Address",
+		"enter_new_phone": "Enter your new phone number: ",
+		"error_fetching_users": "Error fetching users: {{error}}",
+		"error_sending_code": "Error while trying to send validation code. Please confirm that your phone number is valid.",
+		"force_password_change": "Force Password Change on Login",
+		"id": "User Id.",
+		"last_login": "Last Login",
+		"login_id": "Login Id.",
+		"make_sure_same_password": "Make sure both passwords are the same and are valid",
+		"my_profile": "My Profile",
+		"name": "Name",
+		"new_code_sent": "New Code Sent!",
+		"nickname": "Nickname",
+		"nickname_explanation": "Nickname (optional)",
+		"not_validated": "Not Validated",
+		"note": "Note",
+		"password": "Password",
+		"phone_number": "Phone Number",
+		"provide_email": "Please provide a valid email address",
+		"provide_password": "Please provide a valid password",
+		"save_avatar": "Save Avatar",
+		"send_code": "Send Code",
+		"send_code_again": "Send Code Again",
+		"show_hide_password": "Show/Hide Password",
+		"successful_validation": "Phone Number Validated! Click the save button to link it to your profile",
+		"update_failure": "Error while trying to update: {{error}}",
+		"update_failure_title": "Update Failed",
+		"update_success": "User Updated Successfully",
+		"update_success_title": "Success",
+		"user_role": "Role",
+		"users": "Users",
+		"validate_phone": "Validate",
+		"validated": "Validated",
+		"wrong_validation_code": "You have not entered a valid code. Please try again and make sure you have entered the right phone number"
+	},
+	"wifi_analysis": {
+		"association": "Association",
+		"associations": "Associations",
+		"mode": "Mode",
+		"network_diagram": "Network Diagram",
+		"radios": "Radios",
+		"title": "Wi-Fi Analysis"
 	}
 }

public/locales/es/translation.json

@@ -1,5 +1,6 @@
 {
 	"actions": {
+		"actions": "Comportamiento",
 		"blink": "Parpadeo",
 		"configure": "Configurar",
 		"connect": "Conectar",
@@ -7,28 +8,48 @@
 		"factory_reset": "Restablecimiento De Fábrica",
 		"firmware_upgrade": "Actualización de firmware",
 		"reboot": "Reiniciar",
-		"title": "Acciones del dispositivo",
+		"telemetry": "Telemetria",
+		"title": "Comandos",
 		"trace": "Rastro",
-		"wifi_scan": "Escaneo Wifi"
+		"wifi_scan": "Escaneo Wi-Fi "
 	},
 	"blink": {
 		"blink": "Parpadeo",
 		"device_leds": "LED de dispositivo",
+		"execute_now": "¿Le gustaría establecer este patrón ahora?",
 		"pattern": "Elija el patrón que le gustaría usar:",
+		"set_leds": "Establecer LED",
 		"when_blink_leds": "¿Cuándo desea que los LED del dispositivo parpadeen?"
 	},
 	"commands": {
+		"command_success": "Comando enviado con éxito",
 		"error": "¡Error al enviar el comando!",
-		"success": "Comando enviado con éxito",
-		"title": "Comandos del dispositivo"
+		"error_delete_log": "Error al intentar eliminar: {{error}}",
+		"event_queue": "Cola de eventos",
+		"success": "Comando enviado con éxito, puede consultar el registro de Comandos para ver el resultado",
+		"title": "Historial de Comandos",
+		"unable_queue": "No se pudo completar la solicitud de cola de eventos: {{error}}"
 	},
 	"common": {
+		"access_policy": "Política de acceso",
+		"add": "Añadir",
+		"add_items": "Agregar articulos",
+		"add_note": "Añadir la nota",
+		"add_note_explanation": "Escriba su nueva nota a continuación y haga clic en el botón '+' donde haya terminado",
+		"adding_ellipsis": "Añadiendo ...",
 		"are_you_sure": "¿Estás seguro?",
+		"back_to_login": "Atrás para iniciar sesión",
+		"back_to_start": "volver a empezar",
+		"by": "Por",
 		"cancel": "Cancelar",
 		"certificate": "Certificado",
+		"certificates": "Certificados",
 		"clear": "Claro",
 		"close": "Cerrar",
+		"code": "Código",
 		"command": "Mando",
+		"commands": "comandos",
+		"commands_executed": "Comandos ejecutados",
 		"compatible": "Compatible",
 		"completed": "terminado",
 		"config_id": "Config. Identificación",
@@ -36,69 +57,225 @@
 		"connected": "Conectado",
 		"copied": "Copiado!",
 		"copy_to_clipboard": "Copiar al portapapeles",
+		"create": "Crear",
+		"created": "creado",
+		"created_by": "Creado por",
+		"current": "Corriente",
+		"custom_date": "Fecha personalizada",
+		"dashboard": "Tablero",
 		"date": "Fecha",
+		"day": "día",
+		"days": "días",
 		"delete": "Borrar",
+		"delete_device": "Eliminar dispositivo",
 		"details": "Detalles",
+		"device": "Dispositivo n.º{{serialNumber}}",
+		"device_dashboard": "Panel de control del dispositivo",
+		"device_delete": "Eliminar dispositivo n.º{{serialNumber}}",
+		"device_deleted": "Dispositivo eliminado correctamente",
+		"device_health": "Salud del dispositivo",
 		"device_list": "Listado de dispositivos",
-		"device_page": "Página del dispositivo",
+		"device_page": "Ver",
+		"device_status": "Estado del dispositivo",
 		"devices": "Dispositivos",
+		"devices_using_latest": "Dispositivos que utilizan el firmware más reciente",
+		"devices_using_unknown": "Dispositivos que utilizan firmware desconocido",
 		"dismiss": "Despedir",
 		"do_now": "¡Hagan ahora!",
 		"download": "Descargar",
 		"duration": "Duración",
+		"edit": "Editar",
+		"edit_user": "Editar",
+		"email_address": "Dirección de correo electrónico",
+		"endpoint": "punto final",
+		"endpoints": "Puntos finales",
 		"error": "Error",
+		"error_adding_note": "Error al agregar una nota",
+		"error_code": "código de error",
+		"execute_now": "¿Le gustaría ejecutar este comando ahora?",
 		"executed": "ejecutado",
+		"exit": "salida",
 		"firmware": "Firmware",
+		"firmware_dashboard": "Panel de firmware",
+		"firmware_installed": "Firmware instalado",
+		"forgot_password": "¿Olvidaste tu contraseña?",
+		"forgot_password_title": "Se te olvidó tu contraseña",
 		"from": "Desde",
+		"general_error": "Error de API, consulte a su administrador",
+		"hide": "Esconder",
+		"hour": "hora",
+		"hours": "horas",
 		"id": "Carné de identidad",
+		"invalid_file": "El archivo elegido no es válido, lea las instrucciones y ajuste su archivo en consecuencia",
+		"invalid_pem": "Su archivo .pem no es válido. Debe comenzar con '----- BEGIN CERTIFICATE -----' O '----- BEGIN PRIVATE KEY -----' y debe terminar con '----- END CERTIFICATE --- - 'O' ----- FIN DE CLAVE PRIVADA ----- '",
 		"ip_address": "Dirección IP",
+		"ips": "IPs",
+		"item": "ít",
+		"items": "artículos",
+		"items_per_page": "Artículos por página:",
+		"last_dashboard_refresh": "Última actualización del panel",
 		"later_tonight": "Más tarde esta noche",
+		"latest": "último",
+		"list": "Lista",
 		"loading_ellipsis": "Cargando...",
 		"loading_more_ellipsis": "Cargando más ...",
 		"logout": "Cerrar sesión",
 		"mac": "Dirección MAC",
 		"manufacturer": "Fabricante",
+		"memory_used": "Memoria usada",
+		"minute": "minuto",
+		"minutes": "minutos",
+		"modified": "Modificado",
 		"na": "N / A",
 		"need_date": "Necesitas una cita ...",
+		"no": "No",
+		"no_addresses_found": "No se encontraron direcciones",
+		"no_devices_found": "No se encontraron dispositivos",
+		"no_items": "No hay articulos",
+		"none": "Ninguna",
 		"not_connected": "No conectado",
+		"of_connected": "% de dispositivos",
 		"off": "Apagado",
 		"on": "en",
+		"optional": "Opcional",
+		"overall_health": "Salud en general",
+		"password_policy": "Política de contraseñas",
+		"preview": "Avance",
+		"program": "Programa",
 		"recorded": "Grabado",
 		"refresh": "Refrescar",
 		"refresh_device": "Actualizar dispositivo",
+		"required": "Necesario",
 		"result": "Resultado",
+		"save": "Salvar",
+		"saved": "¡Salvado!",
+		"saving": "Ahorro...",
 		"schedule": "Programar",
+		"search": "Dispositivos de búsqueda",
+		"second": "segundo",
+		"seconds": "segundos",
+		"seconds_elapsed": "Segundos transcurridos",
+		"select": "Seleccionar",
 		"serial_number": "Número de serie",
+		"show_all": "Mostrar todo",
+		"socket_connection_closed": "¡Conexión cerrada!",
 		"start": "comienzo",
+		"stop_editing": "Dejar de editar",
 		"submit": "Enviar",
 		"submitted": "Presentado",
 		"success": "Éxito",
+		"system": "Sistema",
+		"table": "Mesa",
+		"timestamp": "hora",
 		"to": "a",
+		"type": "Tipo",
+		"type_for_options": "Escriba el valor que necesita crear ...",
+		"type_for_options_format": "Escriba un valor del formato válido ({{format}}) ...",
+		"unable_to_connect": "No se puede conectar al dispositivo",
+		"unable_to_delete": "No se puede eliminar",
 		"unknown": "Desconocido",
+		"up_to_date": "Dispositivos actualizados",
+		"uptimes": "Tiempos de actividad",
+		"use_file": "Usar archivo",
 		"uuid": "UUID",
+		"vendors": "Vendedores",
 		"view_more": "Ver más",
 		"yes": "Sí"
 	},
 	"configuration": {
+		"add_configuration": "Agregar configuración",
+		"add_new_block": "Agregar nuevo bloque de configuración",
+		"add_or_link": "Vincular o agregar",
+		"add_radio": "Agregar radio",
+		"ca_cert_explanation": "Utilice un archivo .pem que comience con \"----- BEGIN CERTIFICATE -----\" y termine con \"----- END CERTIFICATE -----\". El resultado se mostrará en el campo siguiente. También puede copiar y pegar el certificado que le gustaría usar directamente.",
+		"cannot_delete": "Esta configuración no se puede eliminar porque está siendo utilizada por al menos una entidad, lugar o dispositivo",
+		"choose_radio_band": "¿Qué banda de radio te gustaría crear?",
+		"choose_section": "Qué sección le gustaría que contenga este bloque?",
+		"configuration_browser": "Navegador de configuración",
+		"configurations": "Configuraciones",
+		"create": "Crear Configuración",
+		"create_config": "Crear nueva configuración",
+		"create_new_configuration": "Crear nuevo elemento de configuración",
 		"created": "creado",
-		"details": "Detalles del dispositivo",
+		"creation_success": "¡Configuración creada con éxito!",
+		"currently_associated": "Configuración asociada actual: {{config}}",
+		"currently_selected_config": "Configuración seleccionada actualmente: {{config}}",
+		"delete_config": "Eliminar Configuración",
+		"details": "Detalles",
 		"device_password": "Contraseña",
-		"last_configuration_change": "Último cambio de configuración",
+		"device_type": "Tipo de dispositivo",
+		"device_types": "Tipos de dispositivos",
+		"edit_configuration": "Editar configuración",
+		"error_delete": "Error al intentar eliminar: {{error}}",
+		"error_fetching_config": "Error al obtener la configuración",
+		"error_trying_delete": "Error al intentar eliminar: {{error}}",
+		"error_update": "Error: {{error}}",
+		"explanation": "Explicación",
+		"key_pem_explanation": "Seleccione el archivo .pem",
+		"last_configuration_change": "CAMBIO DE CONFIGURACIÓN",
 		"last_configuration_download": "Descarga de la última configuración",
 		"location": "Ubicación",
+		"need_device_type": "Cada configuración debe admitir al menos un tipo de dispositivo",
+		"no_associated_config": "Sin configuración asociada",
+		"no_associated_configuration": "Sin configuraciones asociadas",
+		"note": "Nota",
 		"notes": "Notas",
 		"owner": "Propietario",
-		"title": "Configuración del dispositivo",
+		"select_configuration": "Seleccione esta configuración",
+		"success_block_delete": "Bloque de configuración eliminado con éxito",
+		"success_update": "¡Configuración actualizada con éxito!",
+		"successful_delete": "Configuración eliminada!",
+		"support_all": "Apoyar a todos",
+		"supported_device_types": "Tipos de dispositivos compatibles",
+		"title": "Configuración",
 		"type": "Tipo de dispositivo",
+		"used_by": "Usado por",
+		"used_by_details": "{{entities}} Entidades, {{venues}} lugares y {{devices}} dispositivos",
+		"uuid": "ID de configuración",
+		"view_config": "Ver configuración",
+		"view_in_use": "Ver en uso",
 		"view_json": "Ver JSON sin procesar"
 	},
 	"configure": {
 		"choose_file": "Debe elegir un archivo .json válido:",
 		"enter_new": "Ingrese la nueva configuración del dispositivo JSON:",
 		"placeholder": "Configurar JSON",
-		"title": "Configurar dispositivo",
+		"title": "Configurar",
 		"valid_json": "Debes ingresar un JSON válido"
 	},
+	"connect": {
+		"error_trying_to_connect": "Error al intentar conectarse al dispositivo: {{error}}"
+	},
+	"contact": {
+		"access_pin": "PIN de acceso",
+		"add_contact": "Agregar contacto",
+		"create_contact": "Crear contacto",
+		"delete": "¿Borrar contacto?",
+		"error_assign": "Error al intentar asignar el contacto: {{error}}",
+		"error_creation": "Error al intentar crear contacto: {{error}}",
+		"error_delete": "Error al intentar eliminar el contacto: {{error}}",
+		"error_fetching_list": "Error al obtener los contactos",
+		"error_fetching_single": "Error al obtener el contacto: {{error}}",
+		"error_unassign": "Error al intentar anular la asignación del contacto: {{error}}",
+		"first_name": "Nombre de pila",
+		"identifier": "Identificador",
+		"initials": "Iniciales",
+		"last_name": "Apellido",
+		"no_associated_contact": "Sin contacto asociado",
+		"primary_email": "Correo electrónico principal",
+		"salutation": "saludo",
+		"secondary_email": "Email secundario",
+		"successful_assign": "¡Contacto asignado correctamente!",
+		"successful_creation": "Contacto Creado!",
+		"successful_delete": "¡Contacto eliminado con éxito!",
+		"successful_unassign": "Contacto no asignado correctamente",
+		"successful_update": "Contacto actualizado con éxito",
+		"title": "Contactos",
+		"type": "Tipo",
+		"update_error": "Error al actualizar el contacto: {{error}}",
+		"user_title": "Título",
+		"visual": "Nombre de correspondencia"
+	},
 	"delete_command": {
 		"explanation": "¿Está seguro de que desea eliminar este comando? Esta acción no es reversible.",
 		"title": "Eliminar comando"
@@ -109,16 +286,84 @@
 		"explanation": "Esto eliminará todos los {{object}} antes de la fecha que elija. Tenga cuidado, esta acción no es reversible.",
 		"healthchecks_title": "Eliminar comprobaciones de estado"
 	},
+	"device": {
+		"error_fetching_device": "Error al obtener la información del dispositivo: {{error}}",
+		"error_fetching_devices": "Error al recuperar dispositivos: {{error}}"
+	},
 	"device_logs": {
 		"log": "Iniciar sesión",
 		"severity": "Gravedad",
-		"title": "Registros de dispositivos"
+		"title": "Registros"
+	},
+	"entity": {
+		"add_child": "Agregar entidad secundaria a {{entityName}}",
+		"add_failure": "Error, el servidor devolvió: {{error}}",
+		"add_ips": "Administrar direcciones IP",
+		"add_root": "Agregar entidad raíz",
+		"add_success": "¡Entidad creada con éxito!",
+		"assigned_inventory": "Inventario asignado",
+		"cannot_delete": "No puede eliminar entidades que tienen hijos. Elimina los hijos de esta entidad para poder eliminarla.",
+		"currently_selected_entity": "Entidad seleccionada actualmente: {{config}}",
+		"currently_selected_venue": "Lugar seleccionado actualmente: {{config}}",
+		"delete_success": "Entidad eliminada correctamente",
+		"delete_warning": "Advertencia: esta operación no se puede revertir",
+		"edit_failure": "Actualización fallida: {{error}}",
+		"enter_here": "Ingrese las IP que desea agregar aquí",
+		"entities": "entidades",
+		"entity": "Entidad",
+		"error_fetch_entity": "Error al obtener la información de la entidad",
+		"error_fetching": "Error al recuperar entidades",
+		"error_saving": "Error al guardar la entidad",
+		"higher_priority": "Dar mayor prioridad",
+		"ip_detection": "Detección de IP",
+		"ip_formats": "Puede agregar direcciones IPv4 o IPv6 en los siguientes formatos:",
+		"lower_priority": "Hacer una prioridad más baja",
+		"need_select_entity": "Debe seleccionar una entidad de la siguiente tabla",
+		"no_ips": "No se seleccionaron direcciones IP",
+		"not_assigned": "No asignado",
+		"only_unassigned": "Solo sin asignar",
+		"select_entity": "Seleccione esta entidad",
+		"selected_entity": "Entidad seleccionada",
+		"update_failure_error": "Error al intentar actualizar la entidad: {{error}}",
+		"valid_serial": "Debe ser un número de serie válido (12 caracteres HEX)",
+		"venues": "Sedes"
 	},
 	"factory_reset": {
 		"redirector": "Mantener el redirector:",
-		"title": "Dispositivo de restablecimiento de fábrica",
+		"reset": "Reiniciar",
+		"resetting": "Restableciendo…",
+		"title": "Restablecimiento De Fábrica",
 		"warning": "Advertencia: una vez que envíe, esto no se podrá revertir"
 	},
+	"firmware": {
+		"average_age": "Edad promedio del firmware",
+		"choose_custom": "Escoger",
+		"details_title": "Detalles de la imagen n. °{{image}} ",
+		"device_type": "Tipo de dispositivo",
+		"device_types": "Tipos de dispositivos",
+		"downloads": "Descargas",
+		"error_fetching_latest": "Error al obtener el firmware más reciente",
+		"from_release": "Desde",
+		"history_title": "Historia",
+		"image": "Imagen",
+		"image_date": "Fecha de la imagen",
+		"installed_firmware": "Firmware instalado",
+		"latest_version_installed": "Última versión instalada",
+		"newer_firmware_available": "Nuevas revisiones disponibles",
+		"reinstall_latest": "Reinstalar",
+		"revision": "Revisión",
+		"show_dev": "Mostrar lanzamientos para desarrolladores",
+		"size": "Tamaño",
+		"status": "Estado del firmware",
+		"title": "Firmware",
+		"to_release": "A",
+		"unknown_firmware_status": "Estado de firmware desconocido",
+		"upgrade": "Mejorar",
+		"upgrade_command_submitted": "El comando de actualización se envió correctamente",
+		"upgrade_to_latest": "último",
+		"upgrade_to_version": "Actualizar a esta revisión",
+		"upgrading": "Actualizando ..."
+	},
 	"footer": {
 		"coreui_for_react": "CoreUI para React",
 		"powered_by": "energizado por",
@@ -126,43 +371,293 @@
 	},
 	"health": {
 		"sanity": "Cordura",
-		"title": "Salud del dispositivo"
+		"title": "Salud"
+	},
+	"inventory": {
+		"add_child": "Agregar lugar secundario",
+		"add_child_venue": "Agregar lugar infantil a {{entityName}}",
+		"add_tag": "Crear etiqueta",
+		"add_tag_to": "Agregar nuevo dispositivo a {{name}}",
+		"add_venue": "Agregar lugar",
+		"assign_ent_ven": "Asignar a entidad o lugar",
+		"assign_entity_instructions": "Puede encontrar la entidad a la que desea que se asigne esta etiqueta utilizando el menú a continuación, o puede pegar manualmente el UUID de la entidad en el campo de arriba.",
+		"assign_error": "Error al intentar asignar la etiqueta",
+		"assign_to_entity": "Asignar a entidad",
+		"bulk_delete_assigned": "¿Le gustaría eliminar de forma masiva los dispositivos asignados dentro de su archivo?",
+		"bulk_delete_assigned_warning": "Advertencia: esta acción no es reversible",
+		"bulk_delete_devices": "Dispositivos de eliminación masiva",
+		"bulk_delete_devices_not_found": "{{number}} dispositivos no encontrados",
+		"bulk_delete_explanation": "Para eliminar dispositivos de forma masiva, use un archivo CSV con una columna llamada SerialNumber",
+		"bulk_delete_test": "Validar archivo",
+		"close_entity_menu": "Cerrar el menú Editar entidad",
+		"delete_devices": "BORRAR DISPOSITIVOS",
+		"delete_errors": "{{number}} Eliminar errores del dispositivo",
+		"delete_tag": "Eliminar etiqueta",
+		"delete_venue": "Eliminar el lugar de forma permanente",
+		"deleted_devices": "{{number}} Dispositivos eliminados",
+		"deleting": "Eliminando ...",
+		"deletion_failure": "Error de borrado",
+		"devices_assigned": "{{number}} dispositivos existentes asignados y actualizados",
+		"devices_created": "{{number}} dispositivos creados",
+		"devices_deleted": "Dispositivos eliminados",
+		"devices_errors_while_creating": "{{number}} fallaron las creaciones del dispositivo",
+		"devices_errors_while_updating": "{{number}} fallaron las actualizaciones del dispositivo",
+		"devices_found_assigned": "{{number}} dispositivos encontrados y ya asignados a una entidad o lugar",
+		"devices_found_unassigned": "{{number}} dispositivos encontrados, pero no asignados",
+		"devices_imported": " Dispositivos importados",
+		"devices_not_found": "{{number}} dispositivos sin conflicto",
+		"devices_tested": "Dispositivos probados",
+		"duplicate_serial": "Número de serie ya utilizado en el archivo (duplicado)",
+		"error_create_venue": "Error al crear el lugar",
+		"error_delete_tag": "Error al eliminar la etiqueta de inventario",
+		"error_get_venue": "Error al recuperar lugares",
+		"error_pushing_config": "Error al intentar enviar la configuración al dispositivo: {{error}}",
+		"error_retrieving": "Se produjo un error al recuperar las etiquetas de inventario",
+		"error_unassign": "Error durante la operación de anulación de asignación",
+		"error_update_venue": "Error al actualizar el lugar",
+		"error_venue_delete": "Error al eliminar el lugar",
+		"error_within_file": "{{number}} dispositivos con información incorrecta en el archivo (se ignorarán)",
+		"file_error": "Parece haber un error en su archivo. Asegúrese de que el archivo esté en formato CSV y contenga las 5 columnas mencionadas anteriormente en la primera línea del archivo",
+		"final_delete_results": "Resultados de eliminación final",
+		"final_import_results": "Resultados finales de importación",
+		"import_assigned_devices": "¿Quieres reasignarlos con esta importación?",
+		"import_assigned_devices_explanation": "Algunos dispositivos entran en conflicto con los dispositivos ya asignados. Debe resolver esos problemas antes de importar.",
+		"import_devices": "Importar dispositivos",
+		"import_devices_explanation": "Para importar dispositivos de forma masiva, debe utilizar un archivo CSV con las siguientes columnas: Número de serie, Nombre, Descripción, Tipo de dispositivo, Texto de nota",
+		"import_devices_to": "Importar dispositivos a {{name}}",
+		"import_existing_devices": "¿Actualizarlos y asignarlos?",
+		"import_existing_devices_explanation": "Algunos dispositivos ya existen en el inventario y no están asignados.",
+		"importing": "Importador...",
+		"last_modification": "Última modificación",
+		"no_devices_to_delete": "No hay dispositivos para eliminar",
+		"no_devices_to_import": "¡No hay dispositivos válidos para crear o actualizar!",
+		"note_text": "Texto de la nota",
+		"passed_tests": "Se aprobaron todas las pruebas, ¡sus dispositivos están listos para importar!",
+		"serial_number_required": "Error: falta el número de serie",
+		"showing_top_10": "Aquí hay una vista previa de la información que hemos recuperado de su archivo:",
+		"sub_venues": "Subvenues",
+		"subscriber": "Abonado",
+		"successful_assign": "Etiqueta asignada correctamente",
+		"successful_tag_delete": "Etiqueta de inventario eliminada correctamente",
+		"successful_tag_update": "Etiqueta actualizada correctamente",
+		"successful_unassign": "La operación de anulación de asignación se realizó correctamente",
+		"successful_venue_create": "Lugar creado con éxito",
+		"successful_venue_delete": "Lugar eliminado correctamente",
+		"successful_venue_update": "Lugar actualizado con éxito",
+		"tag_created": "Etiqueta de inventario creada correctamente",
+		"tag_creation_error": "Error al intentar crear una etiqueta de inventario",
+		"tag_update_error": "Error al actualizar la etiqueta",
+		"tags_assigned_to": "Etiquetas de inventario asignadas a {{name}}",
+		"test_import": "Validar datos de importación",
+		"test_results": "Resultados de la prueba",
+		"title": "Inventario",
+		"type_invalid": "Error: tipo de dispositivo no válido",
+		"unassign": "Anular asignación",
+		"unassign_tag": "Anular asignación de etiqueta de entidad",
+		"unassigned_deleted_devices": "{{number}} Dispositivos eliminados y sin asignar",
+		"unassigned_tags": "Etiquetas sin asignar",
+		"validating_import_file": "Validando archivo y datos de importación ...",
+		"venue": "Lugar de encuentro"
+	},
+	"location": {
+		"add": "Añade una ubicación",
+		"building_name": "Nombre del edificio",
+		"city": "ciudad",
+		"country": "País",
+		"create": "Crear ubicación",
+		"delete": "¿Eliminar ubicación?",
+		"error_assign": "Error al intentar asignar la ubicación: {{error}}",
+		"error_creation": "Error al intentar crear ubicaciones: {{error}}",
+		"error_delete": "Error al eliminar la ubicación: {{error}}",
+		"error_fetching_single": "Error al intentar obtener la ubicación: {{error}}",
+		"geocode": "Geocode",
+		"no_associated": "Sin ubicación asociada",
+		"postal": "código postal",
+		"search": "Busque ubicaciones para completar automáticamente los campos a continuación",
+		"state": "Estado",
+		"street_address": "Dirección",
+		"successful_creation": "¡Ubicación creada con éxito!",
+		"successful_delete": "¡Ubicación eliminada con éxito!",
+		"successful_update": "¡Ubicación actualizada con éxito!",
+		"successfully_assigned": "¡Ubicación asignada correctamente!",
+		"title": "Ubicaciones",
+		"update_error": "Error al actualizar la ubicación: {{error}}"
 	},
 	"login": {
+		"account_verification": "Verificación de la cuenta",
+		"authentication_expired": "Autenticación caducada, vuelva a iniciar el proceso de inicio de sesión",
+		"change_password": "Cambia la contraseña",
+		"change_password_error": "Error al cambiar la contraseña. Asegúrese de que la nueva contraseña sea válida visitando la página 'Política de contraseñas'",
+		"change_password_instructions": "Ingrese y confirme su nueva contraseña",
+		"changing_password": "Cambio de contraseña ...",
+		"confirm_new_password": "confirmar nueva contraseña",
+		"different_passwords": "Debes ingresar la misma contraseña dos veces",
+		"email_code_validation": "Por favor, marque su casilla de correo electrónico e ingrese el código de verificación que le acabamos de enviar en la casilla a continuación.",
+		"forgot_password_error": "Error al intentar enviar el correo electrónico de Olvidé mi contraseña. Asegúrese de que este ID de usuario esté asociado a una cuenta.",
+		"forgot_password_explanation": "Ingrese su nombre de usuario para recibir un correo electrónico con las instrucciones para restablecer su contraseña",
+		"forgot_password_success": "Pronto debería recibir un correo electrónico con las instrucciones para restablecer su contraseña. Asegúrese de verificar su correo no deseado si no puede encontrar el correo electrónico",
+		"logging_in": "Iniciar sesión...",
 		"login": "Iniciar sesión",
-		"login_error": "Error de inicio de sesión, confirme que su nombre de usuario, contraseña y URL de puerta de enlace son válidos",
+		"login_error": "Error de inicio de sesión, asegúrese de que la información que proporciona sea válida",
+		"new_password": "Nueva contraseña",
 		"password": "Contraseña",
-		"please_enter_gateway": "Ingrese una URL de puerta de enlace",
+		"phone_validation_explanation": "Verifique su dispositivo móvil e ingrese el código de verificación que le acabamos de enviar en el cuadro a continuación",
+		"please_enter_gateway": "Ingrese una URL de uCentralSec",
 		"please_enter_password": "Por favor, introduzca su contraseña",
 		"please_enter_username": "Por favor, ingrese su nombre de usuario",
+		"previously_used": "La contraseña se usó anteriormente",
+		"send_forgot": "Enviar correo electrónico",
+		"sending_ellipsis": "Enviando...",
 		"sign_in_to_account": "Iniciar sesión en su cuenta",
-		"username": "Nombre de usuario"
+		"url": "URL de uCentralSec",
+		"username": "Nombre de usuario",
+		"verification_code": "Ingrese su verificación aquí",
+		"wrong_code": "El código de verificación que se ingresó no es válido."
 	},
 	"reboot": {
 		"directions": "¿Cuándo le gustaría reiniciar este dispositivo?",
-		"title": "Reiniciar dispositivo"
+		"now": "¿Le gustaría reiniciar este dispositivo ahora?",
+		"title": "Reiniciar"
 	},
 	"scan": {
 		"active": "Habilitar escaneo activo",
 		"channel": "Canal",
 		"directions": "Ejecute un escaneo wifi de este dispositivo, que debería tomar aproximadamente 25 segundos.",
-		"results": "Resultados de escaneo Wifi"
+		"re_scan": "Vuelva a escanear",
+		"result_directions": "Haga clic en el botón '$ t (scan.re_scan)' si desea realizar un escaneo con la misma configuración que el anterior.",
+		"results": "Resultados de escaneo Wi-Fi",
+		"scan": "Escanear",
+		"scanning": "Exploración... ",
+		"waiting_directions": "Espere el resultado del escaneo. Esto puede tardar hasta 25 segundos. Puede salir y ver los resultados de la tabla de comandos más adelante."
+	},
+	"settings": {
+		"title": "Ajustes"
 	},
 	"statistics": {
 		"data": "Datos (KB)",
+		"latest_statistics": "Últimas estadísticas",
+		"lifetime_stats": "Estadísticas de por vida",
+		"no_interfaces": "No hay estadísticas de vida útil de la interfaz disponibles",
+		"show_latest": "Últimas estadísticas",
 		"title": "estadística"
 	},
+	"status": {
+		"connection_status": "Estado",
+		"error": "Los datos de estado no están disponibles",
+		"last_contact": "Último contacto",
+		"load_averages": "Carga (1/5/15 m.)",
+		"localtime": "Hora local",
+		"memory": "Memoria usada",
+		"percentage_free": "{{percentage}}% de {{total}} gratis",
+		"percentage_used": "{{percentage}}% de {{total}} utilizado",
+		"title": "#{{serialNumber}} Estado",
+		"uptime": "Tiempo de actividad",
+		"used_total_memory": "{{used}} usado / {{total}} total"
+	},
+	"system": {
+		"error_fetching": "Error al obtener información del sistema",
+		"error_reloading": "Error al recargar: {{error}}",
+		"hostname": "Nombre de host",
+		"os": "sistema operativo",
+		"processors": "Procesadores",
+		"reload": "Recargar",
+		"reload_subsystems": "Recargar",
+		"subsystems": "Subsistemas",
+		"success_reload": "¡El comando de recarga se envió correctamente!"
+	},
+	"telemetry": {
+		"connection_failed": "No se pudo crear la conexión. Error: {{error}}",
+		"interval": "intervalo",
+		"last_update": "Última actualización",
+		"types": "Los tipos"
+	},
 	"trace": {
 		"choose_network": "Elija la red",
 		"directions": "Lanzar un rastreo remoto de este dispositivo por una duración específica o por una cantidad de paquetes",
+		"download_trace": "Descargar archivo de seguimiento",
 		"packets": "Paquetes",
-		"title": "Dispositivo de seguimiento"
+		"title": "Rastro",
+		"trace": "Rastro",
+		"trace_not_successful": "Seguimiento fallido: la puerta de enlace informó el siguiente error: {{error}}",
+		"wait_for_file": "¿Le gustaría esperar hasta que el archivo de seguimiento esté listo?",
+		"waiting_directions": "Espere el archivo de datos de seguimiento. Esto puede tomar algo de tiempo. Puede salir de la espera y recuperar el archivo de seguimiento de la tabla de comandos más tarde.",
+		"waiting_seconds": "Tiempo transcurrido: {{seconds}} segundos"
 	},
 	"upgrade": {
+		"command_submitted": "Comando enviado",
+		"device_disconnected": "Dispositivo desconectado",
+		"device_reconnected": "Dispositivo reconectado",
+		"device_upgrading_firmware": "Firmware de actualización del dispositivo",
 		"directions": "Elija una hora y una versión de firmware para este dispositivo",
 		"firmware_uri": "URI de firmware:",
 		"need_uri": "Necesitas un URI ...",
+		"new_version": "La nueva versión es",
+		"offline_device": "Esta opción está bloqueada porque este dispositivo no está conectado",
 		"time": "Hora de actualización:",
-		"title": "Actualización de firmware"
+		"title": "Actualización de firmware",
+		"upgrade": "Mejorar",
+		"wait_for_upgrade": "¿Le gustaría esperar a que finalice la actualización?",
+		"waiting_for_device": "Esperando que el dispositivo se vuelva a conectar"
+	},
+	"user": {
+		"add_phone_number": "Agregar el número de teléfono",
+		"avatar": "Tu avatar",
+		"avatar_file": "Tu avatar (máx. De 2 MB)",
+		"check_phone": "Por favor revise su teléfono para su código de validación",
+		"confirm_new_password": "confirmar nueva contraseña",
+		"create": "Crear usuario",
+		"create_failure": "Error al crear usuario. Asegúrese de que esta dirección de correo electrónico no esté vinculada a una cuenta.",
+		"create_success": "Usuario creado con éxito",
+		"creating": "Creando usuario ...",
+		"delete_avatar": "Eliminar avatar",
+		"delete_failure": "Error al intentar eliminar al usuario: {{error}}",
+		"delete_success": "¡Usuario eliminado correctamente!",
+		"delete_title": "Borrar usuario",
+		"delete_warning": "Advertencia: una vez que elimina un usuario, no puede revertir",
+		"deleting": "Eliminando ...",
+		"description": "Descripción",
+		"edit": "editar usuario",
+		"email_address": "Dirección de correo electrónico",
+		"enter_new_phone": "Ingrese su nuevo número de teléfono:",
+		"error_fetching_users": "Error al obtener usuarios: {{error}}",
+		"error_sending_code": "Error al intentar enviar el código de validación. Confirma que tu número de teléfono es válido.",
+		"force_password_change": "Forzar cambio de contraseña al iniciar sesión",
+		"id": "Id. De usuario",
+		"last_login": "Último acceso",
+		"login_id": "Ingresar identificación.",
+		"make_sure_same_password": "Asegúrese de que ambas contraseñas sean iguales y válidas",
+		"my_profile": "Mi perfil",
+		"name": "Nombre",
+		"new_code_sent": "¡Nuevo código enviado!",
+		"nickname": "Apodo",
+		"nickname_explanation": "Apodo (opcional)",
+		"not_validated": "No validado",
+		"note": "Nota",
+		"password": "Contraseña",
+		"phone_number": "Número de teléfono",
+		"provide_email": "Por favor ingrese su dirección de correo electrónico válida",
+		"provide_password": "Proporcione una contraseña válida",
+		"save_avatar": "Guardar avatar",
+		"send_code": "Enviar código",
+		"send_code_again": "Enviar Código De nuevo",
+		"show_hide_password": "Mostrar / Ocultar contraseña",
+		"successful_validation": "¡Número de teléfono validado! Haga clic en el botón guardar para vincularlo a su perfil",
+		"update_failure": "Error al intentar actualizar: {{error}}",
+		"update_failure_title": "Actualización fallida",
+		"update_success": "Usuario actualizado con éxito",
+		"update_success_title": "Éxito",
+		"user_role": "papel",
+		"users": "Usuarios",
+		"validate_phone": "validar",
+		"validated": "Validado",
+		"wrong_validation_code": "No ha introducido un código válido. Vuelve a intentarlo y asegúrate de haber ingresado el número de teléfono correcto."
+	},
+	"wifi_analysis": {
+		"association": "Asociación",
+		"associations": "Asociaciones",
+		"mode": "Modo",
+		"network_diagram": "Diagrama de Red",
+		"radios": "Radios",
+		"title": "Análisis de Wi-Fi"
 	}
 }

public/locales/fr/translation.json

@@ -1,5 +1,6 @@
 {
 	"actions": {
+		"actions": "actes",
 		"blink": "Cligner",
 		"configure": "Configurer",
 		"connect": "Relier",
@@ -7,28 +8,48 @@
 		"factory_reset": "Retour aux paramètres d'usine",
 		"firmware_upgrade": "Mise à jour du firmware",
 		"reboot": "Redémarrer",
-		"title": "Actions de l'appareil",
+		"telemetry": "Télémétrie",
+		"title": "Les commandes",
 		"trace": "Trace",
 		"wifi_scan": "Balayage Wi-Fi"
 	},
 	"blink": {
 		"blink": "Cligner",
 		"device_leds": "LED de l'appareil",
+		"execute_now": "Souhaitez-vous définir ce modèle maintenant ?",
 		"pattern": "Choisissez le modèle que vous souhaitez utiliser :",
+		"set_leds": "Définir les LED",
 		"when_blink_leds": "Quand souhaitez-vous faire clignoter les LED de l'appareil ?"
 	},
 	"commands": {
+		"command_success": "Commande soumise avec succès",
 		"error": "Erreur lors de la soumission de la commande !",
-		"success": "Commande soumise avec succès",
-		"title": "Commandes de l'appareil"
+		"error_delete_log": "Erreur lors de la tentative de suppression : {{error}}",
+		"event_queue": "File d'attente d'événements",
+		"success": "Commande soumise avec succès, vous pouvez consulter le journal des commandes pour le résultat",
+		"title": "Historique des commandes",
+		"unable_queue": "Impossible de terminer la demande de file d'attente d'événements: {{error}}"
 	},
 	"common": {
+		"access_policy": "Politique d'accès",
+		"add": "Ajouter",
+		"add_items": "Ajouter des articles",
+		"add_note": "Ajouter une note",
+		"add_note_explanation": "Écrivez votre nouvelle note ci-dessous et cliquez sur le bouton '+' où vous avez terminé",
+		"adding_ellipsis": "Ajouter...",
 		"are_you_sure": "Êtes-vous sûr?",
+		"back_to_login": "Retour connexion",
+		"back_to_start": "Retour au début",
+		"by": "Par",
 		"cancel": "annuler",
 		"certificate": "Certificat",
+		"certificates": "Certificats",
 		"clear": "Clair",
 		"close": "Fermer",
+		"code": "Code",
 		"command": "Commander",
+		"commands": "Les commandes",
+		"commands_executed": "commandes exécutées",
 		"compatible": "Compatible",
 		"completed": "Terminé",
 		"config_id": "Config. Identifiant",
@@ -36,69 +57,225 @@
 		"connected": "Connecté",
 		"copied": "Copié!",
 		"copy_to_clipboard": "Copier dans le presse-papier",
+		"create": "Créer",
+		"created": "Créé",
+		"created_by": "Créé par",
+		"current": "Actuel",
+		"custom_date": "Date personnalisée",
+		"dashboard": "Tableau de bord",
 		"date": "Rendez-vous amoureux",
+		"day": "journée",
+		"days": "journées",
 		"delete": "Effacer",
+		"delete_device": "Supprimer le périphérique",
 		"details": "Détails",
+		"device": "N° d'appareil{{serialNumber}}",
+		"device_dashboard": "Tableau de bord de l'appareil",
+		"device_delete": "Supprimer l'appareil n°{{serialNumber}}",
+		"device_deleted": "Appareil supprimé avec succès",
+		"device_health": "Santé de l'appareil",
 		"device_list": "Liste des appareils",
-		"device_page": "Page de l'appareil",
+		"device_page": "Vue",
+		"device_status": "Statut du périphérique",
 		"devices": "Dispositifs",
+		"devices_using_latest": "Appareils utilisant le dernier micrologiciel",
+		"devices_using_unknown": "Périphériques utilisant un micrologiciel inconnu",
 		"dismiss": "Rejeter",
 		"do_now": "Faire maintenant!",
 		"download": "Télécharger",
 		"duration": "Durée",
-		"error": "erreur",
+		"edit": "modifier",
+		"edit_user": "Modifier",
+		"email_address": "Adresse électronique",
+		"endpoint": "Point final",
+		"endpoints": "Points de terminaison",
+		"error": "Erreur",
+		"error_adding_note": "Erreur lors de l'ajout de la note",
+		"error_code": "Code d'erreur",
+		"execute_now": "Souhaitez-vous exécuter cette commande maintenant ?",
 		"executed": "réalisé",
+		"exit": "Sortie",
 		"firmware": "Micrologiciel",
+		"firmware_dashboard": "Tableau de bord du micrologiciel",
+		"firmware_installed": "Micrologiciel installé",
+		"forgot_password": "Mot de passe oublié?",
+		"forgot_password_title": "Mot de passe oublié",
 		"from": "De",
+		"general_error": "Erreur API, veuillez consulter votre administrateur",
+		"hide": "Cacher",
+		"hour": "heure",
+		"hours": "heures",
 		"id": "Id",
+		"invalid_file": "Le fichier choisi n'était pas valide, veuillez lire les instructions et ajuster votre fichier en conséquence",
+		"invalid_pem": "Votre fichier .pem n'est pas valide. Il doit commencer par '-----BEGIN CERTIFICATE-----' OU '-----BEGIN PRIVATE KEY-----' et il doit se terminer par '-----END CERTIFICATE--- --' OU '-----FIN CLÉ PRIVÉE-----'",
 		"ip_address": "Adresse IP",
+		"ips": "IPS",
+		"item": "article",
+		"items": "Articles",
+		"items_per_page": "Objets par page:",
+		"last_dashboard_refresh": "Dernière actualisation du tableau de bord",
 		"later_tonight": "Plus tard ce soir",
+		"latest": "Dernier",
+		"list": "liste",
 		"loading_ellipsis": "Chargement...",
 		"loading_more_ellipsis": "Chargement plus ...",
 		"logout": "Connectez - Out",
 		"mac": "ADRESSE MAC",
 		"manufacturer": "fabricant",
+		"memory_used": "Mémoire utilisée",
+		"minute": "minute",
+		"minutes": "minutes",
+		"modified": "Modifié",
 		"na": "N / A",
 		"need_date": "Vous avez besoin d'un rendez-vous...",
+		"no": "Non",
+		"no_addresses_found": "Aucune adresse trouvée",
+		"no_devices_found": "Aucun périphérique trouvé",
+		"no_items": "Pas d'objet",
+		"none": "Aucun",
 		"not_connected": "Pas connecté",
+		"of_connected": "% d'appareils",
 		"off": "De",
 		"on": "sur",
+		"optional": "Optionnel",
+		"overall_health": "Santé globale",
+		"password_policy": "Politique de mot de passe",
+		"preview": "Aperçu",
+		"program": "Programme",
 		"recorded": "Enregistré",
 		"refresh": "Rafraîchir",
 		"refresh_device": "Actualiser l'appareil",
+		"required": "Champs obligatoires",
 		"result": "Résultat",
+		"save": "Sauvegarder",
+		"saved": "Enregistré!",
+		"saving": "Économie...",
 		"schedule": "Programme",
+		"search": "Rechercher des appareils",
+		"second": "seconde",
+		"seconds": "secondes",
+		"seconds_elapsed": "Secondes écoulées",
+		"select": "sélectionner",
 		"serial_number": "Numéro de série",
+		"show_all": "Montre tout",
+		"socket_connection_closed": "Connexion fermée !",
 		"start": "Début",
+		"stop_editing": "Arrêter la modification",
 		"submit": "Soumettre",
 		"submitted": "Soumis",
 		"success": "Succès",
+		"system": "Système",
+		"table": "Table",
+		"timestamp": "Temps",
 		"to": "à",
+		"type": "Type",
+		"type_for_options": "Tapez la valeur que vous devez créer...",
+		"type_for_options_format": "Saisissez une valeur au format valide ({{format}})...",
+		"unable_to_connect": "Impossible de se connecter à l'appareil",
+		"unable_to_delete": "Impossible de supprimer",
 		"unknown": "Inconnu",
+		"up_to_date": "Appareils à jour",
+		"uptimes": "Disponibilités",
+		"use_file": "Utiliser le fichier",
 		"uuid": "UUID",
+		"vendors": "Vendeurs",
 		"view_more": "Afficher plus",
 		"yes": "Oui"
 	},
 	"configuration": {
+		"add_configuration": "Ajouter une configuration",
+		"add_new_block": "Ajouter un nouveau bloc de configuration",
+		"add_or_link": "Lier ou ajouter",
+		"add_radio": "Ajouter une radio",
+		"ca_cert_explanation": "Veuillez utiliser un fichier .pem qui commence par \"-----BEGIN CERTIFICATE-----\" et se termine par \"-----END CERTIFICATE-----\". Le résultat sera affiché dans le champ ci-dessous. Vous pouvez également copier et coller le certificat que vous souhaitez utiliser directement.",
+		"cannot_delete": "Cette configuration ne peut pas être supprimée car elle est utilisée par au moins une entité, un lieu ou un appareil",
+		"choose_radio_band": "Quelle bande de radio voudriez-vous créer ?",
+		"choose_section": "Quelle section souhaitez-vous que ce bloc contienne?",
+		"configuration_browser": "Navigateur de configuration",
+		"configurations": "Les configurations",
+		"create": "Créer une configuration",
+		"create_config": "Créer une nouvelle configuration",
+		"create_new_configuration": "Créer un nouvel élément de configuration",
 		"created": "Créé",
-		"details": "Détails de l'appareil",
+		"creation_success": "Configuration créée avec succès !",
+		"currently_associated": "Configuration associée actuelle : {{config}}",
+		"currently_selected_config": "Configuration actuellement sélectionnée : {{config}}",
+		"delete_config": "Supprimer la configuration",
+		"details": "Détails",
 		"device_password": "Mot de passe",
-		"last_configuration_change": "Dernière modification de configuration",
+		"device_type": "Type d'appareil",
+		"device_types": "Types d'appareils",
+		"edit_configuration": "Modifier la configuration",
+		"error_delete": "Erreur lors de la tentative de suppression : {{error}}",
+		"error_fetching_config": "Erreur lors de la récupération de la configuration",
+		"error_trying_delete": "Erreur lors de la tentative de suppression : {{error}}",
+		"error_update": "Erreur: {{error}}",
+		"explanation": "Explication",
+		"key_pem_explanation": "Veuillez sélectionner le fichier .pem",
+		"last_configuration_change": "Changement de configuration",
 		"last_configuration_download": "Téléchargement de la dernière configuration",
 		"location": "Emplacement",
+		"need_device_type": "Chaque configuration doit prendre en charge au moins un type d'appareil",
+		"no_associated_config": "Aucune configuration associée",
+		"no_associated_configuration": "Aucune configuration associée",
+		"note": "Remarque",
 		"notes": "Remarques",
 		"owner": "Propriétaire",
-		"title": "Configuration de l'appareil",
+		"select_configuration": "Sélectionnez cette configuration",
+		"success_block_delete": "Bloc de configuration supprimé avec succès",
+		"success_update": "Configuration mise à jour avec succès !",
+		"successful_delete": "Configuration supprimée !",
+		"support_all": "Soutenir tous",
+		"supported_device_types": "Types d'appareils pris en charge",
+		"title": "Configuration",
 		"type": "Type d'appareil",
+		"used_by": "Utilisé par",
+		"used_by_details": "{{entities}} Entités, {{venues}} Lieux et {{devices}} Appareils",
+		"uuid": "Identifiant de configuration",
+		"view_config": "Afficher la configuration",
+		"view_in_use": "Afficher en cours d'utilisation",
 		"view_json": "Afficher le JSON brut"
 	},
 	"configure": {
 		"choose_file": "Vous devez choisir un fichier .json valide :",
 		"enter_new": "Entrez la nouvelle configuration de l'appareil JSON :",
 		"placeholder": "Configurer JSON",
-		"title": "Configurer l'appareil",
+		"title": "Configurer",
 		"valid_json": "Vous devez entrer un JSON valide"
 	},
+	"connect": {
+		"error_trying_to_connect": "Erreur lors de la tentative de connexion à l'appareil : {{error}}"
+	},
+	"contact": {
+		"access_pin": "NIP d'accès",
+		"add_contact": "Ajouter le contact",
+		"create_contact": "Créer un contact",
+		"delete": "Effacer le contact?",
+		"error_assign": "Erreur lors de la tentative d'attribution du contact : {{error}}",
+		"error_creation": "Erreur lors de la tentative de création du contact : {{error}}",
+		"error_delete": "Erreur lors de la tentative de suppression du contact : {{error}}",
+		"error_fetching_list": "Erreur lors de la récupération des contacts",
+		"error_fetching_single": "Erreur lors de la récupération du contact : {{error}}",
+		"error_unassign": "Erreur lors de la tentative de désattribution du contact : {{error}}",
+		"first_name": "Prénom",
+		"identifier": "Identifiant",
+		"initials": "Initiales",
+		"last_name": "Nom de famille",
+		"no_associated_contact": "Aucun contact associé",
+		"primary_email": "Email primaire",
+		"salutation": "salutation",
+		"secondary_email": "Email secondaire",
+		"successful_assign": "Contact attribué avec succès !",
+		"successful_creation": "Contact créé!",
+		"successful_delete": "Contact supprimé avec succès !",
+		"successful_unassign": "Contact non attribué avec succès",
+		"successful_update": "Contact mis à jour avec succès",
+		"title": "Contacts",
+		"type": "Type",
+		"update_error": "Erreur lors de la mise à jour du contact : {{error}}",
+		"user_title": "Titre",
+		"visual": "Nom de la correspondance"
+	},
 	"delete_command": {
 		"explanation": "Êtes-vous sûr de vouloir supprimer cette commande ? Cette action n'est pas réversible.",
 		"title": "Supprimer la commande"
@@ -109,16 +286,84 @@
 		"explanation": "Cela supprimera tous les {{object}} avant la date que vous choisissez. Attention, cette action n'est pas réversible.",
 		"healthchecks_title": "Supprimer les vérifications d'état"
 	},
+	"device": {
+		"error_fetching_device": "Erreur lors de la récupération des informations sur l'appareil : {{error}}",
+		"error_fetching_devices": "Erreur lors de la récupération des appareils : {{error}}"
+	},
 	"device_logs": {
 		"log": "Bûche",
 		"severity": "Gravité",
-		"title": "Journaux de l'appareil"
+		"title": "Journaux"
+	},
+	"entity": {
+		"add_child": "Ajouter une entité enfant à {{entityName}}",
+		"add_failure": "Erreur, le serveur a renvoyé : {{error}}",
+		"add_ips": "Gérer les IP",
+		"add_root": "Ajouter une entité racine",
+		"add_success": "Entité créée avec succès !",
+		"assigned_inventory": "Inventaire assigné",
+		"cannot_delete": "Vous ne pouvez pas supprimer des entités qui ont des enfants. Supprimez les enfants de cette entité pour pouvoir la supprimer.",
+		"currently_selected_entity": "Entité actuellement sélectionnée : {{config}}",
+		"currently_selected_venue": "Lieu actuellement sélectionné : {{config}}",
+		"delete_success": "Entité supprimée avec succès",
+		"delete_warning": "Attention : cette opération ne peut pas être annulée",
+		"edit_failure": "Échec de la mise à jour : {{error}}",
+		"enter_here": "Entrez les IP que vous souhaitez ajouter ici",
+		"entities": "Entités",
+		"entity": "Entité",
+		"error_fetch_entity": "Erreur lors de la récupération des informations sur l'entité",
+		"error_fetching": "Erreur lors de la récupération des entités",
+		"error_saving": "Erreur lors de l'enregistrement de l'entité",
+		"higher_priority": "Faire une priorité plus élevée",
+		"ip_detection": "Détection IP",
+		"ip_formats": "Vous pouvez ajouter des adresses IPv4 ou IPv6 aux formats suivants :",
+		"lower_priority": "Faire une priorité inférieure",
+		"need_select_entity": "Vous devez sélectionner une entité dans le tableau ci-dessous",
+		"no_ips": "Aucune adresse IP sélectionnée",
+		"not_assigned": "Non attribué",
+		"only_unassigned": "Uniquement non attribué",
+		"select_entity": "Sélectionnez cette entité",
+		"selected_entity": "Entité sélectionnée",
+		"update_failure_error": "Erreur lors de la tentative de mise à jour de l'entité : {{error}}",
+		"valid_serial": "Doit être un numéro de série valide (12 caractères HEX)",
+		"venues": "Les lieux"
 	},
 	"factory_reset": {
 		"redirector": "Conserver le redirecteur :",
-		"title": "Dispositif de réinitialisation d'usine",
+		"reset": "Réinitialiser",
+		"resetting": "Réinitialisation…",
+		"title": "Retour aux paramètres d'usine",
 		"warning": "Avertissement : Une fois que vous avez soumis, cela ne peut pas être annulé"
 	},
+	"firmware": {
+		"average_age": "Âge moyen du micrologiciel",
+		"choose_custom": "Choisir",
+		"details_title": "Image #{{image}} Détails",
+		"device_type": "Type d'appareil",
+		"device_types": "Types d'appareils",
+		"downloads": "Téléchargements",
+		"error_fetching_latest": "Erreur lors de la récupération du dernier firmware",
+		"from_release": "De",
+		"history_title": "Historique",
+		"image": "Image",
+		"image_date": "Date de l'image",
+		"installed_firmware": "Micrologiciel installé",
+		"latest_version_installed": "Dernière version installée",
+		"newer_firmware_available": "Révisions plus récentes disponibles",
+		"reinstall_latest": "Réinstaller",
+		"revision": "Révision",
+		"show_dev": "Afficher les versions des développeurs",
+		"size": "Taille",
+		"status": "État du micrologiciel",
+		"title": "Micrologiciel",
+		"to_release": "à",
+		"unknown_firmware_status": "État du micrologiciel inconnu",
+		"upgrade": "Améliorer",
+		"upgrade_command_submitted": "Commande de mise à niveau soumise avec succès",
+		"upgrade_to_latest": "Dernier",
+		"upgrade_to_version": "Mettre à niveau vers cette révision",
+		"upgrading": "Mise à niveau..."
+	},
 	"footer": {
 		"coreui_for_react": "CoreUI pour React",
 		"powered_by": "Alimenté par",
@@ -126,43 +371,293 @@
 	},
 	"health": {
 		"sanity": "Santé mentale",
-		"title": "Santé de l'appareil"
+		"title": "Santé"
+	},
+	"inventory": {
+		"add_child": "Ajouter un lieu enfant",
+		"add_child_venue": "Ajouter un lieu enfant à {{entityName}}",
+		"add_tag": "Créer un tag",
+		"add_tag_to": "Ajouter un nouvel appareil à {{name}}",
+		"add_venue": "Ajouter un lieu",
+		"assign_ent_ven": "Attribuer à une entité ou à un lieu",
+		"assign_entity_instructions": "Vous pouvez soit trouver l'entité à laquelle vous souhaitez que cette balise soit attribuée en utilisant le menu ci-dessous, soit coller manuellement l'UUID de l'entité dans le champ ci-dessus.",
+		"assign_error": "Erreur lors de la tentative d'attribution de balise",
+		"assign_to_entity": "Affecter à l'entité",
+		"bulk_delete_assigned": "Souhaitez-vous supprimer en bloc les appareils attribués dans votre fichier ?",
+		"bulk_delete_assigned_warning": "Attention : cette action n'est pas réversible",
+		"bulk_delete_devices": "Supprimer en bloc des appareils",
+		"bulk_delete_devices_not_found": "{{number}} appareils introuvables",
+		"bulk_delete_explanation": "Pour supprimer en bloc des appareils, utilisez un fichier CSV avec une colonne appelée SerialNumber",
+		"bulk_delete_test": "Valider le fichier",
+		"close_entity_menu": "Fermer le menu Modifier l'entité",
+		"delete_devices": "Supprimer des appareils",
+		"delete_errors": "{{number}} Supprimer les erreurs de périphérique",
+		"delete_tag": "Supprimer la balise",
+		"delete_venue": "Supprimer définitivement le lieu",
+		"deleted_devices": "{{number}} appareils supprimés",
+		"deleting": "Suppression ...",
+		"deletion_failure": "Erreur de suppression",
+		"devices_assigned": "{{number}} appareils existants attribués et mis à jour",
+		"devices_created": "{{number}} appareils créés",
+		"devices_deleted": "Appareils supprimés",
+		"devices_errors_while_creating": "{{number}} créations d'appareils ont échoué",
+		"devices_errors_while_updating": "{{number}} mises à jour de l'appareil ont échoué",
+		"devices_found_assigned": "{{number}} appareils trouvés et déjà attribués à une entité ou à un lieu",
+		"devices_found_unassigned": "{{number}} appareils trouvés, mais non attribués",
+		"devices_imported": " Périphériques importés",
+		"devices_not_found": "{{number}} appareils sans conflit",
+		"devices_tested": "Appareils testés",
+		"duplicate_serial": "Numéro de série déjà utilisé dans le fichier (duplicata)",
+		"error_create_venue": "Erreur lors de la création du lieu",
+		"error_delete_tag": "Erreur lors de la suppression de la balise d'inventaire",
+		"error_get_venue": "Erreur lors de la récupération des lieux",
+		"error_pushing_config": "Erreur lors de la tentative d'envoi de la configuration sur l'appareil : {{error}}",
+		"error_retrieving": "Une erreur s'est produite lors de la récupération des balises d'inventaire",
+		"error_unassign": "Erreur lors de l'opération de désaffectation",
+		"error_update_venue": "Erreur lors de la mise à jour du lieu",
+		"error_venue_delete": "Erreur lors de la suppression du lieu",
+		"error_within_file": "{{number}} appareils avec des informations erronées dans le fichier (sera ignoré)",
+		"file_error": "Il semble y avoir une erreur dans votre fichier. Veuillez vous assurer que le fichier est au format CSV et contient les 5 colonnes mentionnées ci-dessus dans la première ligne du fichier",
+		"final_delete_results": "Résultats de la suppression finale",
+		"final_import_results": "Résultats d'importation finaux",
+		"import_assigned_devices": "Voulez-vous les réaffecter avec cette importation ?",
+		"import_assigned_devices_explanation": "Certains appareils sont en conflit avec des appareils déjà attribués. Vous devez résoudre ces problèmes avant d'importer.",
+		"import_devices": "Importer des appareils",
+		"import_devices_explanation": "Pour importer des appareils en bloc, vous devez utiliser un fichier CSV avec les colonnes suivantes : SerialNumber,Name,Description,DeviceType,NoteText",
+		"import_devices_to": "Importer des appareils dans {{name}}",
+		"import_existing_devices": "Mettre à jour et les attribuer ?",
+		"import_existing_devices_explanation": "Certains appareils existent déjà dans l'inventaire et ne sont pas affectés.",
+		"importing": "Importation ...",
+		"last_modification": "dernière modification",
+		"no_devices_to_delete": "Aucun appareil à supprimer",
+		"no_devices_to_import": "Aucun appareil valide à créer ou à mettre à jour !",
+		"note_text": "Texte de note",
+		"passed_tests": "Tous les tests ont été passés, vos appareils sont prêts à être importés !",
+		"serial_number_required": "Erreur : Numéro de série manquant",
+		"showing_top_10": "Voici un aperçu des informations que nous avons récupérées dans votre dossier :",
+		"sub_venues": "Sous-sites",
+		"subscriber": "Abonné",
+		"successful_assign": "Tag attribué avec succès",
+		"successful_tag_delete": "Balise d'inventaire supprimée avec succès",
+		"successful_tag_update": "Balise mise à jour avec succès",
+		"successful_unassign": "L'opération de désaffectation a réussi",
+		"successful_venue_create": "Lieu créé avec succès",
+		"successful_venue_delete": "Lieu supprimé avec succès",
+		"successful_venue_update": "Lieu mis à jour avec succès",
+		"tag_created": "Tag d'inventaire créé avec succès",
+		"tag_creation_error": "Erreur lors de la tentative de création d'une balise d'inventaire",
+		"tag_update_error": "Erreur lors de la mise à jour de la balise",
+		"tags_assigned_to": "Balises d'inventaire attribuées à {{name}}",
+		"test_import": "Valider les données d'importation",
+		"test_results": "Résultats de test",
+		"title": "Inventaire",
+		"type_invalid": "Erreur : Type de périphérique non valide",
+		"unassign": "Annuler l'attribution",
+		"unassign_tag": "Désaffecter la balise de l'entité",
+		"unassigned_deleted_devices": "{{number}} appareils supprimés et non attribués",
+		"unassigned_tags": "Balises non attribuées",
+		"validating_import_file": "Validation du fichier d'importation et des données...",
+		"venue": "Lieu"
+	},
+	"location": {
+		"add": "Ajouter un emplacement",
+		"building_name": "Nom du bâtiment",
+		"city": "Ville",
+		"country": "Pays",
+		"create": "Créer un lieu",
+		"delete": "Supprimer le lieu?",
+		"error_assign": "Erreur lors de la tentative d'attribution de l'emplacement : {{error}}",
+		"error_creation": "Erreur lors de la tentative de création d'établissements : {{error}}",
+		"error_delete": "Erreur lors de la suppression de l'emplacement : {{error}}",
+		"error_fetching_single": "Erreur lors de la tentative de récupération de l'emplacement : {{error}}",
+		"geocode": "Géocode",
+		"no_associated": "Aucun emplacement associé",
+		"postal": "Zip / code postal",
+		"search": "Recherchez des emplacements pour remplir automatiquement les champs ci-dessous",
+		"state": "Etat",
+		"street_address": "Adresse de rue",
+		"successful_creation": "Emplacement créé avec succès !",
+		"successful_delete": "Emplacement supprimé avec succès !",
+		"successful_update": "Emplacement mis à jour avec succès !",
+		"successfully_assigned": "Emplacement attribué avec succès !",
+		"title": "Emplacements",
+		"update_error": "Erreur lors de la mise à jour de l'emplacement : {{error}}"
 	},
 	"login": {
+		"account_verification": "Vérification de compte",
+		"authentication_expired": "Authentification expirée, veuillez recommencer le processus de connexion",
+		"change_password": "Changer le mot de passe",
+		"change_password_error": "Erreur lors du changement de mot de passe. Assurez-vous que le nouveau mot de passe est valide en visitant la page « Politique de mot de passe »",
+		"change_password_instructions": "Saisissez et confirmez votre nouveau mot de passe",
+		"changing_password": "Modification du mot de passe...",
+		"confirm_new_password": "Confirmer le nouveau mot de passe",
+		"different_passwords": "Vous devez saisir deux fois le même mot de passe",
+		"email_code_validation": "Veuillez vérifier votre boîte e-mail et entrer le code de vérification que nous venons de vous envoyer dans la case ci-dessous",
+		"forgot_password_error": "Erreur lors de la tentative d'envoi de l'e-mail Mot de passe oublié. Veuillez vous assurer que cet identifiant est associé à un compte.",
+		"forgot_password_explanation": "Entrez votre nom d'utilisateur pour recevoir un e-mail contenant les instructions pour réinitialiser votre mot de passe",
+		"forgot_password_success": "Vous devriez bientôt recevoir un e-mail contenant les instructions pour réinitialiser votre mot de passe. S'il vous plaît assurez-vous de vérifier vos spams si vous ne trouvez pas l'e-mail",
+		"logging_in": "Se connecter...",
 		"login": "S'identifier",
-		"login_error": "Erreur de connexion, confirmez que votre nom d'utilisateur, mot de passe et URL de passerelle sont valides",
+		"login_error": "Erreur de connexion, assurez-vous que les informations que vous fournissez sont valides",
+		"new_password": "Nouveau mot de passe",
 		"password": "Mot de passe",
-		"please_enter_gateway": "Veuillez saisir une URL de passerelle",
+		"phone_validation_explanation": "Veuillez vérifier votre appareil mobile et entrer le code de vérification que nous venons de vous envoyer dans la case ci-dessous",
+		"please_enter_gateway": "Veuillez saisir une URL uCentralSec",
 		"please_enter_password": "s'il vous plait entrez votre mot de passe",
 		"please_enter_username": "s'il vous plaît entrez votre nom d'utilisateur",
+		"previously_used": "Le mot de passe a déjà été utilisé",
+		"send_forgot": "Envoyer un email",
+		"sending_ellipsis": "Envoi...",
 		"sign_in_to_account": "Connectez-vous à votre compte",
-		"username": "Nom d'utilisateur"
+		"url": "URL uCentralSec",
+		"username": "Nom d'utilisateur",
+		"verification_code": "Entrez votre vérification ici",
+		"wrong_code": "Le code de vérification saisi n'est pas valide."
 	},
 	"reboot": {
 		"directions": "Quand souhaitez-vous redémarrer cet appareil ?",
-		"title": "Redémarrez l'appareil"
+		"now": "Souhaitez-vous redémarrer cet appareil maintenant ?",
+		"title": "Redémarrer"
 	},
 	"scan": {
 		"active": "Activer l'analyse active",
 		"channel": "Canal",
 		"directions": "Lancez une analyse wifi de cet appareil, ce qui devrait prendre environ 25 secondes.",
-		"results": "Résultats de l'analyse Wi-Fi"
+		"re_scan": "Nouvelle analyse",
+		"result_directions": "Veuillez cliquer sur le bouton '$t(scan.re_scan)' si vous souhaitez effectuer un scan avec la même configuration que le précédent.",
+		"results": "Résultats de l'analyse Wi-Fi",
+		"scan": "Balayage",
+		"scanning": "Balayage... ",
+		"waiting_directions": "Veuillez attendre le résultat de l'analyse. Cela peut prendre jusqu'à 25 secondes. Vous pouvez quitter et consulter les résultats du tableau des commandes plus tard."
+	},
+	"settings": {
+		"title": "Réglages"
 	},
 	"statistics": {
 		"data": "Données (Ko)",
+		"latest_statistics": "Dernières statistiques",
+		"lifetime_stats": "Statistiques à vie",
+		"no_interfaces": "Aucune statistique de durée de vie de l'interface disponible",
+		"show_latest": "Dernières statistiques",
 		"title": "statistiques"
 	},
+	"status": {
+		"connection_status": "Statut",
+		"error": "Les données d'état ne sont pas disponibles",
+		"last_contact": "Dernier contact",
+		"load_averages": "Charge (1/5/15 m.)",
+		"localtime": "heure locale",
+		"memory": "Mémoire utilisée",
+		"percentage_free": "{{percentage}}% de {{total}} gratuit",
+		"percentage_used": "{{percentage}}% de {{total}} utilisé",
+		"title": "#{{serialNumber}} état",
+		"uptime": "La disponibilité",
+		"used_total_memory": "{{used}} utilisé / {{total}} total"
+	},
+	"system": {
+		"error_fetching": "Erreur lors de la récupération des informations système",
+		"error_reloading": "Erreur lors du rechargement : {{error}}",
+		"hostname": "nom d'hôte",
+		"os": "le système d'exploitation",
+		"processors": "Processeurs",
+		"reload": "Recharger",
+		"reload_subsystems": "Recharger",
+		"subsystems": "Sous-systèmes",
+		"success_reload": "Recharger la commande soumise avec succès !"
+	},
+	"telemetry": {
+		"connection_failed": "Échec de la création de la connexion. Erreur : {{error}}",
+		"interval": "Intervalle",
+		"last_update": "Dernière mise à jour",
+		"types": "Les types"
+	},
 	"trace": {
 		"choose_network": "Choisir le réseau",
 		"directions": "Lancer une trace à distance de cet appareil pour une durée spécifique ou un nombre de paquets",
+		"download_trace": "Télécharger le fichier de trace",
 		"packets": "Paquets",
-		"title": "Dispositif de traçage"
+		"title": "Trace",
+		"trace": "Trace",
+		"trace_not_successful": "Trace non réussie : la passerelle a signalé l'erreur suivante : {{error}}",
+		"wait_for_file": "Souhaitez-vous attendre que le fichier de trace soit prêt ?",
+		"waiting_directions": "Veuillez attendre le fichier de données de trace. Cela peut prendre un certain temps. Vous pouvez quitter l'attente et récupérer le fichier de trace de la table des commandes plus tard.",
+		"waiting_seconds": "Temps écoulé : {{seconds}} secondes"
 	},
 	"upgrade": {
+		"command_submitted": "Commande soumise",
+		"device_disconnected": "Appareil déconnecté",
+		"device_reconnected": "Appareil reconnecté",
+		"device_upgrading_firmware": "Mise à niveau du micrologiciel de l'appareil",
 		"directions": "Choisissez une heure et une version de firmware pour cet appareil",
 		"firmware_uri": "URI du micrologiciel :",
 		"need_uri": "Vous avez besoin d'un URI...",
+		"new_version": "La nouvelle version est",
+		"offline_device": "Cette option est bloquée car cet appareil n'est pas connecté",
 		"time": "Heure de la mise à niveau :",
-		"title": "Mise à jour du firmware"
+		"title": "Mise à jour du firmware",
+		"upgrade": "Améliorer",
+		"wait_for_upgrade": "Souhaitez-vous attendre la fin de la mise à niveau ?",
+		"waiting_for_device": "En attente de la reconnexion de l'appareil"
+	},
+	"user": {
+		"add_phone_number": "Ajouter un numéro de téléphone",
+		"avatar": "Votre avatar",
+		"avatar_file": "Votre Avatar (max. de 2 Mo)",
+		"check_phone": "Veuillez vérifier votre téléphone pour votre code de validation",
+		"confirm_new_password": "Confirmer le nouveau mot de passe",
+		"create": "Créer un utilisateur",
+		"create_failure": "Erreur lors de la création de l'utilisateur. Veuillez vous assurer que cette adresse e-mail n'est pas déjà liée à un compte.",
+		"create_success": "L'utilisateur a été créé avec succès",
+		"creating": "Création de l'utilisateur...",
+		"delete_avatar": "Supprimer l'avatar",
+		"delete_failure": "Erreur lors de la tentative de suppression de l'utilisateur: {{error}}",
+		"delete_success": "Utilisateur supprimé avec succès !",
+		"delete_title": "Supprimer l'utilisateur",
+		"delete_warning": "Avertissement : Une fois que vous avez supprimé un utilisateur, vous ne pouvez plus revenir en arrière",
+		"deleting": "Suppression ...",
+		"description": "La description",
+		"edit": "Modifier l'utilisateur",
+		"email_address": "Adresse électronique",
+		"enter_new_phone": "Saisissez votre nouveau numéro de téléphone :",
+		"error_fetching_users": "Erreur lors de la récupération des utilisateurs : {{error}}",
+		"error_sending_code": "Erreur lors de la tentative d'envoi du code de validation. Veuillez confirmer que votre numéro de téléphone est valide.",
+		"force_password_change": "Forcer le changement de mot de passe lors de la connexion",
+		"id": "Identifiant d'utilisateur.",
+		"last_login": "Dernière connexion",
+		"login_id": "Identifiant de connexion.",
+		"make_sure_same_password": "Assurez-vous que les deux mots de passe sont identiques et valides",
+		"my_profile": "Mon profil",
+		"name": "Prénom",
+		"new_code_sent": "Nouveau code envoyé !",
+		"nickname": "Surnom",
+		"nickname_explanation": "Surnom (optionnel)",
+		"not_validated": "Pas valide",
+		"note": "Remarque",
+		"password": "Mot de passe",
+		"phone_number": "Numéro de téléphone",
+		"provide_email": "Veuillez fournir une adresse email valide",
+		"provide_password": "Veuillez fournir un mot de passe valide",
+		"save_avatar": "Enregistrer l'avatar",
+		"send_code": "Envoyer le code",
+		"send_code_again": "Envoyer code à nouveau",
+		"show_hide_password": "Afficher/Masquer le mot de passe",
+		"successful_validation": "Numéro de téléphone validé ! Cliquez sur le bouton Enregistrer pour le lier à votre profil",
+		"update_failure": "Erreur lors de la tentative de mise à jour : {{error}}",
+		"update_failure_title": "mise à jour a échoué",
+		"update_success": "L'utilisateur a bien été mis à jour",
+		"update_success_title": "Succès",
+		"user_role": "Rôle",
+		"users": "Utilisateurs",
+		"validate_phone": "Valider",
+		"validated": "Validé",
+		"wrong_validation_code": "Vous n'avez pas entré de code valide. Veuillez réessayer et assurez-vous d'avoir entré le bon numéro de téléphone"
+	},
+	"wifi_analysis": {
+		"association": "Association",
+		"associations": "Les associations",
+		"mode": "Mode",
+		"network_diagram": "Diagramme de réseau",
+		"radios": "Radios",
+		"title": "Analyse Wi-Fi"
 	}
 }

public/locales/pt/translation.json

@@ -1,5 +1,6 @@
 {
 	"actions": {
+		"actions": "Ações",
 		"blink": "Piscar",
 		"configure": "Configurar",
 		"connect": "Conectar",
@@ -7,28 +8,48 @@
 		"factory_reset": "Restauração de fábrica",
 		"firmware_upgrade": "Atualização de firmware",
 		"reboot": "Reiniciar",
-		"title": "Ações do dispositivo",
+		"telemetry": "Telemetria",
+		"title": "Comandos",
 		"trace": "Vestígio",
-		"wifi_scan": "Wifi Scan"
+		"wifi_scan": "Wi-Fi Scan"
 	},
 	"blink": {
 		"blink": "Piscar",
 		"device_leds": "LEDs do dispositivo",
+		"execute_now": "Você gostaria de definir este padrão agora?",
 		"pattern": "Escolha o padrão que deseja usar:",
+		"set_leds": "Definir LEDs",
 		"when_blink_leds": "Quando você gostaria de fazer os LEDs do dispositivo piscarem?"
 	},
 	"commands": {
+		"command_success": "Comando enviado com sucesso",
 		"error": "Erro ao enviar comando!",
-		"success": "Comando enviado com sucesso",
-		"title": "Comandos de dispositivo"
+		"error_delete_log": "Erro ao tentar excluir: {{error}}",
+		"event_queue": "Fila de Eventos",
+		"success": "Comando enviado com sucesso, você pode consultar o log de Comandos para ver o resultado",
+		"title": "Histórico de Comandos",
+		"unable_queue": "Incapaz de completar o pedido de fila de eventos: {{error}}"
 	},
 	"common": {
+		"access_policy": "Política de Acesso",
+		"add": "Adicionar",
+		"add_items": "Adicionar itens",
+		"add_note": "Adicionar nota",
+		"add_note_explanation": "Escreva sua nova nota abaixo e clique no botão '+' quando terminar",
+		"adding_ellipsis": "Adicionando ...",
 		"are_you_sure": "Você tem certeza?",
+		"back_to_login": "Volte ao login",
+		"back_to_start": "Voltar ao Início",
+		"by": "Por",
 		"cancel": "Cancelar",
 		"certificate": "Certificado",
+		"certificates": "Certificados",
 		"clear": "Claro",
 		"close": "Perto",
+		"code": "Código",
 		"command": "Comando",
+		"commands": "comandos",
+		"commands_executed": "Comandos Executados",
 		"compatible": "Compatível",
 		"completed": "Concluído",
 		"config_id": "Config. Identidade",
@@ -36,69 +57,225 @@
 		"connected": "Conectado",
 		"copied": "Copiado!",
 		"copy_to_clipboard": "Copiar para área de transferência",
+		"create": "Crio",
+		"created": "Criado",
+		"created_by": "Criado Por",
+		"current": "Atual",
+		"custom_date": "Data personalizada",
+		"dashboard": "painel de controle",
 		"date": "Encontro",
+		"day": "dia",
+		"days": "dias",
 		"delete": "Excluir",
+		"delete_device": "Apagar dispositivo",
 		"details": "Detalhes",
+		"device": "Dispositivo nº{{serialNumber}}",
+		"device_dashboard": "Painel do dispositivo",
+		"device_delete": "Excluir dispositivo nº{{serialNumber}}",
+		"device_deleted": "Dispositivo excluído com sucesso",
+		"device_health": "Saúde do Dispositivo",
 		"device_list": "Lista de Dispositivos",
-		"device_page": "Página do dispositivo",
+		"device_page": "Visão",
+		"device_status": "Status do dispositivo",
 		"devices": "Devices",
+		"devices_using_latest": "Dispositivos que usam o firmware mais recente",
+		"devices_using_unknown": "Dispositivos que usam firmware desconhecido",
 		"dismiss": "Dispensar",
 		"do_now": "Faça agora!",
 		"download": "Baixar",
 		"duration": "Duração",
+		"edit": "Editar",
+		"edit_user": "Editar",
+		"email_address": "Endereço de e-mail",
+		"endpoint": "Ponto final",
+		"endpoints": "Pontos finais",
 		"error": "Erro",
+		"error_adding_note": "Erro ao adicionar nota",
+		"error_code": "Erro de código",
+		"execute_now": "Você gostaria de executar este comando agora?",
 		"executed": "Executado",
+		"exit": "Saída",
 		"firmware": "Firmware",
+		"firmware_dashboard": "Painel de Firmware",
+		"firmware_installed": "Firmware Instalado",
+		"forgot_password": "Esqueceu sua senha?",
+		"forgot_password_title": "Esqueceu a senha",
 		"from": "De",
+		"general_error": "Erro de API, consulte o seu administrador",
+		"hide": "Ocultar",
+		"hour": "hora",
+		"hours": "horas",
 		"id": "identidade",
+		"invalid_file": "O arquivo escolhido era inválido, por favor, leia as instruções e ajuste seu arquivo de acordo",
+		"invalid_pem": "Seu arquivo .pem é inválido. Deve começar com '----- BEGIN CERTIFICATE -----' OU '----- BEGIN PRIVATE KEY -----' e deve terminar com '----- END CERTIFICATE --- - 'OU' ----- END PRIVATE KEY ----- '",
 		"ip_address": "Endereço de IP",
+		"ips": "IPs",
+		"item": "Item",
+		"items": "Unid",
+		"items_per_page": "Itens por página:",
+		"last_dashboard_refresh": "Última atualização do painel",
 		"later_tonight": "Logo à noite",
+		"latest": "Mais recentes",
+		"list": "Lista",
 		"loading_ellipsis": "Carregando...",
 		"loading_more_ellipsis": "Carregando mais ...",
 		"logout": "Sair",
 		"mac": "Endereço MAC",
 		"manufacturer": "Fabricante",
+		"memory_used": "Memória Usada",
+		"minute": "minuto",
+		"minutes": "minutos",
+		"modified": "Modificado",
 		"na": "N / D",
 		"need_date": "Você precisa de um encontro ...",
+		"no": "Não",
+		"no_addresses_found": "Nenhum endereço encontrado",
+		"no_devices_found": "Nenhum dispositivo encontrado",
+		"no_items": "Nenhum item",
+		"none": "Nenhum",
 		"not_connected": "Não conectado",
+		"of_connected": "% de dispositivos",
 		"off": "Fora",
 		"on": "em",
+		"optional": "Opcional",
+		"overall_health": "Saúde geral",
+		"password_policy": "Política de Senha",
+		"preview": "Visualizar",
+		"program": "Programa",
 		"recorded": "Gravado",
 		"refresh": "REFRESH",
 		"refresh_device": "Atualizar dispositivo",
+		"required": "Requeridos",
 		"result": "Resultado",
+		"save": "Salve",
+		"saved": "Salvou!",
+		"saving": "Salvando ...",
 		"schedule": "Cronograma",
+		"search": "Dispositivos de pesquisa",
+		"second": "segundo",
+		"seconds": "segundos",
+		"seconds_elapsed": "Segundos decorridos",
+		"select": "Selecione",
 		"serial_number": "Número de série",
+		"show_all": "mostre tudo",
+		"socket_connection_closed": "Conexão fechada!",
 		"start": "Começar",
+		"stop_editing": "Pare de editar",
 		"submit": "Enviar",
 		"submitted": "Submetido",
 		"success": "Sucesso",
+		"system": "Sistema",
+		"table": "Mesa",
+		"timestamp": "tempo",
 		"to": "Para",
+		"type": "Tipo",
+		"type_for_options": "Digite o valor que você precisa criar ...",
+		"type_for_options_format": "Digite um valor no formato válido ({{format}}) ...",
+		"unable_to_connect": "Incapaz de conectar ao dispositivo",
+		"unable_to_delete": "Incapaz de deletar",
 		"unknown": "Desconhecido",
+		"up_to_date": "Dispositivos atualizados",
+		"uptimes": "Uptimes",
+		"use_file": "Usar arquivo",
 		"uuid": "UUID",
+		"vendors": "Vendedores",
 		"view_more": "Veja mais",
 		"yes": "sim"
 	},
 	"configuration": {
+		"add_configuration": "Adicionar configuração",
+		"add_new_block": "Adicionar novo bloco de configuração",
+		"add_or_link": "Link ou adicionar",
+		"add_radio": "Adicionar rádio",
+		"ca_cert_explanation": "Use um arquivo .pem que comece com \"----- BEGIN CERTIFICATE -----\" e termine com \"----- END CERTIFICATE -----\". O resultado será mostrado no campo abaixo. Você também pode copiar e colar o certificado que deseja usar diretamente.",
+		"cannot_delete": "Esta configuração não pode ser excluída porque está sendo usada por pelo menos uma entidade, local ou dispositivo",
+		"choose_radio_band": "Que banda de rádio você gostaria de criar?",
+		"choose_section": "Qual seção você gostaria que este bloco contivesse?",
+		"configuration_browser": "Navegador de configuração",
+		"configurations": "configurações",
+		"create": "Criar configuração",
+		"create_config": "Criar Nova Configuração",
+		"create_new_configuration": "Criar Novo Elemento de Configuração",
 		"created": "Criado",
-		"details": "Detalhes do dispositivo",
+		"creation_success": "Configuração criada com sucesso!",
+		"currently_associated": "Configuração atual associada: {{config}}",
+		"currently_selected_config": "Configuração atualmente selecionada: {{config}}",
+		"delete_config": "Excluir configuração",
+		"details": "Detalhes",
 		"device_password": "Senha",
-		"last_configuration_change": "Última Mudança de Configuração",
+		"device_type": "Tipo de dispositivo",
+		"device_types": "Tipos de dispositivos",
+		"edit_configuration": "Editar configuração",
+		"error_delete": "Erro ao tentar excluir: {{error}}",
+		"error_fetching_config": "Erro ao buscar configuração",
+		"error_trying_delete": "Erro ao tentar excluir: {{error}}",
+		"error_update": "Erro: {{error}}",
+		"explanation": "Explicação",
+		"key_pem_explanation": "Selecione o arquivo .pem",
+		"last_configuration_change": "Mudança de configuração",
 		"last_configuration_download": "Último download da configuração",
 		"location": "Localização",
+		"need_device_type": "Cada configuração deve suportar pelo menos um tipo de dispositivo",
+		"no_associated_config": "Sem configuração associada",
+		"no_associated_configuration": "Sem configurações associadas",
+		"note": "Nota",
 		"notes": "notas",
 		"owner": "Proprietário",
-		"title": "Configuração do dispositivo",
+		"select_configuration": "Selecione esta configuração",
+		"success_block_delete": "Bloco de configuração excluído com sucesso",
+		"success_update": "Configuração atualizada com sucesso!",
+		"successful_delete": "Configuração excluída!",
+		"support_all": "Apoie todos",
+		"supported_device_types": "Tipos de dispositivos suportados",
+		"title": "Configuração",
 		"type": "Tipo de dispositivo",
+		"used_by": "Usado por",
+		"used_by_details": "{{entities}} Entidades, {{venues}} Locais e {{devices}} Dispositivos",
+		"uuid": "ID de configuração",
+		"view_config": "Ver configuração",
+		"view_in_use": "Visualização em uso",
 		"view_json": "Exibir JSON bruto"
 	},
 	"configure": {
 		"choose_file": "Você precisa escolher um arquivo .json válido:",
 		"enter_new": "Insira a nova configuração do dispositivo JSON:",
 		"placeholder": "Config JSON",
-		"title": "Configurar dispositivo",
+		"title": "Configurar",
 		"valid_json": "Você precisa inserir um JSON válido"
 	},
+	"connect": {
+		"error_trying_to_connect": "Erro ao tentar conectar ao dispositivo: {{error}}"
+	},
+	"contact": {
+		"access_pin": "PIN de acesso",
+		"add_contact": "Adicionar contato",
+		"create_contact": "Criar Contato",
+		"delete": "Excluir contato?",
+		"error_assign": "Erro ao tentar atribuir contato: {{error}}",
+		"error_creation": "Erro ao tentar criar contato: {{error}}",
+		"error_delete": "Erro ao tentar excluir contato: {{error}}",
+		"error_fetching_list": "Erro ao buscar contatos",
+		"error_fetching_single": "Erro ao buscar contato: {{error}}",
+		"error_unassign": "Erro ao tentar cancelar a atribuição do contato: {{error}}",
+		"first_name": "Primeiro nome",
+		"identifier": "Identificador",
+		"initials": "Iniciais",
+		"last_name": "Último nome",
+		"no_associated_contact": "Nenhum contato associado",
+		"primary_email": "e-mail primário",
+		"salutation": "Saudação",
+		"secondary_email": "Email secundário",
+		"successful_assign": "Contato atribuído com sucesso!",
+		"successful_creation": "Contato criado!",
+		"successful_delete": "Contato excluído com sucesso!",
+		"successful_unassign": "Contato não atribuído com sucesso",
+		"successful_update": "Contato atualizado com sucesso",
+		"title": "Contatos",
+		"type": "Tipo",
+		"update_error": "Erro ao atualizar contato: {{error}}",
+		"user_title": "Título",
+		"visual": "Nome para Correspondência"
+	},
 	"delete_command": {
 		"explanation": "Tem certeza de que deseja excluir este comando? esta ação não é reversível.",
 		"title": "Apagar Comando"
@@ -109,16 +286,84 @@
 		"explanation": "Isso excluirá todos os {{object}} antes da data que você escolheu. Cuidado, esta ação não é reversível.",
 		"healthchecks_title": "Excluir verificações de saúde"
 	},
+	"device": {
+		"error_fetching_device": "Erro ao buscar informações do dispositivo: {{error}}",
+		"error_fetching_devices": "Erro ao buscar dispositivos: {{error}}"
+	},
 	"device_logs": {
 		"log": "Registro",
 		"severity": "Gravidade",
-		"title": "Registros de dispositivos"
+		"title": "Toras"
+	},
+	"entity": {
+		"add_child": "Adicionar Entidade Filha a {{entityName}}",
+		"add_failure": "Erro, o servidor retornou: {{error}}",
+		"add_ips": "Gerenciar IPs",
+		"add_root": "Adicionar Entidade Raiz",
+		"add_success": "Entidade criada com sucesso!",
+		"assigned_inventory": "Estoque Atribuído",
+		"cannot_delete": "Você não pode excluir entidades que têm filhos. Exclua os filhos desta entidade para poder excluí-la.",
+		"currently_selected_entity": "Entidade atualmente selecionada: {{config}}",
+		"currently_selected_venue": "Local selecionado atualmente: {{config}}",
+		"delete_success": "Entidade excluída com sucesso",
+		"delete_warning": "Aviso: esta operação não pode ser revertida",
+		"edit_failure": "Atualização malsucedida: {{error}}",
+		"enter_here": "Digite o (s) IP (s) que deseja adicionar aqui",
+		"entities": "Entidades",
+		"entity": "Entidade",
+		"error_fetch_entity": "Erro ao buscar informações da entidade",
+		"error_fetching": "Erro ao buscar entidades",
+		"error_saving": "Erro ao salvar entidade",
+		"higher_priority": "Dê maior prioridade",
+		"ip_detection": "Detecção de IP",
+		"ip_formats": "Você pode adicionar endereços IPv4 ou IPv6 nos seguintes formatos:",
+		"lower_priority": "Faça menor prioridade",
+		"need_select_entity": "Você precisa selecionar uma entidade da tabela abaixo",
+		"no_ips": "Nenhum IP selecionado",
+		"not_assigned": "Não atribuído",
+		"only_unassigned": "Apenas não atribuídos",
+		"select_entity": "Selecione esta Entidade",
+		"selected_entity": "Entidade Selecionada",
+		"update_failure_error": "Erro ao tentar atualizar a entidade: {{error}}",
+		"valid_serial": "Precisa ser um número de série válido (12 caracteres HEX)",
+		"venues": "Locais"
 	},
 	"factory_reset": {
 		"redirector": "Manter redirecionador:",
-		"title": "Dispositivo de redefinição de fábrica",
+		"reset": "Restabelecer",
+		"resetting": "Reiniciando ...",
+		"title": "Restauração de fábrica",
 		"warning": "Aviso: depois de enviar, isso não pode ser revertido"
 	},
+	"firmware": {
+		"average_age": "Idade Média do Firmware",
+		"choose_custom": "Escolher",
+		"details_title": "Detalhes da imagem #{{image}} ",
+		"device_type": "Tipo de dispositivo",
+		"device_types": "Tipos de dispositivos",
+		"downloads": "Transferências",
+		"error_fetching_latest": "Erro ao buscar o firmware mais recente",
+		"from_release": "De",
+		"history_title": "História",
+		"image": "Imagem",
+		"image_date": "Data da Imagem",
+		"installed_firmware": "Firmware Instalado",
+		"latest_version_installed": "Última versão instalada",
+		"newer_firmware_available": "Novas revisões disponíveis",
+		"reinstall_latest": "Reinstalar",
+		"revision": "Revisão",
+		"show_dev": "Mostrar lançamentos de desenvolvimento",
+		"size": "Tamanho",
+		"status": "Status do firmware",
+		"title": "Firmware",
+		"to_release": "Para",
+		"unknown_firmware_status": "Status de firmware desconhecido",
+		"upgrade": "Melhorar",
+		"upgrade_command_submitted": "Comando de atualização enviado com sucesso",
+		"upgrade_to_latest": "Mais recentes",
+		"upgrade_to_version": "Atualize para esta revisão",
+		"upgrading": "Atualizando ..."
+	},
 	"footer": {
 		"coreui_for_react": "CoreUI para React",
 		"powered_by": "Distribuído por",
@@ -126,43 +371,293 @@
 	},
 	"health": {
 		"sanity": "Sanidade",
-		"title": "Saúde do Dispositivo"
+		"title": "Saúde"
+	},
+	"inventory": {
+		"add_child": "Adicionar local infantil",
+		"add_child_venue": "Adicionar Local Infantil a {{entityName}}",
+		"add_tag": "Criar tag",
+		"add_tag_to": "Adicionar novo dispositivo a {{name}}",
+		"add_venue": "Adicionar Local",
+		"assign_ent_ven": "Atribuir à Entidade ou Local",
+		"assign_entity_instructions": "Você pode encontrar a entidade à qual deseja que esta tag seja atribuída usando o menu abaixo ou pode colar manualmente o UUID da entidade no campo acima.",
+		"assign_error": "Erro ao tentar atribuir tag",
+		"assign_to_entity": "Atribuir à Entidade",
+		"bulk_delete_assigned": "Gostaria de excluir em massa os dispositivos atribuídos em seu arquivo?",
+		"bulk_delete_assigned_warning": "Aviso: esta ação não é reversível",
+		"bulk_delete_devices": "Dispositivos de exclusão em massa",
+		"bulk_delete_devices_not_found": "{{number}} dispositivos não encontrados",
+		"bulk_delete_explanation": "Para excluir dispositivos em massa, use um arquivo CSV com uma coluna chamada SerialNumber",
+		"bulk_delete_test": "Validar Arquivo",
+		"close_entity_menu": "Fechar Menu Editar Entidade",
+		"delete_devices": "Apagar dispositivos",
+		"delete_errors": "{{number}} Excluir erros do dispositivo",
+		"delete_tag": "Excluir tag",
+		"delete_venue": "Excluir local permanentemente",
+		"deleted_devices": "{{number}} Dispositivos Excluídos",
+		"deleting": "Excluindo ...",
+		"deletion_failure": "Erro de exclusão",
+		"devices_assigned": "{{number}} dispositivos existentes atribuídos e atualizados",
+		"devices_created": "{{number}} dispositivos criados",
+		"devices_deleted": "Dispositivos Excluídos",
+		"devices_errors_while_creating": "{{number}} criações de dispositivos falharam",
+		"devices_errors_while_updating": "{{number}} atualizações do dispositivo falharam",
+		"devices_found_assigned": "{{number}} dispositivos encontrados e já atribuídos a uma entidade ou local",
+		"devices_found_unassigned": "{{number}} dispositivos encontrados, mas não atribuídos",
+		"devices_imported": " Dispositivos importados",
+		"devices_not_found": "{{number}} dispositivos sem conflito",
+		"devices_tested": "Dispositivos Testados",
+		"duplicate_serial": "Número de série já usado no arquivo (duplicado)",
+		"error_create_venue": "Erro ao criar local",
+		"error_delete_tag": "Erro ao excluir tag de inventário",
+		"error_get_venue": "Erro ao recuperar locais",
+		"error_pushing_config": "Erro ao tentar enviar a configuração para o dispositivo: {{error}}",
+		"error_retrieving": "Ocorreu um erro ao recuperar as tags de inventário",
+		"error_unassign": "Erro durante operação de cancelamento de atribuição",
+		"error_update_venue": "Erro ao atualizar o local",
+		"error_venue_delete": "Erro ao excluir local",
+		"error_within_file": "{{number}} dispositivos com informações erradas no arquivo (serão ignorados)",
+		"file_error": "Parece haver um erro em seu arquivo. Certifique-se de que o arquivo esteja no formato CSV e contenha as 5 colunas mencionadas acima na primeira linha do arquivo",
+		"final_delete_results": "Resultados de exclusão final",
+		"final_import_results": "Resultados finais de importação",
+		"import_assigned_devices": "Quer reatribuí-los com esta importação?",
+		"import_assigned_devices_explanation": "Alguns dispositivos entram em conflito com dispositivos já atribuídos. Você deve resolver esses problemas antes de importar.",
+		"import_devices": "Dispositivos de importação",
+		"import_devices_explanation": "Para importar dispositivos em massa, você precisa usar um arquivo CSV com as seguintes colunas: SerialNumber, Name, Description, DeviceType, NoteText",
+		"import_devices_to": "Importar dispositivos para {{name}}",
+		"import_existing_devices": "Atualizar e atribuí-los?",
+		"import_existing_devices_explanation": "Alguns dispositivos já existem no inventário e não foram atribuídos.",
+		"importing": "A importar ...",
+		"last_modification": "Última modificação",
+		"no_devices_to_delete": "Nenhum dispositivo para excluir",
+		"no_devices_to_import": "Nenhum dispositivo válido para criar ou atualizar!",
+		"note_text": "Texto da Nota",
+		"passed_tests": "Todos os testes foram aprovados, seus dispositivos estão prontos para importar!",
+		"serial_number_required": "Erro: Número de série ausente",
+		"showing_top_10": "Aqui está uma prévia das informações que recuperamos de seu arquivo:",
+		"sub_venues": "Subvenues",
+		"subscriber": "Assinante",
+		"successful_assign": "Tag atribuída com sucesso",
+		"successful_tag_delete": "Tag de inventário excluída com sucesso",
+		"successful_tag_update": "Tag atualizada com sucesso",
+		"successful_unassign": "A operação de cancelamento da atribuição foi bem-sucedida",
+		"successful_venue_create": "Local criado com sucesso",
+		"successful_venue_delete": "Local excluído com sucesso",
+		"successful_venue_update": "Local atualizado com sucesso",
+		"tag_created": "Tag de inventário criada com sucesso",
+		"tag_creation_error": "Erro ao tentar criar etiqueta de inventário",
+		"tag_update_error": "Erro ao atualizar tag",
+		"tags_assigned_to": "Tags de inventário atribuídas a {{name}}",
+		"test_import": "Validar dados de importação",
+		"test_results": "Resultado dos testes",
+		"title": "Inventário",
+		"type_invalid": "Erro: Tipo de dispositivo inválido",
+		"unassign": "Cancelar atribuição",
+		"unassign_tag": "Cancelar a atribuição de tag da entidade",
+		"unassigned_deleted_devices": "{{number}} Dispositivos excluídos e não atribuídos",
+		"unassigned_tags": "Tags não atribuídas",
+		"validating_import_file": "Validando arquivo de importação e dados ...",
+		"venue": "Local"
+	},
+	"location": {
+		"add": "Adicionar Local",
+		"building_name": "nome do edifício",
+		"city": "Cidade",
+		"country": "País",
+		"create": "Criar local",
+		"delete": "Excluir localização?",
+		"error_assign": "Erro ao tentar atribuir local: {{error}}",
+		"error_creation": "Erro ao tentar criar locais: {{error}}",
+		"error_delete": "Erro ao excluir localização: {{error}}",
+		"error_fetching_single": "Erro ao tentar buscar localização: {{error}}",
+		"geocode": "GeoCode",
+		"no_associated": "Sem localização associada",
+		"postal": "CEP / Código Postal",
+		"search": "Pesquise locais para preencher automaticamente os campos abaixo",
+		"state": "Estado",
+		"street_address": "Endereço",
+		"successful_creation": "Local criado com sucesso!",
+		"successful_delete": "Local excluído com sucesso!",
+		"successful_update": "Local atualizado com sucesso!",
+		"successfully_assigned": "Local atribuído com sucesso!",
+		"title": "Localizações",
+		"update_error": "Erro ao atualizar local: {{error}}"
 	},
 	"login": {
+		"account_verification": "Verificação de conta",
+		"authentication_expired": "Autenticação expirada, reinicie o processo de login",
+		"change_password": "Mudar senha",
+		"change_password_error": "Erro ao alterar a senha. Certifique-se de que a nova senha é válida visitando a página 'Política de senha'",
+		"change_password_instructions": "Digite e confirme sua nova senha",
+		"changing_password": "Alterando senha ...",
+		"confirm_new_password": "confirme a nova senha",
+		"different_passwords": "Você precisa inserir a mesma senha duas vezes",
+		"email_code_validation": "Verifique sua caixa de e-mail e insira o código de verificação que acabamos de enviar na caixa abaixo",
+		"forgot_password_error": "Erro ao tentar enviar e-mail Esqueci a senha. Certifique-se de que este userId esteja associado a uma conta.",
+		"forgot_password_explanation": "Digite seu nome de usuário para receber um e-mail contendo as instruções para redefinir sua senha",
+		"forgot_password_success": "Em breve, você receberá um e-mail com as instruções para redefinir sua senha. Certifique-se de verificar o seu spam se você não conseguir encontrar o e-mail",
+		"logging_in": "Fazendo login ...",
 		"login": "Entrar",
-		"login_error": "Erro de login, confirme se seu nome de usuário, senha e url de gateway são válidos",
+		"login_error": "Erro de login, certifique-se de que as informações que você está fornecendo são válidas",
+		"new_password": "Nova senha",
 		"password": "Senha",
-		"please_enter_gateway": "Insira um URL de gateway",
+		"phone_validation_explanation": "Verifique seu dispositivo móvel e insira o código de verificação que acabamos de enviar na caixa abaixo",
+		"please_enter_gateway": "Insira um URL uCentralSec",
 		"please_enter_password": "Por favor, insira sua senha",
 		"please_enter_username": "Por favor insira seu nome de usuário",
+		"previously_used": "A senha foi usada anteriormente",
+		"send_forgot": "ENVIAR EMAIL",
+		"sending_ellipsis": "Enviando ...",
 		"sign_in_to_account": "Faça login em sua conta",
-		"username": "Nome de usuário"
+		"url": "URL uCentralSec",
+		"username": "Nome de usuário",
+		"verification_code": "Insira sua verificação aqui",
+		"wrong_code": "O código de verificação inserido não é válido."
 	},
 	"reboot": {
 		"directions": "Quando você gostaria de reinicializar este dispositivo?",
-		"title": "Reiniciar dispositivo"
+		"now": "Você gostaria de reiniciar este dispositivo agora?",
+		"title": "Reiniciar"
 	},
 	"scan": {
 		"active": "Habilitar varredura ativa",
 		"channel": "Canal",
 		"directions": "Inicie uma verificação de wi-fi deste dispositivo, o que deve levar aproximadamente 25 segundos.",
-		"results": "Resultados da verificação de wi-fi"
+		"re_scan": "Verificar novamente",
+		"result_directions": "Clique no botão '$ t (scan.re_scan)' se desejar fazer uma varredura com a mesma configuração da anterior.",
+		"results": "Resultados da verificação de Wi-Fi",
+		"scan": "Varredura",
+		"scanning": "Scanning... ",
+		"waiting_directions": "Por favor, aguarde o resultado da verificação. Isso pode levar até 25 segundos. Você pode sair e ver os resultados da tabela de comandos mais tarde."
+	},
+	"settings": {
+		"title": "Definições"
 	},
 	"statistics": {
 		"data": "Dados (KB)",
+		"latest_statistics": "Estatísticas mais recentes",
+		"lifetime_stats": "Estatísticas de vida",
+		"no_interfaces": "Nenhuma estatística de tempo de vida da interface disponível",
+		"show_latest": "Últimas estatísticas",
 		"title": "Estatisticas"
 	},
+	"status": {
+		"connection_status": "Status",
+		"error": "Dados de status indisponíveis",
+		"last_contact": "Último contato",
+		"load_averages": "Carga (1/5/15 m.)",
+		"localtime": "Horário local",
+		"memory": "Memória Usada",
+		"percentage_free": "{{percentage}}% de {{total}} grátis",
+		"percentage_used": "{{percentage}}% de {{total}} usado",
+		"title": "#{{serialNumber}} status",
+		"uptime": "Tempo de atividade",
+		"used_total_memory": "{{used}} usado / {{total}} total"
+	},
+	"system": {
+		"error_fetching": "Erro ao buscar informações do sistema",
+		"error_reloading": "Erro ao recarregar: {{error}}",
+		"hostname": "Nome de anfitrião",
+		"os": "Sistema Operacional",
+		"processors": "Processadores",
+		"reload": "Recarregar",
+		"reload_subsystems": "Recarregar",
+		"subsystems": "Subsistemas",
+		"success_reload": "Comando de recarregamento enviado com sucesso!"
+	},
+	"telemetry": {
+		"connection_failed": "Falha ao criar conexão. Erro: {{error}}",
+		"interval": "intervalo",
+		"last_update": "Última atualização",
+		"types": "Tipos"
+	},
 	"trace": {
 		"choose_network": "Escolha a rede",
 		"directions": "Lançar um rastreamento remoto deste dispositivo para uma duração específica ou um número de pacotes",
+		"download_trace": "Baixar arquivo de rastreamento",
 		"packets": "Pacotes",
-		"title": "Dispositivo de rastreamento"
+		"title": "Vestígio",
+		"trace": "Vestígio",
+		"trace_not_successful": "O rastreamento não foi bem-sucedido: o gateway relatou o seguinte erro: {{error}}",
+		"wait_for_file": "Você gostaria de esperar até que o arquivo de rastreamento esteja pronto?",
+		"waiting_directions": "Aguarde o arquivo de dados de rastreamento. Isto pode tomar algum tempo. Você pode sair da espera e recuperar o arquivo de rastreamento da tabela de comandos mais tarde.",
+		"waiting_seconds": "Tempo decorrido: {{seconds}} segundos"
 	},
 	"upgrade": {
+		"command_submitted": "Comando enviado",
+		"device_disconnected": "Dispositivo desconectado",
+		"device_reconnected": "Dispositivo reconectado",
+		"device_upgrading_firmware": "Firmware de atualização de dispositivo",
 		"directions": "Escolha um horário e uma versão de firmware para este dispositivo",
 		"firmware_uri": "URI de firmware:",
 		"need_uri": "Você precisa de um URI ...",
+		"new_version": "Nova versão é",
+		"offline_device": "Esta opção está bloqueada porque este dispositivo não está conectado",
 		"time": "Tempo de atualização:",
-		"title": "Atualização de firmware"
+		"title": "Atualização de firmware",
+		"upgrade": "Melhorar",
+		"wait_for_upgrade": "Você gostaria de esperar a conclusão da atualização?",
+		"waiting_for_device": "Esperando que o dispositivo se reconecte"
+	},
+	"user": {
+		"add_phone_number": "ADICIONAR NÚMERO DE TELEFONE",
+		"avatar": "Seu avatar",
+		"avatar_file": "Seu avatar (máx. De 2 MB)",
+		"check_phone": "Por favor, verifique o seu telefone para o seu código de validação",
+		"confirm_new_password": "confirme a nova senha",
+		"create": "Criar usuário",
+		"create_failure": "Erro ao criar usuário. Certifique-se de que este endereço de e-mail ainda não esteja vinculado a uma conta.",
+		"create_success": "Usuário criado com sucesso",
+		"creating": "Criando usuário ...",
+		"delete_avatar": "Apagar Avatar",
+		"delete_failure": "Erro ao tentar excluir usuário: {{error}}",
+		"delete_success": "Usuário excluído com sucesso!",
+		"delete_title": "Deletar usuário",
+		"delete_warning": "Aviso: depois de excluir um usuário, você não pode reverter",
+		"deleting": "Excluindo ...",
+		"description": "Descrição",
+		"edit": "Editar usuário",
+		"email_address": "Endereço de e-mail",
+		"enter_new_phone": "Insira seu novo número de telefone:",
+		"error_fetching_users": "Erro ao buscar usuários: {{error}}",
+		"error_sending_code": "Erro ao tentar enviar o código de validação. Por favor, confirme se o seu número de telefone é válido.",
+		"force_password_change": "Forçar mudança de senha no login",
+		"id": "ID do usuário.",
+		"last_login": "Último login",
+		"login_id": "Identificação de usuário.",
+		"make_sure_same_password": "Certifique-se de que ambas as senhas são iguais e válidas",
+		"my_profile": "Meu perfil",
+		"name": "Nome",
+		"new_code_sent": "Novo código enviado!",
+		"nickname": "Apelido",
+		"nickname_explanation": "Apelido (opcional)",
+		"not_validated": "Não validado",
+		"note": "Nota",
+		"password": "Senha",
+		"phone_number": "Número de telefone",
+		"provide_email": "Por favor, forneça um endereço de e-mail válido",
+		"provide_password": "Forneça uma senha válida",
+		"save_avatar": "Salvar Avatar",
+		"send_code": "Enviar código",
+		"send_code_again": "Envie o Código Novamente",
+		"show_hide_password": "Mostrar / ocultar senha",
+		"successful_validation": "Número de telefone validado! Clique no botão Salvar para vinculá-lo ao seu perfil",
+		"update_failure": "Erro ao tentar atualizar: {{error}}",
+		"update_failure_title": "Atualização falhou",
+		"update_success": "Usuário atualizado com sucesso",
+		"update_success_title": "Sucesso",
+		"user_role": "Função",
+		"users": "Comercial",
+		"validate_phone": "validar",
+		"validated": "Validado",
+		"wrong_validation_code": "Você não digitou um código válido. Por favor, tente novamente e certifique-se de ter inserido o número de telefone correto"
+	},
+	"wifi_analysis": {
+		"association": "Associação",
+		"associations": "Associações",
+		"mode": "Modo",
+		"network_diagram": "Diagrama de rede",
+		"radios": "Rádios",
+		"title": "Análise de Wi-Fi"
 	}
 }

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "favicon.svg",
-      "type": "image/svg",
-      "sizes": "192x192"
-    },
-    {
-      "src": "favicon.svg",
-      "type": "image/svg",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/old_favicon.ico

@@ -1,165 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 141.5 185.6" style="enable-background:new 0 0 141.5 185.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#414141;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:#FED206;}
-	.st3{fill:#EB6F53;}
-	.st4{fill:#3BA9B6;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M120.7,183.9H21.5c-10.8,0-19.5-8.7-19.5-19.5V20.5c0-10.8,8.7-19.5,19.5-19.5h99.2
-			c10.8,0,19.5,8.7,19.5,19.5v143.9C140.2,175.2,131.5,183.9,120.7,183.9z"/>
-		<g>
-			<g>
-				<g>
-					<path class="st1" d="M46.3,166.2v-3.4h-1.2v-0.6h3.1v0.6H47v3.4H46.3z"/>
-				</g>
-				<g>
-					<path class="st1" d="M49,166.2v-4h2.7v0.6h-2v1h2v0.6h-2v1.1h2v0.6H49z"/>
-				</g>
-				<g>
-					<path class="st1" d="M52.6,166.2v-4h0.7v3.4h1.8v0.6H52.6z"/>
-				</g>
-				<g>
-					<path class="st1" d="M55.7,166.2v-4h2.7v0.6h-2v1h2v0.6h-2v1.1h2v0.6H55.7z"/>
-				</g>
-				<g>
-					<path class="st1" d="M59.1,164.2c0-1.2,0.9-2.1,2.1-2.1c0.8,0,1.3,0.4,1.6,0.9l-0.6,0.3c-0.2-0.3-0.6-0.6-1-0.6
-						c-0.8,0-1.4,0.6-1.4,1.4c0,0.8,0.6,1.4,1.4,1.4c0.4,0,0.8-0.3,1-0.6l0.6,0.3c-0.3,0.5-0.8,0.9-1.6,0.9
-						C60,166.3,59.1,165.5,59.1,164.2z"/>
-				</g>
-				<g>
-					<path class="st1" d="M63.2,164.2c0-1.2,0.8-2.1,2-2.1c1.2,0,2,0.9,2,2.1c0,1.2-0.8,2.1-2,2.1C64,166.3,63.2,165.4,63.2,164.2z
-						 M66.5,164.2c0-0.8-0.5-1.4-1.3-1.4c-0.8,0-1.3,0.6-1.3,1.4c0,0.8,0.5,1.4,1.3,1.4C66,165.7,66.5,165,66.5,164.2z"/>
-				</g>
-				<g>
-					<path class="st1" d="M71.3,166.2v-3.1l-1.2,3.1h-0.3l-1.2-3.1v3.1h-0.7v-4h1l1.1,2.7l1.1-2.7h1v4H71.3z"/>
-				</g>
-				<g>
-					<path class="st1" d="M75.7,166.2v-4h0.7v4H75.7z"/>
-				</g>
-				<g>
-					<path class="st1" d="M80.4,166.2l-2.1-2.8v2.8h-0.7v-4h0.7l2,2.8v-2.8h0.7v4H80.4z"/>
-				</g>
-				<g>
-					<path class="st1" d="M82.3,166.2v-4H85v0.6h-2v1h2v0.6h-2v1.7H82.3z"/>
-				</g>
-				<g>
-					<path class="st1" d="M87.9,166.2l-0.9-1.5h-0.7v1.5h-0.7v-4h1.7c0.8,0,1.3,0.5,1.3,1.2c0,0.7-0.5,1.1-0.9,1.2l1,1.6H87.9z
-						 M88,163.5c0-0.4-0.3-0.6-0.7-0.6h-1v1.3h1C87.7,164.1,88,163.9,88,163.5z"/>
-				</g>
-				<g>
-					<path class="st1" d="M92.4,166.2l-0.3-0.8h-1.8l-0.3,0.8h-0.8l1.6-4h0.9l1.6,4H92.4z M91.2,162.9l-0.7,1.9h1.4L91.2,162.9z"/>
-				</g>
-				<g>
-					<path class="st1" d="M95.8,166.2v-4h1.5c0.8,0,1.2,0.5,1.2,1.2c0,0.6-0.4,1.2-1.2,1.2h-1.2v1.7H95.8z M98.2,163.4
-						c0-0.5-0.3-0.9-0.9-0.9h-1.1v1.7h1.1C97.8,164.3,98.2,163.9,98.2,163.4z"/>
-				</g>
-				<g>
-					<path class="st1" d="M101.5,166.2l-1.1-1.6h-0.9v1.6h-0.3v-4h1.5c0.7,0,1.2,0.4,1.2,1.2c0,0.7-0.5,1.1-1.1,1.1l1.2,1.7H101.5z
-						 M101.6,163.4c0-0.5-0.4-0.9-0.9-0.9h-1.1v1.7h1.1C101.2,164.3,101.6,163.9,101.6,163.4z"/>
-				</g>
-				<g>
-					<path class="st1" d="M102.8,164.2c0-1.2,0.8-2.1,1.9-2.1c1.2,0,1.9,0.9,1.9,2.1c0,1.2-0.8,2.1-1.9,2.1
-						C103.6,166.3,102.8,165.4,102.8,164.2z M106.3,164.2c0-1-0.6-1.7-1.6-1.7c-1,0-1.6,0.7-1.6,1.7c0,1,0.6,1.7,1.6,1.7
-						C105.7,166,106.3,165.2,106.3,164.2z"/>
-				</g>
-				<g>
-					<path class="st1" d="M106.9,165.8l0.2-0.3c0.2,0.2,0.4,0.4,0.8,0.4c0.5,0,0.9-0.4,0.9-0.9v-2.8h0.3v2.8c0,0.8-0.5,1.2-1.2,1.2
-						C107.5,166.3,107.2,166.1,106.9,165.8z"/>
-				</g>
-				<g>
-					<path class="st1" d="M110.4,166.2v-4h2.5v0.3h-2.2v1.5h2.1v0.3h-2.1v1.6h2.2v0.3H110.4z"/>
-				</g>
-				<g>
-					<path class="st1" d="M113.5,164.2c0-1.2,0.9-2.1,2-2.1c0.6,0,1.1,0.3,1.5,0.7l-0.3,0.2c-0.3-0.3-0.7-0.6-1.2-0.6
-						c-0.9,0-1.7,0.7-1.7,1.7c0,1,0.7,1.7,1.7,1.7c0.5,0,0.9-0.2,1.2-0.6l0.3,0.2c-0.4,0.4-0.8,0.7-1.5,0.7
-						C114.4,166.3,113.5,165.5,113.5,164.2z"/>
-				</g>
-				<g>
-					<path class="st1" d="M118.7,166.2v-3.7h-1.3v-0.3h2.9v0.3H119v3.7H118.7z"/>
-				</g>
-			</g>
-			<g>
-				<polygon class="st1" points="26.3,163.8 31.6,158.5 36.9,163.8 37.7,163.8 31.6,157.6 25.5,163.8 				"/>
-				<polygon class="st1" points="36.9,164.7 31.6,170 26.3,164.7 25.5,164.7 31.6,170.8 37.7,164.7 				"/>
-				<polygon class="st1" points="31,163.8 36.3,158.5 41.6,163.8 42.5,163.8 36.3,157.6 30.2,163.8 				"/>
-				<polygon class="st1" points="41.6,164.7 36.3,170 31,164.7 30.2,164.7 36.3,170.8 42.5,164.7 				"/>
-			</g>
-		</g>
-		<g>
-			<path class="st1" d="M33.2,100.7c-4.6,0-8.3,3.7-8.3,8.3s3.7,8.3,8.3,8.3s8.3-3.7,8.3-8.3S37.8,100.7,33.2,100.7z"/>
-		</g>
-		<g>
-			<g>
-				<g>
-					<path class="st2" d="M33.2,35.2c40.7,0,73.8,33.1,73.8,73.8c0,0.7,0,1.4,0,2.1c0,1.7,0.6,3.3,1.7,4.6c1.2,1.2,2.8,1.9,4.5,2
-						l0.2,0c3.5,0,6.3-2.7,6.4-6.2c0-0.8,0-1.7,0-2.5c0-47.7-38.8-86.6-86.6-86.6c-0.8,0-1.7,0-2.5,0c-1.7,0-3.3,0.8-4.5,2
-						c-1.2,1.2-1.8,2.9-1.7,4.6c0.1,3.5,3,6.3,6.6,6.2C31.8,35.2,32.5,35.2,33.2,35.2z"/>
-				</g>
-			</g>
-		</g>
-		<g>
-			<g>
-				<g>
-					<path class="st3" d="M33.2,60.5c26.7,0,48.5,21.7,48.5,48.5c0,0.6,0,1.3,0,2c-0.1,1.7,0.5,3.3,1.7,4.6c1.2,1.3,2.7,2,4.4,2.1
-						c1.7,0.1,3.3-0.5,4.6-1.7c1.2-1.2,2-2.7,2-4.4c0-0.9,0.1-1.8,0.1-2.6c0-33.8-27.5-61.2-61.2-61.2c-0.8,0-1.6,0-2.6,0.1
-						c-1.7,0.1-3.3,0.8-4.4,2.1c-1.2,1.3-1.8,2.9-1.7,4.6s0.8,3.3,2.1,4.4c1.3,1.2,2.9,1.8,4.6,1.7C31.9,60.5,32.6,60.5,33.2,60.5z"
-						/>
-				</g>
-			</g>
-		</g>
-		<g>
-			<g>
-				<g>
-					<path class="st4" d="M33.2,86.7c12.3,0,22.3,10,22.3,22.3c0,0.5,0,1.1-0.1,1.8c-0.3,3.5,2.3,6.6,5.8,6.9
-						c3.5,0.3,6.6-2.3,6.9-5.8c0.1-1,0.1-1.9,0.1-2.8c0-19.3-15.7-35.1-35.1-35.1c-0.9,0-1.8,0-2.8,0.1c-1.7,0.1-3.2,0.9-4.3,2.2
-						c-1.1,1.3-1.6,2.9-1.5,4.6c0.1,1.7,0.9,3.2,2.2,4.3c1.3,1.1,2.9,1.6,4.6,1.5C32.1,86.7,32.7,86.7,33.2,86.7z"/>
-				</g>
-			</g>
-		</g>
-	</g>
-	<g>
-		<path class="st1" d="M35.8,130.4c1.1,0.6,2.1,1.5,2.7,2.6c0.7,1.1,1,2.3,1,3.7s-0.3,2.6-1,3.7c-0.7,1.1-1.6,2-2.7,2.6
-			c-1.1,0.6-2.4,1-3.8,1s-2.7-0.3-3.8-1c-1.1-0.6-2.1-1.5-2.7-2.6c-0.7-1.1-1-2.3-1-3.7c0-1.3,0.3-2.6,1-3.7c0.7-1.1,1.6-2,2.7-2.6
-			c1.1-0.6,2.4-0.9,3.8-0.9C33.4,129.5,34.7,129.8,35.8,130.4z M29.9,132.9c-0.7,0.4-1.2,0.9-1.6,1.6s-0.6,1.4-0.6,2.2
-			c0,0.8,0.2,1.6,0.6,2.3c0.4,0.7,0.9,1.2,1.6,1.6c0.7,0.4,1.4,0.6,2.1,0.6c0.8,0,1.5-0.2,2.1-0.6c0.6-0.4,1.2-0.9,1.5-1.6
-			c0.4-0.7,0.6-1.4,0.6-2.3c0-0.8-0.2-1.6-0.6-2.2s-0.9-1.2-1.5-1.6c-0.6-0.4-1.4-0.6-2.1-0.6C31.3,132.3,30.6,132.5,29.9,132.9z"/>
-		<path class="st1" d="M50.6,133.6c0.8,0.5,1.4,1.1,1.8,2c0.4,0.8,0.6,1.8,0.6,2.9c0,1.1-0.2,2-0.6,2.8c-0.4,0.8-1,1.5-1.8,1.9
-			c-0.8,0.5-1.6,0.7-2.6,0.7c-0.7,0-1.4-0.1-2-0.4s-1.1-0.7-1.5-1.2v5.4h-3.1V133h3.1v1.6c0.4-0.5,0.9-1,1.4-1.2s1.2-0.4,2-0.4
-			C48.9,132.9,49.8,133.1,50.6,133.6z M49.1,140.5c0.5-0.6,0.7-1.3,0.7-2.2c0-0.9-0.2-1.6-0.7-2.1c-0.5-0.6-1.1-0.8-1.9-0.8
-			s-1.4,0.3-1.9,0.8c-0.5,0.6-0.8,1.3-0.8,2.1c0,0.9,0.2,1.6,0.8,2.2s1.1,0.8,1.9,0.8S48.6,141,49.1,140.5z"/>
-		<path class="st1" d="M63.4,134.4c0.9,1,1.4,2.4,1.4,4.2c0,0.3,0,0.6,0,0.7H57c0.2,0.7,0.5,1.2,1,1.6c0.5,0.4,1.1,0.6,1.8,0.6
-			c0.5,0,1-0.1,1.5-0.3s0.9-0.5,1.3-0.9l1.6,1.6c-0.5,0.6-1.2,1.1-2,1.4c-0.8,0.3-1.6,0.5-2.6,0.5c-1.1,0-2.1-0.2-3-0.7
-			s-1.5-1.1-2-1.9c-0.5-0.8-0.7-1.8-0.7-2.9c0-1.1,0.2-2.1,0.7-2.9s1.1-1.5,2-1.9c0.8-0.5,1.8-0.7,2.9-0.7
-			C61.2,132.9,62.5,133.4,63.4,134.4z M61.8,137.5c0-0.7-0.3-1.3-0.7-1.7s-1-0.6-1.7-0.6c-0.7,0-1.2,0.2-1.7,0.6
-			c-0.4,0.4-0.7,1-0.9,1.7H61.8z"/>
-		<path class="st1" d="M76.2,134c0.7,0.7,1.1,1.7,1.1,3v6.8h-3.1v-5.9c0-0.7-0.2-1.2-0.6-1.6s-0.9-0.6-1.5-0.6
-			c-0.8,0-1.4,0.3-1.8,0.8c-0.4,0.5-0.7,1.2-0.7,2v5.3h-3.1V133h3.1v1.9c0.7-1.3,2-2,3.7-2C74.6,132.8,75.5,133.2,76.2,134z"/>
-		<path class="st1" d="M96,129.7h3.3l-4.7,14h-3.3l-2.9-10.1l-3,10.1h-3.2l-4.7-14h3.4l3,10.7l3-10.7H90l3.1,10.7L96,129.7z"/>
-		<path class="st1" d="M103.3,128.7c0.3,0.3,0.5,0.7,0.5,1.2s-0.2,0.9-0.5,1.2c-0.3,0.3-0.7,0.5-1.2,0.5c-0.5,0-0.9-0.2-1.2-0.5
-			c-0.3-0.3-0.5-0.7-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2c0.3-0.3,0.7-0.5,1.2-0.5C102.6,128.2,103,128.3,103.3,128.7z M100.6,133h3.1
-			v10.8h-3.1V133z"/>
-		<path class="st1" d="M106.5,129.7h10.1l0,2.6h-6.9v3.4h6.3v2.6h-6.3v5.3h-3.2V129.7z"/>
-		<path class="st1" d="M120.9,128.7c0.3,0.3,0.5,0.7,0.5,1.2s-0.2,0.9-0.5,1.2c-0.3,0.3-0.7,0.5-1.2,0.5c-0.5,0-0.9-0.2-1.2-0.5
-			c-0.3-0.3-0.5-0.7-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2c0.3-0.3,0.7-0.5,1.2-0.5C120.1,128.2,120.5,128.3,120.9,128.7z M118.1,133h3.1
-			v10.8h-3.1V133z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

public/robots.txt

@@ -1,2 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *

src/App.js

@@ -1,7 +1,11 @@
-import React, { useEffect } from 'react';
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import React from 'react';
+import { HashRouter, Switch } from 'react-router-dom';
 import 'scss/style.scss';
-import { useSelector, useDispatch } from 'react-redux';
+import Router from 'router';
+import { AuthProvider } from 'ucentral-libs';
+import { checkIfJson } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import { getItem } from 'utils/localStorageHelper';
 
 const loading = (
   <div className="pt-3 text-center">
@@ -9,32 +13,26 @@ const loading = (
   </div>
 );
 
-const TheLayout = React.lazy(() => import('layout'));
-const Login = React.lazy(() => import('pages/LoginPage'));
-
 const App = () => {
-  const isLoggedIn = useSelector((state) => state.connected);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const token = sessionStorage.getItem('access_token');
-    if (token !== undefined && token !== null) {
-      dispatch({ type: 'set', connected: true });
-    }
-  }, [dispatch]);
+  const storageToken = getItem('access_token');
+  const apiEndpoints = checkIfJson(getItem('gateway_endpoints'))
+    ? JSON.parse(getItem('gateway_endpoints'))
+    : {};
 
   return (
-    <HashRouter>
-      <React.Suspense fallback={loading}>
-        <Switch>
-          <Route
-            path="/"
-            name="Devices"
-            render={(props) => (isLoggedIn ? <TheLayout {...props} /> : <Login {...props} />)}
-          />
-        </Switch>
-      </React.Suspense>
-    </HashRouter>
+    <AuthProvider
+      axiosInstance={axiosInstance}
+      token={storageToken ?? ''}
+      apiEndpoints={apiEndpoints}
+    >
+      <HashRouter>
+        <React.Suspense fallback={loading}>
+          <Switch>
+            <Router />
+          </Switch>
+        </React.Suspense>
+      </HashRouter>
+    </AuthProvider>
   );
 };
 

src/assets/icons/index.js

@@ -1,28 +1,4 @@
 import {
-  cibSkype,
-  cibFacebook,
-  cibTwitter,
-  cibLinkedin,
-  cibFlickr,
-  cibTumblr,
-  cibXing,
-  cibGithub,
-  cibStackoverflow,
-  cibYoutube,
-  cibDribbble,
-  cibInstagram,
-  cibPinterest,
-  cibVk,
-  cibYahoo,
-  cibBehance,
-  cibReddit,
-  cibVimeo,
-  cibCcMastercard,
-  cibCcVisa,
-  cibStripe,
-  cibPaypal,
-  cibGooglePay,
-  cibCcAmex,
   cifUs,
   cifBr,
   cifIn,
@@ -122,14 +98,8 @@ import {
   cilXCircle,
   cilWarning,
 } from '@coreui/icons';
-import { sygnet } from './sygnet';
-import { logo } from './logo';
-import { logoNegative } from './logo-negative';
 
 export const icons = {
-  sygnet,
-  logo,
-  logoNegative,
   cilAlignCenter,
   cilAlignLeft,
   cilAlignRight,
@@ -228,28 +198,4 @@ export const icons = {
   cifFr,
   cifEs,
   cifPl,
-  cibSkype,
-  cibFacebook,
-  cibTwitter,
-  cibLinkedin,
-  cibFlickr,
-  cibTumblr,
-  cibXing,
-  cibGithub,
-  cibStackoverflow,
-  cibYoutube,
-  cibDribbble,
-  cibInstagram,
-  cibPinterest,
-  cibVk,
-  cibYahoo,
-  cibBehance,
-  cibReddit,
-  cibVimeo,
-  cibCcMastercard,
-  cibCcVisa,
-  cibStripe,
-  cibPaypal,
-  cibGooglePay,
-  cibCcAmex,
 };

src/assets/icons/logo-negative.js

@@ -1,33 +0,0 @@
-export const logoNegative = [
-  '608 134',
-  `
-  <title>coreui react pro logo</title>
-  <g>
-    <g style="fill:#80d0ff;">
-      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
-      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
-      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
-      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
-      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
-      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
-      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
-      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
-    </g>
-
-    <g style="fill:#fff;">
-      <g>
-        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
-      </g>
-      <g>
-        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
-        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
-        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
-        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
-      </g>
-    </g>
-  </g>
-`,
-];

src/assets/icons/logo.js

@@ -1,32 +0,0 @@
-export const logo = [
-  '608 134',
-  `
-  <title>coreui react pro</title>
-  <g>
-    <g style="fill:#00a1ff">
-      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
-      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
-      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
-      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
-      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
-      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
-      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
-      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
-    </g>
-    <g style="fill:#3c4b64">
-      <g>
-        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
-      </g>
-      <g>
-        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
-        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
-        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
-        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
-      </g>
-    </g>
-  </g>
-`,
-];

src/assets/icons/sygnet.js

@@ -1,12 +0,0 @@
-export const sygnet = [
-  '160 160',
-  `
-  <title>coreui logo</title>
-  <g>
-    <g style="fill:#fff;">
-      <path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
-      <path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
-    </g>
-  </g>
-`,
-];

src/components/BlinkModal/index.js

@@ -5,49 +5,40 @@ import {
   CModalTitle,
   CModalBody,
   CModalFooter,
-  CSpinner,
+  CSwitch,
   CCol,
   CRow,
-  CForm,
   CFormGroup,
   CInputRadio,
   CLabel,
+  CPopover,
 } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { convertDateFromUtc, convertDateToUtc, dateToUnix } from 'utils/helper';
+import { dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
-import LoadingButton from 'components/LoadingButton';
-
-import styles from './index.module.scss';
+import { LoadingButton, useAuth, useDevice, useToast } from 'ucentral-libs';
 
 const BlinkModal = ({ show, toggleModal }) => {
   const { t } = useTranslation();
-  const [hadSuccess, setHadSuccess] = useState(false);
-  const [hadFailure, setHadFailure] = useState(false);
-  const [doingNow, setDoingNow] = useState(false);
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const { addToast } = useToast();
+  const [isNow, setIsNow] = useState(false);
   const [waiting, setWaiting] = useState(false);
   const [chosenDate, setChosenDate] = useState(new Date().toString());
   const [chosenPattern, setPattern] = useState('on');
-  const [responseBody, setResponseBody] = useState('');
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+  const [result, setResult] = useState(null);
 
-  const setDateToLate = () => {
-    const date = convertDateToUtc(new Date());
-    if (date.getHours() >= 3) {
-      date.setDate(date.getDate() + 1);
-    }
-    date.setHours(3);
-    date.setMinutes(0);
-
-    setChosenDate(convertDateFromUtc(date).toString());
+  const toggleNow = () => {
+    setIsNow(!isNow);
   };
 
   const setDate = (date) => {
@@ -60,47 +51,46 @@ const BlinkModal = ({ show, toggleModal }) => {
     if (show) {
       setWaiting(false);
       setChosenDate(new Date().toString());
-      setResponseBody('');
       setPattern('on');
-      setDoingNow(false);
-      setHadSuccess(false);
-      setHadFailure(false);
+      setResult(null);
     }
   }, [show]);
 
-  const doAction = (isNow) => {
-    if (isNow !== undefined) setDoingNow(isNow);
-    setHadFailure(false);
-    setHadSuccess(false);
+  const doAction = () => {
     setWaiting(true);
-
-    const token = getToken();
     const utcDate = new Date(chosenDate);
-    const utcDateString = utcDate.toISOString();
 
     const parameters = {
-      serialNumber: selectedDeviceId,
-      when: isNow ? 0 : dateToUnix(utcDateString),
+      serialNumber: deviceSerialNumber,
+      when: isNow ? 0 : dateToUnix(utcDate),
       pattern: chosenPattern,
       duration: 30,
     };
 
     const headers = {
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
     };
 
     axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/leds`, parameters, { headers })
+      .post(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}/leds`,
+        parameters,
+        { headers },
+      )
       .then(() => {
-        setHadSuccess(true);
+        addToast({
+          title: t('common.success'),
+          body: t('commands.command_success'),
+          color: 'success',
+          autohide: true,
+        });
+        toggleModal();
       })
       .catch(() => {
-        setResponseBody('Error while submitting command!');
-        setHadFailure(true);
+        setResult('error');
       })
       .finally(() => {
-        setDoingNow(false);
         setWaiting(false);
         eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
@@ -108,36 +98,82 @@ const BlinkModal = ({ show, toggleModal }) => {
 
   return (
     <CModal show={show} onClose={toggleModal}>
-      <CModalHeader closeButton>
-        <CModalTitle>{t('blink.device_leds')}</CModalTitle>
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">{t('blink.device_leds')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggleModal}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
-      {hadSuccess ? (
+      {result === 'success' ? (
         <SuccessfulActionModalBody toggleModal={toggleModal} />
       ) : (
         <div>
           <CModalBody>
-            <h6>{t('blink.when_blink_leds')}</h6>
-            <CRow className={styles.spacedRow}>
-              <CCol>
-                <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
-                  {waiting && doingNow ? t('common.loading_ellipsis') : t('common.do_now')}
-                  <CSpinner
-                    color="light"
-                    hidden={!waiting || !doingNow}
-                    component="span"
-                    size="sm"
-                  />
-                </CButton>
+            <CFormGroup row>
+              <CCol md="3">
+                <CLabel>{t('blink.pattern')}</CLabel>
               </CCol>
               <CCol>
-                <CButton disabled={waiting} block color="primary" onClick={setDateToLate}>
-                  {t('common.later_tonight')}
-                </CButton>
+                <CFormGroup variant="custom-radio" onClick={() => setPattern('on')} inline>
+                  <CInputRadio
+                    custom
+                    defaultChecked={chosenPattern === 'on'}
+                    id="radio1"
+                    name="radios"
+                    value="option1"
+                  />
+                  <CLabel variant="custom-checkbox" htmlFor="radio1">
+                    {t('common.on')}
+                  </CLabel>
+                </CFormGroup>
+                <CFormGroup variant="custom-radio" onClick={() => setPattern('off')} inline>
+                  <CInputRadio
+                    custom
+                    defaultChecked={chosenPattern === 'off'}
+                    id="radio2"
+                    name="radios"
+                    value="option2"
+                  />
+                  <CLabel variant="custom-checkbox" htmlFor="radio2">
+                    {t('common.off')}
+                  </CLabel>
+                </CFormGroup>
+                <CFormGroup variant="custom-radio" onClick={() => setPattern('blink')} inline>
+                  <CInputRadio
+                    custom
+                    defaultChecked={chosenPattern === 'blink'}
+                    id="radio3"
+                    name="radios"
+                    value="option3"
+                  />
+                  <CLabel variant="custom-checkbox" htmlFor="radio3">
+                    {t('blink.blink')}
+                  </CLabel>
+                </CFormGroup>
+              </CCol>
+            </CFormGroup>
+            <CRow className="pt-1">
+              <CCol md="8">
+                <p>{t('blink.execute_now')}</p>
+              </CCol>
+              <CCol>
+                <CSwitch
+                  disabled={waiting}
+                  color="primary"
+                  defaultChecked={isNow}
+                  onClick={toggleNow}
+                  labelOn={t('common.yes')}
+                  labelOff={t('common.no')}
+                />
               </CCol>
             </CRow>
-            <CRow className={styles.spacedRow}>
-              <CCol md="4" className={styles.spacedDate}>
-                <p>{t('common.date')}</p>
+            <CRow hidden={isNow} className="pt-3">
+              <CCol md="4" className="pt-2">
+                <p>{t('common.custom_date')}</p>
               </CCol>
               <CCol xs="12" md="8">
                 <DatePicker
@@ -147,63 +183,17 @@ const BlinkModal = ({ show, toggleModal }) => {
                   placeholder="Select custom date"
                   disabled={waiting}
                   onChange={(date) => setDate(date)}
-                  min={convertDateToUtc(new Date())}
+                  min={new Date()}
                 />
               </CCol>
             </CRow>
-            <CRow className={styles.spacedRow}>
-              <CCol md="7">{t('blink.pattern')}</CCol>
-              <CCol>
-                <CForm>
-                  <CFormGroup variant="checkbox" onClick={() => setPattern('on')}>
-                    <CInputRadio
-                      defaultChecked={chosenPattern === 'on'}
-                      id="radio1"
-                      name="radios"
-                      value="option1"
-                    />
-                    <CLabel variant="checkbox" htmlFor="radio1">
-                      {t('common.on')}
-                    </CLabel>
-                  </CFormGroup>
-                  <CFormGroup variant="checkbox" onClick={() => setPattern('off')}>
-                    <CInputRadio
-                      defaultChecked={chosenPattern === 'off'}
-                      id="radio2"
-                      name="radios"
-                      value="option2"
-                    />
-                    <CLabel variant="checkbox" htmlFor="radio2">
-                      {t('common.off')}
-                    </CLabel>
-                  </CFormGroup>
-                  <CFormGroup variant="checkbox" onClick={() => setPattern('blink')}>
-                    <CInputRadio
-                      defaultChecked={chosenPattern === 'blink'}
-                      id="radio3"
-                      name="radios"
-                      value="option3"
-                    />
-                    <CLabel variant="checkbox" htmlFor="radio3">
-                      {t('blink.blink')}
-                    </CLabel>
-                  </CFormGroup>
-                </CForm>
-              </CCol>
-            </CRow>
-            <div hidden={!hadSuccess && !hadFailure}>
-              <div>
-                <pre className="ignore">{responseBody}</pre>
-              </div>
-            </div>
           </CModalBody>
           <CModalFooter>
             <LoadingButton
-              label={t('common.schedule')}
+              label={isNow ? t('blink.set_leds') : t('common.schedule')}
               isLoadingLabel={t('common.loading_ellipsis')}
-              isLoading={waiting && !doingNow}
+              isLoading={waiting}
               action={doAction}
-              variant="outline"
               block={false}
               disabled={waiting}
             />

src/components/BlinkModal/index.module.scss

@@ -1,7 +0,0 @@
-.spacedRow {
-  margin-top: 20px;
-}
-
-.spacedDate {
-  margin-top: 7px;
-}

src/components/CommandHistory/DetailsModal.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CButton, CModal, CModalHeader, CModalBody, CModalTitle, CPopover } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
+
+const DetailsModal = ({ t, show, toggle, details, commandUuid }) => (
+  <CModal size="lg" show={show} onClose={toggle}>
+    <CModalHeader className="p-1">
+      <CModalTitle className="text-dark">{commandUuid}</CModalTitle>
+      <div className="text-right">
+        <CPopover content={t('common.close')}>
+          <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
+            <CIcon content={cilX} />
+          </CButton>
+        </CPopover>
+      </div>
+    </CModalHeader>
+    <CModalBody>
+      <pre className="ignore">{JSON.stringify(details, null, 4)}</pre>
+    </CModalBody>
+  </CModal>
+);
+
+DetailsModal.propTypes = {
+  t: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  details: PropTypes.instanceOf(Object).isRequired,
+  commandUuid: PropTypes.string.isRequired,
+};
+
+export default DetailsModal;

src/components/CommandHistory/index.js

@@ -0,0 +1,417 @@
+/* eslint-disable-rule prefer-destructuring */
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  CWidgetDropdown,
+  CRow,
+  CCol,
+  CButton,
+  CDataTable,
+  CCard,
+  CPopover,
+  CButtonToolbar,
+} from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import DatePicker from 'react-widgets/DatePicker';
+import { cilCloudDownload, cilSync, cilCalendarCheck } from '@coreui/icons';
+import { dateToUnix } from 'utils/helper';
+import axiosInstance from 'utils/axiosInstance';
+import eventBus from 'utils/eventBus';
+import ConfirmModal from 'components/ConfirmModal';
+import { LoadingButton, useAuth, useDevice, FormattedDate } from 'ucentral-libs';
+import WifiScanResultModalWidget from 'components/WifiScanResultModal';
+import DetailsModal from './DetailsModal';
+
+const DeviceCommands = () => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  // Wifiscan result related
+  const [chosenWifiScan, setChosenWifiScan] = useState(null);
+  const [showScanModal, setShowScanModal] = useState(false);
+  const [chosenWifiScanDate, setChosenWifiScanDate] = useState('');
+  // Delete modal related
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [uuidDelete, setUuidDelete] = useState('');
+  // Details modal related
+  const [showDetailsModal, setShowDetailsModal] = useState(false);
+  const [detailsUuid, setDetailsUuid] = useState('');
+  const [modalDetails, setModalDetails] = useState({});
+  // General states
+  const [commands, setCommands] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [start, setStart] = useState('');
+  const [end, setEnd] = useState('');
+  const [commandLimit, setCommandLimit] = useState(25);
+  // Load more button related
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [showLoadingMore, setShowLoadingMore] = useState(true);
+
+  const toggleScanModal = () => {
+    setShowScanModal(!showScanModal);
+  };
+
+  const toggleConfirmModal = (uuid) => {
+    setUuidDelete(uuid);
+    setShowConfirmModal(!showConfirmModal);
+  };
+
+  const toggleDetailsModal = () => {
+    setShowDetailsModal(!showDetailsModal);
+  };
+
+  const showMoreCommands = () => {
+    setCommandLimit(commandLimit + 50);
+  };
+
+  const modifyStart = (value) => {
+    setStart(value);
+  };
+
+  const modifyEnd = (value) => {
+    setEnd(value);
+  };
+
+  const deleteCommandFromList = (commandUuid) => {
+    const indexToDelete = commands.map((e) => e.UUID).indexOf(commandUuid);
+    const newCommands = commands;
+    newCommands.splice(indexToDelete, 1);
+    setCommands(newCommands);
+  };
+
+  const getCommands = () => {
+    if (loading) return;
+    setLoadingMore(true);
+    setLoading(true);
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+      params: {
+        limit: commandLimit,
+      },
+    };
+
+    let extraParams = '&newest=true';
+    if (start !== '' && end !== '') {
+      const utcStart = new Date(start).toISOString();
+      const utcEnd = new Date(end).toISOString();
+      options.params.startDate = dateToUnix(utcStart);
+      options.params.endDate = dateToUnix(utcEnd);
+      extraParams = '';
+    }
+
+    axiosInstance
+      .get(
+        `${endpoints.owgw}/api/v1/commands?serialNumber=${encodeURIComponent(
+          deviceSerialNumber,
+        )}${extraParams}`,
+        options,
+      )
+      .then((response) => {
+        setCommands(response.data.commands);
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+        setLoadingMore(false);
+      });
+  };
+
+  const downloadTrace = (uuid) => {
+    const options = {
+      headers: {
+        Accept: 'application/octet-stream',
+        Authorization: `Bearer ${currentToken}`,
+      },
+      responseType: 'arraybuffer',
+    };
+
+    axiosInstance
+      .get(`${endpoints.owgw}/api/v1/file/${uuid}?serialNumber=${deviceSerialNumber}`, options)
+      .then((response) => {
+        const blob = new Blob([response.data], { type: 'application/octet-stream' });
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = `Trace_${uuid}.pcap`;
+        link.click();
+      });
+  };
+
+  const deleteCommand = async () => {
+    if (uuidDelete === '') {
+      return false;
+    }
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+    return axiosInstance
+      .delete(`${endpoints.owgw}/api/v1/command/${uuidDelete}`, options)
+      .then(() => {
+        deleteCommandFromList(uuidDelete);
+        setUuidDelete('');
+        return true;
+      })
+      .catch(() => {
+        setUuidDelete('');
+        return false;
+      });
+  };
+
+  const toggleDetails = (item) => {
+    if (item.command === 'wifiscan') {
+      setChosenWifiScan(item.results.status.scan);
+      setChosenWifiScanDate(item.completed);
+      setShowScanModal(true);
+    } else if (item.command === 'trace' && item.waitingForFile === 0) {
+      downloadTrace(item.UUID);
+    } else {
+      setModalDetails(item.results ?? item);
+      setDetailsUuid(item.UUID);
+      toggleDetailsModal();
+    }
+  };
+
+  const toggleResponse = (item) => {
+    setModalDetails(item);
+    setDetailsUuid(item.UUID);
+    toggleDetailsModal();
+  };
+
+  const refreshCommands = () => {
+    getCommands();
+  };
+
+  const columns = [
+    { key: 'submitted', label: t('common.submitted'), filter: false, _style: { width: '20%' } },
+    { key: 'command', label: t('common.command'), _style: { width: '15%' } },
+    { key: 'executed', label: t('common.executed'), filter: false, _style: { width: '16%' } },
+    { key: 'completed', label: t('common.completed'), filter: false, _style: { width: '16%' } },
+    { key: 'errorCode', label: t('common.error_code'), filter: false, _style: { width: '8%' } },
+    {
+      key: 'show_buttons',
+      label: '',
+      sorter: false,
+      filter: false,
+      _style: { width: '1%' },
+    },
+  ];
+
+  useEffect(() => {
+    if (deviceSerialNumber && start !== '' && end !== '') {
+      getCommands();
+    } else if (deviceSerialNumber && start === '' && end === '') {
+      getCommands();
+    }
+  }, [deviceSerialNumber, start, end]);
+
+  useEffect(() => {
+    eventBus.on('actionCompleted', () => refreshCommands());
+
+    return () => {
+      eventBus.remove('actionCompleted');
+    };
+  }, []);
+
+  useEffect(() => {
+    if (deviceSerialNumber) {
+      setCommandLimit(25);
+      setLoadingMore(false);
+      setShowLoadingMore(true);
+      setStart('');
+      setEnd('');
+      getCommands();
+    }
+  }, [deviceSerialNumber]);
+
+  useEffect(() => {
+    if (commandLimit !== 25) {
+      getCommands();
+    }
+  }, [commandLimit]);
+
+  useEffect(() => {
+    if (commands.length === 0 || (commands.length > 0 && commands.length < commandLimit)) {
+      setShowLoadingMore(false);
+    } else {
+      setShowLoadingMore(true);
+    }
+  }, [commands]);
+
+  return (
+    <div>
+      <CWidgetDropdown
+        className="m-0"
+        inverse="true"
+        color="gradient-primary"
+        header={t('commands.title')}
+        footerSlot={
+          <div className="pb-1 px-3">
+            <CRow className="mb-2">
+              <CCol>
+                From:
+                <DatePicker includeTime onChange={(date) => modifyStart(date)} />
+              </CCol>
+              <CCol>
+                To:
+                <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
+              </CCol>
+            </CRow>
+            <CCard>
+              <div className="overflow-auto" style={{ height: '200px' }}>
+                <CDataTable
+                  addTableClasses="ignore-overflow table-sm"
+                  border
+                  loading={loading}
+                  items={commands ?? []}
+                  fields={columns}
+                  className="text-white"
+                  sorterValue={{ column: 'created', desc: 'true' }}
+                  scopedSlots={{
+                    command: (item) => <td className="align-middle">{item.command}</td>,
+                    completed: (item) => (
+                      <td className="align-middle">
+                        {item.completed && item.completed !== 0 ? (
+                          <FormattedDate date={item.completed} />
+                        ) : (
+                          'Pending'
+                        )}
+                      </td>
+                    ),
+                    executed: (item) => (
+                      <td className="align-middle">
+                        {item.executed && item.executed !== 0 ? (
+                          <FormattedDate date={item.executed} />
+                        ) : (
+                          'Pending'
+                        )}
+                      </td>
+                    ),
+                    submitted: (item) => (
+                      <td className="align-middle">
+                        {item.submitted && item.submitted !== '' ? (
+                          <FormattedDate date={item.submitted} />
+                        ) : (
+                          'Pending'
+                        )}
+                      </td>
+                    ),
+                    errorCode: (item) => <td className="align-middle">{item.errorCode}</td>,
+                    show_buttons: (item, index) => (
+                      <td className="align-middle">
+                        <CButtonToolbar
+                          role="group"
+                          className="justify-content-flex-end"
+                          style={{ width: '160px' }}
+                        >
+                          <CPopover
+                            content={
+                              item.command === 'trace' ? t('common.download') : t('common.result')
+                            }
+                          >
+                            <CButton
+                              color="primary"
+                              variant="outline"
+                              shape="square"
+                              size="sm"
+                              className="mx-2"
+                              onClick={() => {
+                                toggleDetails(item);
+                              }}
+                            >
+                              {item.command === 'trace' ? (
+                                <CIcon
+                                  name="cil-cloud-download"
+                                  content={cilCloudDownload}
+                                  size="md"
+                                />
+                              ) : (
+                                <CIcon
+                                  name="cil-calendar-check"
+                                  content={cilCalendarCheck}
+                                  size="md"
+                                />
+                              )}
+                            </CButton>
+                          </CPopover>
+                          <CPopover content={t('common.details')}>
+                            <CButton
+                              color="primary"
+                              variant="outline"
+                              shape="square"
+                              size="sm"
+                              className="mx-2"
+                              onClick={() => {
+                                toggleResponse(item);
+                              }}
+                            >
+                              <CIcon name="cilList" size="md" />
+                            </CButton>
+                          </CPopover>
+                          <CPopover content={t('common.delete')}>
+                            <CButton
+                              color="primary"
+                              variant="outline"
+                              shape="square"
+                              size="sm"
+                              className="mx-2"
+                              onClick={() => {
+                                toggleConfirmModal(item.UUID, index);
+                              }}
+                            >
+                              <CIcon name="cilTrash" size="mdå" />
+                            </CButton>
+                          </CPopover>
+                        </CButtonToolbar>
+                      </td>
+                    ),
+                  }}
+                />
+
+                {showLoadingMore && (
+                  <div className="mb-3">
+                    <LoadingButton
+                      label={t('common.view_more')}
+                      isLoadingLabel={t('common.loading_more_ellipsis')}
+                      isLoading={loadingMore}
+                      action={showMoreCommands}
+                      variant="outline"
+                    />
+                  </div>
+                )}
+              </div>
+            </CCard>
+          </div>
+        }
+      >
+        <div className="text-right float-right">
+          <CButton onClick={refreshCommands} size="sm">
+            <CIcon name="cil-sync" content={cilSync} className="text-white" size="2xl" />
+          </CButton>
+        </div>
+      </CWidgetDropdown>
+
+      <WifiScanResultModalWidget
+        show={showScanModal}
+        toggle={toggleScanModal}
+        scanResults={chosenWifiScan}
+        date={chosenWifiScanDate}
+      />
+      <ConfirmModal show={showConfirmModal} toggle={toggleConfirmModal} action={deleteCommand} />
+      <DetailsModal
+        t={t}
+        show={showDetailsModal}
+        toggle={toggleDetailsModal}
+        details={modalDetails}
+        commandUuid={detailsUuid}
+      />
+    </div>
+  );
+};
+
+export default DeviceCommands;

src/components/ConfigurationDisplay/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  CRow,
+  CCol,
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CLabel,
+  CPopover,
+  CButton,
+} from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilSync } from '@coreui/icons';
+import { prettyDate } from 'utils/helper';
+import { useTranslation } from 'react-i18next';
+import { CopyToClipboardButton } from 'ucentral-libs';
+
+const ConfigurationDisplay = ({ getData, deviceConfig }) => {
+  const { t } = useTranslation();
+  return (
+    <CCard className="m-0">
+      <CCardHeader className="dark-header">
+        <div className="d-flex flex-row-reverse align-items-center">
+          <div className="text-right">
+            <CPopover content={t('common.refresh')}>
+              <CButton size="sm" color="info" onClick={getData}>
+                <CIcon content={cilSync} />
+              </CButton>
+            </CPopover>
+          </div>
+        </div>
+      </CCardHeader>
+      <CCardBody>
+        <h5>
+          {t('configuration.title')}
+          <CopyToClipboardButton
+            t={t}
+            size="sm"
+            content={JSON.stringify(deviceConfig?.configuration ?? {})}
+          />
+        </h5>
+        <CRow>
+          <CCol md="2" xl="2" xxl="1">
+            <CLabel>{t('configuration.last_configuration_change')}: </CLabel>
+          </CCol>
+          <CCol>{prettyDate(deviceConfig?.lastConfigurationChange)}</CCol>
+        </CRow>
+        <pre className="ignore">{JSON.stringify(deviceConfig?.configuration ?? {}, null, 4)}</pre>
+      </CCardBody>
+    </CCard>
+  );
+};
+
+ConfigurationDisplay.propTypes = {
+  getData: PropTypes.func.isRequired,
+  deviceConfig: PropTypes.instanceOf(Object),
+};
+
+ConfigurationDisplay.defaultProps = {
+  deviceConfig: null,
+};
+
+export default ConfigurationDisplay;

src/components/ConfigureModal/index.js

@@ -12,21 +12,24 @@ import {
   CTextarea,
   CInvalidFeedback,
   CInputFile,
+  CPopover,
 } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth, useDevice } from 'ucentral-libs';
 import { checkIfJson } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
 import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
-import styles from './index.module.scss';
 
 const ConfigureModal = ({ show, toggleModal }) => {
   const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
   const [hadSuccess, setHadSuccess] = useState(false);
   const [hadFailure, setHadFailure] = useState(false);
   const [doingNow, setDoingNow] = useState(false);
@@ -36,7 +39,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
   const [checkingIfSure, setCheckingIfSure] = useState(false);
   const [errorJson, setErrorJson] = useState(false);
   const [inputKey, setInputKey] = useState(0);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+
   let fileReader;
 
   const confirmingIfSure = () => {
@@ -69,10 +72,8 @@ const ConfigureModal = ({ show, toggleModal }) => {
     setHadSuccess(false);
     setWaiting(true);
 
-    const token = getToken();
-
     const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
       when: 0,
       UUID: 1,
       configuration: JSON.parse(newConfig),
@@ -80,11 +81,15 @@ const ConfigureModal = ({ show, toggleModal }) => {
 
     const headers = {
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
     };
 
     axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/configure`, parameters, { headers })
+      .post(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}/configure`,
+        parameters,
+        { headers },
+      )
       .then(() => {
         setHadSuccess(true);
       })
@@ -122,9 +127,16 @@ const ConfigureModal = ({ show, toggleModal }) => {
   };
 
   return (
-    <CModal show={show} onClose={toggleModal}>
-      <CModalHeader closeButton>
-        <CModalTitle>{t('configure.title')}</CModalTitle>
+    <CModal show={show} onClose={toggleModal} size="lg">
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">{t('configure.title')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggleModal}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
       {hadSuccess ? (
         <SuccessfulActionModalBody toggleModal={toggleModal} />
@@ -132,7 +144,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
         <div>
           <CModalBody>
             <CRow>
-              <CCol md="10" className={styles.spacedColumn}>
+              <CCol md="10" className="mt-1">
                 <h6>{t('configure.enter_new')}</h6>
               </CCol>
               <CCol>
@@ -147,7 +159,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
                 </CButton>
               </CCol>
             </CRow>
-            <CRow className={styles.spacedRow}>
+            <CRow className="mt-4">
               <CCol>
                 <CForm>
                   <CTextarea
@@ -165,7 +177,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
                 </CForm>
               </CCol>
             </CRow>
-            <CRow className={styles.spacedRow}>
+            <CRow className="mt-4">
               <CCol>{t('configure.choose_file')}</CCol>
               <CCol>
                 <CInputFile
@@ -191,7 +203,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
               color="primary"
               onClick={confirmingIfSure}
             >
-              {t('common.submit')}
+              {t('common.save')}
             </CButton>
             <CButton
               hidden={!checkingIfSure}
@@ -199,7 +211,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
               color="primary"
               onClick={() => doAction(false)}
             >
-              {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
+              {waiting && !doingNow ? t('common.saving') : t('common.yes')} {'   '}
               <CSpinner color="light" hidden={!waiting || doingNow} component="span" size="sm" />
             </CButton>
             <CButton color="secondary" onClick={toggleModal}>

src/components/ConfigureModal/index.module.scss

@@ -1,7 +0,0 @@
-.spacedRow {
-  margin-top: 20px;
-}
-
-.spacedColumn {
-  margin-top: 3px;
-}

src/components/ConfirmModal/index.js

@@ -9,9 +9,11 @@ import {
   CModalFooter,
   CSpinner,
   CBadge,
+  CPopover,
 } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import PropTypes from 'prop-types';
-import styles from './index.module.scss';
 
 const ConfirmModal = ({ show, toggle, action }) => {
   const { t } = useTranslation();
@@ -63,9 +65,16 @@ const ConfirmModal = ({ show, toggle, action }) => {
   }, [show]);
 
   return (
-    <CModal className={styles.modal} show={show} onClose={toggle}>
-      <CModalHeader closeButton>
-        <CModalTitle>{t('delete_command.title')}</CModalTitle>
+    <CModal className="text-dark" show={show} onClose={toggle}>
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">{t('delete_command.title')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
       <CModalBody>
         <h6>{t('delete_command.explanation')}</h6>
@@ -74,9 +83,6 @@ const ConfirmModal = ({ show, toggle, action }) => {
         <CButton disabled={loading} color="primary" onClick={() => doAction()}>
           {getButtonContent()}
         </CButton>
-        <CButton color="secondary" onClick={toggle}>
-          {t('common.cancel')}
-        </CButton>
       </CModalFooter>
     </CModal>
   );

src/components/ConfirmModal/index.module.scss

@@ -1,3 +0,0 @@
-.modal {
-  color: #3c4b64;
-}

src/components/CreateUserModal/index.js

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { CModal, CModalHeader, CModalBody, CModalTitle, CPopover, CButton } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilSave, cilX } from '@coreui/icons';
+import { CreateUserForm, useFormFields, useAuth, useToast } from 'ucentral-libs';
+import axiosInstance from 'utils/axiosInstance';
+import { testRegex, validateEmail } from 'utils/helper';
+
+const initialState = {
+  name: {
+    value: '',
+    error: false,
+    optional: true,
+  },
+  email: {
+    value: '',
+    error: false,
+  },
+  currentPassword: {
+    value: '',
+    error: false,
+  },
+  changePassword: {
+    value: 'on',
+    error: false,
+  },
+  userRole: {
+    value: 'admin',
+    error: false,
+  },
+  notes: {
+    value: '',
+    error: false,
+    optional: true,
+  },
+  description: {
+    value: '',
+    error: false,
+    optional: true,
+  },
+};
+
+const CreateUserModal = ({ show, toggle, getUsers }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { addToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [policies, setPolicies] = useState({
+    passwordPolicy: '',
+    passwordPattern: '',
+    accessPolicy: '',
+  });
+  const [formFields, updateFieldWithId, updateField, setFormFields] = useFormFields(initialState);
+
+  const toggleChange = () => {
+    updateField('changePassword', { value: !formFields.changePassword.value });
+  };
+
+  const createUser = () => {
+    setLoading(true);
+
+    const parameters = {
+      id: 0,
+    };
+
+    let validationSuccess = true;
+
+    for (const [key, value] of Object.entries(formFields)) {
+      if (!value.optional && value.value === '') {
+        validationSuccess = false;
+        updateField(key, { value: value.value, error: true });
+      } else if (key === 'currentPassword' && !testRegex(value.value, policies.passwordPattern)) {
+        validationSuccess = false;
+        updateField(key, { value: value.value, error: true });
+      } else if (key === 'email' && !validateEmail(value.value)) {
+        validationSuccess = false;
+        updateField(key, { value: value.value, error: true });
+      } else if (key === 'notes') {
+        parameters[key] = [{ note: value.value }];
+      } else if (key === 'changePassword') {
+        parameters[key] = value.value === 'on';
+      } else {
+        parameters[key] = value.value;
+      }
+    }
+
+    if (validationSuccess) {
+      const headers = {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      };
+
+      axiosInstance
+        .post(`${endpoints.owsec}/api/v1/user/0`, parameters, {
+          headers,
+        })
+        .then(() => {
+          getUsers();
+          setFormFields(initialState);
+          addToast({
+            title: t('common.success'),
+            body: t('user.create_success'),
+            color: 'success',
+            autohide: true,
+          });
+          toggle();
+        })
+        .catch(() => {
+          addToast({
+            title: t('common.error'),
+            body: t('user.create_failure'),
+            color: 'danger',
+            autohide: true,
+          });
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const getPasswordPolicy = () => {
+    axiosInstance
+      .post(`${endpoints.owsec}/api/v1/oauth2?requirements=true`, {})
+      .then((response) => {
+        const newPolicies = response.data;
+        newPolicies.accessPolicy = `${endpoints.owsec}${newPolicies.accessPolicy}`;
+        newPolicies.passwordPolicy = `${endpoints.owsec}${newPolicies.passwordPolicy}`;
+        setPolicies(response.data);
+      })
+      .catch(() => {});
+  };
+
+  useEffect(() => {
+    if (policies.passwordPattern.length === 0) getPasswordPolicy();
+  }, []);
+
+  useEffect(() => {
+    setFormFields(initialState);
+  }, [show]);
+
+  return (
+    <CModal show={show} onClose={toggle} size="xl">
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">{t('user.create')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('user.create')}>
+            <CButton color="primary" variant="outline" onClick={createUser} disabled={loading}>
+              <CIcon content={cilSave} />
+            </CButton>
+          </CPopover>
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
+      </CModalHeader>
+      <CModalBody>
+        <CreateUserForm
+          t={t}
+          fields={formFields}
+          updateField={updateFieldWithId}
+          policies={policies}
+          toggleChange={toggleChange}
+        />
+      </CModalBody>
+    </CModal>
+  );
+};
+
+CreateUserModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  getUsers: PropTypes.func.isRequired,
+};
+
+export default React.memo(CreateUserModal);

src/components/DeleteLogModal/index.js

@@ -1,17 +1,29 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CModal, CModalHeader, CModalTitle, CModalBody, CCol, CRow } from '@coreui/react';
+import {
+  CModal,
+  CModalHeader,
+  CModalTitle,
+  CModalBody,
+  CCol,
+  CRow,
+  CPopover,
+  CButton,
+} from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import ConfirmFooter from 'components/ConfirmFooter';
+import { ConfirmFooter, useAuth, useDevice, useToast } from 'ucentral-libs';
 import { dateToUnix } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
 import eventBus from 'utils/eventBus';
-import styles from './index.module.scss';
 
-const DeleteLogModal = ({ serialNumber, show, toggle, object }) => {
+const DeleteLogModal = ({ show, toggle, object }) => {
   const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { addToast } = useToast();
+  const { deviceSerialNumber } = useDevice();
   const [loading, setLoading] = useState(false);
   const [maxDate, setMaxDate] = useState(new Date().toString());
 
@@ -27,16 +39,23 @@ const DeleteLogModal = ({ serialNumber, show, toggle, object }) => {
     const options = {
       headers: {
         Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
       },
       params: {
         endDate: dateToUnix(maxDate),
       },
     };
     return axiosInstance
-      .delete(`/device/${serialNumber}/${object}`, options)
+      .delete(`${endpoints.owgw}/api/v1/device/${deviceSerialNumber}/${object}`, options)
       .then(() => {})
-      .catch(() => {})
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('commands.error_delete_log', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      })
       .finally(() => {
         if (object === 'healthchecks')
           eventBus.dispatch('deletedHealth', { message: 'Healthcheck was deleted' });
@@ -53,18 +72,25 @@ const DeleteLogModal = ({ serialNumber, show, toggle, object }) => {
   }, [show]);
 
   return (
-    <CModal className={styles.modal} show={show} onClose={toggle}>
-      <CModalHeader closeButton>
-        <CModalTitle>
+    <CModal className="text-dark" show={show} onClose={toggle}>
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">
           {object === 'healthchecks'
             ? t('delete_logs.healthchecks_title')
             : t('delete_logs.device_logs_title')}
         </CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
       <CModalBody>
         <h6>{t('delete_logs.explanation', { object })}</h6>
-        <CRow className={styles.spacedRow}>
-          <CCol md="4" className={styles.spacedDate}>
+        <CRow className="pt-3">
+          <CCol md="4" className="mt-2">
             <p>{t('common.date')}:</p>
           </CCol>
           <CCol xs="12" md="8">
@@ -80,6 +106,7 @@ const DeleteLogModal = ({ serialNumber, show, toggle, object }) => {
         </CRow>
       </CModalBody>
       <ConfirmFooter
+        t={t}
         isShown={show}
         isLoading={loading}
         action={deleteLog}
@@ -94,7 +121,6 @@ DeleteLogModal.propTypes = {
   show: PropTypes.bool.isRequired,
   toggle: PropTypes.func.isRequired,
   object: PropTypes.string.isRequired,
-  serialNumber: PropTypes.string.isRequired,
 };
 
 export default DeleteLogModal;

src/components/DeleteLogModal/index.module.scss

@@ -1,11 +0,0 @@
-.modal {
-  color: #3c4b64;
-}
-
-.spacedRow {
-  margin-top: 20px;
-}
-
-.spacedColumn {
-  margin-top: 7px;
-}

src/components/DeviceActionCard/index.js

@@ -0,0 +1,215 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CButton, CCard, CCardHeader, CCardBody, CRow, CCol } from '@coreui/react';
+import axiosInstance from 'utils/axiosInstance';
+import { LoadingButton, useAuth, useDevice, useToast } from 'ucentral-libs';
+import RebootModal from 'components/RebootModal';
+import DeviceFirmwareModal from 'components/DeviceFirmwareModal';
+import ConfigureModal from 'components/ConfigureModal';
+import TraceModal from 'components/TraceModal';
+import WifiScanModal from 'components/WifiScanModal';
+import BlinkModal from 'components/BlinkModal';
+import FactoryResetModal from 'components/FactoryResetModal';
+import EventQueueModal from 'components/EventQueueModal';
+import TelemetryModal from 'components/TelemetryModal';
+
+const DeviceActions = () => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { addToast } = useToast();
+  const { deviceSerialNumber } = useDevice();
+  const [upgradeStatus, setUpgradeStatus] = useState({
+    loading: false,
+  });
+  const [device, setDevice] = useState({});
+  const [showRebootModal, setShowRebootModal] = useState(false);
+  const [showBlinkModal, setShowBlinkModal] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showTraceModal, setShowTraceModal] = useState(false);
+  const [showScanModal, setShowScanModal] = useState(false);
+  const [connectLoading, setConnectLoading] = useState(false);
+  const [showConfigModal, setConfigModal] = useState(false);
+  const [showFactoryModal, setShowFactoryModal] = useState(false);
+  const [showQueueModal, setShowQueueModal] = useState(false);
+  const [showTelemetryModal, setShowTelemetryModal] = useState(false);
+
+  const toggleRebootModal = () => setShowRebootModal(!showRebootModal);
+
+  const toggleBlinkModal = () => setShowBlinkModal(!showBlinkModal);
+
+  const toggleUpgradeModal = () => setShowUpgradeModal(!showUpgradeModal);
+
+  const toggleTraceModal = () => setShowTraceModal(!showTraceModal);
+
+  const toggleScanModal = () => setShowScanModal(!showScanModal);
+
+  const toggleConfigModal = () => setConfigModal(!showConfigModal);
+
+  const toggleFactoryResetModal = () => setShowFactoryModal(!showFactoryModal);
+
+  const toggleQueueModal = () => setShowQueueModal(!showQueueModal);
+
+  const toggleTelemetryModal = () => setShowTelemetryModal(!showTelemetryModal);
+
+  const getRttysInfo = () => {
+    setConnectLoading(true);
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}/rtty`,
+        options,
+      )
+      .then((response) => {
+        const url = `https://${response.data.server}:${response.data.viewport}/connect/${response.data.connectionId}`;
+        const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+        if (newWindow) newWindow.opener = null;
+      })
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('connect.error_trying_to_connect', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      })
+      .finally(() => {
+        setConnectLoading(false);
+      });
+  };
+
+  const getDeviceInformation = () => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owgw}/api/v1/device/${deviceSerialNumber}`, options)
+      .then((response) => {
+        setDevice(response.data);
+      })
+      .catch(() => {});
+  };
+
+  useEffect(() => {
+    if (upgradeStatus.result !== undefined) {
+      addToast({
+        title: upgradeStatus.result.success ? t('common.success') : t('common.error'),
+        body: upgradeStatus.result.success
+          ? t('firmware.upgrade_command_submitted')
+          : upgradeStatus.result.error,
+        color: upgradeStatus.result.success ? 'success' : 'danger',
+        autohide: true,
+      });
+      setUpgradeStatus({
+        loading: false,
+      });
+      setShowUpgradeModal(false);
+    }
+  }, [upgradeStatus]);
+
+  useEffect(() => {
+    getDeviceInformation();
+  }, [deviceSerialNumber]);
+
+  return (
+    <CCard>
+      <CCardHeader className="dark-header">
+        <div className="text-value-lg">{t('actions.title')}</div>
+      </CCardHeader>
+      <CCardBody>
+        <CRow>
+          <CCol>
+            <CButton block onClick={toggleRebootModal} color="primary">
+              {t('actions.reboot')}
+            </CButton>
+          </CCol>
+          <CCol>
+            <CButton block onClick={toggleBlinkModal} color="primary">
+              {t('actions.blink')}
+            </CButton>
+          </CCol>
+        </CRow>
+        <CRow className="my-1">
+          <CCol>
+            <CButton block color="primary" onClick={toggleUpgradeModal}>
+              {t('actions.firmware_upgrade')}
+            </CButton>
+          </CCol>
+          <CCol>
+            <CButton block color="primary" onClick={toggleTraceModal}>
+              {t('actions.trace')}
+            </CButton>
+          </CCol>
+        </CRow>
+        <CRow className="my-1">
+          <CCol>
+            <CButton block color="primary" onClick={toggleScanModal}>
+              {t('actions.wifi_scan')}
+            </CButton>
+          </CCol>
+          <CCol>
+            <CButton block color="primary" onClick={toggleFactoryResetModal}>
+              {t('actions.factory_reset')}
+            </CButton>
+          </CCol>
+        </CRow>
+        <CRow className="my-1">
+          <CCol>
+            <LoadingButton
+              isLoading={connectLoading}
+              label={t('actions.connect')}
+              isLoadingLabel={t('actions.connecting')}
+              action={getRttysInfo}
+            />
+          </CCol>
+          <CCol>
+            <CButton block color="primary" onClick={toggleConfigModal}>
+              {t('actions.configure')}
+            </CButton>
+          </CCol>
+        </CRow>
+        <CRow className="my-1">
+          <CCol>
+            <CButton block color="primary" onClick={toggleQueueModal}>
+              {t('commands.event_queue')}
+            </CButton>
+          </CCol>
+          <CCol>
+            <CButton block color="primary" onClick={toggleTelemetryModal}>
+              {t('actions.telemetry')}
+            </CButton>
+          </CCol>
+        </CRow>
+      </CCardBody>
+      <RebootModal show={showRebootModal} toggleModal={toggleRebootModal} />
+      <BlinkModal show={showBlinkModal} toggleModal={toggleBlinkModal} />
+      <DeviceFirmwareModal
+        t={t}
+        endpoints={endpoints}
+        currentToken={currentToken}
+        device={device}
+        show={showUpgradeModal}
+        toggleFirmwareModal={toggleUpgradeModal}
+        setUpgradeStatus={setUpgradeStatus}
+        upgradeStatus={upgradeStatus}
+      />
+      <TraceModal show={showTraceModal} toggleModal={toggleTraceModal} />
+      <WifiScanModal show={showScanModal} toggleModal={toggleScanModal} />
+      <ConfigureModal show={showConfigModal} toggleModal={toggleConfigModal} />
+      <FactoryResetModal show={showFactoryModal} toggleModal={toggleFactoryResetModal} />
+      <EventQueueModal show={showQueueModal} toggle={toggleQueueModal} />
+      <TelemetryModal show={showTelemetryModal} toggle={toggleTelemetryModal} />
+    </CCard>
+  );
+};
+
+export default DeviceActions;

src/components/DeviceCommandsLog/DeviceCommandsCollapse.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { CCollapse, CCardBody } from '@coreui/react';
-import PropTypes from 'prop-types';
-import { Translation } from 'react-i18next';
-
-const DeviceCommandsCollapse = ({ details, responses, index, item, getDetails, getResponse }) => (
-  <Translation>
-    {(t) => (
-      <div>
-        <CCollapse show={details.includes(index)}>
-          <CCardBody>
-            <h5>{t('common.result')}</h5>
-            <div>{getDetails(item, index)}</div>
-          </CCardBody>
-        </CCollapse>
-        <CCollapse show={responses.includes(index)}>
-          <CCardBody>
-            <h5>{t('common.details')}</h5>
-            <div>{getResponse(item, index)}</div>
-          </CCardBody>
-        </CCollapse>
-      </div>
-    )}
-  </Translation>
-);
-
-DeviceCommandsCollapse.propTypes = {
-  details: PropTypes.instanceOf(Array).isRequired,
-  responses: PropTypes.instanceOf(Array).isRequired,
-  index: PropTypes.number.isRequired,
-  getDetails: PropTypes.func.isRequired,
-  getResponse: PropTypes.func.isRequired,
-  item: PropTypes.instanceOf(Object).isRequired,
-};
-
-export default DeviceCommandsCollapse;

src/components/DeviceCommandsLog/index.js

@@ -1,461 +0,0 @@
-/* eslint-disable-rule prefer-destructuring */
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  CWidgetDropdown,
-  CRow,
-  CCol,
-  CCollapse,
-  CButton,
-  CDataTable,
-  CCard,
-  CPopover,
-} from '@coreui/react';
-import CIcon from '@coreui/icons-react';
-import DatePicker from 'react-widgets/DatePicker';
-import { cilCloudDownload, cilSync } from '@coreui/icons';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
-import { prettyDate, dateToUnix } from 'utils/helper';
-import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
-import eventBus from 'utils/eventBus';
-import ConfirmModal from 'components/ConfirmModal';
-import LoadingButton from 'components/LoadingButton';
-import WifiScanResultModalWidget from 'components/WifiScanResultModal';
-import DeviceCommandsCollapse from './DeviceCommandsCollapse';
-import styles from './index.module.scss';
-
-const DeviceCommands = ({ selectedDeviceId }) => {
-  const { t } = useTranslation();
-  // Wifiscan result related
-  const [chosenWifiScan, setChosenWifiScan] = useState(null);
-  const [showScanModal, setShowScanModal] = useState(false);
-  const [chosenWifiScanDate, setChosenWifiScanDate] = useState('');
-  // Delete modal related
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [uuidDelete, setUuidDelete] = useState('');
-  // Main collapsible
-  const [collapse, setCollapse] = useState(false);
-  // Two other open collapsible lists
-  const [details, setDetails] = useState([]);
-  const [responses, setResponses] = useState([]);
-  // General states
-  const [commands, setCommands] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [start, setStart] = useState('');
-  const [end, setEnd] = useState('');
-  const [commandLimit, setCommandLimit] = useState(25);
-  // Load more button related
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [showLoadingMore, setShowLoadingMore] = useState(true);
-
-  const toggle = (e) => {
-    setCollapse(!collapse);
-    e.preventDefault();
-  };
-
-  const toggleScanModal = () => {
-    setShowScanModal(!showScanModal);
-  };
-
-  const toggleConfirmModal = (uuid) => {
-    setUuidDelete(uuid);
-    setShowConfirmModal(!showConfirmModal);
-  };
-
-  const showMoreCommands = () => {
-    setCommandLimit(commandLimit + 50);
-  };
-
-  const modifyStart = (value) => {
-    setStart(value);
-  };
-
-  const modifyEnd = (value) => {
-    setEnd(value);
-  };
-
-  const deleteCommandFromList = (commandUuid) => {
-    const indexToDelete = commands.map((e) => e.UUID).indexOf(commandUuid);
-    const newCommands = commands;
-    newCommands.splice(indexToDelete, 1);
-    setCommands(newCommands);
-  };
-
-  const getCommands = () => {
-    if (loading) return;
-    setLoadingMore(true);
-    setLoading(true);
-
-    const options = {
-      headers: {
-        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
-      },
-      params: {
-        limit: commandLimit,
-      },
-    };
-
-    let extraParams = '&newest=true';
-    if (start !== '' && end !== '') {
-      const utcStart = new Date(start).toISOString();
-      const utcEnd = new Date(end).toISOString();
-      options.params.startDate = dateToUnix(utcStart);
-      options.params.endDate = dateToUnix(utcEnd);
-      extraParams = '';
-    }
-
-    axiosInstance
-      .get(`/commands?serialNumber=${encodeURIComponent(selectedDeviceId)}${extraParams}`, options)
-      .then((response) => {
-        setCommands(response.data.commands);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-        setLoadingMore(false);
-      });
-  };
-
-  const downloadTrace = (uuid) => {
-    const options = {
-      headers: {
-        Accept: 'application/octet-stream',
-        Authorization: `Bearer ${getToken()}`,
-      },
-      responseType: 'arraybuffer',
-    };
-
-    axiosInstance
-      .get(`/file/${uuid}?serialNumber=${selectedDeviceId}`, options)
-      .then((response) => {
-        const blob = new Blob([response.data], { type: 'application/octet-stream' });
-        const link = document.createElement('a');
-        link.href = window.URL.createObjectURL(blob);
-        link.download = `Trace_${uuid}.pcap`;
-        link.click();
-      });
-  };
-
-  const deleteCommand = async () => {
-    if (uuidDelete === '') {
-      return false;
-    }
-    const options = {
-      headers: {
-        Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
-      },
-    };
-    return axiosInstance
-      .delete(`/command/${uuidDelete}`, options)
-      .then(() => {
-        deleteCommandFromList(uuidDelete);
-        setUuidDelete('');
-        return true;
-      })
-      .catch(() => {
-        setUuidDelete('');
-        return false;
-      });
-  };
-
-  const toggleDetails = (item, index) => {
-    if (item.command === 'wifiscan') {
-      setChosenWifiScan(item.results.status.scan);
-      setChosenWifiScanDate(item.completed);
-      setShowScanModal(true);
-    } else if (item.command === 'trace' && item.waitingForFile === 0) {
-      downloadTrace(item.UUID);
-    } else {
-      const position = details.indexOf(index);
-      let newDetails = details.slice();
-
-      if (position !== -1) {
-        newDetails.splice(position, 1);
-      } else {
-        newDetails = [...details, index];
-      }
-      setDetails(newDetails);
-    }
-  };
-
-  const toggleResponse = (item, index) => {
-    const position = responses.indexOf(index);
-    let newResponses = responses.slice();
-
-    if (position !== -1) {
-      newResponses.splice(position, 1);
-    } else {
-      newResponses = [...newResponses, index];
-    }
-    setResponses(newResponses);
-  };
-
-  const refreshCommands = () => {
-    getCommands();
-  };
-
-  const getDetails = (command, index) => {
-    if (!details.includes(index)) {
-      return <pre className="ignore" />;
-    }
-    if (command.results) {
-      const result = command.results;
-      if (result) return <pre className="ignore">{JSON.stringify(result, null, 4)}</pre>;
-    }
-    return <pre className="ignore">{JSON.stringify(command, null, 4)}</pre>;
-  };
-
-  const getResponse = (commandDetails, index) => {
-    if (!responses.includes(index)) {
-      return <pre className="ignore" />;
-    }
-    return <pre className="ignore">{JSON.stringify(commandDetails, null, 4)}</pre>;
-  };
-
-  const columns = [
-    { key: 'UUID', label: t('common.id'), _style: { width: '28%' } },
-    { key: 'command', label: t('common.command'), _style: { width: '10%' } },
-    { key: 'completed', label: t('common.completed'), filter: false, _style: { width: '16%' } },
-    { key: 'submitted', label: t('common.submitted'), filter: false, _style: { width: '16%' } },
-    { key: 'executed', label: t('common.executed'), filter: false, _style: { width: '16%' } },
-    {
-      key: 'show_buttons',
-      label: '',
-      sorter: false,
-      filter: false,
-      _style: { width: '14%' },
-    },
-  ];
-
-  useEffect(() => {
-    if (selectedDeviceId && start !== '' && end !== '') {
-      getCommands();
-    } else if (selectedDeviceId && start === '' && end === '') {
-      getCommands();
-    }
-  }, [selectedDeviceId, start, end]);
-
-  useEffect(() => {
-    eventBus.on('actionCompleted', () => refreshCommands());
-
-    return () => {
-      eventBus.remove('actionCompleted');
-    };
-  }, []);
-
-  useEffect(() => {
-    if (selectedDeviceId) {
-      setCommandLimit(25);
-      setLoadingMore(false);
-      setShowLoadingMore(true);
-      setStart('');
-      setEnd('');
-      getCommands();
-    }
-  }, [selectedDeviceId]);
-
-  useEffect(() => {
-    if (commandLimit !== 25) {
-      getCommands();
-    }
-  }, [commandLimit]);
-
-  useEffect(() => {
-    if (commands.length === 0 || (commands.length > 0 && commands.length < commandLimit)) {
-      setShowLoadingMore(false);
-    } else {
-      setShowLoadingMore(true);
-    }
-  }, [commands]);
-
-  return (
-    <CWidgetDropdown
-      inverse="true"
-      color="gradient-primary"
-      header={t('commands.title')}
-      footerSlot={
-        <div className={styles.footer}>
-          <CCollapse show={collapse}>
-            <CRow>
-              <CCol />
-              <CCol>
-                <div className={styles.alignRight}>
-                  <CButton onClick={refreshCommands} size="sm">
-                    <CIcon
-                      name="cil-sync"
-                      content={cilSync}
-                      className={styles.whiteIcon}
-                      size="2xl"
-                    />
-                  </CButton>
-                </div>
-              </CCol>
-            </CRow>
-            <CRow className={styles.datepickerRow}>
-              <CCol>
-                From:
-                <DatePicker includeTime onChange={(date) => modifyStart(date)} />
-              </CCol>
-              <CCol>
-                To:
-                <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
-              </CCol>
-            </CRow>
-            <CCard>
-              <div className={['overflow-auto', styles.scrollableBox].join(' ')}>
-                <CDataTable
-                  loading={loading}
-                  items={commands ?? []}
-                  fields={columns}
-                  className={styles.whiteIcon}
-                  columnFilter
-                  sorter
-                  sorterValue={{ column: 'submitted', desc: 'true' }}
-                  scopedSlots={{
-                    completed: (item) => (
-                      <td>
-                        {item.completed && item.completed !== 0
-                          ? prettyDate(item.completed)
-                          : 'Pending'}
-                      </td>
-                    ),
-                    submitted: (item) => (
-                      <td>
-                        {item.submitted && item.submitted !== ''
-                          ? prettyDate(item.submitted)
-                          : 'Pending'}
-                      </td>
-                    ),
-                    executed: (item) => (
-                      <td>
-                        {item.executed && item.executed !== ''
-                          ? prettyDate(item.executed)
-                          : 'Pending'}
-                      </td>
-                    ),
-                    show_buttons: (item, index) => (
-                      <td>
-                        <CRow>
-                          <CCol>
-                            <CPopover
-                              content={
-                                item.command === 'trace' ? t('common.download') : t('common.result')
-                              }
-                            >
-                              <CButton
-                                color="primary"
-                                variant={details.includes(index) ? '' : 'outline'}
-                                disabled={
-                                  item.completed === 0 ||
-                                  (item.command === 'trace' && item.waitingForFile !== 0)
-                                }
-                                shape="square"
-                                size="sm"
-                                onClick={() => {
-                                  toggleDetails(item, index);
-                                }}
-                              >
-                                {item.command === 'trace' ? (
-                                  <CIcon content={cilCloudDownload} size="lg" />
-                                ) : (
-                                  <FontAwesomeIcon
-                                    icon={faClipboardCheck}
-                                    className={[styles.customIconHeight, 'c-icon c-icon-lg'].join(
-                                      ' ',
-                                    )}
-                                  />
-                                )}
-                              </CButton>
-                            </CPopover>
-                          </CCol>
-                          <CCol>
-                            <CPopover content={t('common.details')}>
-                              <CButton
-                                color="primary"
-                                variant={responses.includes(index) ? '' : 'outline'}
-                                shape="square"
-                                size="sm"
-                                onClick={() => {
-                                  toggleResponse(item, index);
-                                }}
-                              >
-                                <CIcon name="cilList" size="lg" />
-                              </CButton>
-                            </CPopover>
-                          </CCol>
-                          <CCol>
-                            <CPopover content={t('common.delete')}>
-                              <CButton
-                                color="primary"
-                                variant="outline"
-                                shape="square"
-                                size="sm"
-                                onClick={() => {
-                                  toggleConfirmModal(item.UUID, index);
-                                }}
-                              >
-                                <CIcon name="cilTrash" size="lg" />
-                              </CButton>
-                            </CPopover>
-                          </CCol>
-                        </CRow>
-                      </td>
-                    ),
-                    details: (item, index) => (
-                      <DeviceCommandsCollapse
-                        details={details}
-                        responses={responses}
-                        index={index}
-                        getDetails={getDetails}
-                        getResponse={getResponse}
-                        item={item}
-                      />
-                    ),
-                  }}
-                />
-                <CRow className={styles.loadMoreSpacing}>
-                  {showLoadingMore && (
-                    <LoadingButton
-                      label="View More"
-                      isLoadingLabel="Loading More..."
-                      isLoading={loadingMore}
-                      action={showMoreCommands}
-                      variant="outline"
-                    />
-                  )}
-                </CRow>
-              </div>
-            </CCard>
-          </CCollapse>
-          <CButton show={collapse ? 'true' : 'false'} color="transparent" onClick={toggle} block>
-            <CIcon
-              name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
-              className={styles.whiteIcon}
-              size="lg"
-            />
-          </CButton>
-        </div>
-      }
-    >
-      <WifiScanResultModalWidget
-        show={showScanModal}
-        toggle={toggleScanModal}
-        scanResults={chosenWifiScan}
-        date={chosenWifiScanDate}
-      />
-      <ConfirmModal show={showConfirmModal} toggle={toggleConfirmModal} action={deleteCommand} />
-      <CIcon name="cilNotes" className={styles.whiteIcon} size="lg" />
-    </CWidgetDropdown>
-  );
-};
-
-DeviceCommands.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
-export default DeviceCommands;

src/components/DeviceCommandsLog/index.module.scss

@@ -1,27 +0,0 @@
-.footer {
-  padding: 20px;
-}
-
-.datepickerRow {
-  margin-bottom: 10px;
-}
-
-.scrollableBox {
-  height: 400px;
-}
-
-.whiteIcon {
-  color: white;
-}
-
-.alignRight {
-  float: right;
-}
-
-.customIconHeight {
-  height: 19px;
-}
-
-.loadMoreSpacing {
-  margin-bottom: 1%;
-}

src/components/DeviceConfiguration/DeviceConfigurationModal.js

@@ -10,14 +10,13 @@ import {
 } from '@coreui/react';
 import PropTypes from 'prop-types';
 import { Translation } from 'react-i18next';
-import styles from './index.module.scss';
 
 const DeviceConfigurationModal = ({ show, toggle, configuration }) => (
   <Translation>
     {(t) => (
       <CModal size="lg" show={show} onClose={toggle}>
         <CModalHeader closeButton>
-          <CModalTitle className={styles.modalTitle}>{t('configuration.title')}</CModalTitle>
+          <CModalTitle className="text-dark">{t('configuration.title')}</CModalTitle>
         </CModalHeader>
         <CModalBody>
           <pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre>

src/components/DeviceConfiguration/containers/DeviceConfigurationModal/index.module.scss

@@ -1,3 +0,0 @@
-.modalTitle {
-  color: black;
-}

src/components/DeviceConfiguration/index.js

@@ -4,11 +4,8 @@ import {
   CCard,
   CCardHeader,
   CCardBody,
-  CFormGroup,
   CCol,
   CLabel,
-  CForm,
-  CInput,
   CCollapse,
   CCardFooter,
   CButton,
@@ -16,20 +13,33 @@ import {
   CPopover,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
-import PropTypes from 'prop-types';
-import { cilWindowMaximize, cilClone } from '@coreui/icons';
+import { cilWindowMaximize } from '@coreui/icons';
 import { prettyDate } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
-import DeviceConfigurationModal from './containers/DeviceConfigurationModal/index';
-import styles from './index.module.scss';
+import {
+  CopyToClipboardButton,
+  HideTextButton,
+  NotesTable,
+  useAuth,
+  useDevice,
+  useToast,
+} from 'ucentral-libs';
+import DeviceConfigurationModal from './DeviceConfigurationModal';
 
-const DeviceConfiguration = ({ selectedDeviceId }) => {
+const DeviceConfiguration = () => {
   const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const { addToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [device, setDevice] = useState(null);
-  const [copyPasswordSuccess, setCopyPasswordSuccess] = useState('');
+
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
 
   const toggle = (e) => {
     setCollapse(!collapse);
@@ -40,32 +50,65 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
     setShowModal(!showModal);
   };
 
-  const copyPasswordToClipboard = () => {
-    const password = device.devicePassword === '' ? 'openwifi' : device.devicePassword;
-    navigator.clipboard.writeText(password);
-    setCopyPasswordSuccess(t('common.copied'));
-  };
-
   const getDevice = () => {
     const options = {
       headers: {
         Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
       },
     };
 
     axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}`, options)
+      .get(`${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}`, options)
       .then((response) => {
         setDevice(response.data);
       })
-      .catch(() => {});
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('device.error_fetching_device', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      });
+  };
+
+  const saveNote = (currentNote) => {
+    setLoading(true);
+
+    const parameters = {
+      serialNumber: deviceSerialNumber,
+      notes: [{ note: currentNote }],
+    };
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    axiosInstance
+      .put(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}`,
+        parameters,
+        { headers },
+      )
+      .then(() => {
+        getDevice();
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const getPassword = () => {
+    const password = device.devicePassword === '' ? 'openwifi' : device.devicePassword;
+    return showPassword ? password : '******';
   };
 
   useEffect(() => {
-    if (selectedDeviceId) getDevice();
-    setCopyPasswordSuccess(null);
-  }, [selectedDeviceId]);
+    if (deviceSerialNumber) getDevice();
+  }, [deviceSerialNumber]);
 
   if (device) {
     return (
@@ -73,139 +116,142 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
         <CCard>
           <CCardHeader>
             <CRow>
-              <CCol>{t('configuration.details')}</CCol>
               <CCol>
-                <div className={styles.alignRight}>
-                  <CPopover content={t('configuration.view_json')}>
-                    <CButton color="secondary" onClick={toggleModal} size="sm">
-                      <CIcon content={cilWindowMaximize} />
-                    </CButton>
-                  </CPopover>
-                </div>
+                <div className="text-value-lg">{t('configuration.title')}</div>
+              </CCol>
+              <CCol className="text-right">
+                <CPopover content={t('configuration.view_json')}>
+                  <CButton color="secondary" onClick={toggleModal} size="sm">
+                    <CIcon content={cilWindowMaximize} />
+                  </CButton>
+                </CPopover>
               </CCol>
             </CRow>
           </CCardHeader>
           <CCardBody>
-            <CForm
-              action=""
-              method="post"
-              encType="multipart/form-data"
-              className="form-horizontal"
-            >
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>{t('common.uuid')} : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {device.UUID}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>{t('common.serial_number')} : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {device.serialNumber}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
-                <CCol md="3">
-                  <CLabel>{t('configuration.type')} : </CLabel>
-                </CCol>
-                <CCol xs="12" md="9">
-                  {device.deviceType}
-                </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+            <CRow className="mt-2">
+              <CCol md="3">
+                <CLabel>{t('configuration.uuid')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.UUID}
+              </CCol>
+            </CRow>
+            <CRow className="mt-2">
+              <CCol md="3">
+                <CLabel>{t('common.serial_number')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.serialNumber}
+                <CopyToClipboardButton t={t} size="sm" content={device.serialNumber} />
+              </CCol>
+            </CRow>
+            <CRow className="mt-2">
+              <CCol md="3">
+                <CLabel>{t('configuration.type')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.deviceType}
+              </CCol>
+            </CRow>
+            <CRow className="mt-2">
+              <CCol md="3">
+                <CLabel>{t('firmware.revision')} : </CLabel>
+              </CCol>
+              <CCol xs="12" md="9">
+                {device.firmware}
+              </CCol>
+            </CRow>
+            <CCollapse show={collapse}>
+              <CRow className="mt-2">
                 <CCol md="3">
                   <CLabel>{t('configuration.last_configuration_change')} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {prettyDate(device.lastConfigurationChange)}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+              </CRow>
+              <CRow className="mt-2">
                 <CCol md="3">
                   <CLabel>{t('common.mac')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.macAddress}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+              </CRow>
+              <CRow className="mt-2 mb-4">
                 <CCol md="3">
-                  <CLabel>{t('configuration.created')} : </CLabel>
+                  <CLabel className="align-middle">{t('configuration.device_password')} : </CLabel>
                 </CCol>
-                <CCol xs="12" md="9">
-                  {prettyDate(device.createdTimestamp)}
+                <CCol xs="12" md="2">
+                  {getPassword()}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+                <CCol md="7">
+                  <HideTextButton t={t} toggle={toggleShowPassword} show={showPassword} />
+                  <CopyToClipboardButton
+                    t={t}
+                    size="sm"
+                    content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}
+                  />
+                </CCol>
+              </CRow>
+              <NotesTable
+                t={t}
+                notes={device.notes}
+                loading={loading}
+                addNote={saveNote}
+                descriptionColumn={false}
+              />
+              <CRow className="mt-2">
                 <CCol md="3">
                   <CLabel>{t('configuration.last_configuration_download')} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {prettyDate(device.lastConfigurationDownload)}
                 </CCol>
-              </CFormGroup>
-              <CFormGroup row>
+              </CRow>
+              <CRow className="mt-2">
                 <CCol md="3">
-                  <CLabel>{t('configuration.device_password')} : </CLabel>
+                  <CLabel>{t('common.manufacturer')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  {device.devicePassword === '' ? 'openwifi' : device.devicePassword}
-                  <CPopover content={t('common.copy_to_clipboard')}>
-                    <CButton onClick={copyPasswordToClipboard} size="sm">
-                      <CIcon content={cilClone} />
-                    </CButton>
-                  </CPopover>
-                  {copyPasswordSuccess}
+                  {device.manufacturer}
                 </CCol>
-              </CFormGroup>
-              <CCollapse show={collapse}>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel>{t('common.manufacturer')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    {device.manufacturer}
-                  </CCol>
-                </CFormGroup>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    <CInput id="text-input" name="text-input" placeholder={device.notes} />
-                  </CCol>
-                </CFormGroup>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel>{t('configuration.owner')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    {device.owner}
-                  </CCol>
-                </CFormGroup>
-                <CFormGroup row>
-                  <CCol md="3">
-                    <CLabel>{t('configuration.location')} :</CLabel>
-                  </CCol>
-                  <CCol xs="12" md="9">
-                    {device.location}
-                  </CCol>
-                </CFormGroup>
-              </CCollapse>
-              <CCardFooter>
-                <CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
-                  <CIcon
-                    className={styles.blackIcon}
-                    name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
-                    size="lg"
-                  />
-                </CButton>
-              </CCardFooter>
-            </CForm>
+              </CRow>
+              <CRow className="mt-2">
+                <CCol md="3">
+                  <CLabel>{t('configuration.created')} : </CLabel>
+                </CCol>
+                <CCol xs="12" md="9">
+                  {prettyDate(device.createdTimestamp)}
+                </CCol>
+              </CRow>
+              <CRow className="mt-2">
+                <CCol md="3">
+                  <CLabel>{t('configuration.owner')} :</CLabel>
+                </CCol>
+                <CCol xs="12" md="9">
+                  {device.owner}
+                </CCol>
+              </CRow>
+              <CRow className="mt-2">
+                <CCol md="3">
+                  <CLabel>{t('configuration.location')} :</CLabel>
+                </CCol>
+                <CCol xs="12" md="9">
+                  {device.location}
+                </CCol>
+              </CRow>
+            </CCollapse>
+            <CCardFooter>
+              <CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
+                <CIcon
+                  className="text-dark"
+                  name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
+                  size="lg"
+                />
+              </CButton>
+            </CCardFooter>
           </CCardBody>
         </CCard>
         <DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device} />
@@ -221,8 +267,4 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
   );
 };
 
-DeviceConfiguration.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceConfiguration;

src/components/DeviceConfiguration/index.module.scss

@@ -1,7 +0,0 @@
-.alignRight {
-  float: right;
-}
-
-.blackIcon {
-  color: black;
-}

src/components/DeviceDashboard/index.js

@@ -0,0 +1,360 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DeviceDashboard as Dashboard, useAuth, COLOR_LIST } from 'ucentral-libs';
+import axiosInstance from 'utils/axiosInstance';
+
+const DeviceDashboard = () => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState({
+    status: {
+      datasets: [],
+      labels: [],
+    },
+    healths: {
+      datasets: [],
+      labels: [],
+    },
+    associations: {
+      datasets: [],
+      labels: [],
+    },
+    upTimes: {
+      datasets: [],
+      labels: [],
+    },
+    deviceType: {
+      datasets: [],
+      labels: [],
+    },
+    vendors: {
+      datasets: [],
+      labels: [],
+    },
+    certificates: {
+      datasets: [],
+      labels: [],
+    },
+    commands: {
+      datasets: [],
+      labels: [],
+    },
+    memoryUsed: {
+      datasets: [],
+      labels: [],
+    },
+  });
+
+  const parseData = (newData) => {
+    const parsedData = newData;
+
+    // Status pie chart
+    const statusDs = [];
+    const statusColors = [];
+    const statusLabels = [];
+    let totalDevices = parsedData.status.reduce((acc, point) => acc + point.value, 0);
+    for (const point of parsedData.status) {
+      statusDs.push(Math.round((point.value / totalDevices) * 100));
+      statusLabels.push(point.tag);
+      let color = '';
+      switch (point.tag) {
+        case 'connected':
+          color = '#41B883';
+          break;
+        case 'not connected':
+          color = '#39f';
+          break;
+        case 'disconnected':
+          color = '#e55353';
+          break;
+        default:
+          break;
+      }
+      statusColors.push(color);
+    }
+    parsedData.status = {
+      datasets: [
+        {
+          data: statusDs,
+          backgroundColor: statusColors,
+        },
+      ],
+      labels: statusLabels,
+    };
+
+    // General Health
+    let devicesAt100 = 0;
+    let devicesUp90 = 0;
+    let devicesUp60 = 0;
+    let devicesDown60 = 0;
+
+    // Health pie chart
+    const healthDs = [];
+    const healthColors = [];
+    const healthLabels = [];
+    totalDevices = parsedData.healths.reduce((acc, point) => acc + point.value, 0);
+    for (const point of parsedData.healths) {
+      healthDs.push(Math.round((point.value / totalDevices) * 100));
+      healthLabels.push(point.tag);
+      let color = '';
+      switch (point.tag) {
+        case '100%':
+          color = '#41B883';
+          devicesAt100 += point.value;
+          break;
+        case '>90%':
+          color = '#ffff5c';
+          devicesUp90 += point.value;
+          break;
+        case '>60%':
+          color = '#f9b115';
+          devicesUp60 += point.value;
+          break;
+        case '<60%':
+          color = '#e55353';
+          devicesDown60 += point.value;
+          break;
+        default:
+          color = '#39f';
+          break;
+      }
+      healthColors.push(color);
+    }
+    parsedData.healths = {
+      datasets: [
+        {
+          data: healthDs,
+          backgroundColor: healthColors,
+        },
+      ],
+      labels: healthLabels,
+    };
+    parsedData.overallHealth =
+      totalDevices === 0
+        ? '-'
+        : `${Math.round(
+            (devicesAt100 * 100 + devicesUp90 * 95 + devicesUp60 * 75 + devicesDown60 * 35) /
+              totalDevices,
+          )}%`;
+
+    // Associations pie chart
+    const associationsDs = [];
+    const associationsColors = [];
+    const associationsLabels = [];
+    const totalAssociations = parsedData.associations.reduce((acc, point) => acc + point.value, 0);
+    for (let i = 0; i < parsedData.associations.length; i += 1) {
+      const point = parsedData.associations[i];
+      associationsDs.push(Math.round((point.value / totalAssociations) * 100));
+      associationsLabels.push(point.tag);
+
+      switch (parsedData.associations[i].tag) {
+        case '2G':
+          associationsColors.push('#41B883');
+          break;
+        case '5G':
+          associationsColors.push('#3399ff');
+          break;
+        default:
+          associationsColors.push('#636f83');
+          break;
+      }
+    }
+    parsedData.totalAssociations = totalAssociations;
+    parsedData.associations = {
+      datasets: [
+        {
+          data: associationsDs,
+          backgroundColor: associationsColors,
+        },
+      ],
+      labels: associationsLabels,
+    };
+
+    // Uptime bar chart
+    const uptimeDs = [0, 0, 0, 0];
+    const uptimeLabels = ['now', '>day', '>week', '>month'];
+    const uptimeColors = ['#321fdb', '#321fdb', '#321fdb', '#321fdb'];
+
+    for (const point of parsedData.upTimes) {
+      switch (point.tag) {
+        case 'now':
+          uptimeDs[0] = point.value;
+          break;
+        case '>day':
+          uptimeDs[1] = point.value;
+          break;
+        case '>week':
+          uptimeDs[2] = point.value;
+          break;
+        case '>month':
+          uptimeDs[3] = point.value;
+          break;
+        default:
+          uptimeDs.push(point.value);
+          uptimeLabels.push(point.tag);
+          uptimeColors.push('#321fdb');
+      }
+    }
+    parsedData.upTimes = {
+      datasets: [
+        {
+          label: 'Devices',
+          data: uptimeDs,
+          backgroundColor: uptimeColors,
+        },
+      ],
+      labels: uptimeLabels,
+    };
+
+    // Vendors bar chart
+    const vendorsTypeDs = [];
+    const vendorsColors = [];
+    const vendorsLabels = [];
+    const sortedVendors = parsedData.vendors.sort((a, b) => (a.value < b.value ? 1 : -1));
+    for (const point of sortedVendors) {
+      vendorsTypeDs.push(point.value);
+      vendorsLabels.push(point.tag === '' ? 'Unknown' : point.tag);
+      vendorsColors.push('#eb7474');
+    }
+    const otherVendors = vendorsTypeDs.slice(5).reduce((acc, vendor) => acc + vendor, 0);
+    parsedData.vendors = {
+      datasets: [
+        {
+          label: 'Devices',
+          data: vendorsTypeDs.slice(0, 5).concat([otherVendors]),
+          backgroundColor: vendorsColors,
+        },
+      ],
+      labels: vendorsLabels.slice(0, 5).concat(['Others']),
+    };
+
+    // Device Type pie chart
+    const deviceTypeDs = [];
+    const deviceTypeColors = [];
+    const deviceTypeLabels = [];
+    const sortedTypes = parsedData.deviceType.sort((a, b) => (a.value < b.value ? 1 : -1));
+    for (let i = 0; i < sortedTypes.length; i += 1) {
+      const point = sortedTypes[i];
+
+      deviceTypeDs.push(point.value);
+      deviceTypeLabels.push(point.tag);
+      deviceTypeColors.push(COLOR_LIST[i]);
+    }
+    const otherTypes = deviceTypeDs.slice(5).reduce((acc, type) => acc + type, 0);
+    parsedData.deviceType = {
+      datasets: [
+        {
+          data: deviceTypeDs.slice(0, 5).concat([otherTypes]),
+          backgroundColor: deviceTypeColors,
+        },
+      ],
+      labels: deviceTypeLabels.slice(0, 5).concat(['Others']),
+    };
+
+    // Certificates pie chart
+    const certificatesDs = [];
+    const certificatesColors = [];
+    const certificatesLabels = [];
+    const totalCerts = parsedData.certificates.reduce((acc, point) => acc + point.value, 0);
+    for (const point of parsedData.certificates) {
+      certificatesDs.push(Math.round((point.value / totalCerts) * 100));
+      certificatesLabels.push(point.tag);
+      let color = '';
+      switch (point.tag) {
+        case 'verified':
+          color = '#41B883';
+          break;
+        case 'serial mismatch':
+          color = '#f9b115';
+          break;
+        case 'no certificate':
+          color = '#e55353';
+          break;
+        default:
+          color = '#39f';
+          break;
+      }
+      certificatesColors.push(color);
+    }
+    parsedData.certificates = {
+      datasets: [
+        {
+          data: certificatesDs,
+          backgroundColor: certificatesColors,
+        },
+      ],
+      labels: certificatesLabels,
+    };
+
+    // Commands bar chart
+    const commandsDs = [];
+    const commandsColors = [];
+    const commandsLabels = [];
+    for (const point of parsedData.commands) {
+      commandsDs.push(point.value);
+      commandsLabels.push(point.tag);
+      commandsColors.push('#39f');
+    }
+    parsedData.commands = {
+      datasets: [
+        {
+          label: t('common.commands_executed'),
+          data: commandsDs,
+          backgroundColor: commandsColors,
+        },
+      ],
+      labels: commandsLabels,
+    };
+
+    // Memory Used bar chart
+    const memoryDs = [];
+    const memoryColors = [];
+    const memoryLabels = [];
+    for (const point of parsedData.memoryUsed) {
+      memoryDs.push(point.value);
+      memoryLabels.push(point.tag);
+      memoryColors.push('#636f83');
+    }
+    parsedData.memoryUsed = {
+      datasets: [
+        {
+          label: 'Devices',
+          data: memoryDs,
+          backgroundColor: memoryColors,
+        },
+      ],
+      labels: memoryLabels,
+    };
+
+    setData(parsedData);
+  };
+
+  const getDashboard = () => {
+    setLoading(true);
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+    axiosInstance
+      .get(`${endpoints.owgw}/api/v1/deviceDashboard`, {
+        headers,
+      })
+      .then((response) => {
+        parseData(response.data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getDashboard();
+  }, []);
+
+  return <Dashboard loading={loading} t={t} data={data} />;
+};
+
+export default DeviceDashboard;

src/components/DeviceFirmwareModal/index.js

@@ -0,0 +1,135 @@
+/* eslint-disable no-await-in-loop */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { DeviceFirmwareModal as Modal, useAuth, useToast } from 'ucentral-libs';
+import axiosInstance from 'utils/axiosInstance';
+import { useTranslation } from 'react-i18next';
+
+const DeviceFirmwareModal = ({
+  device,
+  show,
+  toggleFirmwareModal,
+  setUpgradeStatus,
+  upgradeStatus,
+}) => {
+  const { t } = useTranslation();
+  const { addToast } = useToast();
+  const { currentToken, endpoints } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [firmwareVersions, setFirmwareVersions] = useState([]);
+
+  const getPartialFirmware = async (offset) => {
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    return axiosInstance
+      .get(
+        `${endpoints.owfms}/api/v1/firmwares?deviceType=${device.compatible}&limit=500&offset=${offset}`,
+        {
+          headers,
+        },
+      )
+      .then((response) => response.data.firmwares)
+      .catch(() => {
+        addToast({
+          title: t('common.error'),
+          body: t('common.general_error'),
+          color: 'danger',
+          autohide: true,
+        });
+        return [];
+      });
+  };
+
+  const getFirmwareList = async () => {
+    setLoading(true);
+
+    const allFirmwares = [];
+    let continueFirmware = true;
+    let i = 1;
+    while (continueFirmware) {
+      const newFirmwares = await getPartialFirmware(i);
+      if (newFirmwares === null || newFirmwares.length === 0) continueFirmware = false;
+      allFirmwares.push(...newFirmwares);
+      i += 500;
+    }
+    const sortedFirmware = allFirmwares.sort((a, b) => {
+      const firstDate = a.imageDate;
+      const secondDate = b.imageDate;
+      if (firstDate < secondDate) return 1;
+      return firstDate > secondDate ? -1 : 0;
+    });
+    setFirmwareVersions(sortedFirmware);
+
+    setLoading(false);
+  };
+
+  const upgradeToVersion = (uri) => {
+    setUpgradeStatus({
+      loading: true,
+    });
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    const parameters = {
+      serialNumber: device.serialNumber,
+      when: 0,
+      uri,
+    };
+
+    axiosInstance
+      .post(`${endpoints.owgw}/api/v1/device/${device.serialNumber}/upgrade`, parameters, {
+        headers,
+      })
+      .then((response) => {
+        setUpgradeStatus({
+          loading: false,
+          result: {
+            success: response.data.errorCode === 0,
+            error: response.data.errorCode === 0 ? '' : t('firmware.error_fetching_latest'),
+          },
+        });
+      })
+      .catch(() => {
+        setUpgradeStatus({
+          loading: false,
+          result: {
+            success: false,
+            error: t('common.general_error'),
+          },
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (show && device.compatible) getFirmwareList();
+  }, [device, show]);
+
+  return (
+    <Modal
+      t={t}
+      device={device}
+      show={show}
+      toggle={toggleFirmwareModal}
+      firmwareVersions={firmwareVersions}
+      upgradeToVersion={upgradeToVersion}
+      loading={loading}
+      upgradeStatus={upgradeStatus}
+    />
+  );
+};
+
+DeviceFirmwareModal.propTypes = {
+  device: PropTypes.instanceOf(Object).isRequired,
+  show: PropTypes.bool.isRequired,
+  toggleFirmwareModal: PropTypes.func.isRequired,
+  setUpgradeStatus: PropTypes.func.isRequired,
+  upgradeStatus: PropTypes.instanceOf(Object).isRequired,
+};
+
+export default React.memo(DeviceFirmwareModal);

src/components/DeviceHealth/index.js

@@ -2,32 +2,28 @@
 import React, { useState, useEffect } from 'react';
 import {
   CWidgetDropdown,
-  CCollapse,
   CButton,
   CDataTable,
   CCard,
-  CCardBody,
   CRow,
   CCol,
   CProgress,
   CPopover,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
+import { cilTrash } from '@coreui/icons';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
-import PropTypes from 'prop-types';
-import { prettyDate, dateToUnix } from 'utils/helper';
+import { dateToUnix } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
 import eventBus from 'utils/eventBus';
-import LoadingButton from 'components/LoadingButton';
+import { LoadingButton, useAuth, useDevice, FormattedDate } from 'ucentral-libs';
 import DeleteLogModal from 'components/DeleteLogModal';
-import styles from './index.module.scss';
 
-const DeviceHealth = ({ selectedDeviceId }) => {
+const DeviceHealth = () => {
   const { t } = useTranslation();
-  const [collapse, setCollapse] = useState(false);
-  const [details, setDetails] = useState([]);
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
   const [loading, setLoading] = useState(false);
   const [healthChecks, setHealthChecks] = useState([]);
   const [start, setStart] = useState('');
@@ -43,11 +39,6 @@ const DeviceHealth = ({ selectedDeviceId }) => {
     setShowDeleteModal(!showDeleteModal);
   };
 
-  const toggle = (e) => {
-    setCollapse(!collapse);
-    e.preventDefault();
-  };
-
   const modifyStart = (value) => {
     setStart(value);
   };
@@ -68,7 +59,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
     const options = {
       headers: {
         Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
       },
       params: {
         limit: logLimit,
@@ -85,7 +76,12 @@ const DeviceHealth = ({ selectedDeviceId }) => {
     }
 
     axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}/healthchecks${extraParams}`, options)
+      .get(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(
+          deviceSerialNumber,
+        )}/healthchecks${extraParams}`,
+        options,
+      )
       .then((response) => {
         setHealthChecks(response.data.values);
       })
@@ -96,39 +92,15 @@ const DeviceHealth = ({ selectedDeviceId }) => {
       });
   };
 
-  const toggleDetails = (index) => {
-    const position = details.indexOf(index);
-    let newDetails = details.slice();
-
-    if (position !== -1) {
-      newDetails.splice(position, 1);
-    } else {
-      newDetails = [...details, index];
-    }
-    setDetails(newDetails);
-  };
-
-  const getDetails = (index, healthCheckDetails) => {
-    if (details.includes(index))
-      return <pre className="ignore">{JSON.stringify(healthCheckDetails, null, 4)}</pre>;
-    return <pre className="ignore" />;
-  };
-
   const columns = [
-    { key: 'UUID', label: t('common.config_id') },
-    { key: 'recorded', label: t('common.recorded') },
-    { key: 'sanity', label: t('health.sanity') },
-    {
-      key: 'show_details',
-      label: '',
-      _style: { width: '1%' },
-      sorter: false,
-      filter: false,
-    },
+    { key: 'recorded', label: t('common.recorded'), _style: { width: '15%' } },
+    { key: 'UUID', label: t('common.config_id'), _style: { width: '10%' } },
+    { key: 'sanity', label: t('health.sanity'), _style: { width: '5%' } },
+    { key: 'checkDetails', label: t('common.details'), _style: { width: '65%' } },
   ];
 
   useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
       setLogLimit(25);
       setLoadingMore(false);
       setShowLoadingMore(true);
@@ -136,7 +108,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
       setEnd('');
       getDeviceHealth();
     }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);
 
   useEffect(() => {
     if (logLimit !== 25) {
@@ -168,12 +140,12 @@ const DeviceHealth = ({ selectedDeviceId }) => {
   }, [healthChecks]);
 
   useEffect(() => {
-    if (selectedDeviceId && start !== '' && end !== '') {
+    if (deviceSerialNumber && start !== '' && end !== '') {
       getDeviceHealth();
-    } else if (selectedDeviceId && start === '' && end === '') {
+    } else if (deviceSerialNumber && start === '' && end === '') {
       getDeviceHealth();
     }
-  }, [start, end, selectedDeviceId]);
+  }, [start, end, deviceSerialNumber]);
 
   useEffect(() => {
     eventBus.on('deletedHealth', () => getDeviceHealth());
@@ -185,115 +157,83 @@ const DeviceHealth = ({ selectedDeviceId }) => {
 
   return (
     <CWidgetDropdown
-      header={sanityLevel ? `${sanityLevel}%` : t('common.unknown')}
-      text={t('health.title')}
+      className="m-0"
+      header={t('health.title')}
+      text={sanityLevel ? `${sanityLevel}%` : t('common.unknown')}
       value={sanityLevel ?? 100}
       color={barColor}
       inverse="true"
       footerSlot={
-        <div className={styles.footer}>
-          <CProgress className={styles.progressBar} color="white" value={sanityLevel ?? 0} />
-          <CCollapse show={collapse}>
-            <div className={styles.alignRight}>
-              <CPopover content={t('common.delete')}>
-                <CButton
-                  color="light"
-                  shape="square"
-                  size="sm"
-                  onClick={() => {
-                    toggleDeleteModal();
-                  }}
-                >
-                  <CIcon name="cilTrash" size="lg" />
-                </CButton>
-              </CPopover>
+        <div className="pb-1 px-3">
+          <CProgress className="mb-3" color="white" value={sanityLevel ?? 0} />
+          <CRow className="mb-3">
+            <CCol>
+              {t('common.from')}
+              :
+              <DatePicker includeTime onChange={(date) => modifyStart(date)} />
+            </CCol>
+            <CCol>
+              {t('common.to')}
+              :
+              <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
+            </CCol>
+          </CRow>
+          <CCard className="p-0">
+            <div className="overflow-auto" style={{ height: '200px' }}>
+              <CDataTable
+                addTableClasses="ignore-overflow table-sm"
+                border
+                items={healthChecks ?? []}
+                fields={columns}
+                className="text-white"
+                loading={loading}
+                sorterValue={{ column: 'recorded', desc: 'true' }}
+                scopedSlots={{
+                  UUID: (item) => <td className="align-middle">{item.UUID}</td>,
+                  recorded: (item) => (
+                    <td className="align-middle">
+                      <FormattedDate date={item.recorded} />
+                    </td>
+                  ),
+                  sanity: (item) => <td className="align-middle">{`${item.sanity}%`}</td>,
+                  checkDetails: (item) => (
+                    <td>
+                      <pre className="my-0">{JSON.stringify(item.values)}</pre>
+                    </td>
+                  ),
+                }}
+              />
+              {showLoadingMore && (
+                <div className="mb-3">
+                  <LoadingButton
+                    label={t('common.view_more')}
+                    isLoadingLabel={t('common.loading_more_ellipsis')}
+                    isLoading={loadingMore}
+                    action={showMoreLogs}
+                    variant="outline"
+                  />
+                </div>
+              )}
             </div>
-            <CRow className={styles.spacedRow}>
-              <CCol>
-                {t('common.from')}:
-                <DatePicker includeTime onChange={(date) => modifyStart(date)} />
-              </CCol>
-              <CCol>
-                {t('common.to')}:
-                <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
-              </CCol>
-            </CRow>
-            <CCard>
-              <div className={[styles.scrollable, 'overflow-auto'].join(' ')}>
-                <CDataTable
-                  items={healthChecks ?? []}
-                  fields={columns}
-                  className={styles.dataTable}
-                  loading={loading}
-                  sorterValue={{ column: 'recorded', desc: 'true' }}
-                  scopedSlots={{
-                    recorded: (item) => <td>{prettyDate(item.recorded)}</td>,
-                    sanity: (item) => <td>{`${item.sanity}%`}</td>,
-                    show_details: (item, index) => {
-                      if (item.sanity === 100) {
-                        return <></>;
-                      }
-                      return (
-                        <td className="py-2">
-                          <CButton
-                            color="primary"
-                            variant={details.includes(index) ? '' : 'outline'}
-                            shape="square"
-                            size="sm"
-                            onClick={() => {
-                              toggleDetails(index);
-                            }}
-                          >
-                            <CIcon name="cilList" size="lg" />
-                          </CButton>
-                        </td>
-                      );
-                    },
-                    details: (item, index) => (
-                      <CCollapse show={details.includes(index)}>
-                        <CCardBody>
-                          <h5>{t('common.details')}</h5>
-                          <div>{getDetails(index, item.values)}</div>
-                        </CCardBody>
-                      </CCollapse>
-                    ),
-                  }}
-                />
-                <CRow className={styles.loadMoreRow}>
-                  {showLoadingMore && (
-                    <LoadingButton
-                      label={t('common.view_more')}
-                      isLoadingLabel={t('common.loading_more_ellipsis')}
-                      isLoading={loadingMore}
-                      action={showMoreLogs}
-                      variant="outline"
-                    />
-                  )}
-                </CRow>
-              </div>
-            </CCard>
-          </CCollapse>
-          <CButton show={collapse ? 'true' : 'false'} color="transparent" onClick={toggle} block>
-            <CIcon
-              name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
-              className={styles.icon}
-              size="lg"
-            />
-          </CButton>
+          </CCard>
           <DeleteLogModal
-            serialNumber={selectedDeviceId}
+            serialNumber={deviceSerialNumber}
             object="healthchecks"
             show={showDeleteModal}
             toggle={toggleDeleteModal}
           />
         </div>
       }
-    />
+    >
+      <div className="text-right float-right">
+        <CPopover content={t('common.delete')}>
+          <CButton onClick={toggleDeleteModal} size="sm">
+            <CIcon name="cil-trash" content={cilTrash} className="text-white" size="2xl" />
+          </CButton>
+        </CPopover>
+      </div>
+    </CWidgetDropdown>
   );
 };
 
-DeviceHealth.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceHealth;

src/components/DeviceHealth/index.module.scss

@@ -1,31 +0,0 @@
-.icon {
-  color: white;
-}
-
-.dataTable {
-  color: white;
-}
-
-.footer {
-  padding: 20px;
-}
-
-.progressBar {
-  margin-bottom: 20px;
-}
-
-.spacedRow {
-  margin-bottom: 10px;
-}
-
-.loadMoreRow {
-  margin-bottom: 1%;
-}
-
-.scrollable {
-  height: 250px;
-}
-
-.alignRight {
-  float: right;
-}

src/components/DeviceListTable/index.js

@@ -1,115 +1,208 @@
 import React, { useEffect, useState } from 'react';
-import {
-  CBadge,
-  CCardBody,
-  CDataTable,
-  CButton,
-  CLink,
-  CCard,
-  CCardHeader,
-  CRow,
-  CCol,
-  CPopover,
-} from '@coreui/react';
-import ReactPaginate from 'react-paginate';
 import { useTranslation } from 'react-i18next';
-import Select from 'react-select';
-import PropTypes from 'prop-types';
-import { cilSync, cilInfo, cilBadge, cilBan } from '@coreui/icons';
-import CIcon from '@coreui/icons-react';
-import { getToken } from 'utils/authHelper';
+import { useHistory, useLocation } from 'react-router-dom';
 import axiosInstance from 'utils/axiosInstance';
-import { cleanBytesString, cropStringWithEllipsis } from 'utils/helper';
-import meshIcon from 'assets/icons/Mesh.png';
-import apIcon from 'assets/icons/AP.png';
-import internetSwitch from 'assets/icons/Switch.png';
-import iotIcon from 'assets/icons/IotIcon.png';
 import { getItem, setItem } from 'utils/localStorageHelper';
-import styles from './index.module.scss';
+import DeviceSearchBar from 'components/DeviceSearchBar';
+import DeviceFirmwareModal from 'components/DeviceFirmwareModal';
+import FirmwareHistoryModal from 'components/FirmwareHistoryModal';
+import { DeviceListTable, useAuth, useToast } from 'ucentral-libs';
+import meshIcon from '../../assets/icons/Mesh.png';
+import apIcon from '../../assets/icons/AP.png';
+import internetSwitch from '../../assets/icons/Switch.png';
+import iotIcon from '../../assets/icons/IotIcon.png';
 
 const DeviceList = () => {
   const { t } = useTranslation();
-  const [loadedSerials, setLoadedSerials] = useState(false);
-  const [serialNumbers, setSerialNumbers] = useState([]);
-  const [page, setPage] = useState(0);
+  const { addToast } = useToast();
+  const history = useHistory();
+  const { search } = useLocation();
+  const page = new URLSearchParams(search).get('page');
+  const { currentToken, endpoints } = useAuth();
+  const [upgradeStatus, setUpgradeStatus] = useState({
+    loading: false,
+  });
+  const [deleteStatus, setDeleteStatus] = useState({
+    loading: false,
+  });
+  const [deviceCount, setDeviceCount] = useState(0);
   const [pageCount, setPageCount] = useState(0);
-  const [devicesPerPage, setDevicesPerPage] = useState(getItem('devicesPerPage') || 10);
+  const [devicesPerPage, setDevicesPerPage] = useState(getItem('devicesPerPage') || '10');
   const [devices, setDevices] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [showHistoryModal, setHistoryModal] = useState(false);
+  const [showFirmwareModal, setShowFirmwareModal] = useState(false);
+  const [firmwareDevice, setFirmwareDevice] = useState({
+    deviceType: '',
+    serialNumber: '',
+  });
 
-  const getSerialNumbers = () => {
-    const token = getToken();
+  const deviceIcons = {
+    meshIcon,
+    apIcon,
+    internetSwitch,
+    iotIcon,
+  };
+
+  const toggleFirmwareModal = (device) => {
+    setShowFirmwareModal(!showFirmwareModal);
+    if (device !== undefined) setFirmwareDevice(device);
+  };
+
+  const toggleHistoryModal = (device) => {
+    setHistoryModal(!showHistoryModal);
+    if (device !== undefined) setFirmwareDevice(device);
+  };
+
+  const getDeviceInformation = (selectedPage = page, devicePerPage = devicesPerPage) => {
     setLoading(true);
 
-    const headers = {
-      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
     };
 
+    let fullDevices;
+
     axiosInstance
-      .get('/devices?serialOnly=true', {
-        headers,
+      .get(
+        `${endpoints.owgw}/api/v1/devices?deviceWithStatus=true&limit=${devicePerPage}&offset=${
+          devicePerPage * selectedPage + 1
+        }`,
+        options,
+      )
+      .then((response) => {
+        fullDevices = response.data.devicesWithStatus;
+        const serialsToGet = fullDevices.map((device) => device.serialNumber);
+
+        if (serialsToGet.length === 0) {
+          return null;
+        }
+        return axiosInstance.get(
+          `${endpoints.owfms}/api/v1/firmwareAge?select=${serialsToGet}`,
+          options,
+        );
       })
       .then((response) => {
-        setSerialNumbers(response.data.serialNumbers);
-        setLoadedSerials(true);
+        if (response !== null) {
+          fullDevices = fullDevices.map((device, index) => {
+            const foundAgeDate = response.data.ages[index].age !== undefined;
+            if (foundAgeDate) {
+              return {
+                ...device,
+                firmwareInfo: {
+                  age: response.data.ages[index].age,
+                  latest: response.data.ages[index].latest,
+                },
+              };
+            }
+            return device;
+          });
+        }
+        setDevices(fullDevices);
+        setLoading(false);
       })
-      .catch(() => {
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('device.error_fetching_devices', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
         setLoading(false);
       });
   };
 
-  const getDeviceInformation = () => {
-    const token = getToken();
+  const getCount = () => {
     setLoading(true);
 
     const headers = {
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
     };
 
-    const startIndex = page * devicesPerPage;
-    const endIndex = parseInt(startIndex, 10) + parseInt(devicesPerPage, 10);
-    const serialsToGet = serialNumbers
-      .slice(startIndex, endIndex)
-      .map((x) => encodeURIComponent(x))
-      .join(',');
-
     axiosInstance
-      .get(`/devices?deviceWithStatus=true&select=${serialsToGet}`, {
+      .get(`${endpoints.owgw}/api/v1/devices?countOnly=true`, {
         headers,
       })
       .then((response) => {
-        setDevices(response.data.devicesWithStatus);
-        setLoading(false);
+        const devicesCount = response.data.count;
+        const pagesCount = Math.ceil(devicesCount / devicesPerPage);
+        setPageCount(pagesCount);
+        setDeviceCount(devicesCount);
+
+        let selectedPage = page;
+
+        if (page >= pagesCount) {
+          history.push(`/devices?page=${pagesCount - 1}`);
+          selectedPage = pagesCount - 1;
+        }
+        getDeviceInformation(selectedPage);
       })
-      .catch(() => {
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('device.error_fetching_devices', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
         setLoading(false);
       });
   };
 
   const refreshDevice = (serialNumber) => {
-    const token = getToken();
     setLoading(true);
 
-    const headers = {
-      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
     };
 
+    let newDevice;
+
     axiosInstance
-      .get(`/devices?deviceWithStatus=true&select=${encodeURIComponent(serialNumber)}`, {
-        headers,
-      })
+      .get(
+        `${endpoints.owgw}/api/v1/devices?deviceWithStatus=true&select=${encodeURIComponent(
+          serialNumber,
+        )}`,
+        options,
+      )
+      .then(
+        ({
+          data: {
+            devicesWithStatus: [device],
+          },
+        }) => {
+          newDevice = device;
+
+          return axiosInstance.get(
+            `${endpoints.owfms}/api/v1/firmwareAge?select=${serialNumber}`,
+            options,
+          );
+        },
+      )
       .then((response) => {
-        const device = response.data.devicesWithStatus[0];
+        newDevice.firmwareInfo = {
+          age: response.data.ages[0].age,
+          latest: response.data.ages[0].latest,
+        };
         const foundIndex = devices.findIndex((obj) => obj.serialNumber === serialNumber);
         const newList = devices;
-        newList[foundIndex] = device;
+        newList[foundIndex] = newDevice;
         setDevices(newList);
         setLoading(false);
       })
-      .catch(() => {
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('device.error_fetching_devices', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
         setLoading(false);
       });
   };
@@ -117,314 +210,212 @@ const DeviceList = () => {
   const updateDevicesPerPage = (value) => {
     setItem('devicesPerPage', value);
     setDevicesPerPage(value);
+
+    const newPageCount = Math.ceil(deviceCount / value);
+    setPageCount(newPageCount);
+
+    let selectedPage = page;
+
+    if (page >= newPageCount) {
+      history.push(`/devices?page=${newPageCount - 1}`);
+      selectedPage = newPageCount - 1;
+    }
+
+    getDeviceInformation(selectedPage, value);
   };
 
   const updatePageCount = ({ selected: selectedPage }) => {
-    setPage(selectedPage);
+    history.push(`/devices?page=${selectedPage}`);
+    getDeviceInformation(selectedPage);
+  };
+
+  const upgradeToLatest = (device) => {
+    setUpgradeStatus({
+      loading: true,
+    });
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(
+        `${endpoints.owfms}/api/v1/firmwares?deviceType=${device.compatible}&latestOnly=true`,
+        options,
+      )
+      .then((response) => {
+        if (response.data.uri) {
+          const parameters = {
+            serialNumber: device.serialNumber,
+            when: 0,
+            uri: response.data.uri,
+          };
+          return axiosInstance.post(
+            `${endpoints.owgw}/api/v1/device/${device.serialNumber}/upgrade`,
+            parameters,
+            options,
+          );
+        }
+        setUpgradeStatus({
+          loading: false,
+          result: {
+            success: false,
+            error: t('firmware.error_fetching_latest'),
+          },
+        });
+        return null;
+      })
+      .then((response) => {
+        if (response) {
+          setUpgradeStatus({
+            loading: false,
+            result: {
+              success: response.data.errorCode === 0,
+              error: response.data.errorCode === 0 ? '' : t('firmware.error_fetching_latest'),
+            },
+          });
+        }
+      })
+      .catch(() => {
+        setUpgradeStatus({
+          loading: false,
+          result: {
+            success: false,
+            error: t('common.general_error'),
+          },
+        });
+      });
+  };
+
+  const connectRtty = (serialNumber) => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owgw}/api/v1/device/${encodeURIComponent(serialNumber)}/rtty`, options)
+      .then((response) => {
+        const url = `https://${response.data.server}:${response.data.viewport}/connect/${response.data.connectionId}`;
+        const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+        if (newWindow) newWindow.opener = null;
+      })
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('connect.error_trying_to_connect', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      });
+  };
+
+  const deleteDevice = (serialNumber) => {
+    setDeleteStatus({
+      loading: true,
+    });
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .delete(`${endpoints.owgw}/api/v1/device/${encodeURIComponent(serialNumber)}`, options)
+      .then(() => {
+        addToast({
+          title: t('common.success'),
+          body: t('common.device_deleted'),
+          color: 'success',
+          autohide: true,
+        });
+        getCount();
+      })
+      .catch(() => {
+        addToast({
+          title: t('common.error'),
+          body: t('common.unable_to_delete'),
+          color: 'danger',
+          autohide: true,
+        });
+      })
+      .finally(() => {
+        setDeleteStatus({
+          loading: false,
+        });
+      });
   };
 
   useEffect(() => {
-    getSerialNumbers();
+    if (page === undefined || page === null || Number.isNaN(page)) {
+      history.push(`/devices?page=0`);
+    }
+    getCount();
   }, []);
 
   useEffect(() => {
-    if (loadedSerials) getDeviceInformation();
-  }, [serialNumbers, page, devicesPerPage, loadedSerials]);
-
-  useEffect(() => {
-    if (loadedSerials) {
-      const count = Math.ceil(serialNumbers.length / devicesPerPage);
-      setPageCount(count);
+    if (upgradeStatus.result !== undefined) {
+      addToast({
+        title: upgradeStatus.result.success ? t('common.success') : t('common.error'),
+        body: upgradeStatus.result.success
+          ? t('firmware.upgrade_command_submitted')
+          : upgradeStatus.result.error,
+        color: upgradeStatus.result.success ? 'success' : 'danger',
+        autohide: true,
+      });
+      setUpgradeStatus({
+        loading: false,
+      });
+      setShowFirmwareModal(false);
     }
-  }, [devicesPerPage, loadedSerials]);
+  }, [upgradeStatus]);
 
   return (
-    <DeviceListDisplay
-      devices={devices}
-      loading={loading}
-      updateDevicesPerPage={updateDevicesPerPage}
-      devicesPerPage={devicesPerPage}
-      pageCount={pageCount}
-      updatePage={updatePageCount}
-      pageRangeDisplayed={5}
-      refreshDevice={refreshDevice}
-      t={t}
-    />
+    <div>
+      <DeviceListTable
+        currentPage={page}
+        t={t}
+        searchBar={<DeviceSearchBar />}
+        devices={devices}
+        loading={loading}
+        updateDevicesPerPage={updateDevicesPerPage}
+        devicesPerPage={devicesPerPage}
+        pageCount={pageCount}
+        updatePage={updatePageCount}
+        pageRangeDisplayed={5}
+        refreshDevice={refreshDevice}
+        toggleFirmwareModal={toggleFirmwareModal}
+        toggleHistoryModal={toggleHistoryModal}
+        upgradeToLatest={upgradeToLatest}
+        upgradeStatus={upgradeStatus}
+        deviceIcons={deviceIcons}
+        connectRtty={connectRtty}
+        deleteDevice={deleteDevice}
+        deleteStatus={deleteStatus}
+      />
+      <DeviceFirmwareModal
+        endpoints={endpoints}
+        currentToken={currentToken}
+        device={firmwareDevice}
+        show={showFirmwareModal}
+        toggleFirmwareModal={toggleFirmwareModal}
+        setUpgradeStatus={setUpgradeStatus}
+        upgradeStatus={upgradeStatus}
+      />
+      <FirmwareHistoryModal
+        serialNumber={firmwareDevice.serialNumber}
+        show={showHistoryModal}
+        toggle={toggleHistoryModal}
+      />
+    </div>
   );
 };
 
-const DeviceListDisplay = ({
-  devices,
-  devicesPerPage,
-  loading,
-  updateDevicesPerPage,
-  pageCount,
-  updatePage,
-  refreshDevice,
-  t,
-}) => {
-  const columns = [
-    { key: 'deviceType', label: '', filter: false, sorter: false, _style: { width: '5%' } },
-    { key: 'verifiedCertificate', label: t('common.certificate'), _style: { width: '1%' } },
-    { key: 'serialNumber', label: t('common.serial_number'), _style: { width: '5%' } },
-    { key: 'UUID', label: t('common.config_id'), _style: { width: '5%' } },
-    { key: 'firmware', label: t('common.firmware'), filter: false, _style: { width: '20%' } },
-    { key: 'compatible', label: t('common.compatible'), filter: false, _style: { width: '20%' } },
-    { key: 'txBytes', label: 'Tx', filter: false, _style: { width: '12%' } },
-    { key: 'rxBytes', label: 'Rx', filter: false, _style: { width: '12%' } },
-    { key: 'ipAddress', label: t('common.ip_address'), _style: { width: '16%' } },
-    {
-      key: 'show_details',
-      label: '',
-      _style: { width: '3%' },
-      sorter: false,
-      filter: false,
-    },
-    {
-      key: 'refresh',
-      label: '',
-      _style: { width: '2%' },
-      sorter: false,
-      filter: false,
-    },
-  ];
-
-  const selectOptions = [
-    { value: '10', label: '10' },
-    { value: '25', label: '25' },
-    { value: '50', label: '50' },
-  ];
-
-  const getDeviceIcon = (deviceType) => {
-    if (deviceType === 'AP_Default' || deviceType === 'AP') {
-      return <img src={apIcon} className={styles.icon} alt="AP" />;
-    }
-    if (deviceType === 'MESH') {
-      return <img src={meshIcon} className={styles.icon} alt="MESH" />;
-    }
-    if (deviceType === 'SWITCH') {
-      return <img src={internetSwitch} className={styles.icon} alt="SWITCH" />;
-    }
-    if (deviceType === 'IOT') {
-      return <img src={iotIcon} className={styles.icon} alt="SWITCH" />;
-    }
-    return null;
-  };
-
-  const getCertBadge = (cert) => {
-    if (cert === 'NO_CERTIFICATE') {
-      return (
-        <div className={styles.certificateWrapper}>
-          <CIcon className={styles.badge} name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
-          <CIcon
-            className={styles.badCertificate}
-            name="cil-ban"
-            content={cilBan}
-            size="3xl"
-            alt="AP"
-          />
-        </div>
-      );
-    }
-
-    let color = 'transparent';
-    switch (cert) {
-      case 'VALID_CERTIFICATE':
-        color = 'danger';
-        break;
-      case 'MISMATCH_SERIAL':
-        return (
-          <CBadge color={color} className={styles.mismatchBackground}>
-            <CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
-          </CBadge>
-        );
-      case 'VERIFIED':
-        color = 'success';
-        break;
-      default:
-        return (
-          <div className={styles.certificateWrapper}>
-            <CIcon
-              className={styles.badge}
-              name="cil-badge"
-              content={cilBadge}
-              size="2xl"
-              alt="AP"
-            />
-            <CIcon
-              className={styles.badCertificate}
-              name="cil-ban"
-              content={cilBan}
-              size="3xl"
-              alt="AP"
-            />
-          </div>
-        );
-    }
-    return (
-      <CBadge color={color}>
-        <CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
-      </CBadge>
-    );
-  };
-
-  const getStatusBadge = (status) => {
-    if (status) {
-      return 'success';
-    }
-    return 'danger';
-  };
-
-  return (
-    <>
-      <CCard>
-        <CCardHeader>
-          <CRow>
-            <CCol />
-            <CCol xs={2}>
-              <Select
-                isClearable={false}
-                options={selectOptions}
-                defaultValue={{ value: devicesPerPage, label: devicesPerPage }}
-                onChange={(value) => updateDevicesPerPage(value.value)}
-              />
-            </CCol>
-          </CRow>
-        </CCardHeader>
-        <CCardBody>
-          <CDataTable
-            items={devices ?? []}
-            fields={columns}
-            hover
-            loading={loading}
-            scopedSlots={{
-              serialNumber: (item) => (
-                <td className={styles.column}>
-                  <CLink
-                    className="c-subheader-nav-link"
-                    aria-current="page"
-                    to={() => `/devices/${item.serialNumber}`}
-                  >
-                    {item.serialNumber}
-                  </CLink>
-                </td>
-              ),
-              deviceType: (item) => (
-                <td className={styles.column}>
-                  <CPopover
-                    content={item.connected ? t('common.connected') : t('common.not_connected')}
-                    placement="top"
-                  >
-                    <CBadge color={getStatusBadge(item.connected)}>
-                      {getDeviceIcon(item.deviceType) ?? item.deviceType}
-                    </CBadge>
-                  </CPopover>
-                </td>
-              ),
-              verifiedCertificate: (item) => (
-                <td className={styles.column}>
-                  <CPopover
-                    content={item.verifiedCertificate ?? t('common.unknown')}
-                    placement="top"
-                  >
-                    {getCertBadge(item.verifiedCertificate)}
-                  </CPopover>
-                </td>
-              ),
-              firmware: (item) => (
-                <td>
-                  <CPopover
-                    content={item.firmware ? item.firmware : t('common.na')}
-                    placement="top"
-                  >
-                    <p>{cropStringWithEllipsis(item.firmware, 16)}</p>
-                  </CPopover>
-                </td>
-              ),
-              compatible: (item) => (
-                <td>
-                  <CPopover
-                    content={item.compatible ? item.compatible : t('common.na')}
-                    placement="top"
-                  >
-                    <p>{cropStringWithEllipsis(item.compatible, 16)}</p>
-                  </CPopover>
-                </td>
-              ),
-              txBytes: (item) => <td>{cleanBytesString(item.txBytes)}</td>,
-              rxBytes: (item) => <td>{cleanBytesString(item.rxBytes)}</td>,
-              ipAddress: (item) => (
-                <td>
-                  <CPopover
-                    content={item.ipAddress ? item.ipAddress : t('common.na')}
-                    placement="top"
-                  >
-                    <p>{cropStringWithEllipsis(item.ipAddress, 20)}</p>
-                  </CPopover>
-                </td>
-              ),
-              refresh: (item) => (
-                <td className="py-2">
-                  <CPopover content={t('common.refresh_device')}>
-                    <CButton
-                      onClick={() => refreshDevice(item.serialNumber)}
-                      color="primary"
-                      variant="outline"
-                      size="sm"
-                    >
-                      <CIcon name="cil-sync" content={cilSync} size="sm" />
-                    </CButton>
-                  </CPopover>
-                </td>
-              ),
-              show_details: (item) => (
-                <td className="py-2">
-                  <CPopover content={t('configuration.details')}>
-                    <CLink
-                      className="c-subheader-nav-link"
-                      aria-current="page"
-                      to={() => `/devices/${item.serialNumber}`}
-                    >
-                      <CButton color="primary" variant="outline" shape="square" size="sm">
-                        <CIcon name="cil-info" content={cilInfo} size="sm" />
-                      </CButton>
-                    </CLink>
-                  </CPopover>
-                </td>
-              ),
-            }}
-          />
-          <ReactPaginate
-            previousLabel="← Previous"
-            nextLabel="Next →"
-            pageCount={pageCount}
-            onPageChange={updatePage}
-            breakClassName="page-item"
-            breakLinkClassName="page-link"
-            containerClassName="pagination"
-            pageClassName="page-item"
-            pageLinkClassName="page-link"
-            previousClassName="page-item"
-            previousLinkClassName="page-link"
-            nextClassName="page-item"
-            nextLinkClassName="page-link"
-            activeClassName="active"
-          />
-        </CCardBody>
-      </CCard>
-    </>
-  );
-};
-
-DeviceListDisplay.propTypes = {
-  devices: PropTypes.instanceOf(Array).isRequired,
-  updateDevicesPerPage: PropTypes.func.isRequired,
-  pageCount: PropTypes.number.isRequired,
-  updatePage: PropTypes.func.isRequired,
-  devicesPerPage: PropTypes.string.isRequired,
-  refreshDevice: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
-  loading: PropTypes.bool.isRequired,
-};
-
 export default DeviceList;

src/components/DeviceListTable/index.module.scss

@@ -1,29 +0,0 @@
-.icon {
-  height: 32px;
-  width: 32px;
-}
-
-.column {
-  text-align: center;
-}
-
-.certificateWrapper {
-  position: relative;
-}
-
-.badge {
-  position: absolute;
-  left: 31%;
-  margin-top: 8%;
-}
-
-.badCertificate {
-  position: absolute;
-  z-index: 99;
-  left: 22%;
-  color: #e55353;
-}
-
-.mismatchBackground {
-  background-color: #ffff5c;
-}

src/components/DeviceLogs/index.js

@@ -12,20 +12,19 @@ import {
   CPopover,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
+import { cilTrash } from '@coreui/icons';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
-import PropTypes from 'prop-types';
-import { prettyDate, dateToUnix } from 'utils/helper';
+import { dateToUnix } from 'utils/helper';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
 import eventBus from 'utils/eventBus';
-import LoadingButton from 'components/LoadingButton';
+import { LoadingButton, useAuth, useDevice, FormattedDate } from 'ucentral-libs';
 import DeleteLogModal from 'components/DeleteLogModal';
-import styles from './index.module.scss';
 
-const DeviceLogs = ({ selectedDeviceId }) => {
+const DeviceLogs = () => {
   const { t } = useTranslation();
-  const [collapse, setCollapse] = useState(false);
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
   const [details, setDetails] = useState([]);
   const [loading, setLoading] = useState(false);
   const [logs, setLogs] = useState([]);
@@ -40,11 +39,6 @@ const DeviceLogs = ({ selectedDeviceId }) => {
     setShowDeleteModal(!showDeleteModal);
   };
 
-  const toggle = (e) => {
-    setCollapse(!collapse);
-    e.preventDefault();
-  };
-
   const modifyStart = (value) => {
     setStart(value);
   };
@@ -65,7 +59,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
     const options = {
       headers: {
         Accept: 'application/json',
-        Authorization: `Bearer ${getToken()}`,
+        Authorization: `Bearer ${currentToken}`,
       },
       params: {
         limit: logLimit,
@@ -82,7 +76,12 @@ const DeviceLogs = ({ selectedDeviceId }) => {
     }
 
     axiosInstance
-      .get(`/device/${encodeURIComponent(selectedDeviceId)}/logs${extraParams}`, options)
+      .get(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(
+          deviceSerialNumber,
+        )}/logs${extraParams}`,
+        options,
+      )
       .then((response) => {
         setLogs(response.data.values);
       })
@@ -112,9 +111,10 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   };
 
   const columns = [
+    { key: 'recorded', label: t('common.recorded'), _style: { width: '15%' } },
+    { key: 'UUID', label: t('common.config_id'), _style: { width: '10%' } },
+    { key: 'severity', label: t('device_logs.severity'), _style: { width: '5%' } },
     { key: 'log', label: t('device_logs.log') },
-    { key: 'severity', label: t('device_logs.severity') },
-    { key: 'recorded', label: t('common.recorded') },
     {
       key: 'show_details',
       label: '',
@@ -125,7 +125,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   ];
 
   useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
       setLogLimit(25);
       setLoadingMore(false);
       setShowLoadingMore(true);
@@ -133,7 +133,7 @@ const DeviceLogs = ({ selectedDeviceId }) => {
       setEnd('');
       getLogs();
     }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);
 
   useEffect(() => {
     if (logLimit !== 25) {
@@ -150,12 +150,12 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   }, [logs]);
 
   useEffect(() => {
-    if (selectedDeviceId && start !== '' && end !== '') {
+    if (deviceSerialNumber && start !== '' && end !== '') {
       getLogs();
-    } else if (selectedDeviceId && start === '' && end === '') {
+    } else if (deviceSerialNumber && start === '' && end === '') {
       getLogs();
     }
-  }, [start, end, selectedDeviceId]);
+  }, [start, end, deviceSerialNumber]);
 
   useEffect(() => {
     eventBus.on('deletedLogs', () => getLogs());
@@ -168,99 +168,92 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   return (
     <div>
       <CWidgetDropdown
+        className="m-0"
         inverse="true"
         color="gradient-info"
         header={t('device_logs.title')}
         footerSlot={
-          <div className={styles.footer}>
-            <CCollapse show={collapse}>
-              <div className={styles.alignRight}>
-                <CPopover content={t('common.delete')}>
-                  <CButton
-                    color="light"
-                    shape="square"
-                    size="sm"
-                    onClick={() => {
-                      toggleDeleteModal();
-                    }}
-                  >
-                    <CIcon name="cilTrash" size="lg" />
-                  </CButton>
-                </CPopover>
+          <div className="pb-1 px-3">
+            <CRow className="mb-3">
+              <CCol>
+                {t('common.from')}
+                <DatePicker includeTime onChange={(date) => modifyStart(date)} />
+              </CCol>
+              <CCol>
+                {t('common.to')}
+                <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
+              </CCol>
+            </CRow>
+            <CCard>
+              <div className="overflow-auto" style={{ height: '250px' }}>
+                <CDataTable
+                  addTableClasses="ignore-overflow table-sm"
+                  border
+                  items={logs ?? []}
+                  fields={columns}
+                  loading={loading}
+                  className="text-white"
+                  sorterValue={{ column: 'recorded', desc: 'true' }}
+                  scopedSlots={{
+                    recorded: (item) => (
+                      <td className="align-middle">
+                        <FormattedDate date={item.recorded} />
+                      </td>
+                    ),
+                    UUID: (item) => <td className="align-middle">{item.UUID}</td>,
+                    severity: (item) => <td className="align-middle">{item.severity}</td>,
+                    log: (item) => <td className="align-middle">{item.log}</td>,
+                    show_details: (item, index) => (
+                      <td className="align-middle">
+                        <CButton
+                          color="primary"
+                          variant={details.includes(index) ? '' : 'outline'}
+                          shape="square"
+                          size="sm"
+                          onClick={() => {
+                            toggleDetails(index);
+                          }}
+                        >
+                          <CIcon name="cilList" size="md" />
+                        </CButton>
+                      </td>
+                    ),
+                    details: (item, index) => (
+                      <CCollapse show={details.includes(index)}>
+                        <CCardBody>
+                          <h5>{t('common.details')}</h5>
+                          <div>{getDetails(index, item)}</div>
+                        </CCardBody>
+                      </CCollapse>
+                    ),
+                  }}
+                />
+                {showLoadingMore && (
+                  <div className="mb-3">
+                    <LoadingButton
+                      label={t('common.view_more')}
+                      isLoadingLabel={t('common.loading_more_ellipsis')}
+                      isLoading={loadingMore}
+                      action={showMoreLogs}
+                      variant="outline"
+                    />
+                  </div>
+                )}
               </div>
-              <CRow className={styles.datepickerRow}>
-                <CCol>
-                  {t('common.from')}
-                  <DatePicker includeTime onChange={(date) => modifyStart(date)} />
-                </CCol>
-                <CCol>
-                  {t('common.to')}
-                  <DatePicker includeTime onChange={(date) => modifyEnd(date)} />
-                </CCol>
-              </CRow>
-              <CCard>
-                <div className={[styles.scrollableCard, 'overflow-auto'].join(' ')}>
-                  <CDataTable
-                    items={logs ?? []}
-                    fields={columns}
-                    loading={loading}
-                    className={styles.whiteIcon}
-                    sorterValue={{ column: 'recorded', desc: 'true' }}
-                    scopedSlots={{
-                      recorded: (item) => <td>{prettyDate(item.recorded)}</td>,
-                      show_details: (item, index) => (
-                        <td className="py-2">
-                          <CButton
-                            color="primary"
-                            variant={details.includes(index) ? '' : 'outline'}
-                            shape="square"
-                            size="sm"
-                            onClick={() => {
-                              toggleDetails(index);
-                            }}
-                          >
-                            <CIcon name="cilList" size="lg" />
-                          </CButton>
-                        </td>
-                      ),
-                      details: (item, index) => (
-                        <CCollapse show={details.includes(index)}>
-                          <CCardBody>
-                            <h5>{t('common.details')}</h5>
-                            <div>{getDetails(index, item)}</div>
-                          </CCardBody>
-                        </CCollapse>
-                      ),
-                    }}
-                  />
-                  <CRow className={styles.loadMoreRow}>
-                    {showLoadingMore && (
-                      <LoadingButton
-                        label={t('common.view_more')}
-                        isLoadingLabel={t('common.loading_more_ellipsis')}
-                        isLoading={loadingMore}
-                        action={showMoreLogs}
-                        variant="outline"
-                      />
-                    )}
-                  </CRow>
-                </div>
-              </CCard>
-            </CCollapse>
-            <CButton show={collapse ? 'true' : 'false'} color="transparent" onClick={toggle} block>
-              <CIcon
-                name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
-                className={styles.whiteIcon}
-                size="lg"
-              />
-            </CButton>
+            </CCard>
           </div>
         }
       >
-        <CIcon name="cilList" className={styles.whiteIcon} size="lg" />
+        <div className="text-right float-right">
+          <CPopover content={t('common.delete')}>
+            <CButton onClick={toggleDeleteModal} size="sm">
+              <CIcon name="cil-trash" content={cilTrash} className="text-white" size="2xl" />
+            </CButton>
+          </CPopover>
+        </div>
       </CWidgetDropdown>
       <DeleteLogModal
-        serialNumber={selectedDeviceId}
+        serialNumber={deviceSerialNumber}
         object="logs"
         show={showDeleteModal}
         toggle={toggleDeleteModal}
@@ -269,8 +262,4 @@ const DeviceLogs = ({ selectedDeviceId }) => {
   );
 };
 
-DeviceLogs.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceLogs;

src/components/DeviceLogs/index.module.scss

@@ -1,23 +0,0 @@
-.whiteIcon {
-  color: white;
-}
-
-.footer {
-  padding: 20px;
-}
-
-.datepickerRow {
-  margin-bottom: 10px;
-}
-
-.scrollableCard {
-  height: 250px;
-}
-
-.loadMoreRow {
-  margin-bottom: 1%;
-}
-
-.alignRight {
-  float: right;
-}

src/components/DeviceSearchBar/index.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import { useAuth, DeviceSearchBar as SearchBar } from 'ucentral-libs';
+import { checkIfJson } from 'utils/helper';
+
+const DeviceSearchBar = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { currentToken, endpoints } = useAuth();
+  const [socket, setSocket] = useState(null);
+  const [results, setResults] = useState([]);
+  const [waitingSearch, setWaitingSearch] = useState('');
+
+  const search = (value) => {
+    if (socket.readyState === WebSocket.OPEN) {
+      if (value.length > 0 && value.match('^[a-fA-F0-9]+$')) {
+        setWaitingSearch('');
+        socket.send(
+          JSON.stringify({ command: 'serial_number_search', serial_prefix: value.toLowerCase() }),
+        );
+      } else {
+        setResults([]);
+      }
+    } else if (socket.readyState !== WebSocket.CONNECTING) {
+      setWaitingSearch(value);
+      setSocket(new WebSocket(`${endpoints.owgw.replace('https', 'wss')}/api/v1/ws`));
+    } else {
+      setWaitingSearch(value);
+    }
+  };
+
+  const closeSocket = () => {
+    if (socket !== null) {
+      socket.close();
+    }
+  };
+
+  useEffect(() => {
+    if (socket !== null) {
+      socket.onopen = () => {
+        socket.send(`token:${currentToken}`);
+      };
+
+      socket.onmessage = (event) => {
+        if (checkIfJson(event.data)) {
+          const result = JSON.parse(event.data);
+          if (result.command === 'serial_number_search' && result.serialNumbers) {
+            setResults(result.serialNumbers);
+          }
+        }
+      };
+
+      if (waitingSearch.length > 0) {
+        search(waitingSearch);
+      }
+    }
+
+    return () => closeSocket();
+  }, [socket]);
+
+  useEffect(() => {
+    if (socket === null && endpoints?.owgw) {
+      setSocket(new WebSocket(`${endpoints.owgw.replace('https', 'wss')}/api/v1/ws`));
+    }
+  }, []);
+
+  return <SearchBar t={t} search={search} results={results} history={history} />;
+};
+
+export default DeviceSearchBar;

src/components/DeviceStatusCard/index.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import axiosInstance from 'utils/axiosInstance';
+import { DeviceStatusCard as Card, useDevice, useAuth, useToast } from 'ucentral-libs';
+
+const DeviceStatusCard = () => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const { addToast } = useToast();
+  const [lastStats, setLastStats] = useState(null);
+  const [status, setStatus] = useState(null);
+  const [deviceConfig, setDeviceConfig] = useState(null);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const getDevice = () => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}`, options)
+      .then((response) => {
+        setDeviceConfig(response.data);
+      })
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('device.error_fetching_device', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      });
+  };
+
+  const getData = () => {
+    setLoading(true);
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    const lastStatsRequest = axiosInstance.get(
+      `${endpoints.owgw}/api/v1/device/${encodeURIComponent(
+        deviceSerialNumber,
+      )}/statistics?lastOnly=true`,
+      options,
+    );
+    const statusRequest = axiosInstance.get(
+      `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}/status`,
+      options,
+    );
+
+    Promise.all([lastStatsRequest, statusRequest])
+      .then(([newStats, newStatus]) => {
+        setLastStats(newStats.data);
+        setStatus(newStatus.data);
+      })
+      .catch(() => {
+        setError(true);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const refresh = () => {
+    getData();
+    getDevice();
+  };
+
+  useEffect(() => {
+    setError(false);
+    if (deviceSerialNumber) {
+      getDevice();
+      getData();
+    }
+  }, [deviceSerialNumber]);
+
+  return (
+    <Card
+      t={t}
+      loading={loading}
+      error={error}
+      deviceSerialNumber={deviceSerialNumber}
+      getData={refresh}
+      deviceConfig={deviceConfig}
+      status={status}
+      lastStats={lastStats}
+    />
+  );
+};
+
+export default DeviceStatusCard;

src/components/EditFirmwareModal/index.js

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { CButton, CModal, CModalBody, CModalHeader, CModalTitle, CPopover } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilPencil, cilSave, cilX } from '@coreui/icons';
+import axiosInstance from 'utils/axiosInstance';
+import { useFormFields, useAuth, useToast, FirmwareDetailsForm } from 'ucentral-libs';
+
+const initialState = {
+  created: {
+    value: '',
+    error: false,
+    editable: false,
+  },
+  release: {
+    value: false,
+    error: false,
+    editable: false,
+  },
+  image: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  imageDate: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  size: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  owner: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  revision: {
+    value: '',
+    error: false,
+    editable: false,
+  },
+  uri: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  description: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  notes: {
+    value: [],
+    editable: false,
+  },
+};
+
+const EditFirmwareModal = ({ show, toggle, firmwareId, refreshTable }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { addToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [firmware, updateWithId, updateWithKey, setFirmware] = useFormFields(initialState);
+
+  const getFirmware = () => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owfms}/api/v1/firmware/${firmwareId}`, options)
+      .then((response) => {
+        const newFirmware = {};
+
+        for (const key of Object.keys(response.data)) {
+          if (key in initialState && key !== 'currentPassword') {
+            newFirmware[key] = {
+              ...initialState[key],
+              value: response.data[key],
+            };
+          }
+        }
+        setFirmware({ ...initialState, ...newFirmware });
+      })
+      .catch(() => {});
+  };
+
+  const toggleEditing = () => {
+    if (editing) {
+      getFirmware();
+    }
+    setEditing(!editing);
+  };
+
+  const toggleModal = () => {
+    toggleEditing();
+    toggle();
+  };
+
+  const updateFirmware = () => {
+    setLoading(true);
+
+    const parameters = {
+      id: firmwareId,
+      description: firmware.description.value,
+    };
+
+    const newNotes = [];
+    for (let i = 0; i < firmware.notes.value.length; i += 1) {
+      if (firmware.notes.value[i].new) newNotes.push({ note: firmware.notes.value[i].note });
+    }
+
+    parameters.notes = newNotes;
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .put(`${endpoints.owfms}/api/v1/firmware/${firmwareId}`, parameters, options)
+      .then(() => {
+        addToast({
+          title: t('firmware.update_success_title'),
+          body: t('firmware.update_success'),
+          color: 'success',
+          autohide: true,
+        });
+        refreshTable();
+        toggle();
+      })
+      .catch((e) => {
+        addToast({
+          title: t('firmware.update_failure_title'),
+          body: t('firmware.update_failure', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+        getFirmware();
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const addNote = (currentNote) => {
+    const newNotes = [...firmware.notes.value];
+    newNotes.unshift({
+      note: currentNote,
+      new: true,
+      created: new Date().getTime() / 1000,
+      createdBy: '',
+    });
+    updateWithKey('notes', { value: newNotes });
+  };
+
+  useEffect(() => {
+    if (show) {
+      getFirmware();
+      setEditing(false);
+    }
+  }, [show]);
+
+  return (
+    <CModal show={show} onClose={toggle} size="xl">
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">
+          {t('firmware.details_title', { image: firmware.image.value })}
+        </CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.save')}>
+            <CButton color="primary" variant="outline" onClick={updateFirmware} disabled={loading}>
+              <CIcon content={cilSave} />
+            </CButton>
+          </CPopover>
+          <CPopover content={t('common.edit')}>
+            <CButton
+              disabled={editing}
+              color="primary"
+              variant="outline"
+              onClick={toggleEditing}
+              className="ml-2"
+            >
+              <CIcon name="cil-pencil" content={cilPencil} />
+            </CButton>
+          </CPopover>
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggleModal}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
+      </CModalHeader>
+      <CModalBody>
+        <FirmwareDetailsForm
+          t={t}
+          fields={firmware}
+          addNote={addNote}
+          updateFieldsWithId={updateWithId}
+          editing={editing}
+        />
+      </CModalBody>
+    </CModal>
+  );
+};
+
+EditFirmwareModal.propTypes = {
+  firmwareId: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  refreshTable: PropTypes.func.isRequired,
+};
+
+export default React.memo(EditFirmwareModal);

src/components/EditUserModal/index.js

@@ -0,0 +1,238 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import axiosInstance from 'utils/axiosInstance';
+import { useUser, EditUserModal as Modal, useAuth, useToast } from 'ucentral-libs';
+
+const initialState = {
+  Id: {
+    value: '',
+    error: false,
+    editable: false,
+  },
+  changePassword: {
+    value: false,
+    error: false,
+    editable: false,
+  },
+  currentPassword: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  email: {
+    value: '',
+    error: false,
+    editable: false,
+  },
+  description: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  name: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  userRole: {
+    value: '',
+    error: false,
+    editable: true,
+  },
+  notes: {
+    value: [],
+    editable: false,
+  },
+};
+
+const EditUserModal = ({ show, toggle, userId, getUsers }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { addToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [initialUser, setInitialUser] = useState({});
+  const [editing, setEditing] = useState(false);
+  const [user, updateWithId, updateWithKey, setUser] = useUser(initialState);
+  const [policies, setPolicies] = useState({
+    passwordPolicy: '',
+    passwordPattern: '',
+    accessPolicy: '',
+  });
+
+  const getPasswordPolicy = () => {
+    axiosInstance
+      .post(`${endpoints.owsec}/api/v1/oauth2?requirements=true`, {})
+      .then((response) => {
+        const newPolicies = response.data;
+        newPolicies.accessPolicy = `${endpoints.owsec}${newPolicies.accessPolicy}`;
+        newPolicies.passwordPolicy = `${endpoints.owsec}${newPolicies.passwordPolicy}`;
+        setPolicies(response.data);
+      })
+      .catch(() => {});
+  };
+
+  const getUser = () => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owsec}/api/v1/user/${userId}`, options)
+      .then((response) => {
+        const newUser = {};
+
+        for (const key of Object.keys(response.data)) {
+          if (key in initialState && key !== 'currentPassword') {
+            newUser[key] = {
+              ...initialState[key],
+              value: response.data[key],
+            };
+          }
+        }
+        setInitialUser({ ...initialState, ...newUser });
+        setUser({ ...initialState, ...newUser });
+      })
+      .catch(() => {});
+  };
+
+  const toggleEditing = () => {
+    if (editing) {
+      getUser();
+    }
+    setEditing(!editing);
+  };
+
+  const updateUser = () => {
+    setLoading(true);
+
+    const parameters = {
+      id: userId,
+    };
+
+    let newData = false;
+
+    for (const key of Object.keys(user)) {
+      if (user[key].editable && user[key].value !== initialUser[key].value) {
+        if (key === 'currentPassword' && user[key].length < 8) {
+          updateWithKey('currentPassword', {
+            error: true,
+          });
+          newData = false;
+          break;
+        } else if (key === 'changePassword') {
+          parameters[key] = user[key].value === 'on';
+          newData = true;
+        } else {
+          parameters[key] = user[key].value;
+          newData = true;
+        }
+      }
+    }
+
+    const newNotes = [];
+    for (let i = 0; i < user.notes.value.length; i += 1) {
+      if (user.notes.value[i].new) newNotes.push({ note: user.notes.value[i].note });
+    }
+
+    parameters.notes = newNotes;
+
+    if (newData) {
+      const options = {
+        headers: {
+          Accept: 'application/json',
+          Authorization: `Bearer ${currentToken}`,
+        },
+      };
+
+      axiosInstance
+        .put(`${endpoints.owsec}/api/v1/user/${userId}`, parameters, options)
+        .then(() => {
+          addToast({
+            title: t('user.update_success_title'),
+            body: t('user.update_success'),
+            color: 'success',
+            autohide: true,
+          });
+          getUsers();
+          toggle();
+        })
+        .catch((e) => {
+          addToast({
+            title: t('user.update_failure_title'),
+            body: t('user.update_failure', { error: e.response?.data?.ErrorDescription }),
+            color: 'danger',
+            autohide: true,
+          });
+          getUser();
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    } else {
+      setLoading(false);
+      addToast({
+        title: t('user.update_success_title'),
+        body: t('user.update_success'),
+        color: 'success',
+        autohide: true,
+      });
+      getUsers();
+      toggle();
+    }
+  };
+
+  const addNote = (currentNote) => {
+    const newNotes = [...user.notes.value];
+    newNotes.unshift({
+      note: currentNote,
+      new: true,
+      created: new Date().getTime() / 1000,
+      createdBy: '',
+    });
+    updateWithKey('notes', { value: newNotes });
+  };
+
+  useEffect(() => {
+    if (userId) {
+      getUser();
+    }
+    if (policies.passwordPattern.length === 0) {
+      getPasswordPolicy();
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    if (show) {
+      setEditing(false);
+    }
+  }, [show]);
+
+  return (
+    <Modal
+      t={t}
+      user={user}
+      updateUserWithId={updateWithId}
+      saveUser={updateUser}
+      loading={loading}
+      policies={policies}
+      show={show}
+      toggle={toggle}
+      editing={editing}
+      toggleEditing={toggleEditing}
+      addNote={addNote}
+    />
+  );
+};
+
+EditUserModal.propTypes = {
+  userId: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+  getUsers: PropTypes.func.isRequired,
+};
+
+export default React.memo(EditUserModal);

src/components/EventQueueModal/index.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { EventQueueModal as Modal, useAuth, useDevice, useToast } from 'ucentral-libs';
+import { useTranslation } from 'react-i18next';
+import axiosInstance from 'utils/axiosInstance';
+
+const EventQueueModal = ({ show, toggle }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const { addToast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState({});
+
+  const getQueue = () => {
+    setLoading(true);
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    const parameters = {
+      serialNumber: deviceSerialNumber,
+      types: ['dhcp', 'wifi'],
+    };
+
+    axiosInstance
+      .post(`${endpoints.owgw}/api/v1/device/${deviceSerialNumber}/eventqueue`, parameters, options)
+      .then((response) => {
+        setResult(response.data);
+      })
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('commands.unable_queue', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (show) getQueue();
+  }, [show]);
+
+  return <Modal t={t} show={show} toggle={toggle} loading={loading} result={result} />;
+};
+
+EventQueueModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+export default EventQueueModal;

src/components/FactoryResetModal/index.js

@@ -10,19 +10,22 @@ import {
   CForm,
   CSwitch,
   CAlert,
+  CPopover,
 } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
+import { useAuth, useDevice } from 'ucentral-libs';
 import axiosInstance from 'utils/axiosInstance';
 import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
-import styles from './index.module.scss';
 
 const ConfigureModal = ({ show, toggleModal }) => {
   const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
   const [hadSuccess, setHadSuccess] = useState(false);
   const [hadFailure, setHadFailure] = useState(false);
   const [doingNow, setDoingNow] = useState(false);
@@ -30,7 +33,6 @@ const ConfigureModal = ({ show, toggleModal }) => {
   const [keepRedirector, setKeepRedirector] = useState(true);
   const [responseBody, setResponseBody] = useState('');
   const [checkingIfSure, setCheckingIfSure] = useState(false);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
 
   const toggleRedirector = () => {
     setKeepRedirector(!keepRedirector);
@@ -54,17 +56,21 @@ const ConfigureModal = ({ show, toggleModal }) => {
     setWaiting(true);
 
     const parameters = {
-      serialNumber: selectedDeviceId,
+      serialNumber: deviceSerialNumber,
       keepRedirector,
     };
 
     const headers = {
       Accept: 'application/json',
-      Authorization: `Bearer ${getToken()}`,
+      Authorization: `Bearer ${currentToken}`,
     };
 
     axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/factory`, parameters, { headers })
+      .post(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}/factory`,
+        parameters,
+        { headers },
+      )
       .then(() => {
         setHadSuccess(true);
       })
@@ -81,8 +87,15 @@ const ConfigureModal = ({ show, toggleModal }) => {
 
   return (
     <CModal show={show} onClose={toggleModal}>
-      <CModalHeader closeButton>
-        <CModalTitle>{t('factory_reset.title')}</CModalTitle>
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">{t('factory_reset.title')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggleModal}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
       {hadSuccess ? (
         <SuccessfulActionModalBody toggleModal={toggleModal} />
@@ -90,9 +103,9 @@ const ConfigureModal = ({ show, toggleModal }) => {
         <div>
           <CModalBody>
             <CAlert color="danger">{t('factory_reset.warning')}</CAlert>
-            <CRow className={styles.spacedRow}>
-              <p className={styles.spacedForm}>{t('factory_reset.redirector')}</p>
-              <CForm className={styles.spacedForm}>
+            <CRow className="mt-3">
+              <p className="pl-4">{t('factory_reset.redirector')}</p>
+              <CForm className="pl-4">
                 <CSwitch
                   color="primary"
                   defaultChecked={keepRedirector}
@@ -116,7 +129,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
               color="primary"
               onClick={() => confirmingIfSure()}
             >
-              {t('common.submit')}
+              {t('factory_reset.reset')}
             </CButton>
             <CButton
               hidden={!checkingIfSure}
@@ -124,7 +137,7 @@ const ConfigureModal = ({ show, toggleModal }) => {
               color="primary"
               onClick={() => doAction(false)}
             >
-              {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
+              {waiting && !doingNow ? t('factory_reset.resetting') : t('common.yes')} {'   '}
               <CSpinner color="light" hidden={!waiting || doingNow} component="span" size="sm" />
             </CButton>
             <CButton color="secondary" onClick={toggleModal}>

src/components/FactoryResetModal/index.module.scss

@@ -1,7 +0,0 @@
-.spacedRow {
-  margin-top: 20px;
-}
-
-.spacedForm {
-  padding-left: 5%;
-}

src/components/FirmwareDashboard/index.js

@@ -0,0 +1,325 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FirmwareDashboard as Dashboard, useAuth, COLOR_LIST } from 'ucentral-libs';
+import axiosInstance from 'utils/axiosInstance';
+
+const FirmwareDashboard = () => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState({
+    status: {
+      datasets: [],
+      labels: [],
+    },
+    deviceType: {
+      datasets: [],
+      labels: [],
+    },
+    firmwareDistribution: {
+      datasets: [],
+      labels: [],
+    },
+    latest: {
+      datasets: [],
+      labels: [],
+    },
+    unknownFirmwares: {
+      datasets: [],
+      labels: [],
+    },
+    ouis: {
+      datasets: [],
+      labels: [],
+    },
+    endpoints: [],
+    latestSoftwareRate: '-',
+  });
+
+  const getOuiInfo = async (oui) => {
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    return axiosInstance
+      .get(`${endpoints.owgw}/api/v1/ouis?macList=${oui.join(',')}`, {
+        headers,
+      })
+      .then((response) => {
+        const matchedObject = {};
+        for (let i = 0; i < response.data.tagList.length; i += 1) {
+          matchedObject[oui[i]] = response.data.tagList[i];
+        }
+        return matchedObject;
+      })
+      .catch(() => {});
+  };
+
+  const parseData = async (newData) => {
+    const parsedData = newData;
+
+    // Status pie chart
+    const statusDs = [];
+    const statusColors = [];
+    const statusLabels = [];
+    const totalDevices = parsedData.status.reduce((acc, point) => acc + point.value, 0);
+    for (const point of parsedData.status) {
+      statusDs.push(Math.round((point.value / totalDevices) * 100));
+      statusLabels.push(point.tag);
+      let color = '';
+      switch (point.tag) {
+        case 'connected':
+          color = '#41B883';
+          break;
+        case 'not connected':
+          color = '#e55353';
+          break;
+        default:
+          break;
+      }
+      statusColors.push(color);
+    }
+    parsedData.status = {
+      datasets: [
+        {
+          data: statusDs,
+          backgroundColor: statusColors,
+        },
+      ],
+      labels: statusLabels,
+    };
+
+    // Device Type pie chart
+    const deviceTypeDs = [];
+    const deviceTypeColors = [];
+    const deviceTypeLabels = [];
+    const sortedTypes = parsedData.deviceTypes.sort((a, b) => (a.value < b.value ? 1 : -1));
+    for (let i = 0; i < sortedTypes.length; i += 1) {
+      const point = sortedTypes[i];
+
+      deviceTypeDs.push(point.value);
+      deviceTypeLabels.push(point.tag);
+      deviceTypeColors.push(COLOR_LIST[i]);
+    }
+    const otherTypes = deviceTypeDs.slice(5).reduce((acc, type) => acc + type, 0);
+    parsedData.deviceType = {
+      datasets: [
+        {
+          data: deviceTypeDs.slice(0, 5).concat([otherTypes]),
+          backgroundColor: deviceTypeColors,
+        },
+      ],
+      labels: deviceTypeLabels.slice(0, 5).concat(['Others']),
+    };
+
+    // Latest/unknown distribution
+    const usingLatestFirmware =
+      parsedData.usingLatest.length > 0
+        ? parsedData.usingLatest.reduce((acc, firmware) => acc + firmware.value, 0)
+        : 0;
+    const unknownFirmware = parsedData.numberOfDevices - usingLatestFirmware;
+    parsedData.usingLatestFirmware = usingLatestFirmware;
+    parsedData.firmwareDistribution = {
+      datasets: [
+        {
+          label: t('common.devices'),
+          data: [unknownFirmware, usingLatestFirmware],
+          backgroundColor: ['#e55353', '#41B883'],
+        },
+      ],
+      labels: [t('common.unknown'), t('common.latest')],
+    };
+
+    if (
+      parsedData.numberOfDevices === undefined ||
+      Number.isNaN(parsedData.numberOfDevices) ||
+      parsedData === 0
+    ) {
+      parsedData.latestSoftwareRate = '-';
+    } else {
+      parsedData.latestSoftwareRate = `${(
+        (parsedData.usingLatestFirmware / parsedData.numberOfDevices) *
+        100
+      ).toFixed(1)}%`;
+    }
+
+    // Average firmware age calculation
+    const usingUnknownFirmwareFromArray =
+      parsedData.unknownFirmwares.length > 0
+        ? parsedData.unknownFirmwares.reduce((acc, firmware) => acc + firmware.value, 0)
+        : 0;
+    const devicesForAverage = parsedData.numberOfDevices - usingUnknownFirmwareFromArray;
+
+    if (parsedData.totalSecondsOld.length > 0) {
+      parsedData.averageFirmwareAge =
+        parsedData.totalSecondsOld[0].value /
+        (devicesForAverage > 0 ? devicesForAverage : 1) /
+        (24 * 60 * 60);
+    } else {
+      parsedData.averageFirmwareAge = 0;
+    }
+
+    // Latest firmware distribution
+    const latestDs = [];
+    const latestColors = [];
+    const latestLabels = [];
+    const usingLatest = parsedData.usingLatest.sort((a, b) => (a.value < b.value ? 1 : -1));
+    for (const point of usingLatest) {
+      latestDs.push(point.value);
+      if (point.tag === '') {
+        latestLabels.push('Unknown');
+      } else if (point.tag.split(' / ').length > 1) {
+        latestLabels.push(point.tag.split(' / ')[1]);
+      } else {
+        latestLabels.push(point.tag);
+      }
+      latestColors.push('#39f');
+    }
+    parsedData.latest = {
+      datasets: [
+        {
+          label: t('common.firmware'),
+          data: latestDs.slice(0, 5),
+          backgroundColor: latestColors,
+        },
+      ],
+      labels: latestLabels.slice(0, 5),
+    };
+
+    // Unknown firmware distribution
+    const unknownDs = [];
+    const unknownColors = [];
+    const unknownLabels = [];
+    const unknownFirmwares = parsedData.unknownFirmwares.sort((a, b) =>
+      a.value < b.value ? 1 : -1,
+    );
+    for (const point of unknownFirmwares) {
+      unknownDs.push(point.value);
+      if (point.tag === '') {
+        unknownLabels.push('Unknown');
+      } else if (point.tag.split(' / ').length > 1) {
+        unknownLabels.push(point.tag.split(' / ')[1]);
+      } else {
+        unknownLabels.push(point.tag);
+      }
+
+      unknownColors.push('#39f');
+    }
+    parsedData.unknownFirmwares = {
+      datasets: [
+        {
+          label: t('common.firmware'),
+          data: unknownDs.slice(0, 5),
+          backgroundColor: unknownColors,
+        },
+      ],
+      labels: unknownLabels.slice(0, 5),
+    };
+
+    // OUIs bar graph
+    const ouiCompleteInfo = [];
+    const ouisLabels = [];
+    const sortedOuis = parsedData.ouis.sort((a, b) => (a.value < b.value ? 1 : -1));
+    for (const point of sortedOuis) {
+      ouiCompleteInfo.push({
+        value: point.value,
+        tag: point.tag,
+      });
+      ouisLabels.push(point.tag === '' ? 'Unknown' : point.tag);
+    }
+    const ouiDetails = await getOuiInfo(ouisLabels);
+
+    // Merging 'Good' labels with ouiCompleteInfo
+    if (ouiDetails !== null) {
+      for (let i = 0; i < ouiCompleteInfo.length; i += 1) {
+        ouiCompleteInfo[i].label =
+          ouiDetails[ouiCompleteInfo[i].tag].value !== undefined &&
+          ouiDetails[ouiCompleteInfo[i].tag].value !== ''
+            ? ouiDetails[ouiCompleteInfo[i].tag].value
+            : 'Unknown';
+      }
+    }
+
+    // Merging OUIs that have the same label that we got from getOuiInfo
+    const finalOuis = {};
+    for (const oui of ouiCompleteInfo) {
+      if (finalOuis[oui.label] === undefined) {
+        finalOuis[oui.label] = {
+          label: oui.label,
+          value: oui.value,
+        };
+      } else {
+        finalOuis[oui.label] = {
+          label: oui.label,
+          value: finalOuis[oui.label].value + oui.value,
+        };
+      }
+    }
+
+    // Flattening finalOuis into an array so we can create the arrays necessary for the chart
+    const finalOuisArr = Object.entries(finalOuis);
+    const finalOuiDs = [];
+    const finalOuiLabels = [];
+    const finalOuiColors = [];
+    for (const oui of finalOuisArr) {
+      finalOuiDs.push(oui[1].value);
+      finalOuiLabels.push(oui[1].label);
+      finalOuiColors.push('#39f');
+    }
+    const totalOthers = finalOuiDs.slice(5).reduce((acc, oui) => acc + oui, 0);
+
+    parsedData.ouis = {
+      datasets: [
+        {
+          label: 'OUIs',
+          data: finalOuiDs.slice(0, 5).concat(totalOthers),
+          backgroundColor: finalOuiColors.concat('#39f'),
+        },
+      ],
+      labels: finalOuiLabels.slice(0, 5).concat('Others'),
+    };
+
+    // Endpoints table
+    const endpointsDs = [];
+    const endpointsTotal = parsedData.endPoints.reduce((acc, point) => acc + point.value, 0);
+    for (const point of parsedData.endPoints) {
+      endpointsDs.push({
+        endpoint: point.tag,
+        devices: point.value,
+        percent: `${Math.round((point.value / endpointsTotal) * 100)}%`,
+      });
+    }
+    parsedData.endpoints = endpointsDs;
+
+    setData(parsedData);
+  };
+
+  const getDashboard = () => {
+    setLoading(true);
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+    axiosInstance
+      .get(`${endpoints.owfms}/api/v1/deviceReport`, {
+        headers,
+      })
+      .then((response) => {
+        parseData(response.data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getDashboard();
+  }, []);
+
+  return <Dashboard loading={loading} t={t} data={data} />;
+};
+
+export default FirmwareDashboard;

src/components/FirmwareHistoryModal/index.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import axiosInstance from 'utils/axiosInstance';
+import {
+  CButton,
+  CModal,
+  CModalBody,
+  CModalHeader,
+  CModalFooter,
+  CModalTitle,
+} from '@coreui/react';
+import { FirmwareHistoryTable, useAuth } from 'ucentral-libs';
+
+const FirmwareHistoryModal = ({ serialNumber, show, toggle }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+
+  const getHistory = () => {
+    setLoading(true);
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owfms}/api/v1/revisionHistory/${serialNumber}`, options)
+      .then((response) => setData(response.data.history ?? []))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    if (show) {
+      getHistory();
+    } else {
+      setData([]);
+    }
+  }, [show]);
+
+  return (
+    <CModal size="xl" show={show} onClose={toggle} scrollable>
+      <CModalHeader closeButton>
+        <CModalTitle className="pl-1 pt-1">
+          #{serialNumber} {t('firmware.history_title')}
+        </CModalTitle>
+      </CModalHeader>
+      <CModalBody>
+        <FirmwareHistoryTable t={t} loading={loading} data={data} />
+      </CModalBody>
+      <CModalFooter>
+        <CButton color="secondary" onClick={toggle}>
+          {t('common.close')}
+        </CButton>
+      </CModalFooter>
+    </CModal>
+  );
+};
+
+FirmwareHistoryModal.propTypes = {
+  serialNumber: PropTypes.string.isRequired,
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+export default FirmwareHistoryModal;

src/components/FirmwareUpgradeModal/index.js

@@ -1,241 +0,0 @@
-import {
-  CButton,
-  CModal,
-  CModalHeader,
-  CModalTitle,
-  CModalBody,
-  CModalFooter,
-  CSpinner,
-  CCol,
-  CRow,
-  CInput,
-  CInvalidFeedback,
-} from '@coreui/react';
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import DatePicker from 'react-widgets/DatePicker';
-import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { convertDateToUtc, convertDateFromUtc, dateToUnix } from 'utils/helper';
-import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
-import axiosInstance from 'utils/axiosInstance';
-import eventBus from 'utils/eventBus';
-import styles from './index.module.scss';
-
-const FirmwareUpgradeModal = ({ show, toggleModal }) => {
-  const { t } = useTranslation();
-  const [hadSuccess, setHadSuccess] = useState(false);
-  const [hadFailure, setHadFailure] = useState(false);
-  const [waiting, setWaiting] = useState(false);
-  const [chosenDate, setChosenDate] = useState(new Date().toString());
-  const [firmware, setFirmware] = useState('');
-  const [doingNow, setDoingNow] = useState(false);
-  const [validFirmware, setValidFirmware] = useState(true);
-  const [validDate, setValidDate] = useState(true);
-  const [responseBody, setResponseBody] = useState('');
-  const [checkingIfSure, setCheckingIfSure] = useState(false);
-  const [checkingIfNow, setCheckingIfNow] = useState(false);
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
-
-  const formValidation = () => {
-    let valid = true;
-    if (firmware.trim() === '') {
-      setValidFirmware(false);
-      valid = false;
-    }
-
-    if (chosenDate.trim() === '') {
-      setValidDate(false);
-      valid = false;
-    }
-    return valid;
-  };
-  const setDateToLate = () => {
-    const date = convertDateToUtc(new Date());
-    if (date.getHours() >= 3) {
-      date.setDate(date.getDate() + 1);
-    }
-    date.setHours(3);
-    date.setMinutes(0);
-
-    setChosenDate(convertDateFromUtc(date).toString());
-  };
-
-  const setDate = (date) => {
-    if (date) {
-      setChosenDate(date.toString());
-    }
-  };
-
-  const confirmingIfSure = () => {
-    setCheckingIfSure(true);
-  };
-
-  const confirmingIfNow = () => {
-    setCheckingIfNow(true);
-  };
-
-  useEffect(() => {
-    setHadSuccess(false);
-    setHadFailure(false);
-    setWaiting(false);
-    setChosenDate(new Date().toString());
-    setFirmware('');
-    setValidFirmware(true);
-    setResponseBody('');
-    setCheckingIfSure(false);
-    setDoingNow(false);
-    setCheckingIfNow(false);
-  }, [show]);
-
-  useEffect(() => {
-    setValidFirmware(true);
-    setValidDate(true);
-  }, [firmware, chosenDate]);
-
-  const postUpgrade = (isNow) => {
-    setDoingNow(isNow);
-    setHadFailure(false);
-    setHadSuccess(false);
-    setWaiting(true);
-
-    const token = getToken();
-    const utcDate = new Date(chosenDate);
-    const utcDateString = utcDate.toISOString();
-
-    const headers = {
-      Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
-      serialNumber: selectedDeviceId,
-    };
-
-    const parameters = {
-      serialNumber: selectedDeviceId,
-      when: isNow ? 0 : dateToUnix(utcDateString),
-      uri: firmware,
-    };
-    axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/upgrade`, parameters, { headers })
-      .then(() => {
-        setResponseBody('Command submitted successfully');
-        setHadSuccess(true);
-      })
-      .catch(() => {
-        setResponseBody(t('commands.error'));
-        setHadFailure(true);
-      })
-      .finally(() => {
-        setCheckingIfNow(false);
-        setDoingNow(false);
-        setCheckingIfSure(false);
-        setWaiting(false);
-        eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
-      });
-  };
-
-  return (
-    <CModal show={show} onClose={toggleModal}>
-      <CModalHeader closeButton>
-        <CModalTitle>{t('upgrade.title')}</CModalTitle>
-      </CModalHeader>
-      <CModalBody>
-        <h6>{t('upgrade.directions')}</h6>
-        <CRow className={styles.spacedRow}>
-          <CCol>
-            <CButton
-              color="primary"
-              onClick={() => (formValidation() ? confirmingIfNow() : null)}
-              disabled={waiting}
-              hidden={checkingIfNow}
-              block
-            >
-              {t('common.do_now')}
-            </CButton>
-            <CButton
-              color="primary"
-              onClick={() => (formValidation() ? postUpgrade(true) : null)}
-              disabled={waiting}
-              hidden={!checkingIfNow}
-              block
-            >
-              {waiting && doingNow ? t('common.loading_ellipsis') : t('common.confirm')}
-              <CSpinner hidden={!waiting || doingNow} component="span" size="sm" />
-            </CButton>
-          </CCol>
-          <CCol>
-            <CButton disabled={waiting} block color="primary" onClick={setDateToLate}>
-              {t('common.later_tonight')}
-            </CButton>
-          </CCol>
-        </CRow>
-        <CRow className={styles.spacedRow}>
-          <CCol md="4" className={styles.spacedColumn}>
-            <p>{t('upgrade.time')}</p>
-          </CCol>
-          <CCol xs="12" md="8">
-            <DatePicker
-              selected={chosenDate === '' ? new Date() : new Date(chosenDate)}
-              value={chosenDate === '' ? new Date() : new Date(chosenDate)}
-              className={('form-control', { 'is-invalid': !validDate })}
-              includeTime
-              placeholder="Select custom date in UTC"
-              disabled={waiting}
-              onChange={(date) => setDate(date)}
-              min={new Date()}
-            />
-            <CInvalidFeedback>{t('common.need_date')}</CInvalidFeedback>
-          </CCol>
-        </CRow>
-        <div>{t('upgrade.firmware_uri')}</div>
-        <CInput
-          disabled={waiting}
-          className={('form-control', { 'is-invalid': !validFirmware })}
-          type="text"
-          id="uri"
-          name="uri-input"
-          placeholder="https://s3-us-west-2.amazonaws.com/ucentral.arilia.com/20210508-linksys_ea8300-uCentral-trunk-43e1a2d-upgrade.bin"
-          autoComplete="firmware-uri"
-          onChange={(event) => setFirmware(event.target.value)}
-          value={firmware}
-        />
-        <CInvalidFeedback>{t('upgrade.need_uri')}</CInvalidFeedback>
-        <div hidden={!hadSuccess && !hadFailure}>
-          <div>
-            <pre className="ignore">{responseBody}</pre>
-          </div>
-        </div>
-      </CModalBody>
-      <CModalFooter>
-        <div hidden={!checkingIfSure}>{t('common.are_you_sure')}</div>
-        <CButton
-          hidden={checkingIfSure}
-          disabled={waiting}
-          color="primary"
-          onClick={() => (formValidation() ? confirmingIfSure() : null)}
-        >
-          {t('common.schedule')}
-        </CButton>
-        <CButton
-          hidden={!checkingIfSure}
-          disabled={waiting}
-          color="primary"
-          onClick={() => (formValidation() ? postUpgrade() : null)}
-        >
-          {waiting && !doingNow ? 'Loading...' : 'Yes'} {'   '}
-          <CSpinner color="light" hidden={!waiting || doingNow} component="span" size="sm" />
-        </CButton>
-        <CButton color="secondary" onClick={toggleModal}>
-          {t('common.cancel')}
-        </CButton>
-      </CModalFooter>
-    </CModal>
-  );
-};
-
-FirmwareUpgradeModal.propTypes = {
-  show: PropTypes.bool.isRequired,
-  toggleModal: PropTypes.func.isRequired,
-};
-
-export default FirmwareUpgradeModal;

src/components/FirmwareUpgradeModal/index.module.scss

@@ -1,7 +0,0 @@
-.spacedRow {
-  margin-top: 20px;
-}
-
-.spacedColumn {
-  margin-top: 7px;
-}

src/components/InterfaceStatistics/DeviceStatisticsChart.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Chart from 'react-apexcharts';
+
+const DeviceStatisticsChart = ({ chart }) => (
+  <div style={{ height: '360px' }}>
+    <Chart series={chart.data} options={chart.options} type="line" height="100%" />
+  </div>
+);
+
+DeviceStatisticsChart.propTypes = {
+  chart: PropTypes.instanceOf(Object).isRequired,
+};
+
+export default DeviceStatisticsChart;

src/components/InterfaceStatistics/LatestStatisticsModal.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { CButton, CModal, CModalHeader, CModalBody, CModalTitle, CPopover } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import axiosInstance from 'utils/axiosInstance';
+import { useAuth, useDevice } from 'ucentral-libs';
+
+const LatestStatisticsModal = ({ show, toggle }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const [latestStats, setLatestStats] = useState('');
+
+  const getLatestStats = () => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(
+        `${endpoints.owgw}/api/v1/device/${deviceSerialNumber}/statistics?lastOnly=true`,
+        options,
+      )
+      .then((response) => {
+        setLatestStats(response.data);
+      })
+      .catch(() => {});
+  };
+
+  useEffect(() => {
+    if (show) {
+      getLatestStats();
+    }
+  }, [show]);
+
+  return (
+    <CModal size="lg" show={show} onClose={toggle}>
+      <CModalHeader className="p-1">
+        <CModalTitle className="text-dark">{t('statistics.latest_statistics')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
+      </CModalHeader>
+      <CModalBody>
+        <pre className="ignore">{JSON.stringify(latestStats, null, 4)}</pre>
+      </CModalBody>
+    </CModal>
+  );
+};
+
+LatestStatisticsModal.propTypes = {
+  toggle: PropTypes.func.isRequired,
+  show: PropTypes.bool.isRequired,
+};
+
+export default LatestStatisticsModal;

src/components/InterfaceStatistics/StatisticsChartList.js

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
 import { v4 as createUuid } from 'uuid';
 import axiosInstance from 'utils/axiosInstance';
-import { getToken } from 'utils/authHelper';
+import { useAuth, useDevice } from 'ucentral-libs';
 import { unixToTime, capitalizeFirstLetter } from 'utils/helper';
-import DeviceStatisticsChart from '../DeviceStatisticsChart';
+import eventBus from 'utils/eventBus';
+import DeviceStatisticsChart from './DeviceStatisticsChart';
 
-const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
+const StatisticsChartList = () => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
   const [statOptions, setStatOptions] = useState({
     interfaceList: [],
     settings: {},
@@ -60,10 +61,10 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
       // Looping through the interfaces of the log
       for (const inter of log.data.interfaces) {
         interfaceList[interfaceTypes[inter.name]][0].data.push(
-          Math.floor(inter.counters.tx_bytes / 1024),
+          inter.counters?.tx_bytes ? Math.floor(inter.counters.tx_bytes / 1024) : 0,
         );
         interfaceList[interfaceTypes[inter.name]][1].data.push(
-          Math.floor(inter.counters.rx_bytes / 1024),
+          inter.counters?.rx_bytes ? Math.floor(inter.counters.rx_bytes / 1024) : 0,
         );
       }
     }
@@ -73,6 +74,9 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
         id: 'chart',
         group: 'txrx',
       },
+      stroke: {
+        curve: 'smooth',
+      },
       xaxis: {
         title: {
           text: 'Time',
@@ -112,74 +116,65 @@ const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
   };
 
   const getStatistics = () => {
-    if (!loading) {
-      setLoading(true);
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+      params: {
+        serialNumber: '24f5a207a130',
+      },
+    };
 
-      const options = {
-        headers: {
-          Accept: 'application/json',
-          Authorization: `Bearer ${getToken()}`,
-        },
-        params: {
-          serialNumber: '24f5a207a130',
-        },
-      };
-
-      axiosInstance
-        .get(`/device/${selectedDeviceId}/statistics?newest=true&limit=50`, options)
-        .then((response) => {
-          transformIntoDataset(response.data.data);
-        })
-        .catch(() => {})
-        .finally(() => {
-          setLoading(false);
-        });
-    }
+    axiosInstance
+      .get(
+        `${endpoints.owgw}/api/v1/device/${deviceSerialNumber}/statistics?newest=true&limit=50`,
+        options,
+      )
+      .then((response) => {
+        transformIntoDataset(response.data.data);
+      })
+      .catch(() => {});
   };
 
   useEffect(() => {
-    if (selectedDeviceId) {
+    if (deviceSerialNumber) {
       getStatistics();
     }
-  }, [selectedDeviceId]);
+  }, [deviceSerialNumber]);
 
   useEffect(() => {
-    if (!loading && lastRefresh !== '' && selectedDeviceId) {
-      getStatistics();
-    }
-  }, [lastRefresh]);
+    eventBus.on('refreshInterfaceStatistics', () => getStatistics());
+
+    return () => {
+      eventBus.remove('refreshInterfaceStatistics');
+    };
+  }, []);
 
   return (
     <div>
-      {statOptions.interfaceList.map((data) => (
-        <div key={createUuid()}>
-          <DeviceStatisticsChart
-            key={createUuid()}
-            data={data}
-            options={{
-              ...statOptions.settings,
-              title: {
-                text: capitalizeFirstLetter(data[0].titleName),
-                align: 'left',
-                style: {
-                  fontSize: '25px',
-                },
+      {statOptions.interfaceList.map((data) => {
+        const options = {
+          data,
+          options: {
+            ...statOptions.settings,
+            title: {
+              text: capitalizeFirstLetter(data[0].titleName),
+              align: 'left',
+              style: {
+                fontSize: '25px',
               },
-            }}
-          />
-        </div>
-      ))}
+            },
+          },
+        };
+        return (
+          <div key={createUuid()}>
+            <DeviceStatisticsChart chart={options} />
+          </div>
+        );
+      })}
     </div>
   );
 };
 
-StatisticsChartList.propTypes = {
-  lastRefresh: PropTypes.string,
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
-StatisticsChartList.defaultProps = {
-  lastRefresh: '',
-};
-
-export default StatisticsChartList;
+export default React.memo(StatisticsChartList);

src/components/InterfaceStatistics/containers/DeviceStatisticsChart/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Chart from 'react-apexcharts';
-
-const DeviceStatisticsChart = ({ data, options }) => (
-  <div style={{ height: '360px' }}>
-    <Chart series={data} options={options} type="line" height="100%" />
-  </div>
-);
-
-DeviceStatisticsChart.propTypes = {
-  data: PropTypes.instanceOf(Array),
-  options: PropTypes.instanceOf(Object),
-};
-
-DeviceStatisticsChart.defaultProps = {
-  data: [],
-  options: {},
-};
-
-export default DeviceStatisticsChart;

src/components/InterfaceStatistics/index.js

@@ -1,47 +1,62 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import PropTypes from 'prop-types';
-import { CCard, CCardHeader, CCardBody, CPopover, CRow, CCol } from '@coreui/react';
+import { CCard, CCardHeader, CCardBody, CPopover, CButton } from '@coreui/react';
 import { cilSync } from '@coreui/icons';
 import CIcon from '@coreui/icons-react';
-import StatisticsChartList from './containers/StatisticsChartList';
-import styles from './index.module.scss';
+import eventBus from 'utils/eventBus';
+import LifetimeStatsmodal from 'components/LifetimeStatsModal';
+import StatisticsChartList from './StatisticsChartList';
+import LatestStatisticsmodal from './LatestStatisticsModal';
 
-const DeviceStatisticsCard = ({ selectedDeviceId }) => {
+const DeviceStatisticsCard = () => {
   const { t } = useTranslation();
-  const [lastRefresh, setLastRefresh] = useState(new Date().toString());
+  const [showLatestModal, setShowLatestModal] = useState(false);
+  const [showLifetimeModal, setShowLifetimeModal] = useState(false);
+
+  const toggleLatestModal = () => {
+    setShowLatestModal(!showLatestModal);
+  };
+
+  const toggleLifetimeModal = () => {
+    setShowLifetimeModal(!showLifetimeModal);
+  };
 
   const refresh = () => {
-    setLastRefresh(new Date().toString());
+    eventBus.dispatch('refreshInterfaceStatistics', { message: 'Refresh interface statistics' });
   };
 
   return (
-    <CCard>
-      <CCardHeader>
-        <CRow>
-          <CCol>{t('statistics.title')}</CCol>
-          <CCol className={styles.alignRight}>
-            <CPopover content={t('common.refresh')}>
-              <CIcon
-                onClick={refresh}
-                name="cil-sync"
-                content={cilSync}
-                size="lg"
-                color="primary"
-              />
-            </CPopover>
-          </CCol>
-        </CRow>
-      </CCardHeader>
-      <CCardBody className={styles.statsBody}>
-        <StatisticsChartList selectedDeviceId={selectedDeviceId} lastRefresh={lastRefresh} />
-      </CCardBody>
-    </CCard>
+    <div>
+      <CCard className="m-0">
+        <CCardHeader className="dark-header">
+          <div className="d-flex flex-row-reverse align-items-center">
+            <div className="pl-2">
+              <CPopover content={t('common.refresh')}>
+                <CButton size="sm" color="info" onClick={refresh}>
+                  <CIcon content={cilSync} />
+                </CButton>
+              </CPopover>
+            </div>
+            <div className="pl-2">
+              <CButton size="sm" color="info" onClick={toggleLifetimeModal}>
+                Lifetime Statistics
+              </CButton>
+            </div>
+            <div className="pl-2">
+              <CButton size="sm" color="info" onClick={toggleLatestModal}>
+                {t('statistics.show_latest')}
+              </CButton>
+            </div>
+          </div>
+        </CCardHeader>
+        <CCardBody className="p-1">
+          <StatisticsChartList />
+        </CCardBody>
+      </CCard>
+      <LatestStatisticsmodal show={showLatestModal} toggle={toggleLatestModal} />
+      <LifetimeStatsmodal show={showLifetimeModal} toggle={toggleLifetimeModal} />
+    </div>
   );
 };
 
-DeviceStatisticsCard.propTypes = {
-  selectedDeviceId: PropTypes.string.isRequired,
-};
-
 export default DeviceStatisticsCard;

src/components/InterfaceStatistics/index.module.scss

@@ -1,7 +0,0 @@
-.alignRight {
-  text-align: right;
-}
-
-.statsBody {
-  padding: 5%;
-}

src/components/LanguageSwitcher/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { CSelect } from '@coreui/react';
-
-const LanguageSwitcher = () => {
-  const { i18n } = useTranslation();
-
-  return (
-    <CSelect
-      custom
-      defaultValue={i18n.language.split('-')[0]}
-      onChange={(e) => i18n.changeLanguage(e.target.value)}
-    >
-      <option value="de">Deutsche</option>
-      <option value="es">Español</option>
-      <option value="en">English</option>
-      <option value="fr">Français</option>
-      <option value="pt">Portugues</option>
-    </CSelect>
-  );
-};
-
-export default LanguageSwitcher;

src/components/LifetimeStatsModal/index.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import axiosInstance from 'utils/axiosInstance';
+import { useTranslation } from 'react-i18next';
+import { LifetimeStatsModal as Modal, useAuth, useDevice } from 'ucentral-libs';
+
+const LifetimeStatsModal = ({ show, toggle }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState({});
+
+  const getData = () => {
+    setLoading(true);
+
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(
+        `${endpoints.owgw}/api/v1/device/${deviceSerialNumber}/statistics?lifetime=true`,
+        options,
+      )
+      .then((response) => {
+        setData(response.data);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    if (show) getData();
+  }, [show]);
+
+  return <Modal t={t} loading={loading} show={show} toggle={toggle} data={data} />;
+};
+
+LifetimeStatsModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+export default LifetimeStatsModal;

src/components/LoadingButton/index.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CButton, CSpinner } from '@coreui/react';
-
-const LoadingButton = ({
-  isLoading,
-  label,
-  isLoadingLabel,
-  action,
-  color,
-  variant,
-  block,
-  disabled,
-}) => (
-  <CButton
-    variant={variant}
-    color={color}
-    onClick={action}
-    block={block}
-    disabled={isLoading || disabled}
-  >
-    {isLoading ? isLoadingLabel : label}
-    <CSpinner hidden={!isLoading} color="light" component="span" size="sm" />
-  </CButton>
-);
-
-LoadingButton.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
-  block: PropTypes.bool,
-  disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  isLoadingLabel: PropTypes.string.isRequired,
-  action: PropTypes.func.isRequired,
-  color: PropTypes.string,
-  variant: PropTypes.string,
-};
-
-LoadingButton.defaultProps = {
-  color: 'primary',
-  variant: '',
-  block: true,
-  disabled: false,
-};
-
-export default LoadingButton;

src/components/NetworkDiagram/dagreAdapter.js

@@ -0,0 +1,34 @@
+import dagre from 'dagre';
+import { isNode } from 'react-flow-renderer';
+
+const setupDag = (elements, nodeWidth, nodeHeight) => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: 'TB' });
+
+  elements.forEach((el) => {
+    if (isNode(el)) {
+      dagreGraph.setNode(el.id, { width: nodeWidth, height: nodeHeight });
+    } else {
+      dagreGraph.setEdge(el.source, el.target);
+    }
+  });
+
+  dagre.layout(dagreGraph);
+
+  return elements.map((el) => {
+    const newElement = el;
+    if (isNode(newElement)) {
+      const nodeWithPosition = dagreGraph.node(newElement.id);
+      newElement.targetPosition = 'top';
+      newElement.sourcePosition = 'bottom';
+      newElement.position = {
+        x: nodeWithPosition.x - nodeWidth / 2 + Math.random() / 1000,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      };
+    }
+    return newElement;
+  });
+};
+
+export default setupDag;

src/components/NetworkDiagram/index.js

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { CRow, CCol } from '@coreui/react';
+import { NetworkDiagram as Graph } from 'ucentral-libs';
+import { useTranslation } from 'react-i18next';
+import createLayoutedElements from './dagreAdapter';
+
+const associationStyle = {
+  background: '#3399ff',
+  color: 'white',
+  border: '1px solid #777',
+  width: 220,
+  padding: 10,
+};
+
+const recognizedRadioStyle = {
+  background: '#2eb85c',
+  color: 'white',
+  width: 220,
+  padding: 15,
+};
+
+const unrecognizedRadioStyle = {
+  background: '#e55353',
+  color: 'white',
+  width: 220,
+  padding: 15,
+};
+
+const recognizedRadioNode = (radio) => (
+  <div className="align-middle">
+    <h6 className="align-middle mb-0">
+      Radio #{radio.radio} ({radio.channel < 16 ? '2G' : '5G'})
+    </h6>
+  </div>
+);
+
+const unrecognizedRadioNode = (t, radio) => (
+  <div className="align-middle">
+    <h6 className="align-middle mb-0">
+      Radio #{radio.radioIndex} ({t('common.unrecognized')})
+    </h6>
+  </div>
+);
+
+const associationNode = (associationInfo) => (
+  <div>
+    <CRow>
+      <CCol className="text-center">
+        <h6>{associationInfo.bssid}</h6>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol className="text-left pl-4">Rx Rate : {associationInfo.rxRate}</CCol>
+    </CRow>
+    <CRow>
+      <CCol className="text-left pl-4">Tx Rate : {associationInfo.txRate}</CCol>
+    </CRow>
+  </div>
+);
+
+const NetworkDiagram = ({ show, radios, associations }) => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [elements, setElements] = useState([]);
+
+  const getX = (associationsAdded) => {
+    if (associationsAdded === 0) return 0;
+    if ((associationsAdded + 1) % 2 === 0) return -140 * (associationsAdded + 1);
+    return 140 * associationsAdded;
+  };
+
+  const parseData = () => {
+    setLoading(true);
+    const newElements = [];
+    const radiosAdded = {};
+
+    // Creating the radio nodes
+    for (const radio of radios) {
+      if (radiosAdded[radio.radio] === undefined) {
+        newElements.push({
+          id: `r-${radio.radio}`,
+          data: { label: recognizedRadioNode(radio) },
+          position: { x: 0, y: 200 * radio.radio },
+          type: 'input',
+          style: recognizedRadioStyle,
+        });
+        radiosAdded[radio.radio] = 0;
+      }
+    }
+
+    // Creating the association nodes and their edges
+    for (let i = 0; i < associations.length; i += 1) {
+      const assoc = associations[i];
+
+      // If the radio has not been added, we create a new unknown radio based on its index
+      if (radiosAdded[assoc.radio.radioIndex] === undefined) {
+        newElements.push({
+          id: `r-${assoc.radio.radioIndex}`,
+          data: { label: unrecognizedRadioNode(t, assoc.radio) },
+          position: { x: 0, y: 200 * assoc.radio.radioIndex },
+          type: 'input',
+          style: unrecognizedRadioStyle,
+        });
+        radiosAdded[assoc.radio.radioIndex] = 0;
+      }
+
+      // Adding the association
+      newElements.push({
+        id: `a-${assoc.bssid}`,
+        data: { label: associationNode(assoc) },
+        position: {
+          x: getX(radiosAdded[assoc.radio.radioIndex]),
+          y: 80 + 240 * assoc.radio.radioIndex,
+        },
+        style: associationStyle,
+        type: 'output',
+      });
+      radiosAdded[assoc.radio.radioIndex] += 1;
+
+      // Creating the edge
+      newElements.push({
+        id: `e-${assoc.radio.radioIndex}-${assoc.bssid}`,
+        source: `r-${assoc.radio.radioIndex}`,
+        target: `a-${assoc.bssid}`,
+        arrowHeadType: 'arrowclosed',
+      });
+    }
+
+    setElements(newElements);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (radios !== null && associations !== null) {
+      parseData();
+    }
+  }, [radios, associations]);
+
+  return (
+    <Graph
+      show={show}
+      loading={loading}
+      elements={createLayoutedElements(elements, 220, 80)}
+      setElements={setElements}
+    />
+  );
+};
+
+NetworkDiagram.propTypes = {
+  show: PropTypes.bool,
+  radios: PropTypes.instanceOf(Array),
+  associations: PropTypes.instanceOf(Array),
+};
+
+NetworkDiagram.defaultProps = {
+  show: true,
+  radios: null,
+  associations: null,
+};
+
+export default NetworkDiagram;

src/components/RebootModal/index.js

@@ -5,45 +5,36 @@ import {
   CModalTitle,
   CModalBody,
   CModalFooter,
-  CSpinner,
+  CSwitch,
   CCol,
   CRow,
-  CInvalidFeedback,
+  CPopover,
 } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-widgets/DatePicker';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { convertDateToUtc, convertDateFromUtc, dateToUnix } from 'utils/helper';
+import { dateToUnix } from 'utils/helper';
 import 'react-widgets/styles.css';
-import { getToken } from 'utils/authHelper';
 import axiosInstance from 'utils/axiosInstance';
 import eventBus from 'utils/eventBus';
-import LoadingButton from 'components/LoadingButton';
+import { LoadingButton, useAuth, useDevice, useToast } from 'ucentral-libs';
 import SuccessfulActionModalBody from 'components/SuccessfulActionModalBody';
-import styles from './index.module.scss';
 
 const ActionModal = ({ show, toggleModal }) => {
   const { t } = useTranslation();
-  const [hadSuccess, setHadSuccess] = useState(false);
-  const [hadFailure, setHadFailure] = useState(false);
+  const { currentToken, endpoints } = useAuth();
+  const { deviceSerialNumber } = useDevice();
+  const { addToast } = useToast();
   const [waiting, setWaiting] = useState(false);
-  const [validDate, setValidDate] = useState(true);
+  const [result, setResult] = useState(null);
   const [chosenDate, setChosenDate] = useState(new Date().toString());
-  const [doingNow, setDoingNow] = useState(false);
-  const [responseBody, setResponseBody] = useState('');
-  const selectedDeviceId = useSelector((state) => state.selectedDeviceId);
+  const [isNow, setIsNow] = useState(false);
 
-  const setDateToLate = () => {
-    const date = convertDateToUtc(new Date());
-    if (date.getHours() >= 3) {
-      date.setDate(date.getDate() + 1);
-    }
-    date.setHours(3);
-    date.setMinutes(0);
-
-    setChosenDate(convertDateFromUtc(date).toString());
+  const toggleNow = () => {
+    setIsNow(!isNow);
   };
 
   const setDate = (date) => {
@@ -54,47 +45,46 @@ const ActionModal = ({ show, toggleModal }) => {
 
   useEffect(() => {
     if (show) {
-      setHadSuccess(false);
-      setHadFailure(false);
+      setResult(null);
       setWaiting(false);
-      setDoingNow(false);
       setChosenDate(new Date().toString());
-      setResponseBody('');
-      setValidDate(true);
     }
   }, [show]);
 
-  const doAction = (isNow) => {
-    if (isNow !== undefined) setDoingNow(isNow);
-    setHadFailure(false);
-    setHadSuccess(false);
+  const doAction = () => {
     setWaiting(true);
 
-    const token = getToken();
     const utcDate = new Date(chosenDate);
-    const utcDateString = utcDate.toISOString();
 
     const parameters = {
-      serialNumber: selectedDeviceId,
-      when: isNow ? 0 : dateToUnix(utcDateString),
+      serialNumber: deviceSerialNumber,
+      when: isNow ? 0 : dateToUnix(utcDate),
     };
 
     const headers = {
       Accept: 'application/json',
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${currentToken}`,
     };
 
     axiosInstance
-      .post(`/device/${encodeURIComponent(selectedDeviceId)}/reboot`, parameters, { headers })
+      .post(
+        `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceSerialNumber)}/reboot`,
+        parameters,
+        { headers },
+      )
       .then(() => {
-        setHadSuccess(true);
+        addToast({
+          title: t('common.success'),
+          body: t('commands.command_success'),
+          color: 'success',
+          autohide: true,
+        });
+        toggleModal();
       })
       .catch(() => {
-        setResponseBody(t('commands.error'));
-        setHadFailure(true);
+        setResult('error');
       })
       .finally(() => {
-        setDoingNow(false);
         setWaiting(false);
         eventBus.dispatch('actionCompleted', { message: 'An action has been completed' });
       });
@@ -102,65 +92,59 @@ const ActionModal = ({ show, toggleModal }) => {
 
   return (
     <CModal show={show} onClose={toggleModal}>
-      <CModalHeader closeButton>
-        <CModalTitle>{t('reboot.title')}</CModalTitle>
+      <CModalHeader className="p-1">
+        <CModalTitle className="pl-1 pt-1">{t('reboot.title')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggleModal}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
-      {hadSuccess ? (
+      {result === 'success' ? (
         <SuccessfulActionModalBody toggleModal={toggleModal} />
       ) : (
         <div>
           <CModalBody>
-            <h6>{t('reboot.directions')}</h6>
-            <CRow className={styles.spacedRow}>
-              <CCol>
-                <CButton onClick={() => doAction(true)} disabled={waiting} block color="primary">
-                  {waiting && doingNow ? t('common.loading_ellipsis') : t('common.do_now')}
-                  <CSpinner
-                    color="light"
-                    hidden={!waiting || !doingNow}
-                    component="span"
-                    size="sm"
-                  />
-                </CButton>
+            <CRow>
+              <CCol md="8">
+                <p>{t('reboot.now')}</p>
               </CCol>
               <CCol>
-                <CButton disabled={waiting} block color="primary" onClick={() => setDateToLate()}>
-                  {t('common.later_tonight')}
-                </CButton>
+                <CSwitch
+                  disabled={waiting}
+                  color="primary"
+                  defaultChecked={isNow}
+                  onClick={toggleNow}
+                  labelOn={t('common.yes')}
+                  labelOff={t('common.no')}
+                />
               </CCol>
             </CRow>
-            <CRow className={styles.spacedRow}>
-              <CCol md="4" className={styles.spacedColumn}>
-                <p>{t('common.date')}:</p>
+            <CRow hidden={isNow} className="mt-2">
+              <CCol md="4" className="pt-2">
+                <p>{t('common.custom_date')}:</p>
               </CCol>
               <CCol xs="12" md="8">
                 <DatePicker
                   selected={new Date(chosenDate)}
                   includeTime
-                  className={('form-control', { 'is-invalid': !validDate })}
                   value={new Date(chosenDate)}
                   placeholder="Select custom date"
                   disabled={waiting}
                   onChange={(date) => setDate(date)}
-                  min={convertDateToUtc(new Date())}
+                  min={new Date()}
                 />
               </CCol>
             </CRow>
-            <CInvalidFeedback>{t('common.need_date')}</CInvalidFeedback>
-
-            <div hidden={!hadSuccess && !hadFailure}>
-              <div>
-                <pre className="ignore">{responseBody}</pre>
-              </div>
-            </div>
           </CModalBody>
           <CModalFooter>
             <LoadingButton
-              label={t('common.schedule')}
+              label={isNow ? t('reboot.title') : t('common.schedule')}
               isLoadingLabel={t('common.loading_ellipsis')}
               isLoading={waiting}
               action={doAction}
-              variant="outline"
               block={false}
               disabled={waiting}
             />

src/components/RebootModal/index.module.scss

@@ -1,7 +0,0 @@
-.spacedRow {
-  margin-top: 20px;
-}
-
-.spacedColumn {
-  margin-top: 7px;
-}