Updated monitors and charts
This commit is contained in:
Eldad Fux
parent
1e184b1244
commit
fb2631e108
|
|
@ -196,7 +196,7 @@ App::get('/v1/functions/:functionId/usage')
|
|||
|
||||
foreach ($points as $point) {
|
||||
$compute[] = [
|
||||
'value' => (!empty($point['value'])) ? $point['value'] / 60000 : 0, // minutes
|
||||
'value' => round((!empty($point['value'])) ? $point['value'] / 60000 : 0, 2), // minutes
|
||||
'date' => \strtotime($point['time']),
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ App::get('/v1/projects/:projectId/usage')
|
|||
'24h' => [
|
||||
'start' => DateTime::createFromFormat('U', \strtotime('-24 hours')),
|
||||
'end' => DateTime::createFromFormat('U', \strtotime('+1 hour')),
|
||||
'group' => '1h',
|
||||
'group' => '30m',
|
||||
],
|
||||
'7d' => [
|
||||
'start' => DateTime::createFromFormat('U', \strtotime('-7 days')),
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ $timeout = $this->getParam('timeout', 900);
|
|||
data-failure="alert"
|
||||
data-failure-param-alert-text="Failed to execute function"
|
||||
data-failure-param-alert-classname="error">
|
||||
<button style="vertical-align: top;">Execute Now</button> <a data-ls-attrs="href=/console/functions/function/usage?id={{router.params.id}}&project={{router.params.project}}" class="button reverse" style="vertical-align: top;">View Logs</a>
|
||||
<button style="vertical-align: top;">Execute Now</button> <a data-ls-attrs="href=/console/functions/function/logs?id={{router.params.id}}&project={{router.params.project}}" class="button reverse" style="vertical-align: top;">View Logs</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -241,7 +241,7 @@ $timeout = $this->getParam('timeout', 900);
|
|||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li data-state="/console/functions/function/monitor?id={{router.params.id}}&project={{router.params.project}}">
|
||||
<li data-state="/console/functions/function/monitors?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"
|
||||
|
|
@ -275,7 +275,7 @@ $timeout = $this->getParam('timeout', 900);
|
|||
|
||||
<button class="tick pull-end margin-start-small margin-top-small" data-ls-if="{{usage.range}} === '24h'" disabled>24h</button>
|
||||
|
||||
<h2>Monitor</h2>
|
||||
<h2>Monitors</h2>
|
||||
|
||||
<div
|
||||
data-service="functions.getUsage"
|
||||
|
|
@ -284,38 +284,38 @@ $timeout = $this->getParam('timeout', 900);
|
|||
data-param-function-id="{{router.params.id}}">
|
||||
<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="xchart margin-bottom-no">
|
||||
<div class="chart margin-bottom-no">
|
||||
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Executions=usage.executions.data" data-height="140" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="chart-notes margin-bottom-large">
|
||||
<li>Executions</li>
|
||||
<li>Executions <span data-ls-bind="({{usage.executions.total}})"></span></li>
|
||||
</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="xchart margin-bottom-no">
|
||||
<div class="chart margin-bottom-no">
|
||||
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="CPU Time (minutes)=usage.compute.data" data-colors="orange" data-height="140" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="chart-notes margin-bottom-large">
|
||||
<li class="orange">CPU Time (minutes)</li>
|
||||
<li class="orange">CPU Time <span data-ls-bind="({{usage.compute.total|seconds2hum}})"></span></li>
|
||||
</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="xchart margin-bottom-no">
|
||||
<div class="chart margin-bottom-no">
|
||||
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Failures=usage.failures.data" data-colors="red" data-height="140" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="chart-notes margin-bottom-large">
|
||||
<li class="red">Errors</li>
|
||||
<li class="red">Errors <span data-ls-bind="({{usage.failures.total}})"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -23,16 +23,52 @@ $graph = $this->getParam('graph', false);
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone xxl margin-top-negative-xxl">
|
||||
<div class="box margin-bottom dashboard">
|
||||
<div
|
||||
data-service="projects.getUsage"
|
||||
data-event="load"
|
||||
data-name="usage"
|
||||
data-param-project-id="{{router.params.project}}"
|
||||
data-param-range="30d">
|
||||
<div class="zone xxl margin-top-negative-xxxl">
|
||||
<div class="clear margin-bottom-small margin-top-negative">
|
||||
<div class="pull-end">
|
||||
<form class="margin-start-small inline" data-ls-if="{{usage.range}} !== '90d'"
|
||||
data-service="projects.getUsage"
|
||||
data-event="submit"
|
||||
data-name="usage"
|
||||
data-param-project-id="{{router.params.project}}"
|
||||
data-param-range="90d">
|
||||
<button class="tick">90d</button>
|
||||
</form>
|
||||
|
||||
<?php if (!$graph) : ?>
|
||||
<button class="tick margin-start-small" data-ls-if="{{usage.range}} === '90d'" disabled>90d</button>
|
||||
|
||||
<form class="margin-start-small inline" data-ls-if="{{usage.range}} !== '30d'"
|
||||
data-service="projects.getUsage"
|
||||
data-event="submit"
|
||||
data-name="usage"
|
||||
data-param-project-id="{{router.params.project}}">
|
||||
<button class="tick">30d</button>
|
||||
</form>
|
||||
|
||||
<button class="tick margin-start-small" data-ls-if="{{usage.range}} === '30d'" disabled>30d</button>
|
||||
|
||||
<form class="margin-start-small inline" data-ls-if="{{usage.range}} !== '24h'"
|
||||
data-service="projects.getUsage"
|
||||
data-event="submit"
|
||||
data-name="usage"
|
||||
data-param-project-id="{{router.params.project}}"
|
||||
data-param-range="24h">
|
||||
<button class="tick">24h</button>
|
||||
</form>
|
||||
|
||||
<button class="tick margin-start-small" data-ls-if="{{usage.range}} === '24h'" disabled>24h</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-service="projects.getUsage"
|
||||
data-event="load"
|
||||
data-name="usage"
|
||||
data-param-project-id="{{router.params.project}}"
|
||||
data-param-range="30d">
|
||||
|
||||
<?php if (!$graph) : ?>
|
||||
<div class="box dashboard">
|
||||
<div class="row responsive">
|
||||
<div class="col span-9">
|
||||
<div class="chart pull-end">
|
||||
|
|
@ -42,55 +78,45 @@ $graph = $this->getParam('graph', false);
|
|||
<div class="chart-metric">
|
||||
<div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.requests.total|statsTotal}}">N/A</span></div>
|
||||
<div class="metric margin-bottom-small">Requests <span class="tooltip" data-tooltip="Total number of API requests last 30 days"><i class="icon-info-circled"></i></span></div>
|
||||
<div class="range">Last 30 days</div>
|
||||
<!-- <div class="range">Last 30 days</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.network.total|humanFileSize}}" data-default="0">0</span></div>
|
||||
<div class="metric margin-bottom-small">Bandwidth</div>
|
||||
<div class="range">Last 30 days</div>
|
||||
<!-- <div class="range">Last 30 days</div> -->
|
||||
<!-- <div class="margin-top dev-feature">
|
||||
<a href="">Full Usage Report <i class="icon-right-open"></i></a>
|
||||
</div> -->
|
||||
|
||||
<div class="margin-top value small">
|
||||
<div class="margin-top-large value small">
|
||||
<b class="text-size-small sum small" data-ls-bind="{{usage.functions.total|statsTotal}}" data-default="0"></b>
|
||||
<br />
|
||||
<b>Func. Executions</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<hr />
|
||||
<?php endif; ?>
|
||||
|
||||
<div>
|
||||
<div class="row responsive">
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.users.total}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Users</b></div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.tasks.total}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Tasks</b></div>
|
||||
</div>
|
||||
<div class="box dashboard">
|
||||
<div class="row responsive">
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.users.total}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Users</b></div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value"><span class="sum" data-ls-bind="{{usage.tasks.total}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Tasks</b></div>
|
||||
</div>
|
||||
<!--
|
||||
<hr />
|
||||
|
||||
<div class="row responsive">
|
||||
<div class="col span-4">x</div>
|
||||
<div class="col span-4">x</div>
|
||||
<div class="col span-4">x</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
1852
public/dist/scripts/app-all.js
vendored
1852
public/dist/scripts/app-all.js
vendored
File diff suppressed because it is too large
Load diff
1852
public/dist/scripts/app-dep.js
vendored
1852
public/dist/scripts/app-dep.js
vendored
File diff suppressed because it is too large
Load diff
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,12 @@ input:-moz-placeholder {
|
|||
text-align: @config-start;
|
||||
}
|
||||
|
||||
form {
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background: var(--config-color-background-input);
|
||||
}
|
||||
|
|
@ -106,6 +112,7 @@ button,
|
|||
line-height: 30px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
|
||||
&.selected {
|
||||
background: var(--config-color-dark);
|
||||
|
|
|
|||
|
|
@ -143,6 +143,10 @@
|
|||
margin-top: -100px!important;
|
||||
}
|
||||
|
||||
.margin-top-negative-xxxl {
|
||||
margin-top: -150px!important;
|
||||
}
|
||||
|
||||
.margin-bottom-xxl {
|
||||
margin-bottom: 140px!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -408,10 +408,10 @@
|
|||
|
||||
.dashboard {
|
||||
padding: 20px;
|
||||
min-height: 95px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.chart {
|
||||
width: 80%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue