fix(app): parse response with null body (#4654)

* fix(app): parse response with null body

* style(docker): add comment explaining change

* fix(images): show correct error when failing import

* fix(images): use async await

app/docker/rest/response/handlers.js

@@ -18,6 +18,10 @@ function isJSON(jsonString) {
 // This handler wrap the JSON objects in an array.
 // Used by the API in: Image push, Image create, Events query.
 export function jsonObjectsToArrayHandler(data) {
+  // catching empty data helps the function not to fail and prevents unwanted error message to user.
+  if (!data) {
+    return [];
+  }
   var str = '[' + data.replace(/\n/g, ' ').replace(/\}\s*\{/g, '}, {') + ']';
   return angular.fromJson(str);
 }

app/docker/views/images/build/buildImageController.js

@@ -1,58 +1,56 @@
-angular.module('portainer.docker').controller('BuildImageController', [
+angular.module('portainer.docker').controller('BuildImageController', BuildImageController);
-  '$scope',
-  '$window',
-  'ModalService',
-  'BuildService',
-  'Notifications',
-  'HttpRequestHelper',
-  function ($scope, $window, ModalService, BuildService, Notifications, HttpRequestHelper) {
-    $scope.state = {
-      BuildType: 'editor',
-      actionInProgress: false,
-      activeTab: 0,
-      isEditorDirty: false,
-    };
 
-    $scope.formValues = {
+function BuildImageController($scope, $async, $window, ModalService, BuildService, Notifications, HttpRequestHelper) {
-      ImageNames: [{ Name: '' }],
+  $scope.state = {
-      UploadFile: null,
+    BuildType: 'editor',
-      DockerFileContent: '',
+    actionInProgress: false,
-      URL: '',
+    activeTab: 0,
-      Path: 'Dockerfile',
+    isEditorDirty: false,
-      NodeName: null,
+  };
-    };
 
-    $window.onbeforeunload = () => {
+  $scope.formValues = {
-      if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
+    ImageNames: [{ Name: '' }],
-        return '';
+    UploadFile: null,
-      }
+    DockerFileContent: '',
-    };
+    URL: '',
+    Path: 'Dockerfile',
+    NodeName: null,
+  };
 
-    $scope.addImageName = function () {
+  $window.onbeforeunload = () => {
-      $scope.formValues.ImageNames.push({ Name: '' });
+    if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
-    };
+      return '';
-
-    $scope.removeImageName = function (index) {
-      $scope.formValues.ImageNames.splice(index, 1);
-    };
-
-    function buildImageBasedOnBuildType(method, names) {
-      var buildType = $scope.state.BuildType;
-      var dockerfilePath = $scope.formValues.Path;
-
-      if (buildType === 'upload') {
-        var file = $scope.formValues.UploadFile;
-        return BuildService.buildImageFromUpload(names, file, dockerfilePath);
-      } else if (buildType === 'url') {
-        var URL = $scope.formValues.URL;
-        return BuildService.buildImageFromURL(names, URL, dockerfilePath);
-      } else {
-        var dockerfileContent = $scope.formValues.DockerFileContent;
-        return BuildService.buildImageFromDockerfileContent(names, dockerfileContent);
-      }
     }
+  };
 
-    $scope.buildImage = function () {
+  $scope.addImageName = function () {
+    $scope.formValues.ImageNames.push({ Name: '' });
+  };
+
+  $scope.removeImageName = function (index) {
+    $scope.formValues.ImageNames.splice(index, 1);
+  };
+
+  function buildImageBasedOnBuildType(method, names) {
+    var buildType = $scope.state.BuildType;
+    var dockerfilePath = $scope.formValues.Path;
+
+    if (buildType === 'upload') {
+      var file = $scope.formValues.UploadFile;
+      return BuildService.buildImageFromUpload(names, file, dockerfilePath);
+    } else if (buildType === 'url') {
+      var URL = $scope.formValues.URL;
+      return BuildService.buildImageFromURL(names, URL, dockerfilePath);
+    } else {
+      var dockerfileContent = $scope.formValues.DockerFileContent;
+      return BuildService.buildImageFromDockerfileContent(names, dockerfileContent);
+    }
+  }
+
+  $scope.buildImage = buildImage;
+
+  async function buildImage() {
+    return $async(async () => {
       var buildType = $scope.state.BuildType;
 
       if (buildType === 'editor' && $scope.formValues.DockerFileContent === '') {
@@ -71,44 +69,42 @@ angular.module('portainer.docker').controller('BuildImageController', [
       var nodeName = $scope.formValues.NodeName;
       HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
 
-      buildImageBasedOnBuildType(buildType, imageNames)
+      try {
-        .then(function success(data) {
+        const data = await buildImageBasedOnBuildType(buildType, imageNames);
-          $scope.buildLogs = data.buildLogs;
+        $scope.buildLogs = data.buildLogs;
-          $scope.state.activeTab = 1;
+        $scope.state.activeTab = 1;
-          if (data.hasError) {
+        if (data.hasError) {
-            Notifications.error('An error occured during build', { msg: 'Please check build logs output' });
+          Notifications.error('An error occurred during build', { msg: 'Please check build logs output' });
-          } else {
+        } else {
-            Notifications.success('Image successfully built');
+          Notifications.success('Image successfully built');
-            $scope.state.isEditorDirty = false;
+          $scope.state.isEditorDirty = false;
-          }
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to build image');
-        })
-        .finally(function final() {
-          $scope.state.actionInProgress = false;
-        });
-    };
-
-    $scope.validImageNames = function () {
-      for (var i = 0; i < $scope.formValues.ImageNames.length; i++) {
-        var item = $scope.formValues.ImageNames[i];
-        if (item.Name !== '') {
-          return true;
         }
+      } catch (err) {
+        Notifications.error('Failure', err, 'Unable to build image');
+      } finally {
+        $scope.state.actionInProgress = false;
       }
-      return false;
+    });
-    };
+  }
 
-    $scope.editorUpdate = function (cm) {
+  $scope.validImageNames = function () {
-      $scope.formValues.DockerFileContent = cm.getValue();
+    for (var i = 0; i < $scope.formValues.ImageNames.length; i++) {
-      $scope.state.isEditorDirty = true;
+      var item = $scope.formValues.ImageNames[i];
-    };
+      if (item.Name !== '') {
-
+        return true;
-    this.uiCanExit = async function () {
-      if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
-        return ModalService.confirmWebEditorDiscard();
       }
-    };
+    }
-  },
+    return false;
-]);
+  };
+
+  $scope.editorUpdate = function (cm) {
+    $scope.formValues.DockerFileContent = cm.getValue();
+    $scope.state.isEditorDirty = true;
+  };
+
+  this.uiCanExit = async function () {
+    if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
+      return ModalService.confirmWebEditorDiscard();
+    }
+  };
+}

app/docker/views/images/import/importImageController.js

@@ -25,7 +25,7 @@ angular.module('portainer.docker').controller('ImportImageController', [
           Notifications.success('Images successfully uploaded');
         })
         .catch(function error(err) {
-          Notifications.error('Failure', err.message, 'Unable to upload image');
+          Notifications.error('Failure', err, 'Unable to upload image');
         })
         .finally(function final() {
           $scope.state.actionInProgress = false;