Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change how and when we fetch and parse namespace info #1409

Merged
merged 1 commit into from
Dec 19, 2019
Merged

Change how and when we fetch and parse namespace info #1409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions gateway/assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ <h1 style="flex: 1 1 auto;"><img src="img/logo-text.svg" class="md-logo"></h1>
</md-list-item>
</md-list>

<md-input-container ng-show="allNamespaces.length > 1">
<md-input-container ng-show="allNamespaces.length > 1" class="display-flex">
<label>Namespace</label>
<md-select ng-model="namespaceSelectDropdown" placeholder="Select a Namespace">
<md-option ng-click="setNamespace(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces">
<md-option ng-click="setNamespace(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces" ng-selected="namespace === selectedNamespace">
{{ namespace }}
</md-option>
</md-select>
Expand Down Expand Up @@ -140,7 +140,7 @@ <h1 style="flex: 1 1 auto;"><img src="img/logo-text.svg" class="md-logo"></h1>
</md-input-container>
<md-input-container class="md-block function-url" flex-gt-sm>
<label>URL</label>
<input ng-value="function.namespace === 'openfaas-fn' ? baseUrl + 'function/' + function.name : baseUrl + 'function/' + function.name + '.' + function.namespace" type="text" readonly="readonly">
<input ng-value="(function.namespace && function.namespace.length > 0)? baseUrl + 'function/' + function.name + '.' + function.namespace : baseUrl + 'function/' + function.name" type="text" readonly="readonly">
<md-icon ng-if="canCopyToClipboard" md-svg-src="img/icons/outline-file_copy-24px.svg" ng-click="copyClicked($event)"></md-icon>
</md-input-container>
</div>
Expand Down
105 changes: 47 additions & 58 deletions gateway/assets/script/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
$scope.invocationStatus = "";
$scope.invocationStart = new Date().getTime();
$scope.roundTripDuration = "";
$scope.selectedNamespace = "openfaas-fn";
$scope.allNamespaces = ["openfaas-fn"];
$scope.selectedNamespace = "";
$scope.allNamespaces = [""];
$scope.invocation = {
contentType: "text"
};

$scope.baseUrl = $location.absUrl().replace(/\ui\/$/, '');

try {
$scope.canCopyToClipboard = document.queryCommandSupported('copy');
} catch (err) {
Expand Down Expand Up @@ -65,15 +66,19 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
var fetchFunctionsDelay = 3500;
var queryFunctionDelay = 2500;

var fetchNamespacesInterval = function() {
$http.get("../system/namespaces")
.then(function(response) {
$scope.allNamespaces = response.data;
})
};



$http.get("../system/namespaces")
.then(function(response) {
$scope.allNamespaces = response.data;
if ($scope.selectedNamespace === "" && response.data && response.data[0] && response.data[0] !== "") {
$scope.selectedNamespace = response.data[0]
refreshData($scope.selectedNamespace)
}
})


var fetchFunctionsInterval = $interval(function() {
refreshData($scope.selectedNamespace);
}, fetchFunctionsDelay);
Expand All @@ -86,13 +91,16 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f

$scope.setNamespace = function(namespace) {
$scope.selectedNamespace = namespace;
refreshData($scope.selectedNamespace)
$scope.selectedFunction = undefined;
$scope.functions = [];
refreshData($scope.selectedNamespace)
}

var refreshFunction = function(functionInstance) {
$http.get("../system/function/" + functionInstance.name + "?namespace=" + $scope.selectedNamespace)
const url = "/system/function/" + functionInstance.name;
$http.get(buildNamespaceAwareURL(url, $scope.selectedNamespace))
.then(function(response) {
functionInstance.ready = (response.data && response.data.availableReplicas && response.data.availableReplicas > 0);
$scope.selectedFunction.ready = (response.data && response.data.availableReplicas && response.data.availableReplicas > 0);
})
.catch(function(err) {
console.error(err);
Expand All @@ -114,7 +122,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
requestContentType = "binary/octet-stream";
}

var fnNamespace = ($scope.selectedNamespace !== "openfaas-fn") ? "." + $scope.selectedNamespace : "";
var fnNamespace = ($scope.selectedNamespace && $scope.selectedNamespace.length > 0) ? "." + $scope.selectedNamespace : "";
var options = {
url: "../function/" + $scope.selectedFunction.name + fnNamespace,
data: $scope.invocation.request,
Expand Down Expand Up @@ -204,42 +212,16 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
};

var refreshData = function (selectedNamespace) {
var previous = $scope.functions;

var cl = function (previousItems) {
$http.get("../system/functions?namespace=" + selectedNamespace).then(function (response) {
if (response && response.data) {
if (previousItems.length != response.data.length) {
$scope.functions = response.data;

// update the selected function object because the newly fetched object from the API becomes a different object
var filteredSelectedFunction = $filter('filter')($scope.functions, { name: $scope.selectedFunction.name }, true);
if (filteredSelectedFunction && filteredSelectedFunction.length > 0) {
$scope.selectedFunction = filteredSelectedFunction[0];
} else {
$scope.selectedFunction = undefined;
}
} else {
for (var i = 0; i < $scope.functions.length; i++) {
for (var j = 0; j < response.data.length; j++) {
if ($scope.functions[i].name == response.data[j].name) {
$scope.functions[i].image = response.data[j].image;
$scope.functions[i].replicas = response.data[j].replicas;
$scope.functions[i].invocationCount = response.data[j].invocationCount;
$scope.functions[i].namespace = response.data[j].namespace;
}
}
}
}
}
});
};
cl(previous);
}

var fetch = function() {
$http.get("../system/functions?namespace=" + $scope.selectedNamespace).then(function(response) {
$scope.functions = response.data;
$http.get(buildNamespaceAwareURL("/system/functions", selectedNamespace)).then(function (response) {
const curNamespace = ($scope.functions.length > 0 && $scope.functions[0].namespace && $scope.functions[0].namespace) ? $scope.functions[0].namespace : "";
const newNamespace = (response.data && response.data[0] && response.data[0].namespace) ? response.data[0].namespace : "";

if (response && response.data && (curNamespace !== newNamespace || $scope.functions.length != response.data.length)) {
$scope.functions = response.data;
if (!$scope.functions.indexOf($scope.selectedFunction )) {
$scope.selectedFunction = undefined;
}
}
});
};

Expand Down Expand Up @@ -267,13 +249,13 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
templateUrl: "templates/newfunction.html",
locals: {
item: $scope.functionTemplate,
allNamespaces: $scope.allNamespaces
selectedNamespace: $scope.selectedNamespace
},
controller: DialogController
controller: DialogController,
});
};

var DialogController = function($scope, $mdDialog, item) {
var DialogController = function($scope, $mdDialog, item, selectedNamespace) {
var fetchNamespaces = function () {
$http.get("../system/namespaces")
.then(function(response) {
Expand All @@ -294,7 +276,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f

$scope.annotationFieldsVisible = false;
$scope.annotationInputs = [{key: "", value: ""}];
$scope.namespaceSelect = "openfaas-fn";
$scope.namespaceSelect = selectedNamespace;
fetchNamespaces();


Expand Down Expand Up @@ -354,7 +336,7 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
item.labels = {};
item.annotations = {};
item.secrets = [];
item.namespace = "openfaas-fn";
item.namespace = "";

$scope.validationError = "";
$scope.closeDialog();
Expand Down Expand Up @@ -572,7 +554,8 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
$mdDialog.show(confirm)
.then(function() {
var options = {
url: "../system/functions?namespace=" + $scope.selectedNamespace,

url: buildNamespaceAwareURL("/system/functions", $scope.selectedNamespace),
data: {
functionName: $scope.selectedFunction.name
},
Expand All @@ -592,9 +575,6 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
}
});
};

fetch();
fetchNamespacesInterval();
}
]);

Expand All @@ -603,4 +583,13 @@ function uuidv4() {
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, function(c) {
return (c ^ cryptoInstance.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
})
}
}

function buildNamespaceAwareURL(path, namespace) {
let newUrl = path.startsWith("/")? ".." + path: "../" + path;

if (namespace && namespace.length > 0){
newUrl += "?namespace=" + namespace
}
return newUrl
}
3 changes: 3 additions & 0 deletions gateway/assets/style/bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,3 +146,6 @@ md-input-container.function-url md-icon {
color: red;
}

.display-flex {
display: flex;
}
2 changes: 1 addition & 1 deletion gateway/assets/templates/newfunction.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h2>Deploy A New Function</h2>
<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-click="fnNamespaceSelected(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces">
<md-option ng-click="fnNamespaceSelected(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces" ng-selected="namespace === namespaceSelect">
{{ namespace }}
</md-option>
</md-select>
Expand Down