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_DEFAULT = 'default';
|
||||||
const APP_MODE_ADMIN = 'admin';
|
const APP_MODE_ADMIN = 'admin';
|
||||||
const APP_PAGING_LIMIT = 12;
|
const APP_PAGING_LIMIT = 12;
|
||||||
const APP_CACHE_BUSTER = 151;
|
const APP_CACHE_BUSTER = 152;
|
||||||
const APP_VERSION_STABLE = '0.9.4';
|
const APP_VERSION_STABLE = '0.9.4';
|
||||||
const APP_STORAGE_UPLOADS = '/storage/uploads';
|
const APP_STORAGE_UPLOADS = '/storage/uploads';
|
||||||
const APP_STORAGE_FUNCTIONS = '/storage/functions';
|
const APP_STORAGE_FUNCTIONS = '/storage/functions';
|
||||||
|
|
|
@ -86,8 +86,7 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
|
||||||
data-name="usage"
|
data-name="usage"
|
||||||
data-param-project-id="{{router.params.project}}"
|
data-param-project-id="{{router.params.project}}"
|
||||||
data-param-range="30d">
|
data-param-range="30d">
|
||||||
|
<?php if (!$graph && $usageStatsEnabled): ?>
|
||||||
<?php if (!$graph && $usageStatsEnabled): ?>
|
|
||||||
<div class="box dashboard">
|
<div class="box dashboard">
|
||||||
<div class="row responsive">
|
<div class="row responsive">
|
||||||
<div class="col span-9">
|
<div class="col span-9">
|
||||||
|
@ -101,71 +100,51 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col span-3">
|
<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 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>
|
<span data-ls-bind="{{usage.network.total|humanFileUnit}}" class="text-size-small unit"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="metric margin-bottom-small">Bandwidth</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="value margin-bottom-small">
|
<div class="value margin-bottom-small">
|
||||||
<span class="sum" data-ls-bind="{{realtime.current|accessProject}}" data-default="0">0</span>
|
<span class="sum" data-ls-bind="{{realtime.current|accessProject}}" data-default="0">0</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<h2 class="margin-top margin-bottom-small">
|
<div class="box dashboard">
|
||||||
Total
|
<div class="row responsive">
|
||||||
</h2>
|
<div class="col span-3">
|
||||||
<div class="box dashboard">
|
<div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
|
||||||
<div class="row responsive">
|
<div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
|
||||||
<div class="col span-3">
|
</div>
|
||||||
<div class="value"><span class="sum" data-ls-bind="{{usage.documents.total|statsTotal}}" data-default="0">0</span></div>
|
<div class="col span-3">
|
||||||
<div class="margin-top-small"><b class="text-size-small unit">Documents</b></div>
|
<div class="value">
|
||||||
</div>
|
<span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span>
|
||||||
<div class="col span-3">
|
<span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></span>
|
||||||
<div class="value">
|
</div>
|
||||||
<span class="sum" data-ls-bind="{{usage.storage.total|humanFileSize}}" data-default="0">0</span>
|
<div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
|
||||||
<span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></span>
|
</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.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 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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="zone xxl margin-top clear" data-ls-if="({{console-project}})">
|
<div class="zone xl margin-top-xl clear" data-ls-if="({{console-project}})">
|
||||||
<h2 class="margin-bottom-small">Platforms</h2>
|
<h2 class="margin-bottom">Platforms</h2>
|
||||||
|
|
||||||
<div class="box margin-bottom" data-ls-if="0 < {{console-project.platforms.length}} && undefined !== {{console-project.platforms}}">
|
<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">
|
<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/clone.js',
|
||||||
'public/scripts/views/forms/add.js',
|
'public/scripts/views/forms/add.js',
|
||||||
'public/scripts/views/forms/chart.js',
|
'public/scripts/views/forms/chart.js',
|
||||||
|
'public/scripts/views/forms/chart-bar.js',
|
||||||
'public/scripts/views/forms/code.js',
|
'public/scripts/views/forms/code.js',
|
||||||
'public/scripts/views/forms/color.js',
|
'public/scripts/views/forms/color.js',
|
||||||
'public/scripts/views/forms/copy.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
|
@ -26,7 +26,7 @@ document.addEventListener("account.create", function () {
|
||||||
let promise = sdk.account.createSession(form.email, form.password);
|
let promise = sdk.account.createSession(form.email, form.password);
|
||||||
|
|
||||||
container.set("serviceForm", {}, true, true); // Remove sensetive data when not needed
|
container.set("serviceForm", {}, true, true); // Remove sensetive data when not needed
|
||||||
|
|
||||||
promise.then(function () {
|
promise.then(function () {
|
||||||
var subscribe = document.getElementById('newsletter').checked;
|
var subscribe = document.getElementById('newsletter').checked;
|
||||||
if (subscribe) {
|
if (subscribe) {
|
||||||
|
@ -53,12 +53,53 @@ document.addEventListener("account.create", function () {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
window.addEventListener("load", () => {
|
window.addEventListener("load", () => {
|
||||||
|
const bars = 10;
|
||||||
const realtime = window.ls.container.get('realtime');
|
const realtime = window.ls.container.get('realtime');
|
||||||
|
let current = {};
|
||||||
window.ls.container.get('console').subscribe('project', event => {
|
window.ls.container.get('console').subscribe('project', event => {
|
||||||
realtime.set({
|
for (var project in event.payload) {
|
||||||
...realtime.current,
|
current[project] = event.payload[project] ?? 0;
|
||||||
...event.payload
|
}
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
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', () => {
|
window.ls.container.set('realtime', () => {
|
||||||
return {
|
return {
|
||||||
current: null,
|
current: null,
|
||||||
set: function (currentConnections) {
|
history: null,
|
||||||
|
setCurrent: function(currentConnections) {
|
||||||
var scope = this;
|
var scope = this;
|
||||||
scope.current = currentConnections;
|
scope.current = currentConnections;
|
||||||
return scope.current;
|
return scope.current;
|
||||||
|
},
|
||||||
|
setHistory: function(history) {
|
||||||
|
var scope = this;
|
||||||
|
scope.history = history;
|
||||||
|
return scope.history;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, true, true);
|
}, 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;
|
position: relative;
|
||||||
background: var(--config-color-background-fade);
|
background: var(--config-color-background-fade);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
|
|
||||||
padding: 30px;
|
|
||||||
display: block;
|
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
|
||||||
|
display: block;
|
||||||
|
padding: 30px;
|
||||||
|
|
||||||
&.padding-tiny {
|
&.padding-tiny {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
|
@ -522,6 +522,44 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
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 {
|
.chart-metric {
|
||||||
|
@ -587,10 +625,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(1), &.blue {
|
&:nth-child(1), &.blue {
|
||||||
color: #29b5d9;
|
color: var(--config-color-chart);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background: #29b5d9;
|
background: var(--config-color-chart);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,8 @@
|
||||||
--config-color-success: #1bbf61;
|
--config-color-success: #1bbf61;
|
||||||
--config-color-warning: #fffbdd;
|
--config-color-warning: #fffbdd;
|
||||||
--config-color-info: #386fd2;
|
--config-color-info: #386fd2;
|
||||||
|
--config-color-chart: #29b5d9;
|
||||||
|
--config-color-chart-fade: #d4f0f7;
|
||||||
--config-border-color: #f3f3f3;
|
--config-border-color: #f3f3f3;
|
||||||
--config-border-fade: #e0e3e4;
|
--config-border-fade: #e0e3e4;
|
||||||
--config-border-radius: 10px;
|
--config-border-radius: 10px;
|
||||||
|
@ -111,6 +113,8 @@
|
||||||
--config-color-success: #34b86d;
|
--config-color-success: #34b86d;
|
||||||
--config-color-warning: #e0d56d;
|
--config-color-warning: #e0d56d;
|
||||||
--config-color-info: #386fd2;
|
--config-color-info: #386fd2;
|
||||||
|
--config-color-chart: #29b5d9;
|
||||||
|
--config-color-chart-fade: #c7d8eb;
|
||||||
--config-border-color: #262D50;
|
--config-border-color: #262D50;
|
||||||
--config-border-fade: #19203a;
|
--config-border-fade: #19203a;
|
||||||
--config-prism-background: #1F253F;
|
--config-prism-background: #1F253F;
|
||||||
|
|
Loading…
Reference in a new issue