From 82b63a7109668988ef75a179f72df055173cda4d Mon Sep 17 00:00:00 2001
From: Nicolas Vazquez <nicovazquez90@gmail.com>
Date: Wed, 15 Jul 2020 06:27:17 -0300
Subject: [PATCH] locales: Add missing internationlization to search and
 pagination (#531)

Missing internationalization on the search bar and pagination "Showing X results" and pagination dropdown on various views.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/view/InfoCard.vue           |  2 +-
 ui/src/components/view/ListResourceTable.vue  |  8 +++++--
 ui/src/components/view/SearchView.vue         |  2 +-
 ui/src/locales/en.json                        |  5 ++++
 ui/src/locales/es.json                        |  5 ++++
 ui/src/views/AutogenView.vue                  |  8 +++++--
 ui/src/views/compute/MigrateWizard.vue        |  8 +++++--
 .../compute/wizard/AffinityGroupSelection.vue |  8 +++++--
 .../wizard/ComputeOfferingSelection.vue       |  8 +++++--
 .../compute/wizard/DiskOfferingSelection.vue  |  8 +++++--
 .../views/compute/wizard/NetworkSelection.vue |  8 +++++--
 .../compute/wizard/SshKeyPairSelection.vue    |  8 +++++--
 .../compute/wizard/TemplateIsoRadioGroup.vue  |  8 +++++--
 ui/src/views/image/IsoZones.vue               |  8 +++++--
 ui/src/views/image/TemplateZones.vue          |  8 +++++--
 .../views/infra/network/DedicatedVLANTab.vue  |  8 +++++--
 .../infra/network/IpRangesTabManagement.vue   |  8 +++++--
 .../views/infra/network/IpRangesTabPublic.vue |  8 +++++--
 .../infra/network/IpRangesTabStorage.vue      |  8 +++++--
 .../network/providers/ProviderListView.vue    |  8 +++++--
 ui/src/views/network/EgressRulesTab.vue       |  8 +++++--
 ui/src/views/network/EnableStaticNat.vue      |  8 +++++--
 ui/src/views/network/FirewallRules.vue        |  8 +++++--
 .../views/network/InternalLBAssignVmForm.vue  |  8 +++++--
 .../views/network/InternalLBAssignedVmTab.vue |  9 ++++---
 ui/src/views/network/IpAddressesTab.vue       |  8 +++++--
 ui/src/views/network/LoadBalancing.vue        | 16 +++++++++----
 ui/src/views/network/PortForwarding.vue       | 16 +++++++++----
 ui/src/views/network/VpcTab.vue               | 24 ++++++++++++++-----
 ui/src/views/network/VpcTiersTab.vue          | 16 +++++++++----
 ui/src/views/project/AccountsTab.vue          |  8 +++++--
 ui/src/views/project/InvitationsTemplate.vue  |  8 +++++--
 32 files changed, 210 insertions(+), 69 deletions(-)

diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index 9be6ac8868b..4cad5c813f4 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -617,7 +617,7 @@
               rows="4"
               @change="handleNoteChange"
               :value="annotation"
-              placeholder="Add Note" />
+              :placeholder="$t('label.add.note')" />
             <a-button
               style="margin-top: 10px"
               @click="saveNote"
diff --git a/ui/src/components/view/ListResourceTable.vue b/ui/src/components/view/ListResourceTable.vue
index 3aa9f5f97e2..5ff814988b0 100644
--- a/ui/src/components/view/ListResourceTable.vue
+++ b/ui/src/components/view/ListResourceTable.vue
@@ -56,11 +56,15 @@
         :current="options.page"
         :pageSize="options.pageSize"
         :total="total"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40']"
         @change="handleTableChange"
         @showSizeChange="handlePageSizeChange"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </div>
 
diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue
index 5d162f531e9..7319a8c9b65 100644
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@@ -32,7 +32,7 @@
       <a-input-search
         allowClear
         class="input-search"
-        placeholder="Search"
+        :placeholder="$t('label.search')"
         v-model="searchQuery"
         @search="onSearch">
         <a-popover
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 72d891e5ee6..de9c8f2b8e9 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -317,6 +317,7 @@
 "label.add.new.tier": "Add new tier",
 "label.add.nfs.secondary.staging.store": "Add NFS Secondary Staging Store",
 "label.add.niciranvp.device": "Add Nvp Controller",
+"label.add.note": "Add Note",
 "label.add.opendaylight.device": "Add OpenDaylight Controller",
 "label.add.pa.device": "Add Palo Alto device",
 "label.add.physical.network": "Add Physical Network",
@@ -1069,6 +1070,7 @@
 "label.issystem": "Is System",
 "label.isvolatile": "Volatile",
 "label.item.listing": "Item listing",
+"label.items": "items",
 "label.japanese.keyboard": "Japanese keyboard",
 "label.keep": "Keep",
 "label.keep.colon": "Keep:",
@@ -1383,6 +1385,7 @@
 "label.numretries": "Number of Retries",
 "label.nvpdeviceid": "ID",
 "label.ocfs2": "OCFS2",
+"label.of": "of",
 "label.of.month": "of month",
 "label.offerha": "Offer HA",
 "label.offeringtype": "Compute Offering Type",
@@ -1422,6 +1425,7 @@
 "label.owner.account": "Owner Account",
 "label.owner.domain": "Owner Domain",
 "label.pa": "Palo Alto",
+"label.page": "page",
 "label.palo.alto.details": "Palo Alto details",
 "label.palo.alto.firewall": "Palo Alto Firewall",
 "label.palp": "Palo Alto Log Profile",
@@ -1794,6 +1798,7 @@
 "label.sharedmountpoint": "SharedMountPoint",
 "label.sharewith": "Share With",
 "label.show.ingress.rule": "Show Ingress Rule",
+"label.showing": "Showing",
 "label.shrinkok": "Shrink OK",
 "label.shutdown.provider": "Shutdown provider",
 "label.simplified.chinese.keyboard": "Simplified Chinese keyboard",
diff --git a/ui/src/locales/es.json b/ui/src/locales/es.json
index 3f801615a12..c2953d55671 100644
--- a/ui/src/locales/es.json
+++ b/ui/src/locales/es.json
@@ -296,6 +296,7 @@
 "label.add.new.tier": "Agregar un nuevo tier",
 "label.add.nfs.secondary.staging.store": "Agregar un Almacenamiento Secundario Temporario NFS",
 "label.add.niciranvp.device": "Agregar Controlador Nvp",
+"label.add.note": "Agregar Nota",
 "label.add.opendaylight.device": "Agregar el Controlador OpenDaylight",
 "label.add.pa.device": "Agregar dispositivo Palo Alto",
 "label.add.physical.network": "Agregar red f\u00edsica",
@@ -945,6 +946,7 @@
 "label.issystem": "es Sistema",
 "label.isvolatile": "Vol\u00e1til",
 "label.item.listing": "Listado de art\u00edculos",
+"label.items": "elementos",
 "label.japanese.keyboard": "Teclado Japones",
 "label.keep": "Mantener",
 "label.keep.colon": "Conservar:",
@@ -1199,6 +1201,7 @@
 "label.numretries": "N\u00famero de reintentos",
 "label.nvpdeviceid": "ID",
 "label.ocfs2": "OCFS2",
+"label.of": "de",
 "label.of.month": "del mes",
 "label.offerha": "Oferta HA",
 "label.ok": "Aceptar",
@@ -1233,6 +1236,7 @@
 "label.owner.account": "Propietario de la cuenta",
 "label.owner.domain": "Due\u00f1o del Dominio",
 "label.pa": "Palo Alto",
+"label.page": "p\u00e1gina",
 "label.palo.alto.details": "Detalles de Palo Alto",
 "label.palp": "Perfil de Log Palo Alto",
 "label.parent.domain": "Dominio Padre",
@@ -1545,6 +1549,7 @@
 "label.sharedexecutable": "Compartidas",
 "label.sharedmountpoint": "PuntoMontajeCompartido",
 "label.show.ingress.rule": "Mostrar Regla Entrada",
+"label.showing": "Mostrando",
 "label.shrinkok": "Reducci\u00f3n OK",
 "label.shutdown.provider": "Apagar proveedor",
 "label.simplified.chinese.keyboard": "Teclado Chino Simplificado",
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index dbfc573393a..b02f25a8474 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -305,12 +305,16 @@
         :current="page"
         :pageSize="pageSize"
         :total="itemCount"
-        :showTotal="total => `Showing ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} of ${total} items`"
+        :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
         :pageSizeOptions="device === 'desktop' ? ['20', '50', '100', '500'] : ['10', '20', '50', '100', '500']"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
-        showQuickJumper />
+        showQuickJumper>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </div>
 </template>
diff --git a/ui/src/views/compute/MigrateWizard.vue b/ui/src/views/compute/MigrateWizard.vue
index 74d7e656dfd..c0997d3a7d3 100644
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@@ -61,11 +61,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <div style="margin-top: 20px; display: flex; justify-content:flex-end;">
       <a-button type="primary" :disabled="!selectedHost.id" @click="submitForm">
diff --git a/ui/src/views/compute/wizard/AffinityGroupSelection.vue b/ui/src/views/compute/wizard/AffinityGroupSelection.vue
index 8c6d5e9f480..2f7aed7d6bb 100644
--- a/ui/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/ui/src/views/compute/wizard/AffinityGroupSelection.vue
@@ -41,11 +41,15 @@
         :current="options.page"
         :pageSize="options.pageSize"
         :total="rowCount"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"
         @showSizeChange="onChangePageSize"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </div>
 </template>
diff --git a/ui/src/views/compute/wizard/ComputeOfferingSelection.vue b/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
index 432fdb1aa7a..90b45b55fcd 100644
--- a/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
+++ b/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
@@ -41,11 +41,15 @@
         :current="options.page"
         :pageSize="options.pageSize"
         :total="rowCount"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"
         @showSizeChange="onChangePageSize"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </div>
 </template>
diff --git a/ui/src/views/compute/wizard/DiskOfferingSelection.vue b/ui/src/views/compute/wizard/DiskOfferingSelection.vue
index 90356e0dcc6..4d5b627c611 100644
--- a/ui/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/ui/src/views/compute/wizard/DiskOfferingSelection.vue
@@ -52,11 +52,15 @@
         :current="options.page"
         :pageSize="options.pageSize"
         :total="rowCount"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"
         @showSizeChange="onChangePageSize"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </div>
 </template>
diff --git a/ui/src/views/compute/wizard/NetworkSelection.vue b/ui/src/views/compute/wizard/NetworkSelection.vue
index 2baf4c3db98..e0f2531a4b3 100644
--- a/ui/src/views/compute/wizard/NetworkSelection.vue
+++ b/ui/src/views/compute/wizard/NetworkSelection.vue
@@ -57,11 +57,15 @@
         :current="options.page"
         :pageSize="options.pageSize"
         :total="rowCount"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"
         @showSizeChange="onChangePageSize"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
 
     <a-modal
diff --git a/ui/src/views/compute/wizard/SshKeyPairSelection.vue b/ui/src/views/compute/wizard/SshKeyPairSelection.vue
index c336256456a..fef59e18123 100644
--- a/ui/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/ui/src/views/compute/wizard/SshKeyPairSelection.vue
@@ -40,11 +40,15 @@
         :current="options.page"
         :pageSize="options.pageSize"
         :total="rowCount"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"
         @showSizeChange="onChangePageSize"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </div>
 </template>
diff --git a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index 5213d2e6a0c..1002e466684 100644
--- a/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/ui/src/views/compute/wizard/TemplateIsoRadioGroup.vue
@@ -48,11 +48,15 @@
         :current="page"
         :pageSize="pageSize"
         :total="itemCount"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100', '500']"
         @change="onChangePage"
         @showSizeChange="onChangePageSize"
-        showSizeChanger />
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </div>
   </a-form-item>
 </template>
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 3dcd960dc67..3c0ade9e74a 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -62,11 +62,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="itemCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal
       v-if="'copyIso' in $store.getters.apis"
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index d9f1e1caa85..c0f3edc1de0 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -54,11 +54,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="itemCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal
       v-if="'copyTemplate' in $store.getters.apis"
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index 4c3d4c25f97..14612ae2f7b 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -49,11 +49,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal v-model="modal" :title="$t('label.dedicate.vlan.vni.range')" @ok="handleSubmit">
       <a-spin :spinning="formLoading">
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index fedff881e77..fa0fe366ff4 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -58,11 +58,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="items.length"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="changePage"
       @showSizeChange="changePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
       <a-form
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index 1e637188b4b..f705ad0e217 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -77,11 +77,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="items.length"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="changePage"
       @showSizeChange="changePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal v-model="accountModal" v-if="selectedItem" @ok="accountModal = false">
       <div>
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index 9495649d419..742221676c8 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -56,11 +56,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="items.length"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="changePage"
       @showSizeChange="changePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
       <a-form
diff --git a/ui/src/views/infra/network/providers/ProviderListView.vue b/ui/src/views/infra/network/providers/ProviderListView.vue
index 9b1a6b34cd7..fe05aae74f6 100644
--- a/ui/src/views/infra/network/providers/ProviderListView.vue
+++ b/ui/src/views/infra/network/providers/ProviderListView.vue
@@ -101,12 +101,16 @@
       :current="page"
       :pageSize="pageSize"
       :total="itemCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="changePage"
       @showSizeChange="changePageSize"
       showSizeChanger
-      showQuickJumper />
+      showQuickJumper>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
   </div>
 </template>
 
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 1175bc7f238..cfa23133f1f 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -87,11 +87,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
   </div>
 </template>
diff --git a/ui/src/views/network/EnableStaticNat.vue b/ui/src/views/network/EnableStaticNat.vue
index ebfc8e34e78..df1f7d300e4 100644
--- a/ui/src/views/network/EnableStaticNat.vue
+++ b/ui/src/views/network/EnableStaticNat.vue
@@ -74,11 +74,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="vmsList.length"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="changePage"
       @showSizeChange="changePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <div class="list__footer">
       <a-button @click="handleClose">{{ $t('label.cancel') }}</a-button>
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 510e164622a..05a040a581f 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -91,11 +91,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
       <div class="add-tags">
diff --git a/ui/src/views/network/InternalLBAssignVmForm.vue b/ui/src/views/network/InternalLBAssignVmForm.vue
index 330a8e54ea2..e6853b90736 100644
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@@ -61,11 +61,15 @@
           :current="page"
           :pageSize="pageSize"
           :total="vmCounts"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="changePage"
           @showSizeChange="changePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
       </a-checkbox-group>
     </div>
     <div class="actions">
diff --git a/ui/src/views/network/InternalLBAssignedVmTab.vue b/ui/src/views/network/InternalLBAssignedVmTab.vue
index 9be6101da8a..231696e0650 100644
--- a/ui/src/views/network/InternalLBAssignedVmTab.vue
+++ b/ui/src/views/network/InternalLBAssignedVmTab.vue
@@ -50,12 +50,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalInstances"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="changePage"
       @showSizeChange="changePageSize"
-      showSizeChanger
-    />
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
   </a-spin>
 </template>
 <script>
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index f08982c4d4e..50480522b10 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -85,11 +85,15 @@
         :current="page"
         :pageSize="pageSize"
         :total="totalIps"
-        :showTotal="total => `Total ${total} items`"
+        :showTotal="total => `Total ${total} ${$t('label.items')}`"
         :pageSizeOptions="['10', '20', '40', '80', '100']"
         @change="changePage"
         @showSizeChange="changePageSize"
-        showSizeChanger/>
+        showSizeChanger>
+          <template slot="buildOptionText" slot-scope="props">
+            <span>{{ props.value }} / {{$t('label.page')}}</span>
+          </template>
+      </a-pagination>
     </a-spin>
     <a-modal
       v-if="showAcquireIp"
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index a3d0a594e7f..0b1dd67c642 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -127,11 +127,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal" class="tags-modal">
       <span v-show="tagsModalLoading" class="modal-loading">
@@ -340,11 +344,15 @@
           :current="vmPage"
           :pageSize="vmPageSize"
           :total="vmCount"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="handleChangePage"
           @showSizeChange="handleChangePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
       </div>
 
     </a-modal>
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 5d531015412..f1a29a1ee7a 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -113,11 +113,15 @@
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
-      :showTotal="total => `Total ${total} items`"
+      :showTotal="total => `Total ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
-      showSizeChanger/>
+      showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{$t('label.page')}}</span>
+        </template>
+    </a-pagination>
 
     <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
       <span v-show="tagsModalLoading" class="tags-modal-loading">
@@ -220,11 +224,15 @@
           :current="vmPage"
           :pageSize="vmPageSize"
           :total="vmCount"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="handleChangePage"
           @showSizeChange="handleChangePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
       </div>
     </a-modal>
   </div>
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index 17091fb0a63..9d6c80531f6 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -60,11 +60,15 @@
           :current="page"
           :pageSize="pageSize"
           :total="itemCounts.networkAcls"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="changePage"
           @showSizeChange="changePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
         <a-modal
           v-model="modals.networkAcl"
           :title="$t('label.add.acl.list')"
@@ -107,11 +111,15 @@
           :current="page"
           :pageSize="pageSize"
           :total="itemCounts.privateGateways"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="changePage"
           @showSizeChange="changePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
 
         <a-modal v-model="modals.gateway" :title="$t('label.add.new.gateway')" @ok="handleGatewayFormSubmit">
           <a-spin :spinning="modals.gatewayLoading">
@@ -225,11 +233,15 @@
           :current="page"
           :pageSize="pageSize"
           :total="itemCounts.vpnConnections"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="changePage"
           @showSizeChange="changePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
         <a-modal v-model="modals.vpnConnection" :title="$t('label.create.vpn.connection')" @ok="handleVpnConnectionFormSubmit">
           <a-spin :spinning="modals.vpnConnectionLoading">
             <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index 7ff67b6f24e..3675f864e71 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -99,11 +99,15 @@
                 :current="page"
                 :pageSize="pageSize"
                 :total="itemCounts.vms[network.id]"
-                :showTotal="total => `Total ${total} items`"
+                :showTotal="total => `Total ${total} ${$t('label.items')}`"
                 :pageSizeOptions="['10', '20', '40', '80', '100']"
                 @change="changePage"
                 @showSizeChange="changePageSize"
-                showSizeChanger/>
+                showSizeChanger>
+                  <template slot="buildOptionText" slot-scope="props">
+                    <span>{{ props.value }} / {{$t('label.page')}}</span>
+                  </template>
+              </a-pagination>
             </a-collapse-panel>
             <a-collapse-panel :header="$t('label.internal.lb')" key="ilb" :style="customStyle" :disabled="!showIlb(network)" >
               <a-button
@@ -135,11 +139,15 @@
                 :current="page"
                 :pageSize="pageSize"
                 :total="itemCounts.internalLB[network.id]"
-                :showTotal="total => `Total ${total} items`"
+                :showTotal="total => `Total ${total} ${$t('label.items')}`"
                 :pageSizeOptions="['10', '20', '40', '80', '100']"
                 @change="changePage"
                 @showSizeChange="changePageSize"
-                showSizeChanger/>
+                showSizeChanger>
+                  <template slot="buildOptionText" slot-scope="props">
+                    <span>{{ props.value }} / {{$t('label.page')}}</span>
+                  </template>
+              </a-pagination>
             </a-collapse-panel>
           </a-collapse>
         </div>
diff --git a/ui/src/views/project/AccountsTab.vue b/ui/src/views/project/AccountsTab.vue
index 7b76d896b02..ae64a2a96bf 100644
--- a/ui/src/views/project/AccountsTab.vue
+++ b/ui/src/views/project/AccountsTab.vue
@@ -60,11 +60,15 @@
           :current="page"
           :pageSize="pageSize"
           :total="itemCount"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="changePage"
           @showSizeChange="changePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
       </a-col>
     </a-row>
   </div>
diff --git a/ui/src/views/project/InvitationsTemplate.vue b/ui/src/views/project/InvitationsTemplate.vue
index 7d9eb18be1c..1825477a720 100644
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/ui/src/views/project/InvitationsTemplate.vue
@@ -69,11 +69,15 @@
           :current="page"
           :pageSize="pageSize"
           :total="itemCount"
-          :showTotal="total => `Total ${total} items`"
+          :showTotal="total => `Total ${total} ${$t('label.items')}`"
           :pageSizeOptions="['10', '20', '40', '80', '100']"
           @change="changePage"
           @showSizeChange="changePageSize"
-          showSizeChanger/>
+          showSizeChanger>
+            <template slot="buildOptionText" slot-scope="props">
+              <span>{{ props.value }} / {{$t('label.page')}}</span>
+            </template>
+        </a-pagination>
       </a-col>
     </a-row>
   </div>