You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2020/07/15 09:27:25 UTC

[cloudstack-primate] branch master updated: locales: Add missing internationlization to search and pagination (#531)

This is an automated email from the ASF dual-hosted git repository.

rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git


The following commit(s) were added to refs/heads/master by this push:
     new abbf18f  locales: Add missing internationlization to search and pagination (#531)
abbf18f is described below

commit abbf18fab48360c3a5a6cb650915e947f95bad24
Author: Nicolas Vazquez <ni...@gmail.com>
AuthorDate: Wed Jul 15 06:27:17 2020 -0300

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

diff --git a/src/components/view/InfoCard.vue b/src/components/view/InfoCard.vue
index 9be6ac8..4cad5c8 100644
--- a/src/components/view/InfoCard.vue
+++ b/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/src/components/view/ListResourceTable.vue b/src/components/view/ListResourceTable.vue
index 3aa9f5f..5ff8149 100644
--- a/src/components/view/ListResourceTable.vue
+++ b/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/src/components/view/SearchView.vue b/src/components/view/SearchView.vue
index 5d162f5..7319a8c 100644
--- a/src/components/view/SearchView.vue
+++ b/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/src/locales/en.json b/src/locales/en.json
index 72d891e..de9c8f2 100644
--- a/src/locales/en.json
+++ b/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/src/locales/es.json b/src/locales/es.json
index 3f80161..c2953d5 100644
--- a/src/locales/es.json
+++ b/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/src/views/AutogenView.vue b/src/views/AutogenView.vue
index dbfc573..b02f25a 100644
--- a/src/views/AutogenView.vue
+++ b/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/src/views/compute/MigrateWizard.vue b/src/views/compute/MigrateWizard.vue
index 74d7e65..c0997d3 100644
--- a/src/views/compute/MigrateWizard.vue
+++ b/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/src/views/compute/wizard/AffinityGroupSelection.vue b/src/views/compute/wizard/AffinityGroupSelection.vue
index 8c6d5e9..2f7aed7 100644
--- a/src/views/compute/wizard/AffinityGroupSelection.vue
+++ b/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/src/views/compute/wizard/ComputeOfferingSelection.vue b/src/views/compute/wizard/ComputeOfferingSelection.vue
index 432fdb1..90b45b5 100644
--- a/src/views/compute/wizard/ComputeOfferingSelection.vue
+++ b/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/src/views/compute/wizard/DiskOfferingSelection.vue b/src/views/compute/wizard/DiskOfferingSelection.vue
index 90356e0..4d5b627 100644
--- a/src/views/compute/wizard/DiskOfferingSelection.vue
+++ b/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/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index 2baf4c3..e0f2531 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/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/src/views/compute/wizard/SshKeyPairSelection.vue b/src/views/compute/wizard/SshKeyPairSelection.vue
index c336256..fef59e1 100644
--- a/src/views/compute/wizard/SshKeyPairSelection.vue
+++ b/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/src/views/compute/wizard/TemplateIsoRadioGroup.vue b/src/views/compute/wizard/TemplateIsoRadioGroup.vue
index 5213d2e..1002e46 100644
--- a/src/views/compute/wizard/TemplateIsoRadioGroup.vue
+++ b/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/src/views/image/IsoZones.vue b/src/views/image/IsoZones.vue
index 3dcd960..3c0ade9 100644
--- a/src/views/image/IsoZones.vue
+++ b/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/src/views/image/TemplateZones.vue b/src/views/image/TemplateZones.vue
index d9f1e1c..c0f3edc 100644
--- a/src/views/image/TemplateZones.vue
+++ b/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/src/views/infra/network/DedicatedVLANTab.vue b/src/views/infra/network/DedicatedVLANTab.vue
index 4c3d4c2..14612ae 100644
--- a/src/views/infra/network/DedicatedVLANTab.vue
+++ b/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/src/views/infra/network/IpRangesTabManagement.vue b/src/views/infra/network/IpRangesTabManagement.vue
index fedff88..fa0fe36 100644
--- a/src/views/infra/network/IpRangesTabManagement.vue
+++ b/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/src/views/infra/network/IpRangesTabPublic.vue b/src/views/infra/network/IpRangesTabPublic.vue
index 1e63718..f705ad0 100644
--- a/src/views/infra/network/IpRangesTabPublic.vue
+++ b/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/src/views/infra/network/IpRangesTabStorage.vue b/src/views/infra/network/IpRangesTabStorage.vue
index 9495649..7422216 100644
--- a/src/views/infra/network/IpRangesTabStorage.vue
+++ b/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/src/views/infra/network/providers/ProviderListView.vue b/src/views/infra/network/providers/ProviderListView.vue
index 9b1a6b3..fe05aae 100644
--- a/src/views/infra/network/providers/ProviderListView.vue
+++ b/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/src/views/network/EgressRulesTab.vue b/src/views/network/EgressRulesTab.vue
index 1175bc7..cfa2313 100644
--- a/src/views/network/EgressRulesTab.vue
+++ b/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/src/views/network/EnableStaticNat.vue b/src/views/network/EnableStaticNat.vue
index ebfc8e3..df1f7d3 100644
--- a/src/views/network/EnableStaticNat.vue
+++ b/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/src/views/network/FirewallRules.vue b/src/views/network/FirewallRules.vue
index 510e164..05a040a 100644
--- a/src/views/network/FirewallRules.vue
+++ b/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/src/views/network/InternalLBAssignVmForm.vue b/src/views/network/InternalLBAssignVmForm.vue
index 330a8e5..e6853b9 100644
--- a/src/views/network/InternalLBAssignVmForm.vue
+++ b/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/src/views/network/InternalLBAssignedVmTab.vue b/src/views/network/InternalLBAssignedVmTab.vue
index 9be6101..231696e 100644
--- a/src/views/network/InternalLBAssignedVmTab.vue
+++ b/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/src/views/network/IpAddressesTab.vue b/src/views/network/IpAddressesTab.vue
index f08982c..5048052 100644
--- a/src/views/network/IpAddressesTab.vue
+++ b/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/src/views/network/LoadBalancing.vue b/src/views/network/LoadBalancing.vue
index a3d0a59..0b1dd67 100644
--- a/src/views/network/LoadBalancing.vue
+++ b/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/src/views/network/PortForwarding.vue b/src/views/network/PortForwarding.vue
index 5d53101..f1a29a1 100644
--- a/src/views/network/PortForwarding.vue
+++ b/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/src/views/network/VpcTab.vue b/src/views/network/VpcTab.vue
index 17091fb..9d6c805 100644
--- a/src/views/network/VpcTab.vue
+++ b/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/src/views/network/VpcTiersTab.vue b/src/views/network/VpcTiersTab.vue
index 7ff67b6..3675f86 100644
--- a/src/views/network/VpcTiersTab.vue
+++ b/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/src/views/project/AccountsTab.vue b/src/views/project/AccountsTab.vue
index 7b76d89..ae64a2a 100644
--- a/src/views/project/AccountsTab.vue
+++ b/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/src/views/project/InvitationsTemplate.vue b/src/views/project/InvitationsTemplate.vue
index 7d9eb18..1825477 100644
--- a/src/views/project/InvitationsTemplate.vue
+++ b/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>