feat(container): upload files inside containers

2019-06-17 17:11:10 +02:00 · 2019-06-17 17:11:10 +02:00 · 85b3ed88d6
parent 71b1da8d32
commit 85b3ed88d6
6 changed files with 155 additions and 4 deletions
--- a/app/docker/__module.js
+++ b/app/docker/__module.js
@ -75,6 +75,18 @@ angular.module('portainer.docker', ['portainer.app'])
    }
  };

+  var containerFilesImport = {
+    name: 'docker.containers.container.import',
+    url: '/import',
+    views: {
+      'content@': {
+        templateUrl: './views/containers/import/containerImportFiles.html',
+        controller: 'ContainerImportFilesController',
+        controllerAs: 'ctrl'
+      }
+    }
+  };
+
  var containerAttachConsole = {
    name: 'docker.containers.container.attach',
    url: '/attach',
@ -484,6 +496,7 @@ angular.module('portainer.docker', ['portainer.app'])
  $stateRegistryProvider.register(configCreation);
  $stateRegistryProvider.register(containers);
  $stateRegistryProvider.register(container);
+  $stateRegistryProvider.register(containerFilesImport);
  $stateRegistryProvider.register(containerExecConsole);
  $stateRegistryProvider.register(containerAttachConsole);
  $stateRegistryProvider.register(containerCreation);
--- a/app/docker/services/containerService.js
+++ b/app/docker/services/containerService.js
@ -1,8 +1,8 @@
 import { ContainerDetailsViewModel, ContainerViewModel, ContainerStatsViewModel } from '../models/container';

 angular.module('portainer.docker')
-.factory('ContainerService', ['$q', 'Container', 'ResourceControlService', 'LogHelper', '$timeout',
-function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper, $timeout) {
+.factory('ContainerService', ['$q', 'Container', 'ResourceControlService', 'LogHelper', '$timeout', 'FileUploadService',
+function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper, $timeout, FileUploadService) {
  'use strict';
  var service = {};

@ -213,5 +213,9 @@ function ContainerServiceFactory($q, Container, ResourceControlService, LogHelpe
    return Container.prune({ filters: filters }).$promise;
  };

+  service.uploadFiles = function(containerId, file, path) {
+    return FileUploadService.loadContainerFiles(containerId, file, path);
+  };
+
  return service;
 }]);
--- a/app/docker/views/containers/edit/container.html
+++ b/app/docker/views/containers/edit/container.html
@ -6,7 +6,7 @@
  </rd-header-content>
 </rd-header>

-  <div class="row" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
+  <div class="row" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate, DockerContainerPutContainerArchive">
    <div class="col-lg-12 col-md-12 col-xs-12">
      <rd-widget>
        <rd-widget-header icon="fa-cogs" title-text="Actions"></rd-widget-header>
@ -14,7 +14,7 @@
          <div class="btn-group" role="group" aria-label="...">
            <button authorization="DockerContainerStart" class="btn btn-success btn-sm" ng-click="start()" ng-disabled="container.State.Running"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
            <button authorization="DockerContainerStop" class="btn btn-danger btn-sm" ng-click="stop()" ng-disabled="!container.State.Running"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
-            <button authorization=DockerContainerKill" class="btn btn-danger btn-sm" ng-click="kill()" ng-disabled="!container.State.Running"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
+            <button authorization="DockerContainerKill" class="btn btn-danger btn-sm" ng-click="kill()" ng-disabled="!container.State.Running"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
            <button authorization="DockerContainerRestart" class="btn btn-primary btn-sm" ng-click="restart()" ng-disabled="!container.State.Running"><i class="fa fa-sync space-right" aria-hidden="true"></i>Restart</button>
            <button authorization="DockerContainerPause" class="btn btn-primary btn-sm" ng-click="pause()" ng-disabled="!container.State.Running || container.State.Paused"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
            <button authorization="DockerContainerUnpause" class="btn btn-primary btn-sm" ng-click="unpause()" ng-disabled="!container.State.Paused"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
@ -27,6 +27,9 @@
            </button>
            <a class="btn btn-primary btn-sm" type="button" ui-sref="docker.containers.new({ from: container.Id, nodeName: nodeName })"><i class="fa fa-copy space-right" aria-hidden="true"></i>Duplicate/Edit</a>
          </div>
+          <div class="btn-group" role="group" aria-label="...">
+            <a class="btn btn-primary btn-sm" type="button" authorization="DockerContainerPutContainerArchive" ui-sref="docker.containers.container.import({})"><i class="fa fa-upload space-right" aria-hidden="true"></i>Import files</a>
+          </div>
        </rd-widget-body>
      </rd-widget>
    </div>
--- a/app/docker/views/containers/import/containerImportFiles.html
+++ b/app/docker/views/containers/import/containerImportFiles.html
@ -0,0 +1,59 @@
+<rd-header>
+  <rd-header-title title-text="Import files"></rd-header-title>
+  <rd-header-content>
+    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: ctrl.container.Id})">{{ ctrl.container.Name|trimcontainername }}</a> &gt; Import files
+  </rd-header-content>
+</rd-header>
+
+<div class="row" authorization="DockerContainerPutContainerArchive">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- upload -->
+          <div class="col-sm-12 form-section-title">
+            Upload
+          </div>
+          <div class="form-group">
+            <span class="col-sm-12 text-muted small">
+              You can upload a tar archive containing your files. Accepted compressions: identity (no compression), gzip, bzip2, xz.
+            </span>
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button class="btn btn-sm btn-primary" ngf-select ngf-min-size="10" ngf-accept="'application/x-tar,application/x-gzip'" ng-model="ctrl.formValues.UploadFile">Select file</button>
+              <span style="margin-left: 5px;">
+                {{ ctrl.formValues.UploadFile.name }}
+                <i class="fa fa-times red-icon" ng-if="!ctrl.formValues.UploadFile" aria-hidden="true"></i>
+              </span>
+            </div>
+          </div>
+          <!-- path-input -->
+          <div class="form-group">
+            <label for="container_path" class="col-sm-1 control-label text-left">Path</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="ctrl.formValues.Path" id="container_path" placeholder="/my/path/inside/container">
+            </div>
+          </div>
+          <!-- !path-input -->
+          <!-- !upload -->
+          <!-- actions -->
+          <div class="col-sm-12 form-section-title">
+            Actions
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="ctrl.state.actionInProgress || !ctrl.formValues.UploadFile || !ctrl.formValues.Path"
+                ng-click="ctrl.uploadFiles()" button-spinner="ctrl.state.actionInProgress">
+                <span ng-hide="ctrl.state.actionInProgress">Upload</span>
+                <span ng-show="ctrl.state.actionInProgress">Files uploading in progress...</span>
+              </button>
+              <span class="text-danger" ng-if="ctrl.state.formValidationError" style="margin-left: 5px;">{{ ctrl.state.formValidationError }}</span>
+            </div>
+          </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
--- a/app/docker/views/containers/import/containerImportFilesController.js
+++ b/app/docker/views/containers/import/containerImportFilesController.js
@ -0,0 +1,58 @@
+import angular from "angular";
+
+class ContainerImportFilesController {
+  /* @ngInject */
+  constructor($transition$, ContainerService, Notifications, HttpRequestHelper, $async) {
+    this.$transition$ = $transition$;
+    this.ContainerService = ContainerService;
+    this.Notifications = Notifications;
+    this.HttpRequestHelper = HttpRequestHelper;
+    this.$async = $async;
+
+    this.uploadFilesAsync = this.uploadFilesAsync.bind(this);
+  }
+
+  async $onInit() {
+    this.state = {
+      actionInProgress: false,
+      nodeName: this.$transition$.params().nodeName
+    };
+
+    this.formValues = {
+      UploadFile: null,
+      Path: null
+    };
+
+    const containerId = this.$transition$.params().id;
+    try {
+      this.HttpRequestHelper.setPortainerAgentTargetHeader(this.state.nodeName);
+      this.container = await this.ContainerService.container(containerId);
+    } catch (err) {
+      this.Notifications.error("Failure", err, "Unable retrieve container details");
+    }
+  }
+
+  uploadFiles() {
+    return this.$async(this.uploadFilesAsync);
+  }
+
+  async uploadFilesAsync() {
+    this.state.actionInProgress = true;
+    const containerId = this.container.Id;
+    const file = this.formValues.UploadFile;
+    const path = this.formValues.Path;
+    try {
+      await this.ContainerService.uploadFiles(containerId, file, path);
+      this.Notifications.success("Files successfully uploaded");
+    } catch (err) {
+      this.Notifications.error("Failure", err, "Unable to upload files");
+    } finally {
+      this.state.actionInProgress = false;
+    }
+  }
+}
+
+export default ContainerImportFilesController;
+angular
+  .module("portainer.docker")
+  .controller("ContainerImportFilesController", ContainerImportFilesController);
--- a/app/portainer/services/fileUpload.js
+++ b/app/portainer/services/fileUpload.js
@ -42,6 +42,20 @@ angular.module('portainer.app')
    });
  };

+  service.loadContainerFiles = function(containerId, file, path) {
+    var endpointID = EndpointProvider.endpointID();
+    return Upload.http({
+      url: 'api/endpoints/' + endpointID + '/docker/containers/' + containerId + '/archive?path=' + path,
+      headers : {
+        'Content-Type': file.type
+      },
+      method: 'PUT',
+      data: file,
+      ignoreLoadingBar: true,
+      transformResponse: genericHandler
+    });
+  };
+
  service.createSchedule = function(payload) {
    return Upload.upload({
      url: 'api/schedules?method=file',