mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-10-29 08:05:31 +00:00
GUACAMOLE-377: Add extension for displaying render statistics in a toolbar.
This commit is contained in:
Michael Jumper
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A directive which displays frame rendering performance statistics for a
|
||||
* Guacamole client.
|
||||
*/
|
||||
angular.module('client').directive('guacClientStatistics', [function guacClientStatistics() {
|
||||
|
||||
const directive = {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/ext/display-stats/templates/guacClientStatistics.html',
|
||||
};
|
||||
|
||||
directive.scope = {
|
||||
|
||||
/**
|
||||
* The Guacamole client to display frame rendering statistics for.
|
||||
*
|
||||
* @type ManagedClient
|
||||
*/
|
||||
client : '='
|
||||
|
||||
};
|
||||
|
||||
directive.controller = ['$scope', function guacClientStatisticsController($scope) {
|
||||
|
||||
/**
|
||||
* Updates the displayed frame rendering statistics to the values
|
||||
* within the given statistics object.
|
||||
*
|
||||
* @param {!Guacamole.Display.Statistics} stats
|
||||
* An object containing general rendering performance statistics for
|
||||
* the remote desktop, Guacamole server, and Guacamole client.
|
||||
*/
|
||||
var updateStatistics = function updateStatistics(stats) {
|
||||
$scope.$apply(function statisticsChanged() {
|
||||
$scope.statistics = stats;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns whether the given value is a defined value that should be
|
||||
* rendered within the statistics toolbar.
|
||||
*
|
||||
* @param {number} value
|
||||
* The value to test.
|
||||
*
|
||||
* @returns {!boolean}
|
||||
* true if the given value should be rendered within the statistics
|
||||
* toolbar, false otherwise.
|
||||
*/
|
||||
$scope.hasValue = function hasValue(value) {
|
||||
return value || value === 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Rounds the given numeric value to the nearest hundredth (two decimal places).
|
||||
*
|
||||
* @param {!number} value
|
||||
* The value to round.
|
||||
*
|
||||
* @param {!number}
|
||||
* The given value, rounded to the nearest hundredth.
|
||||
*/
|
||||
$scope.round = function round(value) {
|
||||
return Math.round(value * 100) / 100;
|
||||
};
|
||||
|
||||
// Assign/remove onstatistics handlers to track the statistics of the
|
||||
// current client
|
||||
$scope.$watch('client', function clientChanged(client, oldClient) {
|
||||
|
||||
if (oldClient)
|
||||
oldClient.managedDisplay.display.onstatistics = null;
|
||||
|
||||
client.managedDisplay.display.statisticWindow = 1000;
|
||||
client.managedDisplay.display.onstatistics = updateStatistics;
|
||||
|
||||
});
|
||||
|
||||
// Clear onstatistics handler when directive is being unloaded
|
||||
$scope.$on('$destroy', function scopeDestroyed() {
|
||||
if ($scope.client)
|
||||
$scope.client.managedDisplay.display.onstatistics = null;
|
||||
});
|
||||
|
||||
}];
|
||||
|
||||
return directive;
|
||||
|
||||
}]);
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
|
||||
"guacamoleVersion" : "1.4.0",
|
||||
|
||||
"name" : "Display Statistic Toolbar",
|
||||
"namespace" : "display-stats",
|
||||
|
||||
"translations" : [
|
||||
"translations/en.json"
|
||||
],
|
||||
|
||||
"js" : [
|
||||
"display-stats.min.js"
|
||||
],
|
||||
|
||||
"css" : [
|
||||
"display-stats.min.css"
|
||||
],
|
||||
|
||||
"html" : [
|
||||
"html/add-statistics.html"
|
||||
],
|
||||
|
||||
"resources" : {
|
||||
"templates/guacClientStatistics.html" : "text/html"
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<meta name="after" content=".client-tile guac-client">
|
||||
|
||||
<!-- Guacamole display statistics -->
|
||||
<guac-client-statistics client="client"></guac-client-statistics>
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
@@ -0,0 +1,57 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
guac-client-statistics {
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
guac-client-statistics dl.client-statistics {
|
||||
display: table;
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
guac-client-statistics dl.client-statistics dt,
|
||||
guac-client-statistics dl.client-statistics dd {
|
||||
display: table-cell;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
guac-client-statistics dl.client-statistics dt {
|
||||
padding-right: 0.5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
guac-client-statistics dl.client-statistics dt:first-child {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
guac-client-statistics dl.client-statistics dd {
|
||||
min-width: 6em;
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
border-radius: 3px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
guac-client-statistics dl.client-statistics dd.no-value::before {
|
||||
color: #888;
|
||||
content: '-';
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<dl class="client-statistics">
|
||||
|
||||
<dt class="client-statistic desktop-fps">
|
||||
{{ 'CLIENT.FIELD_HEADER_DESKTOP_FRAMERATE' | translate }}
|
||||
</dt>
|
||||
<dd ng-class="{ 'no-value' : !hasValue(statistics.desktopFps) }">
|
||||
<span ng-show="hasValue(statistics.desktopFps)"
|
||||
translate="CLIENT.INFO_FRAMERATE"
|
||||
translate-values="{ VALUE : round(statistics.desktopFps) }"></span>
|
||||
</dd>
|
||||
|
||||
<dt class="client-statistic server-fps">
|
||||
{{ 'CLIENT.FIELD_HEADER_SERVER_FRAMERATE' | translate }}
|
||||
</dt>
|
||||
<dd ng-class="{ 'no-value' : !hasValue(statistics.serverFps) }">
|
||||
<span ng-show="hasValue(statistics.serverFps)"
|
||||
translate="CLIENT.INFO_FRAMERATE"
|
||||
translate-values="{ VALUE : round(statistics.serverFps) }"></span>
|
||||
</dd>
|
||||
|
||||
<dt class="client-statistic client-fps">
|
||||
{{ 'CLIENT.FIELD_HEADER_CLIENT_FRAMERATE' | translate }}
|
||||
</dt>
|
||||
<dd ng-class="{ 'no-value' : !hasValue(statistics.clientFps) }">
|
||||
<span ng-show="hasValue(statistics.clientFps)"
|
||||
translate="CLIENT.INFO_FRAMERATE"
|
||||
translate-values="{ VALUE : round(statistics.clientFps) }"></span>
|
||||
</dd>
|
||||
|
||||
<dt class="client-statistic drop-rate">
|
||||
{{ 'CLIENT.FIELD_HEADER_DROP_FRAMERATE' | translate }}
|
||||
</dt>
|
||||
<dd ng-class="{ 'no-value' : !hasValue(statistics.dropRate) }">
|
||||
<span ng-show="hasValue(statistics.dropRate)"
|
||||
translate="CLIENT.INFO_FRAMERATE"
|
||||
translate-values="{ VALUE : round(statistics.dropRate) }"></span>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"CLIENT" : {
|
||||
|
||||
"FIELD_HEADER_CLIENT_FRAMERATE" : "Guacamole (Client):",
|
||||
"FIELD_HEADER_DESKTOP_FRAMERATE" : "Remote Desktop:",
|
||||
"FIELD_HEADER_DROP_FRAMERATE" : "Drop:",
|
||||
"FIELD_HEADER_SERVER_FRAMERATE" : "Guacamole (Server):",
|
||||
|
||||
"INFO_FRAMERATE" : "{VALUE} fps"
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user