2020-07-15 04:13:18 +12:00
<?php
2021-04-21 23:02:54 +12:00
$runtimes = $this->getParam('runtimes', []);
2022-07-18 18:36:53 +12:00
$usageStatsEnabled = $this->getParam('usageStatsEnabled', true);
2020-07-15 04:13:18 +12:00
?>
2020-05-05 01:34:31 +12:00
< div class = "cover" >
< h1 class = "zone xl margin-bottom-large" >
2020-06-14 10:57:34 +12:00
< a data-ls-attrs = "href=/console/home?project={{router.params.project}}" class = "back text-size-small link-return-animation--start" > < i class = "icon-left-open" > < / i > Home< / a >
2020-05-05 01:34:31 +12:00
< br / >
< span > Functions< / span >
< / h1 >
< / div >
< div class = "zone xl" >
< ul class = "phases clear" data-ui-phases data-selected = "{{router.params.tab}}" >
< li data-state = "/console/functions?project={{router.params.project}}" >
< h2 > Functions< / h2 >
2020-05-11 08:44:28 +12:00
< div class = "zone xl"
data-service="functions.list"
data-scope="sdk"
data-event="load,functions.create,functions.update,functions.delete"
data-name="project-functions"
data-param-project-id="{{router.params.project}}"
2022-09-01 00:30:16 +12:00
data-param-queries="limit(<?php echo APP_PAGING_LIMIT ; ?> ),offset({{router.params.offset|orZero}}),orderDesc('')"
data-param-queries-cast-to="array"
data-param-queries-cast-from="csv"
2020-05-11 08:44:28 +12:00
data-success="trigger"
data-success-param-trigger-events="functions.list">
< div data-ls-if = "0 == {{project-functions.functions.length}} || undefined == {{project-functions.functions.length}}" class = "box margin-top margin-bottom" >
< h3 class = "margin-bottom-small text-bold" > No Functions Found< / h3 >
< p class = "margin-bottom-no" > You haven't created any functions for your project yet.< / p >
< / div >
2020-07-19 09:15:02 +12:00
< div data-ls-if = "0 != {{project-functions.functions.length}}" >
2022-02-28 22:25:38 +13:00
< div class = "margin-bottom-small text-align-end text-size-small margin-top-negative text-fade" > < span data-ls-bind = "{{project-functions.total}}" > < / span > functions found< / div >
2021-08-04 18:39:23 +12:00
2020-07-19 09:15:02 +12:00
< div class = "box margin-bottom" >
< ul data-ls-loop = "project-functions.functions" data-ls-as = "function" class = "list" >
< li class = "clear" >
< div class = "pull-start margin-end avatar-container" >
2021-06-24 00:15:27 +12:00
< img src = "" data-ls-attrs = "src=/images/runtimes/{{function.runtime|runtimeLogo}}?v= <?php echo APP_CACHE_BUSTER ; ?> " alt = "Function Runtime" class = "avatar" loading = "lazy" width = "60" height = "60" />
2020-07-19 09:15:02 +12:00
< / div >
2020-05-11 08:44:28 +12:00
2020-07-19 09:15:02 +12:00
< a data-ls-attrs = "href=/console/functions/function?id={{function.$id}}&project={{router.params.project}}" class = "button pull-end" > Settings< / a >
2020-05-11 08:44:28 +12:00
2021-07-29 20:09:24 +12:00
< span data-ls-bind = "{{function.name}}" > < / span >
2020-07-19 09:15:02 +12:00
2021-06-24 00:15:27 +12:00
< p class = "text-fade margin-bottom-no" data-ls-bind = "{{function.runtime|runtimeName}} {{function.runtime|runtimeVersion}}" > < / p >
2020-07-19 09:15:02 +12:00
< / li >
< / ul >
< / div >
< / div >
< div class = "pull-end text-align-center paging" >
< form
data-service="functions.list"
data-event="submit"
data-param-search="{{router.params.search}}"
data-scope="sdk"
data-name="project-functions"
data-success="state"
data-success-param-state-keys="search,offset">
2022-09-01 00:30:16 +12:00
< input type = "hidden" name = "offset" >
< button name = "queries" data-cast-to = "array" data-cast-from = "csv" data-paging-back data-paging-desc data-offset = "{{router.params.offset}}" data-total = "{{project-users.total}}" class = "margin-end round small" aria-label = "Back" > < i class = "icon-left-open" > < / i > < / button >
2020-07-19 09:15:02 +12:00
< / form >
2022-02-28 22:25:38 +13:00
< span data-ls-bind = "{{router.params.offset|pageCurrent}} / {{project-functions.total|pageTotal}}" > < / span >
2020-07-19 09:15:02 +12:00
< form
data-service="functions.list"
data-event="submit"
data-param-search="{{router.params.search}}"
data-scope="sdk"
data-name="project-functions"
data-success="state"
data-success-param-state-keys="search,offset">
2022-09-01 00:30:16 +12:00
< input type = "hidden" name = "offset" >
< button name = "queries" data-cast-to = "array" data-cast-from = "csv" data-paging-next data-paging-desc data-offset = "{{router.params.offset}}" data-total = "{{project-functions.total}}" class = "margin-start round small" aria-label = "Next" > < i class = "icon-right-open" > < / i > < / button >
2020-07-19 09:15:02 +12:00
< / form >
2020-05-11 08:44:28 +12:00
< / div >
< div class = "clear" >
< div data-ui-modal class = "modal close box sticky-footer" data-button-text = "Add Function" >
< button type = "button" class = "close pull-end" data-ui-modal-close = "" > < i class = "icon-cancel" > < / i > < / button >
< h1 > Add Function< / h1 >
< form
2021-01-18 19:29:26 +13:00
data-analytics
data-analytics-activity
2020-05-11 08:44:28 +12:00
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Create Project Function"
2020-05-11 16:39:00 +12:00
data-service="functions.create"
data-scope="sdk"
2020-05-11 08:44:28 +12:00
data-event="submit"
2020-06-14 08:26:45 +12:00
data-success="alert,trigger,reset,redirect"
2020-05-11 08:44:28 +12:00
data-success-param-alert-text="Created function successfully"
2020-05-11 16:39:00 +12:00
data-success-param-trigger-events="functions.create"
2020-06-14 08:26:45 +12:00
data-success-param-redirect-url="/console/functions/function?id={{serviceData.$id}}& project={{router.params.project}}"
2020-05-11 08:44:28 +12:00
data-failure="alert"
data-failure-param-alert-text="Failed to create function"
data-failure-param-alert-classname="error">
2021-07-27 18:41:48 +12:00
< label for = "functionId" > Function ID< / label >
2021-08-04 18:39:23 +12:00
< input
2021-07-27 18:41:48 +12:00
type="hidden"
data-custom-id
2021-08-04 18:39:23 +12:00
data-id-type="auto"
data-validator="functions.get"
2021-07-27 18:41:48 +12:00
required
maxlength="36"
2022-03-23 01:31:52 +13:00
pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{0,35}$"
2021-07-27 18:41:48 +12:00
name="functionId" />
2021-08-04 18:39:23 +12:00
2021-08-03 22:12:26 +12:00
< label for = "name" > Name< / label >
< input type = "text" id = "name" name = "name" required autocomplete = "off" class = "margin-bottom" maxlength = "128" / >
2021-08-04 18:39:23 +12:00
2021-06-24 00:15:27 +12:00
< label for = "runtime" > Runtimes< / label >
< select name = "runtime" id = "runtime" required class = "margin-bottom-xl" >
2021-08-04 18:39:23 +12:00
<?php foreach ( $runtimes as $key => $runtime ) : ?>
2021-04-21 23:02:54 +12:00
< option value = " <?php echo $this -> escape ( $key ); ?> " > <?php echo $this -> escape ( $runtime [ 'name' ]); ?> <?php echo $this -> escape ( $runtime [ 'version' ]); ?> </ option >
2021-08-04 18:39:23 +12:00
<?php endforeach ; ?>
2020-07-15 04:13:18 +12:00
< / select >
2020-05-11 08:44:28 +12:00
2021-11-24 21:33:12 +13:00
< input id = "execute" name = "execute" value = "" hidden / >
2021-06-24 00:15:27 +12:00
2020-05-11 08:44:28 +12:00
< footer >
< button type = "submit" > Create< / button > < button data-ui-modal-close = "" type = "button" class = "reverse" > Cancel< / button >
< / footer >
< / form >
< / div >
< / div >
< / div >
2020-05-05 01:34:31 +12:00
< / li >
2022-07-18 18:30:51 +12:00
<?php if ( $usageStatsEnabled ) : ?>
< li data-state = "/console/functions/usage?id={{router.params.id}}&project={{router.params.project}}" >
< form class = "pull-end margin-start-small margin-top-small" data-ls-if = "{{usage.range}} !== '90d'"
data-service="functions.getUsage"
data-event="submit"
data-name="usage"
data-param-range="90d">
< button class = "tick" > 90d< / button >
< / form >
< button class = "tick pull-end margin-start-small margin-top-small" data-ls-if = "{{usage.range}} === '90d'" disabled > 90d< / button >
< form class = "pull-end margin-start-small margin-top-small" data-ls-if = "{{usage.range}} !== '30d'"
data-service="functions.getUsage"
data-event="submit"
data-name="usage"
data-param-range="30d">
< button class = "tick" > 30d< / button >
< / form >
< button class = "tick pull-end margin-start-small margin-top-small" data-ls-if = "{{usage.range}} === '30d'" disabled > 30d< / button >
< form class = "pull-end margin-start-small margin-top-small" data-ls-if = "{{usage.range}} !== '24h'"
2022-07-18 19:12:15 +12:00
data-service="functions.getUsage"
2022-07-18 18:30:51 +12:00
data-event="submit"
data-name="usage"
data-param-range="24h">
< button class = "tick" > 24h< / button >
< / form >
< button class = "tick pull-end margin-start-small margin-top-small" data-ls-if = "{{usage.range}} === '24h'" disabled > 24h< / button >
2022-07-18 18:36:53 +12:00
< h2 > Usage< / h2 >
2022-07-18 18:30:51 +12:00
< div
data-service="functions.getUsage"
data-event="load"
data-name="usage">
< div class = "box margin-bottom-small" >
< div class = "margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small" >
< div class = "chart background-image-no border-no margin-bottom-no" >
2022-08-15 00:03:21 +12:00
< input type = "hidden" data-ls-bind = "{{usage}}" data-forms-chart = "Executions=executionsTotal" data-height = "140" data-show-y-axis = "true" / >
2022-07-18 18:30:51 +12:00
< / div >
< / div >
< / div >
< ul class = "chart-notes margin-bottom-large" >
2022-08-15 00:03:21 +12:00
< li > Executions < span data-ls-bind = "({{usage.executionsTotal|statsGetLast|statsTotal}})" > < / span > < / li >
2022-07-18 18:30:51 +12:00
< / ul >
< div class = "box margin-bottom-small" >
< div class = "margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small" >
< div class = "chart background-image-no border-no margin-bottom-no" >
2022-08-15 00:03:21 +12:00
< input type = "hidden" data-ls-bind = "{{usage}}" data-forms-chart = "CPU Time (milliseconds)=executionsTime" data-colors = "orange" data-height = "140" data-show-y-axis = "true" / >
2022-07-18 18:30:51 +12:00
< / div >
< / div >
< / div >
< ul class = "chart-notes margin-bottom-large" >
2022-09-03 02:19:36 +12:00
< li class = "orange" > CPU Time < span data-ls-bind = "({{usage.executionsTime|statsGetLast|ms2hum}})" > < / span > < / li >
2022-07-18 18:30:51 +12:00
< / ul >
< div class = "box margin-bottom-small" >
< div class = "margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small" >
< div class = "chart background-image-no border-no margin-bottom-no" >
2022-08-15 00:03:21 +12:00
< input type = "hidden" data-ls-bind = "{{usage}}" data-forms-chart = "Failures=executionsFailure" data-colors = "red" data-height = "140" data-show-y-axis = "true" / >
2022-07-18 18:30:51 +12:00
< / div >
< / div >
< / div >
< ul class = "chart-notes margin-bottom-large" >
2022-08-15 00:03:21 +12:00
< li class = "red" > Errors < span data-ls-bind = "({{usage.executionsFailure|statsGetLast|statsTotal}})" > < / span > < / li >
2022-07-18 18:30:51 +12:00
< / ul >
< / div >
< / li >
<?php endif ; ?>
2020-05-05 01:34:31 +12:00
< / ul >
< / div >