UI: allow binary download

Signed-off-by: Alex Ellis <alexellis2@gmail.com>
This commit is contained in:
Alex Ellis 2017-12-13 13:40:22 +00:00
parent 5c8bb37bfb
commit e6eec64c0d
2 changed files with 51 additions and 28 deletions

View File

@ -133,10 +133,10 @@
<div layout-gt-sm="row"> <div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm> <md-input-container class="md-block" flex-gt-sm>
<md-radio-group ng-model="invocation.contentType"> <md-radio-group ng-model="invocation.contentType" layout="row" layout-align="start center">
<md-radio-button value="text" class="md-primary"> Text </md-radio-button> <md-radio-button value="text" class="md-primary"> Text </md-radio-button>
<md-radio-button value="json"> JSON </md-radio-button> <md-radio-button value="json"> JSON </md-radio-button>
<md-radio-button value="binary"> Binary </md-radio-button> <md-radio-button value="binary"> Download </md-radio-button>
</md-radio-group> </md-radio-group>
</md-input-container> </md-input-container>
</div> </div>

View File

@ -27,7 +27,8 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
envProcess: "", envProcess: "",
network: "", network: "",
service: "", service: "",
envVars: {} envVars: {},
labels: {}
}; };
$scope.invocation.request = ""; $scope.invocation.request = "";
@ -56,7 +57,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
data: $scope.invocation.request, data: $scope.invocation.request,
method: "POST", method: "POST",
headers: { "Content-Type": requestContentType }, headers: { "Content-Type": requestContentType },
responseType: $scope.invocation.contentType responseType: $scope.invocation.contentType == "binary" ? "arraybuffer" : $scope.invocation.contentType
}; };
$scope.invocationInProgress = true; $scope.invocationInProgress = true;
@ -65,18 +66,14 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
$scope.roundTripDuration = ""; $scope.roundTripDuration = "";
$scope.invocationStart = new Date().getTime() $scope.invocationStart = new Date().getTime()
$http(options)
.success(function (data, status, headers) {
console.log(headers());
if($scope.invocation.contentType == "binary") { var tryDownload = function(data, filename) {
$scope.invocationResponse = "Bytes received: "+ data.length; var caught;
var linkElement = document.createElement('a'); var linkElement = document.createElement('a');
try { try {
var blob = new Blob([data], { type: "binary/octet-stream" }); var blob = new Blob([data], { type: "binary/octet-stream" });
var url = window.URL.createObjectURL(blob); var url = window.URL.createObjectURL(blob);
var filename = uuidv4();
linkElement.setAttribute('href', url); linkElement.setAttribute('href', url);
linkElement.setAttribute("download", filename); linkElement.setAttribute("download", filename);
@ -88,21 +85,45 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
}); });
linkElement.dispatchEvent(clickEvent); linkElement.dispatchEvent(clickEvent);
} catch (ex) { } catch (ex) {
console.log(ex); caught = ex;
$scope.invocationResponse = ex; }
return caught;
}
$http(options)
.success(function (data, status, headers) {
var headerMap = headers();
if($scope.invocation.contentType == "binary") {
var filename = uuidv4();
if($scope.selectedFunction.labels) {
var ext = $scope.selectedFunction.labels["com.openfaas.ui.ext"];
if(ext && ext.length > 0 ) {
filename = filename + "" + ext;
}
}
var caught = tryDownload(data, filename);
if(caught) {
console.log(caught);
$scope.invocationResponse = caught
} else {
$scope.invocationResponse = data.byteLength + " byte(s) received";
} }
} else { } else {
var response = {"data": data};
if (typeof response.data == 'object') { if (typeof data == 'object') {
$scope.invocationResponse = JSON.stringify(response.data, null, 2); $scope.invocationResponse = JSON.stringify(data, null, 2);
} else { } else {
$scope.invocationResponse = response.data; $scope.invocationResponse = data;
} }
} }
$scope.invocationInProgress = false; $scope.invocationInProgress = false;
$scope.invocationStatus = response.status; $scope.invocationStatus = status;
var now = new Date().getTime(); var now = new Date().getTime();
$scope.roundTripDuration = (now - $scope.invocationStart) / 1000; $scope.roundTripDuration = (now - $scope.invocationStart) / 1000;
showPostInvokedToast("Success"); showPostInvokedToast("Success");
@ -187,6 +208,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
$scope.item.envProcess = func.fprocess; $scope.item.envProcess = func.fprocess;
$scope.item.network = func.network; $scope.item.network = func.network;
$scope.item.envVars = func.environment; $scope.item.envVars = func.environment;
$scope.item.labels = func.labels;
$scope.selectedFunc = func; $scope.selectedFunc = func;
} }
@ -219,6 +241,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
item.envProcess = ""; item.envProcess = "";
item.network = ""; item.network = "";
item.envVars = {}; item.envVars = {};
item.labels = {};
$scope.validationError = ""; $scope.validationError = "";
$scope.closeDialog(); $scope.closeDialog();