CodeMirror
/
appwrite
mirror of
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

upload current state

This commit is contained in:
Torsten Dittmann 2021-08-20 18:37:37 +02:00
parent 627df80b40
commit 35889239bf
13 changed files with 199 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/init.php
View File

@ -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';

81
app/views/console/home/index.phtml
View File

@ -86,8 +86,7 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
data-name="usage"
data-param-project-id="{{router.params.project}}"
data-param-range="30d">
<?php if (!$graph && $usageStatsEnabled): ?>
<?php if (!$graph && $usageStatsEnabled): ?>
<div class="box dashboard">
<div class="row responsive">
<div class="col span-9">
@ -101,71 +100,51 @@ $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">
<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>
<span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></span>
<?php endif; ?>
<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>
<span data-ls-bind="{{usage.storage.total|humanFileUnit}}" class="text-size-small unit"></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.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 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 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">

1
gulpfile.js
View File

@ -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
View File

File diff suppressed because one or more lines are too long

15
public/dist/scripts/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/dist/styles/default-ltr.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/dist/styles/default-rtl.css vendored
View File

File diff suppressed because one or more lines are too long

51
public/scripts/init.js
View File

@ -26,7 +26,7 @@ document.addEventListener("account.create", function () {
let promise = sdk.account.createSession(form.email, form.password);
container.set("serviceForm", {}, true, true); // Remove sensetive data when not needed
promise.then(function () {
var subscribe = document.getElementById('newsletter').checked;
if (subscribe) {
@ -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);
});

8
public/scripts/services/realtime.js
View File

@ -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
View 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);

6
public/styles/comps/box.less
View File

@ -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;

42
public/styles/scopes/console.less
View File

@ -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);
}
}

4
public/styles/themes.less
View File

@ -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;