Skip to content

Commit

Permalink
Allow users to create functions in a non-default NS from ui
Browse files Browse the repository at this point in the history 
This allows a uswer to select a non-standard (not openfaas-fn)
namespace from the UI to deploy a function into.

Signed-off-by: Alistair Hey <[email protected]>
  • Loading branch information
@Waterdrips @alexellis
Waterdrips authored and alexellis committed Nov 25, 2019
1 parent dd0608d commit 7e1af57
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 26 deletions.
17 changes: 9 additions & 8 deletions gateway/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,22 @@ <h1 style="flex: 1 1 auto;"><img src="img/logo-text.svg" class="md-logo"></h1>

<md-content layout-padding>

<md-input-container>
<md-select ng-model="namespaceSelect" placeholder="Select a Namespace">
<md-option ng-click="setNamespace(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces">
Namespace(s): {{ namespace }}
</md-option>
</md-select>
</md-input-container>

<md-list>
<md-list-item class="primary-item" ng-disabled="isFunctionBeingCreated" ng-click="newFunction()">
<md-icon style="margin-right: 16px" md-svg-icon="img/icons/ic_shop_two_black_24px.svg"></md-icon>
<p>Deploy New Function</p>
</md-list-item>
</md-list>

<md-input-container>
<label>Namespace</label>
<md-select ng-model="namespaceSelect" placeholder="Select a Namespace">
<md-option ng-click="setNamespace(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces">
{{ namespace }}
</md-option>
</md-select>
</md-input-container>

<md-input-container ng-hide="functions.length === 0" class="md-block" flex-gt-sm>
<label style="padding-left: 8px">Search for Function</label>
<input ng-model="search.name">
Expand Down
59 changes: 41 additions & 18 deletions gateway/assets/script/bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
contentType: "text"
};

$scope.namespaceSelect = $scope.selectedNamespace;
$scope.baseUrl = $location.absUrl().replace(/\ui\/$/, '');
try {
$scope.canCopyToClipboard = document.queryCommandSupported('copy');
Expand Down Expand Up @@ -54,7 +55,8 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
envVars: {},
labels: {},
annotations: {},
secrets: []
secrets: [],
namespace: "",
};

$scope.invocation.request = "";
Expand All @@ -68,7 +70,9 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
$scope.allNamespaces = response.data;
})
};




var fetchFunctionsInterval = $interval(function() {
refreshData($scope.selectedNamespace);
}, fetchFunctionsDelay);
Expand Down Expand Up @@ -117,7 +121,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
headers: { "Content-Type": requestContentType },
responseType: $scope.invocation.contentType == "binary" ? "arraybuffer" : $scope.invocation.contentType
};

$scope.invocationInProgress = true;
$scope.invocationResponse = "";
$scope.invocationStatus = null;
Expand All @@ -127,10 +131,10 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f

var tryDownload = function(data, filename) {
var caught;

try {
var blob = new Blob([data], { type: "binary/octet-stream" });

if (window.navigator.msSaveBlob) { // // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
window.navigator.msSaveOrOpenBlob(blob, filename);
}
Expand All @@ -142,7 +146,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
linkElement.click();
document.body.removeChild(linkElement);
}

} catch (ex) {
caught = ex;
}
Expand All @@ -166,7 +170,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f

var caught = tryDownload(data, filename);
if(caught) {
console.log(caught);
console.log(caught);
$scope.invocationResponse = caught
} else {
$scope.invocationResponse = data.byteLength + " byte(s) received";
Expand Down Expand Up @@ -260,13 +264,20 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
targetEvent: $event,
templateUrl: "templates/newfunction.html",
locals: {
item: $scope.functionTemplate
item: $scope.functionTemplate,
allNamespaces: $scope.allNamespaces
},
controller: DialogController
});
};

var DialogController = function($scope, $mdDialog, item) {
var fetchNamespaces = function () {
$http.get("../system/namespaces")
.then(function(response) {
$scope.allNamespaces = response.data;
})
}
$scope.selectedTabIdx = newFuncTabIdx;
$scope.item = {};
$scope.selectedFunc = null;
Expand All @@ -281,7 +292,10 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f

$scope.annotationFieldsVisible = false;
$scope.annotationInputs = [{key: "", value: ""}];

$scope.namespaceSelect = "openfaas-fn";
fetchNamespaces();


$scope.closeDialog = function() {
$mdDialog.hide();
};
Expand All @@ -295,10 +309,12 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
$scope.labelsToLabelInputs(func.labels);
$scope.annotationsToAnnotationInputs(func.annotations);
$scope.secretsToSecretInputs(func.secrets);
$scope.item.namespace = func.selectedNamespace;


$scope.selectedFunc = func;
}

$scope.onTabSelect = function(idx) {
newFuncTabIdx = idx;
}
Expand All @@ -316,6 +332,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
$scope.item.secrets = $scope.secretInputsToSecrets();
$scope.item.labels = $scope.labelInputsToLabels();
$scope.item.annotations = $scope.annotationInputsToAnnotations();
$scope.item.namespace = $scope.namespaceSelected();

var options = {
url: "../system/functions",
Expand All @@ -335,6 +352,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
item.labels = {};
item.annotations = {};
item.secrets = [];
item.namespace = "openfaas-fn";

$scope.validationError = "";
$scope.closeDialog();
Expand Down Expand Up @@ -418,7 +436,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
result[self.envVarInputs[i].key] = self.envVarInputs[i].value;
}
}

return result;
}

Expand Down Expand Up @@ -447,7 +465,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
result.push(self.secretInputs[i].name);
}
}

return result;
}

Expand All @@ -467,7 +485,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f

$scope.secretInputs = result;
}

$scope.labelInputsToLabels = function() {
var self = this;
var result = {};
Expand All @@ -476,7 +494,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
result[self.labelInputs[i].key] = self.labelInputs[i].value;
}
}

return result;
}

Expand All @@ -493,10 +511,10 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
result.push({key: "", value: ""});
$scope.labelFieldsVisible = false;
}

$scope.labelInputs = result;
}

$scope.annotationInputsToAnnotations = function() {
var self = this;
var result = {};
Expand All @@ -505,10 +523,15 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
result[self.annotationInputs[i].key] = self.annotationInputs[i].value;
}
}

return result;
}

$scope.namespaceSelected = function() {
var self = this;
return self.namespaceSelect;
}

$scope.annotationsToAnnotationInputs = function(annotations) {
var result = [];
for (var a in annotations) {
Expand All @@ -522,7 +545,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
result.push({key: "", value: ""});
$scope.annotationFieldsVisible = false;
}

$scope.annotationInputs = result;
}
};
Expand Down
11 changes: 11 additions & 0 deletions gateway/assets/templates/newfunction.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,17 @@ <h2>Deploy A New Function</h2>
<input name="network" ng-model="item.network" md-maxlength="200" minlength="0">
</md-input-container>
</div>
<div layout-gt-xs="row">
<md-input-container class="md-block" flex-gt-sm>
<md-tooltip md-direction="bottom">Namespace your function runs in i.e. 'openfaas-fn'. Only namespaces OpenFaaS can manage will show here</md-tooltip>
<label>Namespace</label>
<md-select name="namespace" ng-model="namespaceSelect" placeholder="Select a Namespace">
<md-option ng-value="namespace" ng-repeat="namespace in allNamespaces">
{{ namespace }}
</md-option>
</md-select>
</md-input-container>
</div>
<br />
<div layout-gt-xs="column">
<div layout-gt-xs="row" ng-click="onEnvInputExpand()" stop-propagation>
Expand Down

0 comments on commit 7e1af57

Please sign in to comment.