This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git
The following commit(s) were added to refs/heads/main by this push:
new d5015d7 ui: Prettify ManageInstances.vue (#5295)
d5015d7 is described below
commit d5015d7af1dd2f6e55a46c53b667a9ed652d0a83
Author: davidjumani <[email protected]>
AuthorDate: Mon Aug 9 15:51:37 2021 +0530
ui: Prettify ManageInstances.vue (#5295)
* ui: Prettify ManageInstances.vue
* Update en.json
Co-authored-by: Rohit Yadav <[email protected]>
---
ui/public/locales/en.json | 3 +-
ui/src/views/tools/ManageInstances.vue | 119 ++++++++++++++++++---------------
2 files changed, 67 insertions(+), 55 deletions(-)
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 4a775bd..6b3efc3 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -742,6 +742,7 @@
"label.deployasis":"Read VM settings from OVA",
"label.deploymentplanner": "Deployment planner",
"label.description": "Description",
+"label.desc.importexportinstancewizard": "Import and export instances to/from
an existing VMware cluster.",
"label.destcidr": "Destination CIDR",
"label.destination": "Destination",
"label.destinationphysicalnetworkid": "Destination physical network ID",
@@ -2939,7 +2940,7 @@
"message.guestnetwork.state.shutdown": "Indicates the network configuration is
being destroyed",
"message.host.dedicated": "Host Dedicated",
"message.host.dedication.released": "Host dedication released",
-"message.desc.importexportinstancewizard": "Import and export instances
to/from an existing VMware zone.<br/><br/>This feature only applies Cloudstack
VMware zones. By choosing to Manage an instance, CloudStack takes over the
orchestration of that instance. The instance is left running and not physically
moved. Unmanaging instances, removes CloudStack ability to mange them (but they
are left running and not destroyed)",
+"message.desc.importexportinstancewizard": "This feature only applies
Cloudstack VMware clusters. By choosing to Manage an instance, CloudStack takes
over the orchestration of that instance. The instance is left running and not
physically moved. Unmanaging instances, removes CloudStack ability to mange
them (but they are left running and not destroyed)",
"message.info.cloudian.console": "Cloudian Management Console should open in
another window",
"message.installwizard.click.retry": "Click the button to retry launch.",
"message.installwizard.copy.whatisacluster": "A cluster provides a way to
group hosts. The hosts in a cluster all have identical hardware, run the same
hypervisor, are on the same subnet, and access the same shared storage. Virtual
machine instances (VMs) can be live-migrated from one host to another within
the same cluster, without interrupting service to the user. A cluster is the
third-largest organizational unit within a CloudStack™; deployment. Clusters
are contained within pods, an [...]
diff --git a/ui/src/views/tools/ManageInstances.vue
b/ui/src/views/tools/ManageInstances.vue
index 36f1479..91180a2 100644
--- a/ui/src/views/tools/ManageInstances.vue
+++ b/ui/src/views/tools/ManageInstances.vue
@@ -37,58 +37,57 @@
:md="24">
<div>
<a-card>
- <a-card class="row-element"><span
v-html="$t('message.desc.importexportinstancewizard')" /></a-card>
- <a-row :gutter="18">
- <a-form
- style="min-width: 170px"
- :form="form"
- layout="vertical">
- <a-col :md="24" :lg="8">
- <a-form-item :label="this.$t('label.zoneid')">
- <a-select
- v-decorator="['zoneid', {}]"
- showSearch
- optionFilterProp="children"
- :filterOption="filterOption"
- :options="zoneSelectOptions"
- @change="onSelectZoneId"
- :loading="optionLoading.zones"
- autoFocus
- ></a-select>
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="8">
- <a-form-item
- :label="this.$t('label.podid')">
- <a-select
- v-decorator="['podid']"
- showSearch
- optionFilterProp="children"
- :filterOption="filterOption"
- :options="podSelectOptions"
- :loading="optionLoading.pods"
- @change="onSelectPodId"
- ></a-select>
- </a-form-item>
- </a-col>
- <a-col :md="24" :lg="8">
- <a-form-item
- :label="this.$t('label.clusterid')">
- <a-select
- v-decorator="['clusterid']"
- showSearch
- optionFilterProp="children"
- :filterOption="filterOption"
- :options="clusterSelectOptions"
- :loading="optionLoading.clusters"
- @change="onSelectClusterId"
- ></a-select>
- </a-form-item>
- </a-col>
- </a-form>
- </a-row>
+ <a-alert type="info" :showIcon="true"
:message="$t('label.desc.importexportinstancewizard')"
:description="$t('message.desc.importexportinstancewizard')" />
+ <br />
+ <a-form
+ style="min-width: 170px"
+ :form="form"
+ layout="vertical">
+ <a-col :md="24" :lg="8">
+ <a-form-item :label="this.$t('label.zoneid')">
+ <a-select
+ v-decorator="['zoneid', {}]"
+ showSearch
+ optionFilterProp="children"
+ :filterOption="filterOption"
+ :options="zoneSelectOptions"
+ @change="onSelectZoneId"
+ :loading="optionLoading.zones"
+ autoFocus
+ ></a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="8">
+ <a-form-item
+ :label="this.$t('label.podid')">
+ <a-select
+ v-decorator="['podid']"
+ showSearch
+ optionFilterProp="children"
+ :filterOption="filterOption"
+ :options="podSelectOptions"
+ :loading="optionLoading.pods"
+ @change="onSelectPodId"
+ ></a-select>
+ </a-form-item>
+ </a-col>
+ <a-col :md="24" :lg="8">
+ <a-form-item
+ :label="this.$t('label.clusterid')">
+ <a-select
+ v-decorator="['clusterid']"
+ showSearch
+ optionFilterProp="children"
+ :filterOption="filterOption"
+ :options="clusterSelectOptions"
+ :loading="optionLoading.clusters"
+ @change="onSelectClusterId"
+ ></a-select>
+ </a-form-item>
+ </a-col>
+ </a-form>
<a-divider />
- <a-row :gutter="12" style="display: flex">
+ <a-row :gutter="12">
<a-col :md="24" :lg="12">
<a-card class="instances-card">
<span slot="title">
@@ -104,7 +103,7 @@
shape="round"
@click="fetchUnmanagedInstances()" >
</a-button>
- <span style="margin-left: 12px">
+ <span style="float: right; width: 50%">
<search-view
:searchFilters="searchFilters.unmanaged"
:searchParams="searchParams.unmanaged"
@@ -142,7 +141,7 @@
<span>{{ props.value }} / {{ $t('label.page') }}</span>
</template>
</a-pagination>
- <div :span="24" class="action-button-left">
+ <div :span="24" class="action-button-right">
<a-button
:loading="importUnmanagedInstanceLoading"
:disabled="!(('importUnmanagedInstance' in
$store.getters.apis) && unmanagedInstancesSelectedRowKeys.length > 0)"
@@ -170,7 +169,7 @@
shape="round"
@click="fetchManagedInstances()" >
</a-button>
- <span style="margin-left: 12px">
+ <span style="float: right; width: 50%">
<search-view
:searchFilters="searchFilters.managed"
:searchParams="searchParams.managed"
@@ -815,4 +814,16 @@ export default {
.action-button-right {
text-align: right;
}
+
+ .breadcrumb-card {
+ margin-left: -24px;
+ margin-right: -24px;
+ margin-top: -16px;
+ margin-bottom: 12px;
+}
+
+.ant-breadcrumb {
+ vertical-align: text-bottom;
+}
+
</style>
