jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add upload and download for the webterminal

Browse Source
This commit is contained in:
Girish Ramakrishnan
2017-08-18 20:45:52 -07:00
parent 537fbff4aa
commit 52832c881a
6 changed files with 181 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
webadmin/src/js/client.js
View File

@@ -1101,6 +1101,19 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
return (available - needed) >= 0;
};
Client.prototype.uploadFile = function (appId, file, callback) {
var fd = new FormData();
fd.append('file', file);
post('/api/v1/apps/' + appId + '/upload?file=/tmp/' + file.name, fd, {
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
}).success(function(data, status) {
if (status !== 202) return callback(new ClientError(status, data));
callback(null);
}).error(defaultErrorHandler(callback));
};
client = new Client();
return client;
}]);

65
webadmin/src/views/debug.html
View File

@@ -1,26 +1,51 @@
<!-- <div class="logs-main"> -->
<!-- Modal download file -->
<div class="modal fade" id="downloadFileModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Download a file from {{ selected.name }}</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">/app/data/</span>
<input type="text" class="form-control" ng-model="downloadFile.filePath" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="!downloadFile.filePath"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-success" ng-href="{{ downloadFile.downloadUrl() }}" ng-disabled="!downloadFile.filePath" target="_blank">Download</a>
</div>
</div>
</div>
</div>
<div class="logs-controls">
<div class="col-md-10 col-md-offset-1">
<uib-tabset active="active">
<uib-tab index="0" heading="Logs" select="showLogs()"></uib-tab>
<uib-tab index="1" heading="Terminal" select="showTerminal()"></uib-tab>
</uib-tabset>
<select class="form-control pull-right inline" ng-options="log.name for log in logs track by log.value" ng-model="selected"></select>
<div class="logs-controls">
<div class="col-md-10 col-md-offset-1">
<uib-tabset active="active">
<uib-tab index="1" heading="Terminal" select="showTerminal()"></uib-tab>
<uib-tab index="0" heading="Logs" select="showLogs()"></uib-tab>
</uib-tabset>
<select class="form-control pull-right inline" ng-options="log.name for log in logs track by log.value" ng-model="selected"></select>
<!-- logs actions -->
<a class="btn btn-default pull-right" ng-href="{{ selected.url }}&format=short&lines=800" ng-hide="terminalVisible"><i class="fa fa-download"></i> Download </a>
<!-- logs actions -->
<a class="btn btn-default pull-right" ng-href="{{ selected.url }}&format=short&lines=800" ng-hide="terminalVisible"><i class="fa fa-download"></i> Download Full Logs</a>
<!-- terminal actions -->
<!-- <button class="btn btn-default pull-right" ng-click="" ng-show="terminalVisible">Upload</button> -->
<!-- <button class="btn btn-default pull-right" ng-click="" ng-show="terminalVisible">Download</button> -->
<button class="btn btn-default pull-right" ng-click="terminalInject('mysql')" ng-show="terminalVisible && usesAddon('mysql')">Mysql</button>
<button class="btn btn-default pull-right" ng-click="terminalInject('postgresql')" ng-show="terminalVisible && usesAddon('postgresql')">Postgres</button>
<button class="btn btn-default pull-right" ng-click="terminalInject('mongodb')" ng-show="terminalVisible && usesAddon('mongodb')">Mongo</button>
<button class="btn btn-default pull-right" ng-click="terminalInject('redis')" ng-show="terminalVisible && usesAddon('redis')">Redis</button>
<input type="file" id="fileUpload" class="hide"/>
<!-- terminal actions -->
<div class="btn-group pull-right" style="margin-left: 10px;">
<button class="btn btn-default" ng-click="downloadFile.show()" ng-show="terminalVisible && selected.type === 'app'"><i class="fa fa-download"></i> Download</button>
<button class="btn btn-default" ng-click="uploadFile()" ng-show="terminalVisible && selected.type === 'app'"><i class="fa fa-upload"></i> Upload to /tmp</button>
</div>
<div class="btn-group pull-right" style="margin-left: 10px;">
<button class="btn btn-default" ng-click="terminalInject('mysql')" ng-show="terminalVisible && usesAddon('mysql')">Mysql</button>
<button class="btn btn-default" ng-click="terminalInject('postgresql')" ng-show="terminalVisible && usesAddon('postgresql')">Postgres</button>
<button class="btn btn-default" ng-click="terminalInject('mongodb')" ng-show="terminalVisible && usesAddon('mongodb')">Mongo</button>
<button class="btn btn-default" ng-click="terminalInject('redis')" ng-show="terminalVisible && usesAddon('redis')">Redis</button>
</div>
</div>
</div>
<div class="logs-and-term-container"></div>
<!-- </div> -->
<div class="logs-and-term-container"></div>

47
webadmin/src/views/debug.js
View File

@@ -3,31 +3,53 @@
/* global moment */
/* global Terminal */
angular.module('Application').controller('DebugController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
$scope.config = Client.getConfig();
$scope.user = Client.getUserInfo();
$scope.terminalVisible = true;
$scope.logs = [];
$scope.selected = '';
$scope.activeEventSource = null;
$scope.terminal = null;
$scope.terminalSocket = null;
$scope.lines = 10;
$scope.terminalVisible = false;
function ab2str(buf) {
return String.fromCharCode.apply(null, new Uint16Array(buf));
}
$scope.downloadFile = {
filePath: '',
downloadUrl: function () {
var filePath = '/app/data/' + $scope.downloadFile.filePath;
filePath = filePath.replace(/\/*\//g, '/');
return Client.apiOrigin + '/api/v1/apps/' + $scope.selected.value + '/download?file=' + filePath + '&access_token=' + Client.getToken();
},
show: function () {
$scope.downloadFile.filePath = '';
$('#downloadFileModal').modal('show');
}
};
$scope.populateLogTypes = function () {
$scope.logs.push({ name: 'System (All)', type: 'platform', value: 'all', url: Client.makeURL('/api/v1/cloudron/logs?units=all') });
$scope.logs.push({ name: 'Box', type: 'platform', value: 'box', url: Client.makeURL('/api/v1/cloudron/logs?units=box') });
$scope.logs.push({ name: 'Mail', type: 'platform', value: 'mail', url: Client.makeURL('/api/v1/cloudron/logs?units=mail') });
Client.getInstalledApps().forEach(function (app) {
$scope.logs.push({ name: app.fqdn + ' (' + app.manifest.title + ')', type: 'app', value: app.id, url: Client.makeURL('/api/v1/apps/' + app.id + '/logs'), addons: app.manifest.addons });
$scope.logs.push({
type: 'app',
value: app.id,
name: app.fqdn + ' (' + app.manifest.title + ')',
addons: app.manifest.addons
});
});
$scope.selected = $scope.logs[0];
@@ -104,7 +126,7 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
if ($scope.selected.type !== 'app') {
var tmp = $('.logs-and-term-container');
var logLine = $('<div class="log-line">');
logLine.html('Terminal is only supported for app, not for ' + $scope.selected.name);
logLine.html('Terminal is only supported for apps, not for ' + $scope.selected.name);
tmp.append(logLine);
return;
}
@@ -149,6 +171,18 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
$scope.terminal.focus();
}
$scope.uploadFile = function () {
var fileUpload = document.querySelector('#fileUpload');
fileUpload.oninput = function (e) {
Client.uploadFile($scope.selected.value, e.target.files[0], function (error) {
if (error) console.error(error);
});
};
fileUpload.click();
};
$scope.$watch('selected', function (newVal) {
if (!newVal) return;
@@ -169,4 +203,11 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
$scope.terminal.destroy();
}
});
// setup all the dialog focus handling
['downloadFileModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});
});
}]);