mirror of
https://github.com/openfaas/faas.git
synced 2025-06-09 00:36:46 +00:00
184 lines
10 KiB
HTML
184 lines
10 KiB
HTML
<html ng-app="faasGateway">
|
|
|
|
<head>
|
|
<link href="https://fonts.googleapis.com/css?family=Rationale|Roboto+Mono|Roboto:300,400,400i,500,700" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
|
|
<link rel="stylesheet" href="style/bootstrap.css">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="theme-color" content="#ffffff">
|
|
</head>
|
|
|
|
<body ng-controller="home">
|
|
<div layout="column" ng-cloak>
|
|
|
|
<md-toolbar class="md-theme-indigo" hide-gt-sm>
|
|
<div class="md-toolbar-tools">
|
|
<md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Menu">
|
|
<md-icon md-svg-icon="img/icons/ic_menu_white.svg"></md-icon>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
<section id="popupContainer" layout="row" flex>
|
|
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">
|
|
|
|
<md-toolbar class="md-theme-indigo">
|
|
<div class="md-toolbar-tools">
|
|
<a href="https://www.openfaas.com/" target="_blank"><img src="icon.png" alt="OpenFaaS Icon" width="60px" height="60px" class="md-avatar" /></a>
|
|
<h1 style="flex: 1 1 auto;"> OpenFaaS Portal</h1>
|
|
<md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Back" hide-gt-sm>
|
|
<md-icon md-svg-icon="img/icons/ic_arrow_back_white.svg"></md-icon>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
|
|
<md-content layout-padding>
|
|
<md-list>
|
|
<md-list-item class="primary-item" ng-disabled="isFunctionBeingCreated" ng-click="newFunction()">
|
|
<md-icon style="margin-right: 16px; opacity:0.6" 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 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">
|
|
</md-input-container>
|
|
<md-list>
|
|
<md-list-item ng-switch class="md-3-line" ng-click="showFunction(function)" ng-repeat="function in functions | filter:search | orderBy: '-invocationCount'" ng-class="function.name == selectedFunction.name ? 'selected' : false">
|
|
<md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
|
|
<md-icon ng-switch-when="false" md-svg-icon="person-outline"></md-icon>
|
|
<p>{{function.name}}</p>
|
|
<md-divider ng-if="!$last"></md-divider>
|
|
</md-list-item>
|
|
</md-list>
|
|
</md-content>
|
|
</md-sidenav>
|
|
|
|
<md-content flex layout-padding ng-if="!selectedFunction" ng-show="functions.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>Select a function.</p>
|
|
</div>
|
|
<div flex></div>
|
|
</md-content>
|
|
|
|
<md-content flex layout-padding ng-if="!functions.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>No functions found in FaaS.</p>
|
|
</div>
|
|
<div flex></div>
|
|
</md-content>
|
|
|
|
<md-content flex layout="column" ng-repeat="function in functions" ng-show="function.name == selectedFunction.name">
|
|
|
|
<md-card md-theme="default" md-theme-watch>
|
|
<md-card-title>
|
|
<md-card-title-text>
|
|
|
|
<div layout="row" layout-align="space-between">
|
|
<span class="md-headline">
|
|
{{function.name}}
|
|
</span>
|
|
|
|
<md-button ng-click="deleteFunction()" class="md-icon-button" aria-label="Delete">
|
|
<md-tooltip md-direction="left">Delete</md-tooltip>
|
|
<md-icon md-svg-icon="img/icons/ic_delete_black.svg"></md-icon>
|
|
</md-button>
|
|
|
|
</div>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-icon-float md-block">
|
|
<label>Replicas</label>
|
|
<input ng-model="function.replicas" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Invocation count</label>
|
|
<input ng-model="function.invocationCount" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
</div>
|
|
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Image</label>
|
|
<input ng-model="function.image" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
</div>
|
|
<div layout-gt-sm="row" ng-show="function.envProcess">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Function process</label>
|
|
<input ng-model="function.envProcess" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
</div>
|
|
<md-card-title-text>
|
|
</md-card-title>
|
|
</md-card>
|
|
<md-card>
|
|
<md-card-title>
|
|
<md-card-title-text>
|
|
|
|
<span class="md-headline">
|
|
Invoke function
|
|
</span>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<button ng-click="fireRequest()" class="md-raised md-button md-ink-ripple" type="button" ng-disabled="invocationInProgress">
|
|
<span class="ng-scope">Invoke</span><div class="md-ripple-container"></div>
|
|
</button>
|
|
</md-input-container>
|
|
<md-progress-circular md-mode="indeterminate" ng-show="invocationInProgress"></md-progress-circular>
|
|
</div>
|
|
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<md-radio-group ng-model="invocation.contentType" layout="row" layout-align="start center">
|
|
<md-radio-button value="text" class="md-primary"> Text </md-radio-button>
|
|
<md-radio-button value="json"> JSON </md-radio-button>
|
|
<md-radio-button value="binary"> Download </md-radio-button>
|
|
</md-radio-group>
|
|
</md-input-container>
|
|
</div>
|
|
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Request body</label>
|
|
<textarea ng-model="invocation.request" class="monospace" cols="80" rows="4"></textarea>
|
|
</md-input-container>
|
|
</div>
|
|
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Response status</label>
|
|
<input ng-model="invocationStatus" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Round-trip (s)</label>
|
|
<input ng-model="roundTripDuration" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
</div>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Response body</label>
|
|
<textarea ng-model="invocationResponse" class="monospace" cols="80" rows=10></textarea>
|
|
</md-input-container>
|
|
</div>
|
|
<md-card-title-text>
|
|
</md-card-title>
|
|
</md-card>
|
|
</md-content>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
|
|
<script src="script/funcstore.js"></script>
|
|
<script src="script/bootstrap.js"></script>
|
|
</body>
|
|
|
|
</html> |