upload current state
This commit is contained in:
parent
627df80b40
commit
35889239bf
|
@ -48,7 +48,7 @@ const APP_USERAGENT = APP_NAME.'-Server v%s. Please report abuse at %s';
|
|||
const APP_MODE_DEFAULT = 'default';
|
||||
const APP_MODE_ADMIN = 'admin';
|
||||
const APP_PAGING_LIMIT = 12;
|
||||
const APP_CACHE_BUSTER = 151;
|
||||
const APP_CACHE_BUSTER = 152;
|
||||
const APP_VERSION_STABLE = '0.9.4';
|
||||
const APP_STORAGE_UPLOADS = '/storage/uploads';
|
||||
const APP_STORAGE_FUNCTIONS = '/storage/functions';
|
||||
|
|
|
@ -86,7 +86,6 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
|
|||
data-name="usage"
|
||||
data-param-project-id="{{router.params.project}}"
|
||||
data-param-range="30d">
|
||||
|
||||
<?php if (!$graph && $usageStatsEnabled): ?>
|
||||
<div class="box dashboard">
|
||||
<div class="row responsive">
|
||||
|
@ -101,43 +100,21 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
|
|||
</div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="value margin-bottom-small">
|
||||
<!-- <div class="value margin-bottom-small">
|
||||
<span class="sum" data-ls-bind="{{usage.network.total|humanFileSize}}" data-default="0">0</span>
|
||||
<span data-ls-bind="{{usage.network.total|humanFileUnit}}" class="text-size-small unit"></span>
|
||||
</div>
|
||||
<div class="metric margin-bottom-small">Bandwidth</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="margin-top margin-bottom-small">
|
||||
Realtime
|
||||
</h2>
|
||||
<div class="box dashboard">
|
||||
<div class="row responsive">
|
||||
<div class="col span-9">
|
||||
<div class="chart pull-end">
|
||||
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Connections=usage.realtimeConnections.data,Messages=usage.realtimeMessages.data" />
|
||||
</div>
|
||||
|
||||
<div class="chart-metric">
|
||||
<div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.realtimeConnections.total|statsTotal}}">N/A</span></div>
|
||||
<div class="metric margin-bottom-small">Connections <span class="tooltip" data-tooltip="Total number of Realtime Connections established"><i class="icon-info-circled"></i></span></div>
|
||||
<div class="value margin-bottom-small"><span class="sum" data-ls-bind="{{usage.realtimeMessages.total|statsTotal}}">N/A</span></div>
|
||||
<div class="metric margin-bottom-small">Messages <span class="tooltip" data-tooltip="Total number of Realtime Messages sent"><i class="icon-info-circled"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col span-3">
|
||||
<div class="metric margin-bottom-small">Bandwidth</div> -->
|
||||
<div class="value margin-bottom-small">
|
||||
<span class="sum" data-ls-bind="{{realtime.current|accessProject}}" data-default="0">0</span>
|
||||
</div>
|
||||
<div class="metric margin-bottom-small">Live Connections</div>
|
||||
<div class="metric margin-bottom-small">Connections</div>
|
||||
<div class="chart-bar margin-bottom-small" data-ls-attrs="data-history={{realtime.history|accessProject}}" data-forms-chart-bars="{{realtime.history|accessProject}}"></div>
|
||||
<div class="metric">Connections per 5 seconds</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<h2 class="margin-top margin-bottom-small">
|
||||
Total
|
||||
</h2>
|
||||
<div class="box dashboard">
|
||||
<div class="row responsive">
|
||||
<div class="col span-3">
|
||||
|
@ -156,16 +133,18 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
|
|||
<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 class="value"><span class="sum" data-ls-bind="{{usage.functions.total|statsTotal}}" data-default="0">0</span></div>
|
||||
<div class="margin-top-small"><b class="text-size-small unit">Executions</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone xxl margin-top clear" data-ls-if="({{console-project}})">
|
||||
<h2 class="margin-bottom-small">Platforms</h2>
|
||||
<div class="zone xl margin-top-xl clear" data-ls-if="({{console-project}})">
|
||||
<h2 class="margin-bottom">Platforms</h2>
|
||||
|
||||
<div class="box margin-bottom" data-ls-if="0 < {{console-project.platforms.length}} && undefined !== {{console-project.platforms}}">
|
||||
<ul data-ls-loop="console-project.platforms" data-ls-as="platform" class="list">
|
||||
|
|
|
@ -42,6 +42,7 @@ const configApp = {
|
|||
'public/scripts/views/forms/clone.js',
|
||||
'public/scripts/views/forms/add.js',
|
||||
'public/scripts/views/forms/chart.js',
|
||||
'public/scripts/views/forms/chart-bar.js',
|
||||
'public/scripts/views/forms/code.js',
|
||||
'public/scripts/views/forms/color.js',
|
||||
'public/scripts/views/forms/copy.js',
|
||||
|
|
15
public/dist/scripts/app-all.js
vendored
15
public/dist/scripts/app-all.js
vendored
File diff suppressed because one or more lines are too long
15
public/dist/scripts/app.js
vendored
15
public/dist/scripts/app.js
vendored
File diff suppressed because one or more lines are too long
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
|
@ -53,12 +53,53 @@ document.addEventListener("account.create", function () {
|
|||
});
|
||||
});
|
||||
window.addEventListener("load", () => {
|
||||
const bars = 10;
|
||||
const realtime = window.ls.container.get('realtime');
|
||||
let current = {};
|
||||
window.ls.container.get('console').subscribe('project', event => {
|
||||
realtime.set({
|
||||
...realtime.current,
|
||||
...event.payload
|
||||
for (var project in event.payload) {
|
||||
current[project] = event.payload[project] ?? 0;
|
||||
}
|
||||
});
|
||||
setInterval(() => {
|
||||
let newHistory = {};
|
||||
for (const project in current) {
|
||||
let history = realtime?.history ?? {};
|
||||
|
||||
if (!(project in history)) {
|
||||
history[project] = new Array(bars).fill({
|
||||
percentage: 0,
|
||||
value: 0
|
||||
});
|
||||
}
|
||||
|
||||
history = history[project];
|
||||
history.push({
|
||||
percentage: 0,
|
||||
value: current[project]
|
||||
});
|
||||
if (history.length >= bars) {
|
||||
history.shift();
|
||||
}
|
||||
|
||||
const highest = history.reduce((prev, curr) => {
|
||||
return (curr.value > prev) ? curr.value : prev;
|
||||
}, 0);
|
||||
|
||||
history = history.map(({ percentage, value }) => {
|
||||
percentage = value === 0 ? 0 : ((Math.round((value / highest) * 10) / 10) * 100);
|
||||
if (percentage > 100) percentage = 100;
|
||||
else if (percentage == 0 && value != 0) percentage = 5;
|
||||
|
||||
return {
|
||||
percentage: percentage,
|
||||
value: value
|
||||
};
|
||||
})
|
||||
newHistory[project] = history;
|
||||
}
|
||||
realtime.setHistory(newHistory);
|
||||
realtime.setCurrent(current);
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
|
|
|
@ -4,10 +4,16 @@
|
|||
window.ls.container.set('realtime', () => {
|
||||
return {
|
||||
current: null,
|
||||
set: function (currentConnections) {
|
||||
history: null,
|
||||
setCurrent: function(currentConnections) {
|
||||
var scope = this;
|
||||
scope.current = currentConnections;
|
||||
return scope.current;
|
||||
},
|
||||
setHistory: function(history) {
|
||||
var scope = this;
|
||||
scope.history = history;
|
||||
return scope.history;
|
||||
}
|
||||
};
|
||||
}, true, true);
|
||||
|
|
41
public/scripts/views/forms/chart-bar.js
Normal file
41
public/scripts/views/forms/chart-bar.js
Normal file
|
@ -0,0 +1,41 @@
|
|||
(function (window) {
|
||||
"use strict";
|
||||
|
||||
window.ls.container.get("view").add({
|
||||
selector: "data-forms-chart-bars",
|
||||
controller: (element) => {
|
||||
let observer = null;
|
||||
let populateChart = () => {
|
||||
let history = element.dataset?.history;
|
||||
if (history == 0) {
|
||||
history = new Array(10).fill({
|
||||
percentage: 0,
|
||||
value: 0
|
||||
});
|
||||
} else {
|
||||
history = JSON.parse(history);
|
||||
}
|
||||
element.innerHTML = '';
|
||||
history.forEach(({ percentage, value }) => {
|
||||
const bar = document.createElement('span');
|
||||
bar.classList.add('bar')
|
||||
bar.classList.add(`bar-${percentage}`)
|
||||
// bar.classList.add('tooltip')
|
||||
// bar.classList.add('down')
|
||||
//ar.setAttribute('data-tooltip', `${value} connections (x seconds ago)`)
|
||||
element.appendChild(bar);
|
||||
})
|
||||
}
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
} else {
|
||||
observer = new MutationObserver(populateChart);
|
||||
observer.observe(element, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-history']
|
||||
});
|
||||
}
|
||||
populateChart();
|
||||
}
|
||||
});
|
||||
})(window);
|
|
@ -2,10 +2,10 @@
|
|||
position: relative;
|
||||
background: var(--config-color-background-fade);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
|
||||
padding: 30px;
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
|
||||
display: block;
|
||||
padding: 30px;
|
||||
|
||||
&.padding-tiny {
|
||||
padding: 5px;
|
||||
|
|
|
@ -522,6 +522,44 @@
|
|||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
height: 5rem;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
@media @desktops {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 12.5%;
|
||||
background-color: var(--config-color-chart-fade);
|
||||
margin: 0 2px;
|
||||
border-top: 2px solid var(--config-color-chart);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--config-color-chart);
|
||||
}
|
||||
|
||||
.bar-loop (@i) when (@i > -1) {
|
||||
&.bar-@{i} {
|
||||
height: ~"@{i}%";
|
||||
}
|
||||
&.bar-@{i} when(@i = 0) {
|
||||
border-top: 1px solid var(--config-color-chart);
|
||||
}
|
||||
.bar-loop(@i - 10);
|
||||
}
|
||||
|
||||
.bar-loop (100);
|
||||
|
||||
&.bar-5 {
|
||||
height: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-metric {
|
||||
|
@ -587,10 +625,10 @@
|
|||
}
|
||||
|
||||
&:nth-child(1), &.blue {
|
||||
color: #29b5d9;
|
||||
color: var(--config-color-chart);
|
||||
|
||||
&::before {
|
||||
background: #29b5d9;
|
||||
background: var(--config-color-chart);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -29,6 +29,8 @@
|
|||
--config-color-success: #1bbf61;
|
||||
--config-color-warning: #fffbdd;
|
||||
--config-color-info: #386fd2;
|
||||
--config-color-chart: #29b5d9;
|
||||
--config-color-chart-fade: #d4f0f7;
|
||||
--config-border-color: #f3f3f3;
|
||||
--config-border-fade: #e0e3e4;
|
||||
--config-border-radius: 10px;
|
||||
|
@ -111,6 +113,8 @@
|
|||
--config-color-success: #34b86d;
|
||||
--config-color-warning: #e0d56d;
|
||||
--config-color-info: #386fd2;
|
||||
--config-color-chart: #29b5d9;
|
||||
--config-color-chart-fade: #c7d8eb;
|
||||
--config-border-color: #262D50;
|
||||
--config-border-fade: #19203a;
|
||||
--config-prism-background: #1F253F;
|
||||
|
|
Loading…
Reference in a new issue