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: - '
' + - '
' + - '
' + - '
Containers
' + - '
' + - '
' + - ' Error: {{communicationError}}' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - ' ' + - '
UserImageDocker IDMapping IDURL IDStop
{{ 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: - '' + - ' ' + - ' ' + - ' ' + - '', - 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) - ); - } - } - }; -});