tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-30 17:25:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

continue VC

Browse Source
This commit is contained in:
Daniel Barbero Martin 2019-10-02 12:28:17 +02:00
parent 5de2b8f069
commit c5022fc243
30 changed files with 1139 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pandora_console/include/functions_visual_map.php
View File

@ -3272,7 +3272,8 @@ function visual_map_get_color_line_status($layoutData)
/**
* Get image of element in the visual console with status.
*
* @param array $layoutData The row of element in DB.
* @param array $layoutData The row of element in DB.
* @param boolean $status Status.
*
* @return string The image with the relative path to pandora console directory.
*/
@ -3280,8 +3281,12 @@ function visual_map_get_image_status_element($layoutData, $status=false)
{
$img = 'images/console/icons/'.$layoutData['image'];
if (empty($layoutData['image'])) {
return false;
}
if ($layoutData['type'] == 5) {
// ICON ELEMENT
// ICON ELEMENT.
$img .= '.png';
} else {
if ($status === false) {
@ -3290,35 +3295,36 @@ function visual_map_get_image_status_element($layoutData, $status=false)
switch ($status) {
case 1:
// Critical (BAD)
// Critical (BAD).
$img .= '_bad.png';
break;
case 4:
// Critical (ALERT)
// Critical (ALERT).
$img = '4'.$img.'_bad.png';
break;
case 0:
// Normal (OK)
// Normal (OK).
$img .= '_ok.png';
break;
case 2:
// Warning
// Warning.
$img .= '_warning.png';
break;
case 10:
// Warning (ALERT)
// Warning (ALERT).
$img = '4'.$img.'_warning.png';
break;
case 3:
// Unknown
// Unknown.
default:
$img .= '.png';
// Default is Grey (Other)
// Default is Grey (Other).
break;
}
}

1247
pandora_console/include/javascript/pandora_visual_console.js
View File

File diff suppressed because it is too large Load Diff

32
pandora_console/include/rest-api/index.php
View File

@ -15,6 +15,7 @@ $visualConsoleId = (int) get_parameter('visualConsoleId');
$getVisualConsole = (bool) get_parameter('getVisualConsole');
$getVisualConsoleItems = (bool) get_parameter('getVisualConsoleItems');
$updateVisualConsoleItem = (bool) get_parameter('updateVisualConsoleItem');
$createVisualConsoleItem = (bool) get_parameter('createVisualConsoleItem');
$getVisualConsoleItem = (bool) get_parameter('getVisualConsoleItem');
$removeVisualConsoleItem = (bool) get_parameter('removeVisualConsoleItem');
$copyVisualConsoleItem = (bool) get_parameter('copyVisualConsoleItem');
@ -135,6 +136,37 @@ if ($getVisualConsole === true) {
return;
}
} else if ($createVisualConsoleItem === true) {
// TODO: ACL.
$data = get_parameter('data');
if ($data) {
// Inserted data in new item.
$class = VisualConsole::getItemClass((int) $data['type']);
try {
// Save the new item.
$data['id_layout'] = $visualConsoleId;
$result = $class::save($data);
} catch (\Throwable $th) {
// There is no item in the database.
echo false;
return;
}
// Extract data new item inserted.
try {
$item = VisualConsole::getItemFromDB($result);
} catch (Throwable $e) {
// Bad params.
http_response_code(400);
return;
}
echo $item;
} else {
echo false;
}
return;
} else if ($removeVisualConsoleItem === true) {
$itemId = (int) get_parameter('visualConsoleItemId');

109
pandora_console/include/rest-api/models/VisualConsole/Items/Percentile.php
View File

@ -28,6 +28,108 @@ final class Percentile extends Item
protected static $useLinkedVisualConsole = true;
/**
* Encode type item.
*
* @param array $data Data for encode.
*
* @return string Return 'PERCENTILE_BAR', 'PERCENTILE_BUBBLE',
* 'CIRCULAR_PROGRESS_BAR' or 'CIRCULAR_INTERIOR_PROGRESS_BAR'.
* 'PERCENTILE_BAR' by default.
*/
protected function encodePercentileType(array $data): ?int
{
$type = null;
if (isset($data['percentileType']) === true) {
switch ($data['percentileType']) {
case 'bubble':
$type = PERCENTILE_BUBBLE;
break;
case 'circular-progress-bar':
$type = CIRCULAR_PROGRESS_BAR;
break;
case 'circular-progress-bar-alt':
$type = CIRCULAR_INTERIOR_PROGRESS_BAR;
break;
default:
case 'progress-bar':
$type = PERCENTILE_BAR;
break;
}
}
return $type;
}
/**
* Encode type item.
*
* @param array $data Data for encode.
*
* @return string Return 'PERCENTILE_BAR', 'PERCENTILE_BUBBLE',
* 'CIRCULAR_PROGRESS_BAR' or 'CIRCULAR_INTERIOR_PROGRESS_BAR'.
* 'PERCENTILE_BAR' by default.
*/
protected function encodeValueType(array $data): ?string
{
$valueType = null;
if (isset($data['valueType']) === true) {
switch ($data['valueType']) {
case 'percent':
case 'value':
$valueType = $data['valueType'];
break;
default:
$valueType = 'percent';
break;
}
}
return $valueType;
}
/**
* Return a valid representation of a record in database.
*
* @param array $data Input data.
*
* @return array Data structure representing a record in database.
*
* @overrides Item->encode.
*/
protected function encode(array $data): array
{
$return = parent::encode($data);
$max_value = static::parseIntOr(
static::issetInArray($data, ['maxValue']),
null
);
if ($max_value !== null) {
// TODO: XXX.
// $return['height'] = $max_value;
}
$percentileType = static::encodePercentileType($data);
if ($percentileType !== null) {
$return['type'] = (int) $percentileType;
}
$valueType = static::encodeValueType($data);
if ($valueType !== null) {
$return['image'] = (string) $valueType;
}
return $return;
}
/**
* Returns a valid representation of the model.
*
@ -227,7 +329,12 @@ final class Percentile extends Item
}
// Store the module value.
$data['value'] = (float) \number_format((float) $moduleValue, (int) $config['graph_precision'], '.', '');
$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);

8
pandora_console/include/rest-api/models/VisualConsole/Items/StaticGraph.php
View File

@ -184,9 +184,11 @@ final class StaticGraph extends Item
$width = (int) $data['width'];
$height = (int) $data['height'];
if ($width === 0 || $height === 0) {
$sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
if (isset($imagePath) && $imagePath !== false) {
$sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
}
}
// Get last value.

20
pandora_console/include/visual-console-client/vc.main.css
View File

@ -174,6 +174,7 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 10px;
padding-left: 2px;
}
.div-input-group input[type="radio"] {
@ -290,6 +291,21 @@
margin-left: 10px;
}
input.error-input-validate[type="number"],
input.error-input-validate[type="text"],
select.error-input-validate {
border: 1px solid #c00;
}
select.error-input-validate:focus {
outline-color: #c00;
}
p.error-p-validate {
width: 100%;
color: #c00;
}
/* Styles for the solid icons */
.fa {
@ -369,13 +385,15 @@
max-width: 250px;
}
.autocomplete-items div {
width: 100%;
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
border-top: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
width: 100%;
background-color: #e9e9e9;
}
.autocomplete-active {

2
pandora_console/include/visual-console-client/vc.main.css.map
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

62
pandora_console/operation/visual_console/view.php
View File

@ -215,75 +215,76 @@ if ($pure === false) {
echo '<div id ="edit-controls" class="visual-console-edit-controls" style="visibility:hidden">';
echo '<div>';
visual_map_print_button_editor_refactor(
'static_graph',
'STATIC_GRAPH',
__('Static Image'),
'camera_min'
'camera_min link-create-item'
);
visual_map_print_button_editor_refactor(
'percentile_item',
'PERCENTILE_BAR',
__('Percentile Item'),
'percentile_item_min'
'percentile_item_min link-create-item'
);
visual_map_print_button_editor_refactor(
'module_graph',
'MODULE_GRAPH',
__('Module Graph'),
'graph_min'
'graph_min link-create-item'
);
visual_map_print_button_editor_refactor(
'donut_graph',
'DONUT_GRAPH',
__('Serialized pie graph'),
'donut_graph_min'
'donut_graph_min link-create-item'
);
visual_map_print_button_editor_refactor(
'bars_graph',
'BARS_GRAPH',
__('Bars Graph'),
'bars_graph_min'
'bars_graph_min link-create-item'
);
visual_map_print_button_editor_refactor(
'auto_sla_graph',
'AUTO_SLA_GRAPH',
__('Auto SLA Graph'),
'auto_sla_graph_min'
'auto_sla_graph_min link-create-item'
);
visual_map_print_button_editor_refactor(
'simple_value',
'SIMPLE_VALUE',
__('Simple Value'),
'binary_min'
'binary_min link-create-item'
);
visual_map_print_button_editor_refactor(
'label',
'LABEL',
__('Label'),
'label_min'
'label_min link-create-item'
);
visual_map_print_button_editor_refactor(
'icon',
'ICON',
__('Icon'),
'icon_min'
'icon_min link-create-item'
);
visual_map_print_button_editor_refactor(
'clock',
'CLOCK',
__('Clock'),
'clock_min'
'clock_min link-create-item'
);
visual_map_print_button_editor_refactor(
'group_item',
'GROUP_ITEM',
__('Group'),
'group_item_min'
'group_item_min link-create-item'
);
visual_map_print_button_editor_refactor(
'box_item',
'BOX_ITEM',
__('Box'),
'box_item_min'
'box_item link-create-item'
);
visual_map_print_button_editor_refactor(
'line_item',
'LINE_ITEM',
__('Line'),
'line_item_min'
'line_item link-create-item'
);
visual_map_print_button_editor_refactor(
'color_cloud',
'COLOR_CLOUD',
__('Color cloud'),
'color_cloud_min'
'color_cloud_min link-create-item'
);
// TODO: SERVICE.
echo '</div>';
echo '<div>';
visual_map_print_button_editor_refactor(
@ -528,7 +529,8 @@ $visualConsoleItems = VisualConsole::getItemsFromDB(
});
});
$('#button-static_graph').click(function (event){
console.log(visualConsoleManager.visualConsole.getFormContainer(20));
$('.link-create-item').click(function (event){
var type = event.target.id.substr(7);
visualConsoleManager.createItem(type);
});
</script>

1
visual_console_client/src/Form.ts
View File

@ -193,6 +193,7 @@ export class FormContainer {
type: "creation" | "update" = "update"
): HTMLFormElement {
const form = document.createElement("form");
form.id = "visual-console-item-edition";
form.className = "visual-console-item-edition";
form.addEventListener("submit", e => {
e.preventDefault();

43
visual_console_client/src/Item.ts
View File

@ -241,7 +241,7 @@ class PositionInputGroup extends InputGroup<Partial<ItemProps>> {
}
// TODO: Document
class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
export class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
@ -250,7 +250,6 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
const sizeInputWidth = document.createElement("input");
sizeInputWidth.type = "number";
sizeInputWidth.min = "0";
sizeInputWidth.required = true;
sizeInputWidth.value = `${this.currentData.width ||
this.initialData.width ||
@ -263,7 +262,6 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
const sizeInputHeight = document.createElement("input");
sizeInputHeight.type = "number";
sizeInputHeight.min = "0";
sizeInputHeight.required = true;
sizeInputHeight.value = `${this.currentData.height ||
this.initialData.height ||
@ -1027,14 +1025,6 @@ export class AgentModuleInputGroup extends InputGroup<
generalDiv.appendChild(agentLabel);
const agentInput = document.createElement("input");
agentInput.type = "text";
agentInput.required = true;
agentInput.className = "autocomplete-agent";
agentInput.value = `${this.currentData.agentId ||
this.initialData.agentId ||
0}`;
const handleDataRequested = (
value: string,
done: (data: AgentAutocompleteData[]) => void
@ -2254,39 +2244,14 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// TODO: Document
public getFormContainer(): FormContainer {
return new FormContainer(
titleItem(this.props.type),
[
new SizeInputGroup("size", this.props),
new LabelInputGroup("label", this.props),
new LinkInputGroup("link", this.props),
new OnTopInputGroup("show-on-top", this.props),
new AdvancedOptionsInputGroup("advanced-options", this.props),
new PositionInputGroup("position", this.props),
new ParentInputGroup("parent", this.props),
new AclGroupInputGroup("acl-group", this.props),
new CacheExpirationInputGroup("cache-expiration", this.props)
],
[
"size",
"label",
"link",
"show-on-top",
"advanced-options",
"position",
"parent",
"acl-group",
"cache-expiration"
]
);
//return VisualConsoleItem.getFormContainer(this.props);
return VisualConsoleItem.getFormContainer(this.props);
}
// TODO: Document
public static getFormContainer(props: Partial<ItemProps>): FormContainer {
const title: string = props.type ? titleItem(props.type) : t("Item");
return new FormContainer(
t("Item"),
title,
[
new SizeInputGroup("size", props),
new LabelInputGroup("label", props),

7
visual_console_client/src/VisualConsole.ts
View File

@ -15,8 +15,7 @@ import Item, {
ItemRemoveEvent,
ItemMovedEvent,
ItemResizedEvent,
ItemSelectionChangedEvent,
titleItem
ItemSelectionChangedEvent
} from "./Item";
import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph";
import Icon, { iconPropsDecoder } from "./items/Icon";
@ -1058,8 +1057,4 @@ export default class VisualConsole {
return text;
}
public getFormContainer(type: number): FormContainer {
return new FormContainer(titleItem(type));
}
}

20
visual_console_client/src/items/BarsGraph.ts
View File

@ -236,18 +236,20 @@ export default class BarsGraph extends Item<BarsGraphProps> {
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return BarsGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<BarsGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new BackgroundColorInputGroup("backgroundColor-type", this.props)
new BackgroundColorInputGroup("backgroundColor-type", props)
);
formContainer.addInputGroup(new TypeGraphInputGroup("type-graph", props));
formContainer.addInputGroup(new GridColorInputGroup("grid-color", props));
formContainer.addInputGroup(
new TypeGraphInputGroup("type-graph", this.props)
);
formContainer.addInputGroup(
new GridColorInputGroup("grid-color", this.props)
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props)
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;

15
visual_console_client/src/items/Box.ts
View File

@ -185,16 +185,19 @@ export default class Box extends Item<BoxProps> {
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return Box.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<BoxProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new BorderColorInputGroup("border-color", this.props)
new BorderColorInputGroup("border-color", props)
);
formContainer.addInputGroup(
new BorderWidthInputGroup("border-width", this.props)
);
formContainer.addInputGroup(
new FillColorInputGroup("fill-width", this.props)
new BorderWidthInputGroup("border-width", props)
);
formContainer.addInputGroup(new FillColorInputGroup("fill-width", props));
return formContainer;
}
}

23
visual_console_client/src/items/Clock/index.ts
View File

@ -834,34 +834,35 @@ export default class Clock extends Item<ClockProps> {
* ElementColorInputGroup,
* ValueColorInputGroup,
* LabelPercentileInputGroup
* are removed:
* Are removed:
* inputgrouplabel
* size
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return Clock.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<ClockProps>): FormContainer {
const formContainer = super.getFormContainer(props);
// Delete items groups.
formContainer.removeInputGroup("size");
formContainer.removeInputGroup("link");
formContainer.removeInputGroup("parent");
formContainer.removeInputGroup("acl-group");
// ADD items groups.
formContainer.addInputGroup(new ClockTypeInputGroup("ClockType", props));
formContainer.addInputGroup(
new ClockTypeInputGroup("ClockType", this.props)
);
formContainer.addInputGroup(
new ClockFormatInputGroup("clockFormat", this.props)
new ClockFormatInputGroup("clockFormat", props)
);
formContainer.addInputGroup(new WidthInputGroup("widthInput", this.props));
formContainer.addInputGroup(new WidthInputGroup("widthInput", props));
formContainer.addInputGroup(
new ClockTimezoneInputGroup("clockTimezone", this.props)
new ClockTimezoneInputGroup("clockTimezone", props)
);
formContainer.addInputGroup(
new FIllColorInputGroup("fillColor", this.props)
);
formContainer.addInputGroup(new FIllColorInputGroup("fillColor", props));
return formContainer;
}

20
visual_console_client/src/items/ColorCloud.ts
View File

@ -427,21 +427,21 @@ export default class ColorCloud extends Item<ColorCloudProps> {
* RangesInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return ColorCloud.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<ColorCloudProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.removeInputGroup("label");
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props),
new AgentModuleInputGroup("agent-autocomplete", props),
0
);
formContainer.addInputGroup(
new ColorInputGroup("color-cloud", this.props),
3
);
formContainer.addInputGroup(
new RangesInputGroup("ranges-cloud", this.props),
4
);
formContainer.addInputGroup(new ColorInputGroup("color-cloud", props), 3);
formContainer.addInputGroup(new RangesInputGroup("ranges-cloud", props), 4);
return formContainer;
}

15
visual_console_client/src/items/DonutGraph.ts
View File

@ -126,16 +126,23 @@ export default class DonutGraph extends Item<DonutGraphProps> {
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return DonutGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<DonutGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props)
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new LegendBackgroundColorInputGroup("legend-background-color", this.props)
new LegendBackgroundColorInputGroup("legend-background-color", props)
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props)
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;
}
}

12
visual_console_client/src/items/EventsHistory.ts
View File

@ -137,10 +137,16 @@ export default class EventsHistory extends Item<EventsHistoryProps> {
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
formContainer.addInputGroup(new MaxTimeInputGroup("max-time", this.props));
return EventsHistory.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<EventsHistoryProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(new MaxTimeInputGroup("max-time", props));
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props)
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;

13
visual_console_client/src/items/Group.ts
View File

@ -147,19 +147,26 @@ export default class Group extends Item<GroupProps> {
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return formContainer;
}
public static getFormContainer(props: Partial<GroupProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props)
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new ImageInputGroup("image-console", {
...this.props,
...props,
imageKey: "imageSrc",
showStatusImg: true
})
);
formContainer.addInputGroup(
new ShowStatisticsInputGroup("show-statistic", this.props)
new ShowStatisticsInputGroup("show-statistic", props)
);
return formContainer;
}
}

11
visual_console_client/src/items/Icon.ts
View File

@ -69,13 +69,18 @@ export default class Icon extends Item<IconProps> {
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return Icon.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<IconProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props)
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new ImageInputGroup("image-console", { ...this.props, imageKey: "image" })
new ImageInputGroup("image-console", { ...props, imageKey: "image" })
);
return formContainer;
}
}

9
visual_console_client/src/items/Label.ts
View File

@ -57,10 +57,15 @@ export default class Label extends Item<LabelProps> {
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return Label.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<LabelProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props)
new LinkConsoleInputGroup("link-console", props)
);
return formContainer;
}
}

36
visual_console_client/src/items/ModuleGraph.ts
View File

@ -456,49 +456,47 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
* CustomGraphInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return ModuleGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<ModuleGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new BackgroundTypeInputGroup("background-type", this.props),
new BackgroundTypeInputGroup("background-type", props),
3
);
formContainer.addInputGroup(
new ChooseTypeInputGroup("show-type-graph", this.props),
new ChooseTypeInputGroup("show-type-graph", props),
4
);
const displayAgent = this.props.customGraphId
const displayAgent = props.customGraphId
? "hide-elements"
: "show-elements";
const displayCustom = this.props.customGraphId
const displayCustom = props.customGraphId
? "show-elements"
: "hide-elements ";
formContainer.addInputGroup(
new AgentModuleInputGroup(
`agent-autocomplete ${displayAgent}`,
this.props
),
new AgentModuleInputGroup(`agent-autocomplete ${displayAgent}`, props),
5
);
formContainer.addInputGroup(
new CustomGraphInputGroup(
`custom-graph-list ${displayCustom}`,
this.props
),
new CustomGraphInputGroup(`custom-graph-list ${displayCustom}`, props),
6
);
formContainer.addInputGroup(
new GraphTypeInputGroup("graph-type", this.props),
new GraphTypeInputGroup("graph-type", props),
7
);
formContainer.addInputGroup(new PeriodInputGroup("period-graph", props), 8);
formContainer.addInputGroup(
new PeriodInputGroup("period-graph", this.props),
8
);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props),
new LinkConsoleInputGroup("link-console", props),
16
);
return formContainer;
}
}

37
visual_console_client/src/items/Percentile.ts
View File

@ -610,50 +610,47 @@ export default class Percentile extends Item<PercentileProps> {
* size
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return Percentile.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<PercentileProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
// Delete items groups.
formContainer.removeInputGroup("size");
formContainer.removeInputGroup("label");
// Add new items gropus.
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props),
new AgentModuleInputGroup("agent-autocomplete", props),
1
);
formContainer.addInputGroup(new DiameterInputGroup("diameter", props), 2);
formContainer.addInputGroup(new MinValueInputGroup("min-value", props), 3);
formContainer.addInputGroup(new MaxValueInputGroup("max-value", props), 4);
formContainer.addInputGroup(
new DiameterInputGroup("diameter", this.props),
2
);
formContainer.addInputGroup(
new MinValueInputGroup("min-value", this.props),
3
);
formContainer.addInputGroup(
new MaxValueInputGroup("max-value", this.props),
4
);
formContainer.addInputGroup(
new TypePercentileInputGroup("type-percentil", this.props),
new TypePercentileInputGroup("type-percentil", props),
5
);
formContainer.addInputGroup(
new ValueToShowInputGroup("value-to-show", this.props),
new ValueToShowInputGroup("value-to-show", props),
6
);
formContainer.addInputGroup(
new ElementColorInputGroup("element-color", this.props),
new ElementColorInputGroup("element-color", props),
7
);
formContainer.addInputGroup(
new ValueColorInputGroup("value-color", this.props),
new ValueColorInputGroup("value-color", props),
8
);
formContainer.addInputGroup(
new LabelPercentileInputGroup("label-percentile", this.props),
new LabelPercentileInputGroup("label-percentile", props),
9
);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props),
new LinkConsoleInputGroup("link-console", props),
16
);
return formContainer;

10
visual_console_client/src/items/Service.ts
View File

@ -154,16 +154,20 @@ export default class Service extends Item<ServiceProps> {
* ServiceListInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return Service.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<ServiceProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new ImageInputGroup("image-console", {
...this.props,
...props,
imageKey: "imageSrc",
showStatusImg: false
})
);
formContainer.addInputGroup(
new ServiceListInputGroup("service-list", this.props)
new ServiceListInputGroup("service-list", props)
);
return formContainer;

15
visual_console_client/src/items/SimpleValue.ts
View File

@ -275,16 +275,23 @@ export default class SimpleValue extends Item<SimpleValueProps> {
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return SimpleValue.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<SimpleValueProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props)
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new ProcessInputGroup("process-operation", this.props)
new ProcessInputGroup("process-operation", props)
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props)
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;
}
}

17
visual_console_client/src/items/StaticGraph.ts
View File

@ -172,27 +172,34 @@ export default class StaticGraph extends Item<StaticGraphProps> {
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
const formContainer = super.getFormContainer();
return StaticGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<StaticGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new ImageInputGroup("image-console", {
...this.props,
...props,
imageKey: "imageSrc",
showStatusImg: true
}),
3
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", this.props),
new AgentModuleInputGroup("agent-autocomplete", props),
4
);
formContainer.addInputGroup(
new ShowLastValueInputGroup("show-last-value", this.props),
new ShowLastValueInputGroup("show-last-value", props),
5
);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", this.props),
new LinkConsoleInputGroup("link-console", props),
13
);
return formContainer;
}
}

4
visual_console_client/src/lib/autocomplete.css
View File

@ -18,13 +18,15 @@
max-width: 250px;
}
.autocomplete-items div {
width: 100%;
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
border-top: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
width: 100%;
background-color: #e9e9e9;
}
.autocomplete-active {

1
visual_console_client/src/lib/index.ts
View File

@ -979,6 +979,7 @@ export function autocompleteInput<T>(
const input = document.createElement("input");
input.type = "text";
input.required = true;
if (initialValue !== null) input.value = initialValue;
const list = document.createElement("div");

16
visual_console_client/src/main.css
View File

@ -129,6 +129,7 @@
padding: 0px 0px 2px 0px;
box-sizing: border-box;
margin-right: 10px;
padding-left: 2px;
}
.div-input-group input[type="radio"] {
@ -212,3 +213,18 @@
.img-vc-elements {
margin-left: 10px;
}
input.error-input-validate[type="number"],
input.error-input-validate[type="text"],
select.error-input-validate {
border: 1px solid #c00;
}
select.error-input-validate:focus {
outline-color: #c00;
}
p.error-p-validate {
width: 100%;
color: #c00;
}