diff --git a/remoteappmanager/static/js/admin/vue-components/ContainersView.js b/remoteappmanager/static/js/admin/vue-components/ContainersView.js
index 294bf9bf9..b03e1d892 100644
--- a/remoteappmanager/static/js/admin/vue-components/ContainersView.js
+++ b/remoteappmanager/static/js/admin/vue-components/ContainersView.js
@@ -1,60 +1,46 @@
define([
"components/vue/dist/vue",
- "jsapi/v1/resources",
- "admin/vue-components/containers/StopContainerDialog"
-], function(Vue, resources, StopContainerDialog) {
+ "jsapi/v1/resources"
+], function(Vue, resources) {
"use strict";
return {
- components: {
- 'stop-container-dialog': StopContainerDialog
- },
template:
- '
' +
- '
' +
- '
' +
- ' ' +
- '
' +
- '
' +
- ' Error: {{communicationError}}' +
- '
' +
- '
' +
- ' ' +
- ' ' +
- ' | User | ' +
- ' Image | ' +
- ' Docker ID | ' +
- ' Mapping ID | ' +
- ' URL ID | ' +
- ' Stop | ' +
- '
' +
- ' ' +
- ' ' +
- ' ' +
- ' | {{ c.user }} | ' +
- ' {{ c.image_name }} | ' +
- ' {{ c.docker_id | truncate }} | ' +
- ' {{ c.mapping_id | truncate }} | ' +
- ' {{ c.identifier | truncate }} | ' +
- ' | ' +
- '
' +
- ' ' +
- '
' +
- '
' +
- '
' +
- '
' +
+ '
' +
+ ' ' +
+ ' Error: {{communicationError}}' +
'
' +
- '',
+ '
' +
+ ' ' +
+ '
' +
+ ' Do you want to stop container {{ stopContainerDialog.containerToStop }}?
' +
+ ' ' +
+ '',
data: function () {
return {
- containers: [],
- showStopContainerDialog: false,
- communicationError: null,
- containerToStop: null,
+ table: {
+ headers: ["URL ID", "User", "Image", "Docker ID", "Mapping ID"],
+ rows: [],
+ rowActions: [
+ {
+ label: "Stop",
+ callback: this.stopAction
+ }
+ ]
+ },
+ stopContainerDialog: {
+ show: false,
+ containerToStop: null
+ },
+ communicationError: null
};
},
mounted: function () {
@@ -62,35 +48,49 @@ define([
},
methods: {
updateTable: function() {
+ var self = this;
this.communicationError = null;
resources.Container.items()
.done(
- (function (identifiers, items) {
- var containers = [];
+ function (identifiers, items) {
+ self.table.rows = [];
identifiers.forEach(function(id) {
var item = items[id];
- item.identifier = id;
- containers.push(item);
+ self.table.rows.push([
+ id,
+ item.user,
+ item.image_name,
+ item.docker_id,
+ item.mapping_id]);
});
- this.containers = containers;
- }).bind(this))
+ })
.fail(
- (function () {
- this.communicationError = "The request could not be executed successfully";
- }).bind(this)
+ function () {
+ self.communicationError = "The request could not be executed successfully";
+ }
);
},
- containerStopped: function() {
- this.showStopContainerDialog = false;
- this.updateTable();
+ stopAction: function(row) {
+ this.stopContainerDialog.containerToStop = row[0];
+ this.stopContainerDialog.show = true;
},
- stopAction: function(index) {
- this.containerToStop = this.containers[index].identifier;
- this.showStopContainerDialog = true;
+ stopContainer: function () {
+ var self = this;
+ resources.Container.delete(this.stopContainerDialog.containerToStop)
+ .done(function () {
+ self.updateTable();
+ self.closeStopContainerDialog();
+ })
+ .fail(
+ function () {
+ self.closeStopContainerDialog();
+ self.communicationError = "The request could not be executed successfully";
+ }
+ );
},
- stopContainerDialogClosed: function() {
- this.showStopContainerDialog = false;
- this.containerToStop = null;
+ closeStopContainerDialog: function() {
+ this.stopContainerDialog.show = false;
+ this.stopContainerDialog.containerToStop = null;
}
}
};
diff --git a/remoteappmanager/static/js/admin/vue-components/containers/StopContainerDialog.js b/remoteappmanager/static/js/admin/vue-components/containers/StopContainerDialog.js
deleted file mode 100644
index f9ca2c4fc..000000000
--- a/remoteappmanager/static/js/admin/vue-components/containers/StopContainerDialog.js
+++ /dev/null
@@ -1,46 +0,0 @@
-define([
- "components/vue/dist/vue",
- "jsapi/v1/resources"
-], function(Vue, resources) {
- "use strict";
- return {
- template:
- '
' +
- ' ' +
- ' Do you want to stop container {{ containerToStop }}?
' +
- ' ' +
- '',
- props: ['containerToStop'],
- data: function() {
- return {
- communicationError: null
- };
- },
- methods: {
- close: function () {
- this.$emit("closed");
- },
- stopContainer: function () {
- if (this.containerToStop === null) {
- this.$emit("closed");
- return;
- }
- resources.Container.delete(this.containerToStop)
- .done((function () {
- this.$emit("stopped");
- }).bind(this))
- .fail(
- (function () {
- this.communicationError = "The request could not be executed successfully";
- }).bind(this)
- );
- }
- }
- };
-});