mirror of
https://github.com/openfaas/faas.git
synced 2025-06-16 21:06:54 +00:00
181 lines
14 KiB
HTML
181 lines
14 KiB
HTML
<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="Custom" md-on-deselect="onCustomTabDeselect()" 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">
|
|
<div ng-messages="userForm.dockerImage.$error">
|
|
<div ng-message="required">Docker image is required.</div>
|
|
</div>
|
|
</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" ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/" />
|
|
<div ng-messages="userForm.serviceName.$error">
|
|
<div ng-message="required">Function name is required.</div>
|
|
<div ng-message="pattern">Function name can only contain a-z, 0-9 and dashes</div>
|
|
</div>
|
|
</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 (Deprecated):</label>
|
|
<input name="network" ng-model="item.network" md-maxlength="200" minlength="0">
|
|
</md-input-container>
|
|
</div>
|
|
<div layout-gt-xs="row" ng-if="allNamespaces.length > 1">
|
|
<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-click="fnNamespaceSelected(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces" ng-selected="namespace === namespaceSelect">
|
|
{{ 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>
|
|
Environment Variables
|
|
<md-icon class="expand-icon" ng-if="!envFieldsVisible" aria-label="env-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
|
|
<md-icon class="expand-icon" ng-if="envFieldsVisible" aria-label="env-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
|
|
</div>
|
|
<div ng-if="envFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
|
|
<div ng-repeat="envVar in envVarInputs track by $index" layout-gt-xs="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Environment variable key to be used in the function</md-tooltip>
|
|
<label>Key:</label>
|
|
<input name="envVarKey" ng-model="envVarInputs[$index].key" autofocus>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Environment variable value to be used in the function</md-tooltip>
|
|
<label>Value:</label>
|
|
<input name="envVarValue" ng-model="envVarInputs[$index].value">
|
|
</md-input-container>
|
|
<md-icon class="add-input-icon" ng-click="addEnvVar($index)" ng-show="$last" aria-label="add-env" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
|
|
<md-icon class="remove-input-icon" ng-click="removeEnvVar($event,envVar)" ng-show="!$last" aria-label="remove-env" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div layout-gt-xs="column">
|
|
<div layout-gt-xs="row" ng-click="onSecretInputExpand()" stop-propagation>
|
|
Secrets
|
|
<md-icon class="expand-icon" ng-if="!secretFieldsVisible" aria-label="secret-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
|
|
<md-icon class="expand-icon" ng-if="secretFieldsVisible" aria-label="secret-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
|
|
</div>
|
|
<div ng-if="secretFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
|
|
<div ng-repeat="secret in secretInputs track by $index" layout-gt-xs="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Secret name to be used in the function</md-tooltip>
|
|
<label>Secret Name:</label>
|
|
<input name="secretField" ng-model="secretInputs[$index].name" autofocus>
|
|
</md-input-container>
|
|
<md-icon class="add-input-icon" ng-click="addSecret($index)" ng-show="$last" aria-label="add-secret" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
|
|
<md-icon class="remove-input-icon" ng-click="removeSecret($event,secret)" ng-show="!$last" aria-label="remove-secret" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div layout-gt-xs="column">
|
|
<div layout-gt-xs="row" ng-click="onLabelInputExpand()" stop-propagation>
|
|
Labels
|
|
<md-icon class="expand-icon" ng-if="!labelFieldsVisible" aria-label="label-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
|
|
<md-icon class="expand-icon" ng-if="labelFieldsVisible" aria-label="label-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
|
|
</div>
|
|
<div ng-if="labelFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
|
|
<div ng-repeat="label in labelInputs track by $index" layout-gt-xs="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Label key to be used on the deployed function</md-tooltip>
|
|
<label>Key:</label>
|
|
<input name="labelKey" ng-model="labelInputs[$index].key" autofocus>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Label value to be used on the deployed function</md-tooltip>
|
|
<label>Value:</label>
|
|
<input name="labelValue" ng-model="labelInputs[$index].value">
|
|
</md-input-container>
|
|
<md-icon class="add-input-icon" ng-click="addLabel($index)" ng-show="$last" aria-label="add-label" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
|
|
<md-icon class="remove-input-icon" ng-click="removeLabel($event,label)" ng-show="!$last" aria-label="remove-label" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div layout-gt-xs="column">
|
|
<div layout-gt-xs="row" ng-click="onAnnotationInputExpand()" stop-propagation>
|
|
Annotations
|
|
<md-icon class="expand-icon" ng-if="!annotationFieldsVisible" aria-label="annotation-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
|
|
<md-icon class="expand-icon" ng-if="annotationFieldsVisible" aria-label="annotation-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
|
|
</div>
|
|
<div ng-if="annotationFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
|
|
<div ng-repeat="annotation in annotationInputs track by $index" layout-gt-xs="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Annotation key to be used on the deployed function</md-tooltip>
|
|
<label>Key:</label>
|
|
<input name="annotationkey" ng-model="annotationInputs[$index].key" autofocus>
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-tooltip md-direction="bottom">Annotation value to be used on the deployed function</md-tooltip>
|
|
<label>Value:</label>
|
|
<input name="annotationValue" ng-model="annotationInputs[$index].value">
|
|
</md-input-container>
|
|
<md-icon class="add-input-icon" ng-click="addAnnotation($index)" ng-show="$last" aria-label="add-annotation" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
|
|
<md-icon class="remove-input-icon" ng-click="removeAnnotation($event,annotation)" ng-show="!$last" aria-label="remove-annotation" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
|
|
</div>
|
|
</div>
|
|
</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-disabled="userForm.$invalid" ng-click="createFunc()" class="md-primary">
|
|
Deploy
|
|
</md-button>
|
|
</md-dialog-actions>
|
|
</md-dialog>
|