[Kimchi-devel] [PATCH] [Kimchi 2/2] Live Migration front-end
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri Jan 15 16:47:57 UTC 2016
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/js/src/kimchi.guest_livemigration.js | 145 ++++++++++++++++++++++++++++++++
ui/js/src/kimchi.guest_main.js | 83 ++++++++----------
ui/pages/guest-migration.html.tmpl | 78 ++++++++---------
ui/pages/i18n.json.tmpl | 2 +
ui/pages/tabs/guests.html.tmpl | 4 +-
5 files changed, 226 insertions(+), 86 deletions(-)
create mode 100644 ui/js/src/kimchi.guest_livemigration.js
diff --git a/ui/js/src/kimchi.guest_livemigration.js b/ui/js/src/kimchi.guest_livemigration.js
new file mode 100644
index 0000000..136b7a7
--- /dev/null
+++ b/ui/js/src/kimchi.guest_livemigration.js
@@ -0,0 +1,145 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013-2016
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+kimchi.guest_livemigration_main = function() {
+ kimchi.setupLiveMigrationFormEvent();
+ kimchi.initLiveMigrationDialog();
+};
+
+kimchi.startLiveMigration = function() {
+ var guests = [];
+ var getOngoingMigration = function(guestName) {
+ kimchi.getTasksByFilter('status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/vms/' + guestName + '/migrate'), function(tasks) {
+ for (var i = 0; i < tasks.length; i++) {
+ var guestUri = tasks[i].target_uri;
+ var guestName = guestUri.split('/')[2];
+ guests[guestName] = tasks[i];
+
+ if (kimchi.trackingTasks.indexOf(tasks[i].id) >= 0) {
+ continue;
+ }
+
+ kimchi.trackTask(tasks[i].id, function(guests) {
+ // On success
+ kimchi.listVmsAuto();
+ if ($("#deleteVM").prop("checked")) {
+ kimchi.deleteVM(guestName, function(result) {
+ kimchi.listVmsAuto();
+ });
+ }
+ wok.window.close();
+ }, function(guests) {
+ errorCallback();
+ }, function(guests) {
+ // Progress callback
+ });
+ }
+ }, null, true);
+ return guests;
+ };
+ var errorCallback = function() {
+ $("#migrateFormOk").prop("disabled", false);
+ $("#remote_host").removeAttr("readonly");
+ $("#user").removeAttr("readonly");
+ $("#password").removeAttr("readonly");
+ $("#deleteVM").removeAttr("readonly");
+ $("#deleteVM").prop("checked", false);
+ $("#migrateFormOk").text(i18n.KCHAPI6011M);
+ };
+ var values = kimchi.getLiveMigrationDialogValues();
+ if (values.user && values.password) {
+ data = {
+ 'remote_host': values.remote_host,
+ 'user': values.user,
+ 'password': values.password
+ };
+ } else {
+ data = {
+ 'remote_host': values.remote_host
+ };
+ };
+ kimchi.migrateGuest(kimchi.selectedGuest, data, function() {
+ getOngoingMigration(kimchi.selectedGuest);
+ }, function(err) {
+ wok.message.error(err.responseJSON.reason, "#alert-modal-container");
+ errorCallback();
+ });
+};
+
+kimchi.initLiveMigrationDialog = function(okCallback) {
+ $("#migrateFormOk").on("click", function() {
+ $("#migrateFormOk").prop("disabled", true);
+ $("#remote_host").prop("readonly", "readonly");
+ $("#user").prop("readonly", "readonly");
+ $("#password").prop("readonly", "readonly");
+ $("#deleteVM").prop("readonly", "readonly");
+ $("#migrateFormOk").text(i18n.KCHAPI6012M);
+ kimchi.startLiveMigration();
+ });
+};
+
+
+kimchi.getLiveMigrationDialogValues = function() {
+ var data = {
+ remote_host: $("#remote_host").val(),
+ user: $("#user").val(),
+ password: $("#password").val()
+ };
+ return data;
+};
+
+kimchi.setupLiveMigrationFormEvent = function() {
+ $("#migrateFormOk").prop("disabled", true);
+ $("#remote_host").on("change keyup", function(event) {
+ if (!this.value) {
+ $(this).parent().addClass('has-error');
+ } else {
+ $(this).parent().removeClass('has-error');
+ }
+ kimchi.updateLiveMigrationButton();
+ });
+ $("#user").on("change keyup", function(event) {
+ if (this.value && !$("#password").val()) {
+ $("#user").parent().removeClass('has-warning');
+ $("#password").parent().addClass('has-warning');
+ } else {
+ $("#user").parent().removeClass('has-warning');
+ $("#password").parent().removeClass('has-warning');
+ }
+ kimchi.updateLiveMigrationButton();
+ });
+ $("#password").on("change keyup", function(event) {
+ if (this.value && !$("#user").val()) {
+ $("#user").parent().addClass('has-warning');
+ } else {
+ $("#user").parent().removeClass('has-warning');
+ $("#password").parent().removeClass('has-warning');
+ kimchi.updateLiveMigrationButton();
+ }
+ });
+};
+
+kimchi.updateLiveMigrationButton = function() {
+ if ($("#remote_host").val()) {
+ if ($("input[type='text']").parent().hasClass("has-error") || $("input[type='text']").parent().hasClass("has-warning")) {
+ $("#migrateFormOk").prop("disabled", true);
+ } else {
+ $("#migrateFormOk").prop("disabled", false);
+ }
+ };
+};
\ No newline at end of file
diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
index 2d3ccf3..1d7e4ef 100644
--- a/ui/js/src/kimchi.guest_main.js
+++ b/ui/js/src/kimchi.guest_main.js
@@ -233,6 +233,14 @@ kimchi.vmedit = function(event) {
});
};
+kimchi.vmmigrate = function(event) {
+ var button = event.target;
+ var vm = $(button).closest('li[name=guest]');
+ var vm_id = $(vm).attr("id");
+ kimchi.selectedGuest = vm_id;
+ wok.window.open('plugins/kimchi/guest-migration.html');
+};
+
kimchi.openVmConsole = function(event) {
var button = event.target;
var vm = $(button).closest('li[name=guest]');
@@ -275,7 +283,7 @@ kimchi.initGuestFilter = function() {
};
kimchi.resetGuestFilter = function() {
- if(guestFilterList){
+ if (guestFilterList) {
$('#search_input').val();
listFiltered = false;
}
@@ -326,26 +334,31 @@ kimchi.listVmsAuto = function() {
}, null, true);
return guests;
};
- var getMigratingGuests = function(){
- var guests = [];
- kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/vms/.+/migrate'), function(tasks) {
- for(var i=0;i<tasks.length;i++){
- var guestUri = tasks[i].target_uri;
- var guestName = guestUri.split('/')[4]
- guests.push($.extend({}, kimchi.sampleGuestObject, {name: guestName, isMigrating: true}));
- if(kimchi.trackingTasks.indexOf(tasks[i].id)==-1)
- kimchi.trackTask(tasks[i].id, null, function(err){
- wok.message.error(err.message);
- }, null);
- }
- }, null, true);
- return guests;
- };
+
+ var getMigratingGuests = function() {
+ var guests = [];
+ kimchi.getTasksByFilter('status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/vms/.+/migrate'), function(tasks) {
+ for (var i = 0; i < tasks.length; i++) {
+ var guestUri = tasks[i].target_uri;
+ var guestName = guestUri.split('/')[4]
+ guests.push($.extend({}, kimchi.sampleGuestObject, {
+ name: guestName,
+ isMigrating: true
+ }));
+ if (kimchi.trackingTasks.indexOf(tasks[i].id) == -1)
+ kimchi.trackTask(tasks[i].id, null, function(err) {
+ wok.message.error(err.message);
+ }, null);
+ }
+ }, null, true);
+ return guests;
+ };
+
kimchi.listVMs(function(result, textStatus, jqXHR) {
if (result && textStatus == "success") {
- result = getMigratingGuests().concat(result);
result = getCloningGuests().concat(result);
result = getCreatingGuests().concat(result);
+ result = getMigratingGuests().concat(result);
if (result.length) {
var listHtml = '';
var guestTemplate = kimchi.guestTemplate;
@@ -400,27 +413,6 @@ kimchi.listVmsAuto = function() {
kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
var result = kimchi.guestElem.clone();
-
- var initializeMigratePanel = function() {
- $("#migrateFormOk").on("click", function() {
- //TODO: Get values from UI for remote_host, user, password
- var data = {
- "remote_host" : "ltc-hab1.aus.stglabs.ibm.com",
- "user" : "root",
- "password" : "passw0rd"
- };
- //TODO: Need to get guest to be passed in here
- kimchi.migrateGuest(guest, data, function(){
- kimchi.listVmsAuto();
- wok.window.close();
- }, function(err) {
- wok.message.error(err.responseJSON.reason);
- });
- });
- }
-
- initializeMigratePanel();
-
//Setup the VM list entry
var currentState = result.find('.guest-state');
var vmRunningBool = (vmObject.state == "running");
@@ -440,7 +432,6 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
//Add the OS Type and Icon
var osType = result.find('.distro-icon');
- console.log(vmObject);
if (vmObject.icon == 'plugins/kimchi/images/icon-fedora.png') {
osType.addClass('icon-fedora');
osType.attr('val', 'Fedora');
@@ -475,7 +466,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
//Setup the VM console thumbnail display
var curImg = vmObject.icon;
if (vmObject.screenshot) {
- curImg = vmObject.screenshot.replace(/^\//,'');
+ curImg = vmObject.screenshot.replace(/^\//, '');
}
var load_src = curImg || 'plugins/kimchi/images/icon-vm.png';
var tile_src = prevScreenImage || vmObject['load-src'];
@@ -666,7 +657,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
}
//Setup action event handlers
- if(!(vmObject.isCloning || vmObject.isCreating || vmObject.isMigrating)){
+ if (!(vmObject.isCloning || vmObject.isCreating || vmObject.isMigrating)) {
guestActions.find("[name=vm-start]").on("click", function(event) {
event.preventDefault();
@@ -725,9 +716,9 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
});
}, null);
});
- guestActions.find("[name=vm-migrate]").click(function(){
- var guest = $(this).closest('li[name=guest]').attr("id");
- wok.window.open('plugins/kimchi/guest-migration.html');
+ guestActions.find("[name=vm-migrate]").on('click', function() {
+ event.preventDefault();
+ kimchi.vmmigrate(event);
});
} else {
guestActions.find('.btn').attr('disabled', true);
@@ -735,7 +726,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
pendingText = result.find('.guest-pending .text')
if (vmObject.isCloning)
pendingText.text(i18n['KCHAPI6009M']);
- else if(vmObject.isMigrating)
+ else if (vmObject.isMigrating)
pendingText.text("Migrating");
else
pendingText.text(i18n['KCHAPI6008M']);
@@ -770,4 +761,4 @@ kimchi.editTemplate = function(guestTemplate, oldPopStat) {
return guestTemplate.replace("vm-action", "vm-action open");
}
return guestTemplate;
-};
+};
\ No newline at end of file
diff --git a/ui/pages/guest-migration.html.tmpl b/ui/pages/guest-migration.html.tmpl
index 278d22c..7065605 100644
--- a/ui/pages/guest-migration.html.tmpl
+++ b/ui/pages/guest-migration.html.tmpl
@@ -21,45 +21,47 @@
#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True)
#silent _ = t.gettext
#silent _t = t.gettext
-<div id="migrate-guest-window" class="window modal-content">
- <div class="modal-header">
- <h4 class="modal-title" id="migrateModalLabel">$_("Migrate a Guest")</h4>
- </div>
- <div id="migrateInfo" class="modal-body">
- <div class="alert alert-warning" role="alert">Disclaimer: This process cannot be stopped after started,
- can take a long time to complete and will turn off the VM on this Hypervisor when it is successfully
- migrated to the remote destination.
- </div>
- <div class="form-group">
- <label for="remoteHostName">$_("Remote Server")</label>
- <input type="text" class="form-control" id="remoteHostName" />
- <p class="help-block">
- <i class="fa fa-info-circle"></i> $_("IP Address or Hostname")</p>
- </div>
- <div class="alert alert-info" role="alert">The following fields are optional. Fill them if you want Kimchi to
- setup a password-less ssh session between the localhost and the remote host. The setup process will only
- be successful if the user has 'SUDO ALL' permission in the remote machine.
+<!DOCTYPE html>
+<html>
+<body>
+ <div id="migrate-guest-window" class="window modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title" id="migrateModalLabel">$_("Migrate a Guest")</h4>
</div>
- <div class="form-group">
- <label for="user">$_("User")</label>
- <input type="text" class="form-control" id="user" />
- <p class="help-block">
- <i class="fa fa-info-circle"></i> $_("Username of the remote host")</p>
+ <div id="migrateInfo" class="modal-body">
+ <span id="alert-modal-container"></span>
+ <div class="alert alert-warning" role="alert">$_("Disclaimer: This process cannot be stopped after started, can take a long time to complete and will turn off the VM on this Hypervisor when it is successfully migrated to the remote destination.")</div>
+ <div class="form-group">
+ <label for="remote_host">$_("Remote Server")</label>
+ <input type="text" class="form-control" id="remote_host" />
+ <p class="help-block">
+ <i class="fa fa-info-circle"></i> $_("IP Address or Hostname")</p>
+ </div>
+ <div class="alert alert-info" role="alert">$_("The following fields are optional. Fill them if you want Kimchi to setup a password-less ssh session between the localhost and the remote host. The setup process will only be successful if the user has 'SUDO ALL' permission in the remote machine.")</div>
+ <div class="form-group">
+ <label for="user">$_("User")</label>
+ <input type="text" class="form-control" id="user" />
+ <p class="help-block">
+ <i class="fa fa-info-circle"></i> $_("Username of the remote host")</p>
+ </div>
+ <div class="form-group">
+ <label for="password">$_("Password")</label>
+ <input type="password" class="form-control" id="password" />
+ <p class="help-block">
+ <i class="fa fa-info-circle"></i> $_("Password of the user in the remote host")</p>
+ </div>
+ <div class="form-group">
+ <input id="deleteVM" class="wok-checkbox" type="checkbox" value="" />
+ <label for="deleteVM" id="labelDeleteVM">$_("Delete this VM when the migration is completed") </label>
+ </div>
</div>
- <div class="form-group">
- <label for="password">$_("Password")</label>
- <input type="password" class="form-control" id="password" />
- <p class="help-block">
- <i class="fa fa-info-circle"></i> $_("Password of the user in the remote host")</p>
+ <div class="modal-footer">
+ <button type="submit" id="migrateFormOk" class="btn btn-default">$_("Start")</button>
+ <button type="button" id="migrateFormCancel" data-dismiss="modal" class="btn btn-default">$_("Cancel")</button>
</div>
- <div class="form-group">
- <input id="deleteVM" class="wok-checkbox" type="checkbox" value="" />
- <label for="deleteVM" id="labelDeleteVM">$_("Delete this VM when the migration is completed") </label>
- </div>
- </div>
- <div class="modal-footer">
- <button type="submit" id="migrateFormOk" class="btn btn-default">$_("Start")</button>
- <button type="button" id="migrateFormCancel" data-dismiss="modal" class="btn btn-default">$_("Cancel")</button>
</div>
-</div>
-
+ <script>
+ kimchi.guest_livemigration_main();
+ </script>
+</body>
+</html>
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index c1979c6..f940ee5 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -44,6 +44,8 @@
"KCHAPI6008M": "$_("Creating...")",
"KCHAPI6009M": "$_("Cloning...")",
"KCHAPI6010M": "$_("Saving...")",
+ "KCHAPI6011M": "$_("Start")",
+ "KCHAPI6012M": "$_("Migrating...")",
"KCHTMPL6001W": "$_("No ISO found")",
diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl
index 21d1f90..5409dfb 100644
--- a/ui/pages/tabs/guests.html.tmpl
+++ b/ui/pages/tabs/guests.html.tmpl
@@ -44,7 +44,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- </div>
+ </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="toolbar">
<ul class="nav navbar-nav navbar-right tools" display="none">
@@ -60,7 +60,7 @@
<label for="search_input" class="sr-only">$_("Filter"):</label>
<input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")">
</div>
- </div>
+ </div>
<div id="alert-container"></div>
<div id="guestListField" style="display: none">
<ul class="wok-guest-list">
--
1.9.3
More information about the Kimchi-devel
mailing list