Merge branch 'visual-console-phase-2' into 'develop'
Visual console phase 2 See merge request artica/pandorafms!2404 Former-commit-id: af616c2346655fcf1f5732c00c0ef2f053126d86
This commit is contained in:
Daniel Rodriguez
commit
865796ed5e
|
|
@ -125,4 +125,35 @@ final class EventsHistory extends Item
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* Generate a link to something related with the item.
|
||||
*
|
||||
* @param array $data Visual Console Item's data structure.
|
||||
*
|
||||
* @return mixed The link or a null value.
|
||||
*
|
||||
* @override Item::buildLink.
|
||||
*/
|
||||
protected static function buildLink(array $data)
|
||||
{
|
||||
// Get the linked agent and module Ids.
|
||||
$linkedModule = static::extractLinkedModule($data);
|
||||
$agentId = static::parseIntOr($linkedModule['agentId'], null);
|
||||
$moduleId = static::parseIntOr($linkedModule['moduleId'], null);
|
||||
|
||||
$baseUrl = \ui_get_full_url('index.php');
|
||||
|
||||
return $baseUrl.'?'.http_build_query(
|
||||
[
|
||||
'sec' => 'eventos',
|
||||
'sec2' => 'operation/events/events',
|
||||
'id_agent' => $agentId,
|
||||
'module_search_hidden' => $moduleId,
|
||||
'event_view_hr' => (static::extractMaxTime($data) / 3600),
|
||||
'status' => -1,
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -383,22 +383,22 @@ final class Group extends Item
|
|||
|
||||
// Critical.
|
||||
$html .= '<div style="'.$valueStyle.'background-color: #FC4444;">';
|
||||
$html .= \number_format($agentStats['critical']).'%';
|
||||
$html .= \number_format($agentStats['critical'], 2).'%';
|
||||
$html .= '</div>';
|
||||
$html .= '<div style="'.$nameStyle.'">'.__('Critical').'</div>';
|
||||
// Warning.
|
||||
$html .= '<div style="'.$valueStyle.'background-color: #f8db3f;">';
|
||||
$html .= \number_format($agentStats['warning']).'%';
|
||||
$html .= \number_format($agentStats['warning'], 2).'%';
|
||||
$html .= '</div>';
|
||||
$html .= '<div style="'.$nameStyle.'">'.__('Warning').'</div>';
|
||||
// Normal.
|
||||
$html .= '<div style="'.$valueStyle.'background-color: #84b83c;">';
|
||||
$html .= \number_format($agentStats['normal']).'%';
|
||||
$html .= \number_format($agentStats['normal'], 2).'%';
|
||||
$html .= '</div>';
|
||||
$html .= '<div style="'.$nameStyle.'">'.__('Normal').'</div>';
|
||||
// Unknown.
|
||||
$html .= '<div style="'.$valueStyle.'background-color: #9d9ea0;">';
|
||||
$html .= \number_format($agentStats['unknown']).'%';
|
||||
$html .= \number_format($agentStats['unknown'], 2).'%';
|
||||
$html .= '</div>';
|
||||
$html .= '<div style="'.$nameStyle.'">'.__('Unknown').'</div>';
|
||||
|
||||
|
|
|
|||
|
|
@ -226,12 +226,8 @@ final class Percentile extends Item
|
|||
);
|
||||
}
|
||||
|
||||
// Cast to float.
|
||||
$moduleValue = (float) $moduleValue;
|
||||
|
||||
// Store the module value.
|
||||
$data['value'] = $moduleValue;
|
||||
|
||||
$data['value'] = (float) \number_format((float) $moduleValue, (int) $config['graph_precision'], '.', '');
|
||||
$unit = \modules_get_unit($moduleId);
|
||||
if (empty($unit) === false) {
|
||||
$data['unit'] = \io_safe_output($unit);
|
||||
|
|
|
|||
|
|
@ -230,8 +230,8 @@ final class StaticGraph extends Item
|
|||
if (!$isBooleanModule
|
||||
|| ($isBooleanModule && $showLastValueTooltip !== 'default')
|
||||
) {
|
||||
if (is_numeric($value)) {
|
||||
$imgTitle .= __('Last value: ').\remove_right_zeros($value);
|
||||
if (\is_numeric($value)) {
|
||||
$imgTitle .= __('Last value: ').\remove_right_zeros(\number_format((float) $value, (int) $config['graph_precision']));
|
||||
} else {
|
||||
$imgTitle .= __('Last value: ').$value;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,10 @@
|
|||
|
||||
/* Analog clock */
|
||||
|
||||
.visual-console-item .analogic-clock {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.visual-console-item .analogic-clock .hour-hand {
|
||||
-webkit-animation: rotate-hour 43200s infinite linear;
|
||||
animation: rotate-hour 43200s infinite linear;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,0BAA0B;EAC1B,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;ACfA;EACE,wBAAwB;EACxB,0BAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n background-position: center;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: text;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}
|
||||
{"version":3,"sources":["webpack:///main.css","webpack:///styles.css"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,4BAA4B;EAC5B,wBAAwB;AAC1B;;AAEA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,2BAAuB;EAAvB,8BAAuB;MAAvB,2BAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;ACdA;EACE,wBAAwB;EACxB,0BAA2B;AAC7B;;AAEA,kBAAkB;;AAElB;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,qBAAqB;EACrB,0BAAqB;MAArB,qBAAqB;EACrB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AACrB;;AAEA;EACE,6DAA6D;EAC7D,eAAe;;EAEf,0BAA0B;EAC1B,mCAAmC;EACnC,kCAAkC;EAClC,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA,iBAAiB;;AAEjB;EACE,kBAAkB;AACpB;;AAEA;EACE,qDAA6C;UAA7C,6CAA6C;AAC/C;;AAEA;EACE,sDAA8C;UAA9C,8CAA8C;AAChD;;AAEA;EACE,oDAA4C;UAA5C,4CAA4C;AAC9C","file":"vc.main.css","sourcesContent":["#visual-console-container {\n margin: 0px auto;\n position: relative;\n background-repeat: no-repeat;\n background-size: contain;\n}\n\n.visual-console-item {\n position: absolute;\n display: flex;\n flex-direction: initial;\n justify-items: center;\n align-items: center;\n user-select: text;\n}\n","@font-face {\n font-family: Alarm Clock;\n src: url(./alarm-clock.ttf);\n}\n\n/* Digital clock */\n\n.visual-console-item .digital-clock {\n display: flex;\n flex-direction: column;\n justify-content: center;\n justify-items: center;\n align-content: center;\n align-items: center;\n}\n\n.visual-console-item .digital-clock > span {\n font-family: \"Alarm Clock\", \"Courier New\", Courier, monospace;\n font-size: 50px;\n\n /* To improve legibility */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;\n}\n\n.visual-console-item .digital-clock > span.date {\n font-size: 25px;\n}\n\n.visual-console-item .digital-clock > span.timezone {\n font-size: 25px;\n}\n\n/* Analog clock */\n\n.visual-console-item .analogic-clock {\n text-align: center;\n}\n\n.visual-console-item .analogic-clock .hour-hand {\n animation: rotate-hour 43200s infinite linear;\n}\n\n.visual-console-item .analogic-clock .minute-hand {\n animation: rotate-minute 3600s infinite linear;\n}\n\n.visual-console-item .analogic-clock .second-hand {\n animation: rotate-second 60s infinite linear;\n}\n"],"sourceRoot":""}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -218,6 +218,12 @@ export default class Clock extends Item<ClockProps> {
|
|||
|
||||
const { width, height } = this.getElementSize(); // Destructuring assigment: http://es6-features.org/#ObjectMatchingShorthandNotation
|
||||
|
||||
// Calculate font size to adapt the font to the item size.
|
||||
const baseTimeFontSize = 20; // Per 100px of width.
|
||||
const dateFontSizeMultiplier = 0.5;
|
||||
const dateFontSize =
|
||||
(baseTimeFontSize * dateFontSizeMultiplier * width) / 100;
|
||||
|
||||
const div = document.createElement("div");
|
||||
div.className = "analogic-clock";
|
||||
div.style.width = `${width}px`;
|
||||
|
|
@ -468,6 +474,16 @@ export default class Clock extends Item<ClockProps> {
|
|||
// Add the clock to the container
|
||||
div.append(svg);
|
||||
|
||||
// Date.
|
||||
if (this.props.clockFormat === "datetime") {
|
||||
const dateElem: HTMLSpanElement = document.createElement("span");
|
||||
dateElem.className = "date";
|
||||
dateElem.textContent = humanDate(date, "default");
|
||||
dateElem.style.fontSize = `${dateFontSize}px`;
|
||||
if (this.props.color) dateElem.style.color = this.props.color;
|
||||
div.append(dateElem);
|
||||
}
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@
|
|||
|
||||
/* Analog clock */
|
||||
|
||||
.visual-console-item .analogic-clock {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.visual-console-item .analogic-clock .hour-hand {
|
||||
animation: rotate-hour 43200s infinite linear;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,6 +115,15 @@ export default class Percentile extends Item<PercentileProps> {
|
|||
// SVG container.
|
||||
const svg = document.createElementNS(svgNS, "svg");
|
||||
|
||||
var formatValue;
|
||||
if (this.props.value != null) {
|
||||
if (Intl) {
|
||||
formatValue = Intl.NumberFormat("en-EN").format(this.props.value);
|
||||
} else {
|
||||
formatValue = this.props.value;
|
||||
}
|
||||
}
|
||||
|
||||
switch (this.props.percentileType) {
|
||||
case "progress-bar":
|
||||
{
|
||||
|
|
@ -142,9 +151,11 @@ export default class Percentile extends Item<PercentileProps> {
|
|||
text.setAttribute("fill", colors.text);
|
||||
|
||||
if (this.props.valueType === "value") {
|
||||
text.style.fontSize = "6pt";
|
||||
|
||||
text.textContent = this.props.unit
|
||||
? `${this.props.value} ${this.props.unit}`
|
||||
: `${this.props.value}`;
|
||||
? `${formatValue} ${this.props.unit}`
|
||||
: `${formatValue}`;
|
||||
} else {
|
||||
text.textContent = `${progress}%`;
|
||||
}
|
||||
|
|
@ -215,21 +226,24 @@ export default class Percentile extends Item<PercentileProps> {
|
|||
text.setAttribute("font-weight", "bold");
|
||||
text.setAttribute("fill", colors.text);
|
||||
|
||||
if (this.props.valueType === "value") {
|
||||
if (this.props.valueType === "value" && this.props.value != null) {
|
||||
// Show value and unit in 1 (no unit) or 2 lines.
|
||||
if (this.props.unit && this.props.unit.length > 0) {
|
||||
const value = document.createElementNS(svgNS, "tspan");
|
||||
value.setAttribute("x", "0");
|
||||
value.setAttribute("dy", "1em");
|
||||
value.textContent = `${this.props.value}`;
|
||||
value.textContent = `${formatValue}`;
|
||||
value.style.fontSize = "8pt";
|
||||
const unit = document.createElementNS(svgNS, "tspan");
|
||||
unit.setAttribute("x", "0");
|
||||
unit.setAttribute("dy", "1em");
|
||||
unit.textContent = `${this.props.unit}`;
|
||||
unit.style.fontSize = "8pt";
|
||||
text.append(value, unit);
|
||||
text.setAttribute("transform", "translate(50 33)");
|
||||
} else {
|
||||
text.textContent = `${this.props.value}`;
|
||||
text.textContent = `${formatValue}`;
|
||||
text.style.fontSize = "8pt";
|
||||
text.setAttribute("transform", "translate(50 50)");
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue