Add translation to header and navigation

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I31a6c7a45a20c68efc367ba625c7b06b2d7ba47d

3 files changed, 76 insertions, 30 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 39191766..aa8d9f8b 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a class="link-skip-nav btn btn-light" href="#main-content">
-      Skip to content
+      {{ $t('appHeader.skipToContent') }}
     </a>
     <header id="page-header">
       <b-navbar variant="dark" type="dark">
@@ -20,25 +20,25 @@
           <icon-menu v-if="!isNavigationOpen" />
         </b-button>
         <b-navbar-nav>
-          <b-nav-text>BMC System Management</b-nav-text>
+          <b-nav-text>{{ $t('appHeader.bmcSystemManagement') }}</b-nav-text>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
           <b-nav>
             <b-nav-item>
-              Health
+              {{ $t('appHeader.health') }}
               <status-icon :status="healthStatusIcon" />
             </b-nav-item>
             <b-nav-item>
-              Power
+              {{ $t('appHeader.power') }}
               <status-icon :status="hostStatusIcon" />
             </b-nav-item>
             <b-nav-item @click="refresh">
-              Refresh
+              {{ $t('appHeader.refresh') }}
               <icon-renew />
             </b-nav-item>
             <b-nav-item @click="logout">
-              Logout
+              {{ $t('appHeader.logOut') }}
               <icon-avatar />
             </b-nav-item>
           </b-nav>
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 4c858e81..cc024c86 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -3,63 +3,85 @@
     <div class="nav-container" :class="{ open: isNavigationOpen }">
       <nav ref="nav">
         <b-nav vertical>
-          <b-nav-item to="/"><icon-overview />Overview</b-nav-item>
+          <b-nav-item to="/">
+            <icon-overview />
+            {{ $t('appNavigation.overview') }}
+          </b-nav-item>
 
           <li class="nav-item">
             <b-button v-b-toggle.health-menu variant="link">
-              <icon-health />Health
+              <icon-health />{{ $t('appNavigation.health') }}
               <icon-expand class="icon-expand" />
             </b-button>
             <b-collapse id="health-menu" tag="ul" class="nav-item__nav">
-              <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
-              <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
-              <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.eventLog') }}
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.hardwareStatus') }}
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.sensors') }}
+              </b-nav-item>
             </b-collapse>
           </li>
 
           <li class="nav-item">
             <b-button v-b-toggle.control-menu variant="link">
-              <icon-control />Control
+              <icon-control />
+              {{ $t('appNavigation.control') }}
               <icon-expand class="icon-expand" />
             </b-button>
             <b-collapse id="control-menu" tag="ul" class="nav-item__nav">
               <b-nav-item href="javascript:void(0)">
-                Manage power usage
+                {{ $t('appNavigation.managePowerUsage') }}
+              </b-nav-item>
+              <b-nav-item to="/control/reboot-bmc">
+                {{ $t('appNavigation.rebootBmc') }}
               </b-nav-item>
-              <b-nav-item to="/control/reboot-bmc">Reboot BMC</b-nav-item>
-              <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
               <b-nav-item href="javascript:void(0)">
-                Server power operations
+                {{ $t('appNavigation.serverLed') }}
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.serverPowerOperations') }}
               </b-nav-item>
             </b-collapse>
           </li>
 
           <li class="nav-item">
             <b-button v-b-toggle.configuration-menu variant="link">
-              <icon-configuration />Configuration
+              <icon-configuration />
+              {{ $t('appNavigation.configuration') }}
               <icon-expand class="icon-expand" />
             </b-button>
             <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
-              <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
               <b-nav-item href="javascript:void(0)">
-                Network settings
+                {{ $t('appNavigation.firmware') }}
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.networkSettings') }}
+              </b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.snmpSettings') }}
               </b-nav-item>
-              <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
             </b-collapse>
           </li>
 
           <li class="nav-item">
             <b-button v-b-toggle.access-control-menu variant="link">
-              <icon-access-control />Access Control
+              <icon-access-control />
+              {{ $t('appNavigation.accessControl') }}
               <icon-expand class="icon-expand" />
             </b-button>
             <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
-              <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
+              <b-nav-item href="javascript:void(0)">
+                {{ $t('appNavigation.ldap') }}
+              </b-nav-item>
               <b-nav-item to="/access-control/local-user-management">
-                Local user management
+                {{ $t('appNavigation.localUserManagement') }}
               </b-nav-item>
               <b-nav-item href="javascript:void(0)">
-                SSL Certificates
+                {{ $t('appNavigation.sslCertificates') }}
               </b-nav-item>
             </b-collapse>
           </li>
diff --git a/src/locales/en.json b/src/locales/en.json
index 44a57ba0..5e544dc3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -32,26 +32,50 @@
     }
   },
   "appHeader": {
+    "bmcSystemManagement": "BMC System Management",
     "health": "Health",
     "logOut": "Log out",
     "power": "Power",
-    "refresh": "Refresh"
+    "refresh": "Refresh",
+    "skipToContent": "Skip to content"
   },
   "appNavigation": {
     "accessControl": "Access Control",
     "configuration": "Configuration",
     "control": "Control",
+    "eventLog": "@:appPageTitle.eventLog",
+    "firmware": "@:appPageTitle.firmware",
+    "hardwareStatus": "@:appPageTitle.hardwareStatus",
     "health": "Health",
-    "localUserManagement": "@appPageTitle.localUserManagement",
-    "overview": "@appPageTitle.overview",
-    "rebootBmc": "@appPageTitle.rebootBmc"
+    "ldap": "@:appPageTitle.ldap",
+    "localUserManagement": "@:appPageTitle.localUserManagement",
+    "managePowerUsage": "@:appPageTitle.managePowerUsage",
+    "networkSettings": "@:appPageTitle.networkSettings",
+    "overview": "@:appPageTitle.overview",
+    "rebootBmc": "@:appPageTitle.rebootBmc",
+    "sensors": "@:appPageTitle.sensors",
+    "serverLed": "@:appPageTitle.serverLed",
+    "serverPowerOperations": "@:appPageTitle.serverPowerOperations",
+    "snmpSettings": "@:appPageTitle.snmpSettings",
+    "sslCertificates": "@:appPageTitle.sslCertificates"
   },
   "appPageTitle": {
+    "eventLog": "Event log",
+    "firmware": "Firmware",
+    "hardwareStatus": "Hardware status",
+    "ldap": "LDAP",
     "localUserManagement": "Local user management",
     "login": "Login",
+    "managePowerUsage": "Manage power usage",
+    "networkSettings": "Network settings",
     "overview": "Overview",
-    "unauthorized": "Unauthorized",
-    "rebootBmc": "Reboot BMC"
+    "rebootBmc": "Reboot BMC",
+    "sensors": "Sensors",
+    "serverLed": "Server LED",
+    "serverPowerOperations": "Server power operations",
+    "snmpSettings": "SNMP settings",
+    "sslCertificates": "SSL Certificates",
+    "unauthorized": "Unauthorized"
   },
   "pageLocalUserManagement": {
     "accountPolicySettings": "Account policy settings",