mirror of
https://github.com/openfaas/faas.git
synced 2025-06-24 15:53:26 +00:00
* Added function store feature to the "Deploy New Function"
* This feature fetches function catalogs from openfaas/store and makes one-click deploy easy * You can switch between "From Store" or "Manually" by tabs * Added icon to "Deploy New Function" button * Added function search feature to the main UI Signed-off-by: Ken Fukuyama <kenfdev@gmail.com> reverted fixed tabs Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>
This commit is contained in:
Ken Fukuyama
Alex Ellis
25
gateway/assets/templates/funcstore.html
Normal file
25
gateway/assets/templates/funcstore.html
Normal file
@ -0,0 +1,25 @@
|
||||
<div layout="row" layout-align="center center" ng-show="$ctrl.message">
|
||||
<p>{{ $ctrl.message }}</p>
|
||||
</div>
|
||||
<div ng-hide="$ctrl.message">
|
||||
<md-input-container class="md-icon-float md-block">
|
||||
<label>Search for Function</label>
|
||||
<md-icon md-svg-src="img/icons/ic_search_black_24px.svg"></md-icon>
|
||||
<input ng-model="$ctrl.searchText" type="text">
|
||||
</md-input-container>
|
||||
<div ng-if="$ctrl.loading" layout="row" layout-sm="column" layout-align="space-around">
|
||||
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
|
||||
</div>
|
||||
<md-list ng-hide="$ctrl.loading">
|
||||
<md-list-item class="md-3-line" ng-repeat="func in $ctrl.functions | filter:$ctrl.search" ng-click="$ctrl.select(func, $event)"
|
||||
ng-class="func.name === $ctrl.selectedFunc.name ? 'selected' : false">
|
||||
<img ng-if="func.icon" ng-src="{{func.icon}}" class="md-avatar" alt="{{func.name}}" style="border-radius: 0" />
|
||||
<span ng-if="!func.icon" class="md-avatar">{{func.title | limitTo:1}}</span>
|
||||
<div class="md-list-item-text" layout="column">
|
||||
<h3>{{ func.title }}</h3>
|
||||
<p>{{ func.description }}</p>
|
||||
</div>
|
||||
<md-divider md-inset ng-if="!$last"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
71
gateway/assets/templates/newfunction.html
Normal file
71
gateway/assets/templates/newfunction.html
Normal file
@ -0,0 +1,71 @@
|
||||
<md-dialog id="newfunction-dialog" aria-label="List dialog" layout="column" flex="70">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-tools">
|
||||
<h2>Deploy A New Function</h2>
|
||||
<span flex></span>
|
||||
<md-button class="md-icon-button" ng-click="closeDialog()">
|
||||
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-dialog-content class="md-padding">
|
||||
<md-tabs md-dynamic-height md-border-bottom md-selected="selectedTabIdx">
|
||||
<md-tab label="From Store" md-on-deselect="onStoreTabDeselect()" md-on-select="onTabSelect(0)">
|
||||
<md-content class="md-padding">
|
||||
<func-store selected-func="selectedFunc" on-selected="onFuncSelected"></func-store>
|
||||
</md-content>
|
||||
</md-tab>
|
||||
<md-tab label="Manually" md-on-deselect="onManualTabDeselect()" md-on-select="onTabSelect(1)">
|
||||
<md-content class="md-padding">
|
||||
<div>
|
||||
<label><i>Use this form to test a function or the <a ng-href="https://github.com/openfaas/faas-cli">faas-cli</a> for more options.</i></label>
|
||||
</div>
|
||||
<label>Define the function below:</label>
|
||||
<form name="userForm">
|
||||
<div layout-gt-xs="row">
|
||||
<md-input-container class="md-block" flex-gt-sm>
|
||||
<md-tooltip md-direction="bottom">Docker image name and tag to use for function i.e. functions/alpine:latest</md-tooltip>
|
||||
<label>Docker image:</label>
|
||||
<input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="2">
|
||||
</md-input-container>
|
||||
</div>
|
||||
<div layout-gt-xs="row">
|
||||
<md-input-container class="md-block" flex-gt-sm>
|
||||
<md-tooltip md-direction="bottom">Name of the function - must be a valid DNS entry</md-tooltip>
|
||||
<label>Function name:</label>
|
||||
<input name="serviceName" ng-model="item.service" required md-maxlength="200" minlength="2">
|
||||
</md-input-container>
|
||||
</div>
|
||||
<div layout-gt-xs="row">
|
||||
<md-input-container class="md-block" flex-gt-sm>
|
||||
<md-tooltip md-direction="bottom">Process to run as your function i.e. 'env' or 'shasum'. Ignore if using OpenFaaS templates</md-tooltip>
|
||||
<label>Function process (optional):</label>
|
||||
<input name="envProcess" ng-model="item.envProcess" 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">Docker Swarm network, not required for other providers. Default: func_functions</md-tooltip>
|
||||
<label>Network (Swarm):</label>
|
||||
<input name="network" ng-model="item.network" md-maxlength="200" minlength="0">
|
||||
</md-input-container>
|
||||
</div>
|
||||
<div class="validation-error" layout-gt-xs="row" layout-align="start end">
|
||||
<span ng-show="validationError">{{ validationError }}</span>
|
||||
</div>
|
||||
</form>
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</md-dialog-content>
|
||||
|
||||
<md-dialog-actions>
|
||||
<md-button ng-click="closeDialog()" class="md-secondary">
|
||||
Close Dialog
|
||||
</md-button>
|
||||
<md-button ng-click="createFunc()" class="md-primary">
|
||||
Deploy
|
||||
</md-button>
|
||||
</md-dialog-actions>
|
||||
</md-dialog>
|
||||
Reference in New Issue
Block a user