tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed errors VC

This commit is contained in:
Daniel Barbero Martin 2020-01-19 22:57:31 +01:00
parent 536af6f33a
commit 861011257d
23 changed files with 207 additions and 3052 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -128,6 +128,7 @@ function createVisualConsole(
if (meta.editMode) {
// Item selection.
/*
if (meta.isSelected) {
visualConsole.unselectItem(data.id);
} else {
@ -138,6 +139,7 @@ function createVisualConsole(
isMac ? !e.nativeEvent.metaKey : !e.nativeEvent.ctrlKey
);
}
*/
} else if (
!meta.editMode &&
data.linkedLayoutId != null &&
@ -173,56 +175,67 @@ function createVisualConsole(
});
// VC Item moved.
visualConsole.onItemMoved(function(e) {
var id = e.item.props.id;
var data = {
x: e.newPosition.x,
y: e.newPosition.y,
type: e.item.props.type
};
if (e.item.props.processValue != undefined) {
data.processValue = e.item.props.processValue;
}
if (e.item.props.percentileType != undefined) {
data.percentileType = e.item.props.percentileType;
}
var taskId = "visual-console-item-update-" + id;
// Persist the new position.
asyncTaskManager
.add(taskId, function(done) {
var abortable = updateVisualConsoleItem(
baseUrl,
visualConsole.props.id,
id,
data,
function(error, data) {
// if (!error && !data) return;
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
// Move the element to its initial position.
e.item.move(e.prevPosition.x, e.prevPosition.y);
}
done();
}
);
return {
cancel: function() {
abortable.abort();
}
if (e.item.meta.isSelected) {
var id = e.item.props.id;
var data = {
x: e.newPosition.x,
y: e.newPosition.y,
type: e.item.props.type
};
if (e.item.props.type === 13) {
data = {
startX: e.newPosition.x,
startY: e.newPosition.y,
endX: e.item.props.width + e.newPosition.x,
endY: e.item.props.height + e.newPosition.y,
type: e.item.props.type
};
})
.init();
}
if (e.item.props.processValue != undefined) {
data.processValue = e.item.props.processValue;
}
if (e.item.props.percentileType != undefined) {
data.percentileType = e.item.props.percentileType;
}
var taskId = "visual-console-item-update-" + id;
// Persist the new position.
asyncTaskManager
.add(taskId, function(done) {
var abortable = updateVisualConsoleItem(
baseUrl,
visualConsole.props.id,
id,
data,
function(error, data) {
// if (!error && !data) return;
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
// Move the element to its initial position.
e.item.move(e.prevPosition.x, e.prevPosition.y);
}
done();
}
);
return {
cancel: function() {
abortable.abort();
}
};
})
.init();
}
});
// VC Line Item moved.
visualConsole.onLineMoved(function(e) {
@ -271,51 +284,34 @@ function createVisualConsole(
// VC Item resized.
visualConsole.onItemResized(function(e) {
var item = e.item;
var id = item.props.id;
var data = {
width: e.newSize.width,
height: e.newSize.height,
type: item.props.type
};
if (e.item.meta.isSelected) {
var item = e.item;
var id = item.props.id;
var data = {
width: e.newSize.width,
height: e.newSize.height,
type: item.props.type
};
if (item.props.processValue != undefined) {
data.processValue = item.props.processValue;
}
if (item.props.processValue != undefined) {
data.processValue = item.props.processValue;
}
if (item.props.percentileType != undefined) {
data.percentileType = item.props.percentileType;
}
if (item.props.percentileType != undefined) {
data.percentileType = item.props.percentileType;
}
var taskId = "visual-console-item-update-" + id;
// Persist the new size.
asyncTaskManager
.add(taskId, function(done) {
var abortable = updateVisualConsoleItem(
baseUrl,
visualConsole.props.id,
id,
data,
function(error, data) {
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
// Resize the element to its initial Size.
item.resize(e.prevSize.width, e.prevSize.height);
done();
return; // Stop task execution.
}
if (typeof data === "string") {
try {
data = JSON.parse(data);
} catch (error) {
var taskId = "visual-console-item-update-" + id;
// Persist the new size.
asyncTaskManager
.add(taskId, function(done) {
var abortable = updateVisualConsoleItem(
baseUrl,
visualConsole.props.id,
id,
data,
function(error, data) {
if (error || !data) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
@ -325,25 +321,44 @@ function createVisualConsole(
// Resize the element to its initial Size.
item.resize(e.prevSize.width, e.prevSize.height);
done();
return; // Stop task execution.
}
if (typeof data === "string") {
try {
data = JSON.parse(data);
} catch (error) {
console.log(
"[ERROR]",
"[VISUAL-CONSOLE-CLIENT]",
"[API]",
error ? error.message : "Invalid response"
);
// Resize the element to its initial Size.
item.resize(e.prevSize.width, e.prevSize.height);
done();
return; // Stop task execution.
}
}
visualConsole.updateElement(data);
item.setMeta({ isUpdating: false });
done();
}
);
visualConsole.updateElement(data);
item.setMeta({ isUpdating: false });
done();
}
);
return {
cancel: function() {
abortable.abort();
}
};
})
.init();
return {
cancel: function() {
abortable.abort();
}
};
})
.init();
}
});
if (updateInterval != null && updateInterval > 0) {

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

@ -34,7 +34,6 @@
border: 2px dashed #b2b2b2;
-webkit-transform: translateX(-2px) translateY(-2px);
transform: translateX(-2px) translateY(-2px);
cursor: move;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -43,6 +42,7 @@
.visual-console-item.is-editing.is-selected {
border: 2px dashed #2b2b2b;
cursor: move;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;

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

1191
visual_console_client/src/Item.ts
View File

File diff suppressed because it is too large Load Diff

72
visual_console_client/src/VisualConsole.ts
View File

@ -370,7 +370,7 @@ export default class VisualConsole {
// TODO: Document
private handleContainerClick: (e: MouseEvent) => void = () => {
this.unselectItems();
this.unSelectItems();
};
public constructor(
@ -425,18 +425,16 @@ export default class VisualConsole {
itemInstance.onRemove(context.handleElementRemove);
itemInstance.onSelectionChanged(context.handleElementSelectionChanged);
// TODO:Continue
itemInstance.onClick(context.handleElementClick);
itemInstance.onDblClick(context.handleElementDblClick);
itemInstance.onMoved(context.handleElementMovement);
itemInstance.onMovementFinished(context.handleElementMovementFinished);
if (itemInstance instanceof Line) {
itemInstance.onLineMovementFinished(
context.handleLineElementMovementFinished
);
// TODO:Continue
//itemInstance.onClick(context.handleElementClick);
itemInstance.onDblClick(context.handleElementDblClick);
} else {
itemInstance.onClick(context.handleElementClick);
itemInstance.onDblClick(context.handleElementDblClick);
itemInstance.onMoved(context.handleElementMovement);
itemInstance.onMovementFinished(context.handleElementMovementFinished);
itemInstance.onResized(context.handleElementResizement);
itemInstance.onResizeFinished(context.handleElementResizementFinished);
}
@ -907,67 +905,13 @@ export default class VisualConsole {
this.containerRef.classList.remove("is-editing");
}
/**
* Select an item.
* @param itemId Item Id.
* @param unique To remove the selection of other items or not.
*/
public selectItem(itemId: number, unique: boolean = false): void {
if (unique) {
this.elementIds.forEach(currentItemId => {
const meta = this.elementsById[currentItemId].meta;
if (currentItemId !== itemId && meta.isSelected) {
this.elementsById[currentItemId].meta = {
...meta,
isSelected: false
};
} else if (currentItemId === itemId && !meta.isSelected) {
this.elementsById[currentItemId].meta = {
...meta,
isSelected: true
};
}
});
} else if (this.elementsById[itemId]) {
this.elementsById[itemId].meta = {
...this.elementsById[itemId].meta,
isSelected: true
};
}
}
/**
* Unselect an item.
* @param itemId Item Id.
*/
public unselectItem(itemId: number): void {
if (this.elementsById[itemId]) {
const meta = this.elementsById[itemId].meta;
if (meta.isSelected) {
this.elementsById[itemId].meta = {
...meta,
isSelected: false
};
}
}
}
/**
* Unselect all items.
*/
public unselectItems(): void {
public unSelectItems(): void {
this.elementIds.forEach(itemId => {
if (this.elementsById[itemId]) {
const meta = this.elementsById[itemId].meta;
if (meta.isSelected) {
this.elementsById[itemId].meta = {
...meta,
isSelected: false
};
}
this.elementsById[itemId].unSelectItem();
}
});
}

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

@ -1,12 +1,6 @@
import { AnyObject, WithModuleProps } from "../lib/types";
import { modulePropsDecoder, decodeBase64, stringIsEmpty, t } from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
AgentModuleInputGroup
} from "../Item";
import { InputGroup, FormContainer } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type BarsGraphProps = {
type: ItemType.BARS_GRAPH;
@ -48,127 +42,6 @@ const parseTypeGraph = (typeGraph: unknown): BarsGraphProps["typeGraph"] => {
}
};
/**
* Class to add item to the Bars graph item form
* This item consists of a label and select background.
* Show background is stored in the backgroundType property.
*/
class BackgroundColorInputGroup extends InputGroup<Partial<BarsGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const backgroundTypeLabel = document.createElement("label");
backgroundTypeLabel.textContent = t("Background color");
const options: {
value: BarsGraphProps["backgroundColor"];
text: string;
}[] = [
{ value: "white", text: t("White") },
{ value: "black", text: t("Black") },
{ value: "transparent", text: t("Transparent") }
];
const backgroundTypeSelect = document.createElement("select");
backgroundTypeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
backgroundTypeSelect.appendChild(optionElement);
});
backgroundTypeSelect.value =
this.currentData.backgroundColor ||
this.initialData.backgroundColor ||
"default";
backgroundTypeSelect.addEventListener("change", event => {
this.updateData({
backgroundColor: parseBarsGraphProps(
(event.target as HTMLSelectElement).value
)
});
});
backgroundTypeLabel.appendChild(backgroundTypeSelect);
return backgroundTypeLabel;
}
}
/**
* Class to add item to the Bars graph item form
* This item consists of a label and select type graph.
* Show type is stored in the typeGraph property.
*/
class TypeGraphInputGroup extends InputGroup<Partial<BarsGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const graphTypeLabel = document.createElement("label");
graphTypeLabel.textContent = t("Graph Type");
const options: {
value: BarsGraphProps["typeGraph"];
text: string;
}[] = [
{ value: "horizontal", text: t("Horizontal") },
{ value: "vertical", text: t("Vertical") }
];
const graphTypeSelect = document.createElement("select");
graphTypeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
graphTypeSelect.appendChild(optionElement);
});
graphTypeSelect.value =
this.currentData.typeGraph || this.initialData.typeGraph || "vertical";
graphTypeSelect.addEventListener("change", event => {
this.updateData({
typeGraph: parseTypeGraph((event.target as HTMLSelectElement).value)
});
});
graphTypeLabel.appendChild(graphTypeSelect);
return graphTypeLabel;
}
}
/**
* Class to add item to the BarsGraph item form
* This item consists of a label and a color type input.
* Element grid color is stored in the gridColor property
*/
class GridColorInputGroup extends InputGroup<Partial<BarsGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const gridLabel = document.createElement("label");
gridLabel.textContent = t("Grid color");
const gridInput = document.createElement("input");
gridInput.type = "color";
gridInput.required = true;
gridInput.value = `${this.currentData.gridColor ||
this.initialData.gridColor ||
"#000000"}`;
gridInput.addEventListener("change", e => {
this.updateData({
gridColor: (e.target as HTMLInputElement).value
});
});
gridLabel.appendChild(gridInput);
return gridLabel;
}
}
/**
* Build a valid typed object from a raw object.
* This will allow us to ensure the type safety.
@ -226,32 +99,4 @@ export default class BarsGraph extends Item<BarsGraphProps> {
}
}
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* BackgroundColorInputGroup
* GridColorInputGroup
* TypeGraphInputGroup
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
return BarsGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<BarsGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new BackgroundColorInputGroup("backgroundColor-type", props)
);
formContainer.addInputGroup(new TypeGraphInputGroup("type-graph", props));
formContainer.addInputGroup(new GridColorInputGroup("grid-color", props));
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;
}
}

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

@ -1,7 +1,6 @@
import { AnyObject } from "../lib/types";
import { parseIntOr, notEmptyStringOr, t } from "../lib";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
import { InputGroup, FormContainer } from "../Form";
interface BoxProps extends ItemProps {
// Overrided properties.
@ -99,19 +98,4 @@ export default class Box extends Item<BoxProps> {
}
}
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
return Box.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<BoxProps>): FormContainer {
const formContainer = super.getFormContainer(props);
return formContainer;
}
}

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

@ -88,183 +88,6 @@ export function clockPropsDecoder(data: AnyObject): ClockProps | never {
};
}
/**
* Class to add item to the clock item form
* This item consists of a label and a select.
* options for select: analogic, digital.
* Type is stored in the clock_animation property
*/
class ClockTypeInputGroup extends InputGroup<Partial<ClockProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const label = document.createElement("label");
label.textContent = t("Clock animation");
const options: {
value: ClockProps["clockType"];
text: string;
}[] = [
{ value: "analogic", text: t("Simple analogic") },
{ value: "digital", text: t("Simple digital") }
];
const typeSelect = document.createElement("select");
typeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
typeSelect.appendChild(optionElement);
});
typeSelect.value =
this.currentData.clockType || this.initialData.clockType || "analogic";
typeSelect.addEventListener("change", event => {
this.updateData({
clockType: parseClockType((event.target as HTMLSelectElement).value)
});
});
label.appendChild(typeSelect);
return label;
}
}
/**
* Class to add item to the clock item form
* This item consists of a label and a select.
* options for select: analogic, digital.
* Type is stored in the clock_animation property
*/
class ClockFormatInputGroup extends InputGroup<Partial<ClockProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const label = document.createElement("label");
label.textContent = t("Time format");
const options: {
value: ClockProps["clockFormat"];
text: string;
}[] = [
{ value: "time", text: t("Only time") },
{ value: "datetime", text: t("Time and date") }
];
const typeSelect = document.createElement("select");
typeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
typeSelect.appendChild(optionElement);
});
typeSelect.value =
this.currentData.clockFormat || this.initialData.clockFormat || "time";
typeSelect.addEventListener("change", event => {
this.updateData({
clockFormat: parseClockFormat((event.target as HTMLSelectElement).value)
});
});
label.appendChild(typeSelect);
return label;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a numeric type input.
* Diameter is stored in the width property
*/
class WidthInputGroup extends InputGroup<Partial<ClockProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const widthLabel = document.createElement("label");
widthLabel.textContent = t("Width");
const widthInput = document.createElement("input");
widthInput.type = "number";
widthInput.required = true;
widthInput.value = `${this.currentData.width || this.initialData.width}`;
widthInput.addEventListener("change", e => {
this.updateData({
width: parseIntOr((e.target as HTMLInputElement).value, 0)
});
});
widthLabel.appendChild(widthInput);
return widthLabel;
}
}
/**
* Class to add item to the clock item form
* This item consists of a label and two select.
* options for select: analogic, digital.
* Type is stored in the clock_animation property
*/
class ClockTimezoneInputGroup extends InputGroup<Partial<ClockProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const label = document.createElement("label");
label.textContent = t("Time zone");
const options: {
value: ClockProps["clockTimezone"];
text: string;
}[] = [
{ value: "Africa", text: t("Africa") },
{ value: "America", text: t("America") },
{ value: "Antarctica", text: t("Antarctica") },
{ value: "Arctic", text: t("Arctic") },
{ value: "Asia", text: t("Asia") },
{ value: "Atlantic", text: t("Atlantic") },
{ value: "Australia", text: t("Australia") },
{ value: "Europe", text: t("Europe") },
{ value: "Indian", text: t("Indian") },
{ value: "Pacific", text: t("Pacific") },
{ value: "UTC", text: t("UTC") }
];
const zoneSelect = document.createElement("select");
zoneSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
zoneSelect.appendChild(optionElement);
});
var timezone =
this.currentData.clockTimezone ||
this.initialData.clockTimezone ||
"Europe/Madrid";
const [zone, city = ""] = timezone.split("/");
zoneSelect.value = zone;
zoneSelect.addEventListener("change", event => {
// this.updateData({
// clockTimezone: parseClockFormat(
// (event.target as HTMLSelectElement).value
// )
// });
});
label.appendChild(zoneSelect);
return label;
}
}
export default class Clock extends Item<ClockProps> {
public static readonly TICK_INTERVAL = 1000; // In ms.
private intervalRef: number | null = null;
@ -827,46 +650,4 @@ export default class Clock extends Item<ClockProps> {
throw new Error("invalid clock type.");
}
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* DiameterInputGroup,
* MinValueInputGroup,
* MaxValueInputGroup,
* TypePercentileInputGroup,
* ValueToShowInputGroup,
* ElementColorInputGroup,
* ValueColorInputGroup,
* LabelPercentileInputGroup
* Are removed:
* inputgrouplabel
* size
*/
public getFormContainer(): FormContainer {
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 ClockFormatInputGroup("clockFormat", props)
);
formContainer.addInputGroup(new WidthInputGroup("widthInput", props));
formContainer.addInputGroup(
new ClockTimezoneInputGroup("clockTimezone", props)
);
return formContainer;
}
}

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

@ -5,13 +5,7 @@ import {
WithAgentProps
} from "../lib/types";
import { modulePropsDecoder, linkedVCPropsDecoder, t } from "../lib";
import Item, {
itemBasePropsDecoder,
ItemType,
ItemProps,
LinkConsoleInputGroup,
AgentModuleInputGroup
} from "../Item";
import Item, { itemBasePropsDecoder, ItemType, ItemProps } from "../Item";
import { FormContainer, InputGroup } from "../Form";
import fontAwesomeIcon from "../lib/FontAwesomeIcon";
import { faTrashAlt, faPlusCircle } from "@fortawesome/free-solid-svg-icons";
@ -422,7 +416,6 @@ export default class ColorCloud extends Item<ColorCloudProps> {
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
* ColorInputGroup
* RangesInputGroup
*/
@ -435,10 +428,6 @@ export default class ColorCloud extends Item<ColorCloudProps> {
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.removeInputGroup("label");
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", props),
0
);
formContainer.addInputGroup(new ColorInputGroup("color-cloud", props), 3);
formContainer.addInputGroup(new RangesInputGroup("ranges-cloud", props), 4);

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

@ -10,14 +10,7 @@ import {
stringIsEmpty,
t
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup,
AgentModuleInputGroup
} from "../Item";
import { FormContainer, InputGroup } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type DonutGraphProps = {
type: ItemType.DONUT_GRAPH;
@ -57,38 +50,6 @@ export function donutGraphPropsDecoder(
};
}
/**
* Class to add item to the DonutsGraph item form
* This item consists of a label and a color type input.
* Element color is stored in the legendBackgroundColor property
*/
class LegendBackgroundColorInputGroup extends InputGroup<
Partial<DonutGraphProps>
> {
protected createContent(): HTMLElement | HTMLElement[] {
const legendBackgroundLabel = document.createElement("label");
legendBackgroundLabel.textContent = t("Resume data color");
const legendBackgroundInput = document.createElement("input");
legendBackgroundInput.type = "color";
legendBackgroundInput.required = true;
legendBackgroundInput.value = `${this.currentData.legendBackgroundColor ||
this.initialData.legendBackgroundColor ||
"#000000"}`;
legendBackgroundInput.addEventListener("change", e => {
this.updateData({
legendBackgroundColor: (e.target as HTMLInputElement).value
});
});
legendBackgroundLabel.appendChild(legendBackgroundInput);
return legendBackgroundLabel;
}
}
export default class DonutGraph extends Item<DonutGraphProps> {
protected createDomElement(): HTMLElement {
const element = document.createElement("div");
@ -119,30 +80,4 @@ export default class DonutGraph extends Item<DonutGraphProps> {
}
}
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
return DonutGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<DonutGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new LegendBackgroundColorInputGroup("legend-background-color", props)
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;
}
}

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

@ -6,13 +6,7 @@ import {
stringIsEmpty,
t
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
AgentModuleInputGroup
} from "../Item";
import { InputGroup, FormContainer } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type EventsHistoryProps = {
type: ItemType.AUTO_SLA_GRAPH;
@ -21,53 +15,6 @@ export type EventsHistoryProps = {
} & ItemProps &
WithModuleProps;
/**
* Class to add item to the Event History item form
* This item consists of a label and select time.
* Show time is stored in the maxTime property.
*/
class MaxTimeInputGroup extends InputGroup<Partial<EventsHistoryProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const maxTimeLabel = document.createElement("label");
maxTimeLabel.textContent = t("Max. Time");
const options: {
value: string;
text: string;
}[] = [
{ value: "86400", text: "24h" },
{ value: "43200", text: "12h" },
{ value: "28800", text: "8h" },
{ value: "7200", text: "2h" },
{ value: "3600", text: "1h" }
];
const maxTimeSelect = document.createElement("select");
maxTimeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
maxTimeSelect.appendChild(optionElement);
});
maxTimeSelect.value = `${this.currentData.maxTime ||
this.initialData.maxTime ||
"86400"}`;
maxTimeSelect.addEventListener("change", event => {
this.updateData({
maxTime: parseIntOr((event.target as HTMLSelectElement).value, 0)
});
});
maxTimeLabel.appendChild(maxTimeSelect);
return maxTimeLabel;
}
}
/**
* Build a valid typed object from a raw object.
* This will allow us to ensure the type safety.
@ -129,26 +76,4 @@ export default class EventsHistory extends Item<EventsHistoryProps> {
}
}
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* MaxTimeInputGroup
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
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", props)
);
return formContainer;
}
}

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

@ -8,14 +8,7 @@ import {
parseBoolean,
t
} from "../lib";
import Item, {
ItemProps,
itemBasePropsDecoder,
ItemType,
LinkConsoleInputGroup,
ImageInputGroup
} from "../Item";
import { FormContainer, InputGroup } from "../Form";
import Item, { ItemProps, itemBasePropsDecoder, ItemType } from "../Item";
export type GroupProps = {
type: ItemType.GROUP_ITEM;
@ -67,40 +60,6 @@ export function groupPropsDecoder(data: AnyObject): GroupProps | never {
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
};
}
// TODO: Document
class ShowStatisticsInputGroup extends InputGroup<Partial<GroupProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const showStatisticsLabel = document.createElement("label");
showStatisticsLabel.textContent = t("Show statistics");
const showStatisticsInputChkbx = document.createElement("input");
showStatisticsInputChkbx.id = "checkbox-switch";
showStatisticsInputChkbx.className = "checkbox-switch";
showStatisticsInputChkbx.type = "checkbox";
showStatisticsInputChkbx.name = "checkbox-enable-link";
showStatisticsInputChkbx.value = "1";
showStatisticsInputChkbx.checked =
this.currentData.showStatistics ||
this.initialData.showStatistics ||
false;
showStatisticsInputChkbx.addEventListener("change", e =>
this.updateData({
showStatistics: (e.target as HTMLInputElement).checked
})
);
const linkInputLabel = document.createElement("label");
linkInputLabel.className = "label-switch";
linkInputLabel.htmlFor = "checkbox-switch";
showStatisticsLabel.appendChild(showStatisticsInputChkbx);
showStatisticsLabel.appendChild(linkInputLabel);
return showStatisticsLabel;
}
}
export default class Group extends Item<GroupProps> {
protected createDomElement(): HTMLElement {
const element = document.createElement("div");
@ -139,36 +98,4 @@ export default class Group extends Item<GroupProps> {
element.innerHTML = this.props.html;
}
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
* ImageInputGroup
* ShowStatisticsInputGroup
*/
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", props)
);
formContainer.addInputGroup(
new ImageInputGroup("image-console", {
...props,
imageKey: "imageSrc",
showStatusImg: true
})
);
formContainer.addInputGroup(
new ShowStatisticsInputGroup("show-statistic", props)
);
return formContainer;
}
}

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

@ -1,13 +1,6 @@
import { LinkedVisualConsoleProps, AnyObject } from "../lib/types";
import { linkedVCPropsDecoder } from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup,
ImageInputGroup
} from "../Item";
import { FormContainer } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type IconProps = {
type: ItemType.ICON;
@ -62,25 +55,4 @@ export default class Icon extends Item<IconProps> {
protected updateDomElement(element: HTMLElement): void {
element.style.backgroundImage = `url(${this.props.imageSrc})`;
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
return Icon.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<IconProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new ImageInputGroup("image-console", { ...props, imageKey: "image" })
);
return formContainer;
}
}

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

@ -1,12 +1,6 @@
import { LinkedVisualConsoleProps, AnyObject } from "../lib/types";
import { linkedVCPropsDecoder } from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup
} from "../Item";
import { FormContainer } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type LabelProps = {
type: ItemType.LABEL;
@ -50,22 +44,4 @@ export default class Label extends Item<LabelProps> {
// Always return an empty label.
return element;
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
*/
public getFormContainer(): FormContainer {
return Label.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<LabelProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props)
);
return formContainer;
}
}

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

@ -224,8 +224,8 @@ export default class Line extends Item<LineProps> {
)
},
{
...meta,
editMode: false
...meta
//editMode: false
},
true
);
@ -260,7 +260,7 @@ export default class Line extends Item<LineProps> {
this.moveMode = newMetadata.editMode;
super.setMeta({
...newMetadata,
editMode: false,
//editMode: false,
lineMode: true
});
}
@ -419,9 +419,14 @@ export default class Line extends Item<LineProps> {
if (circle) circle.remove();
}
element.appendChild(startCircle);
element.appendChild(endCircle);
// TODO: Continue
if (element.parentElement !== null) {
element.parentElement.appendChild(startCircle);
element.parentElement.appendChild(endCircle);
}
console.log(startCircle);
console.log(this.elementRef.parentElement);
// Init the movement listeners.
this.initStartPositionMovementListener(startCircle, this.elementRef
.parentElement as HTMLElement);

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

@ -8,23 +8,9 @@ import {
modulePropsDecoder,
decodeBase64,
stringIsEmpty,
t,
parseIntOr,
periodSelector
parseIntOr
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup,
AgentModuleInputGroup
} from "../Item";
import { FormContainer, InputGroup } from "../Form";
import fontAwesomeIcon from "../lib/FontAwesomeIcon";
import {
faCircleNotch,
faExclamationCircle
} from "@fortawesome/free-solid-svg-icons";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type ModuleGraphProps = {
type: ItemType.MODULE_GRAPH;
@ -99,294 +85,6 @@ export function moduleGraphPropsDecoder(
};
}
/**
* Class to add item to the Module graph item form
* This item consists of a label and select background.
* Show background is stored in the backgroundType property.
*/
class BackgroundTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const backgroundTypeLabel = document.createElement("label");
backgroundTypeLabel.textContent = t("Background color");
generalDiv.appendChild(backgroundTypeLabel);
const options: {
value: ModuleGraphProps["backgroundType"];
text: string;
}[] = [
{ value: "white", text: t("White") },
{ value: "black", text: t("Black") },
{ value: "transparent", text: t("Transparent") }
];
const backgroundTypeSelect = document.createElement("select");
backgroundTypeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
backgroundTypeSelect.appendChild(optionElement);
});
backgroundTypeSelect.value =
this.currentData.backgroundType ||
this.initialData.backgroundType ||
"default";
backgroundTypeSelect.addEventListener("change", event => {
this.updateData({
backgroundType: parseBackgroundType(
(event.target as HTMLSelectElement).value
)
});
});
generalDiv.appendChild(backgroundTypeSelect);
return generalDiv;
}
}
/**
* Class to add item to the Module graph item form
* This item consists of a radio buttons.
*/
class ChooseTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const divContainer = document.createElement("div");
divContainer.className = "div-input-group";
const radioButtonModuleLabel = document.createElement("label");
radioButtonModuleLabel.textContent = t("Module Graph");
divContainer.appendChild(radioButtonModuleLabel);
const radioButtonModule = document.createElement("input");
radioButtonModule.type = "radio";
radioButtonModule.name = "type-graph";
radioButtonModule.value = "module";
radioButtonModule.required = true;
radioButtonModule.checked = this.initialData.customGraphId ? false : true;
divContainer.appendChild(radioButtonModule);
radioButtonModule.addEventListener("change", e => {
this.updateRadioButton(
"input-group-custom-graph-list",
"input-group-agent-autocomplete"
);
//Remove Id graph custom.
this.updateData({ customGraphId: 0 });
});
const radioButtonCustomLabel = document.createElement("label");
radioButtonCustomLabel.textContent = t("Custom Graph");
divContainer.appendChild(radioButtonCustomLabel);
const radioButtonCustom = document.createElement("input");
radioButtonCustom.type = "radio";
radioButtonCustom.name = "type-graph";
radioButtonCustom.value = "custom";
radioButtonCustom.required = true;
radioButtonCustom.checked = this.initialData.customGraphId ? true : false;
divContainer.appendChild(radioButtonCustom);
radioButtonCustom.addEventListener("change", event => {
this.updateRadioButton(
"input-group-agent-autocomplete",
"input-group-custom-graph-list"
);
});
return divContainer;
}
private updateRadioButton = (id: string, id2: string): void => {
const itemAgentAutocomplete = document.getElementsByClassName(id);
for (let i = 0; i < itemAgentAutocomplete.length; i++) {
itemAgentAutocomplete[i].classList.add("hide-elements");
itemAgentAutocomplete[i].classList.remove("show-elements");
}
const itemCustomGraphList = document.getElementsByClassName(id2);
for (let i = 0; i < itemCustomGraphList.length; i++) {
itemCustomGraphList[i].classList.add("show-elements");
itemCustomGraphList[i].classList.remove("hide-elements");
}
};
}
/**
* Class to add item to the general items form
* This item consists of a label and a Acl Group type select.
* Acl is stored in the aclGroupId property
*/
class CustomGraphInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const containerGeneralDiv = document.createElement("div");
containerGeneralDiv.className = "div-input-group-autocomplete-agent";
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const customGraphLabel = document.createElement("label");
customGraphLabel.textContent = t("Custom graph");
generalDiv.appendChild(customGraphLabel);
const spinner = fontAwesomeIcon(faCircleNotch, t("Spinner"), {
size: "small",
spin: true
});
customGraphLabel.appendChild(spinner);
this.requestData("custom-graph-list", {}, (error, data) => {
// Remove Spinner.
spinner.remove();
if (error) {
customGraphLabel.appendChild(
fontAwesomeIcon(faExclamationCircle, t("Error"), {
size: "small",
color: "#e63c52"
})
);
}
if (data instanceof Array) {
const customGraphSelect = document.createElement("select");
data.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
customGraphSelect.appendChild(optionElement);
});
customGraphSelect.value = `${this.currentData.customGraphId ||
this.initialData.customGraphId ||
0}`;
customGraphSelect.addEventListener("change", event => {
if (typeof (event.target as HTMLSelectElement).value === "string") {
const id = (event.target as HTMLSelectElement).value.split("|")[0];
const metaconsoleId = (event.target as HTMLSelectElement).value.split(
"|"
)[1];
this.updateData({
customGraphId: parseIntOr(id, 0),
metaconsoleId: parseIntOr(metaconsoleId, 0)
});
} else {
this.updateData({
customGraphId: parseIntOr(
(event.target as HTMLSelectElement).value,
0
)
});
}
});
generalDiv.appendChild(customGraphSelect);
}
});
containerGeneralDiv.appendChild(generalDiv);
return containerGeneralDiv;
}
}
/*
* Class to add item to the Module graph item form
* This item consists of a label and select type graph.
* Show type is stored in the property.
*/
class GraphTypeInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const graphTypeLabel = document.createElement("label");
graphTypeLabel.textContent = t("Graph Type");
generalDiv.appendChild(graphTypeLabel);
const options: {
value: ModuleGraphProps["graphType"];
text: string;
}[] = [
{ value: "line", text: t("Line") },
{ value: "area", text: t("Area") }
];
const graphTypeSelect = document.createElement("select");
graphTypeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
graphTypeSelect.appendChild(optionElement);
});
graphTypeSelect.value =
this.currentData.graphType || this.initialData.graphType || "line";
graphTypeSelect.addEventListener("change", event => {
this.updateData({
graphType: parseGraphType((event.target as HTMLSelectElement).value)
});
});
generalDiv.appendChild(graphTypeSelect);
return generalDiv;
}
}
// TODO: Document
class PeriodInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const periodLabel = document.createElement("label");
periodLabel.textContent = t("Period");
generalDiv.appendChild(periodLabel);
const periodControl = periodSelector(
this.currentData.period || this.initialData.period || 300,
null,
[
{ text: t("5 minutes"), value: 300 },
{ text: t("30 minutes"), value: 1800 },
{ text: t("6 hours"), value: 21600 },
{ text: t("1 day"), value: 86400 },
{ text: t("1 week"), value: 604800 },
{ text: t("15 days"), value: 1296000 },
{ text: t("1 month"), value: 2592000 },
{ text: t("3 months"), value: 7776000 },
{ text: t("6 months"), value: 15552000 },
{ text: t("1 year"), value: 31104000 },
{ text: t("2 years"), value: 62208000 },
{ text: t("3 years"), value: 93312000 }
],
value => this.updateData({ period: value })
);
generalDiv.appendChild(periodControl);
return generalDiv;
}
}
export default class ModuleGraph extends Item<ModuleGraphProps> {
protected createDomElement(): HTMLElement {
const element = document.createElement("div");
@ -407,60 +105,4 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
this.props.height
}px`;
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
* PeriodInputGroup
* GraphTypeInputGroup
* BackgroundTypeInputGroup
* ChooseTypeInputGroup
* AgentModuleInputGroup
* CustomGraphInputGroup
*/
public getFormContainer(): FormContainer {
return ModuleGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<ModuleGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new BackgroundTypeInputGroup("background-type", props),
3
);
formContainer.addInputGroup(
new ChooseTypeInputGroup("show-type-graph", props),
4
);
const displayAgent = props.customGraphId
? "hide-elements"
: "show-elements";
const displayCustom = props.customGraphId
? "show-elements"
: "hide-elements ";
formContainer.addInputGroup(
new AgentModuleInputGroup(`agent-autocomplete ${displayAgent}`, props),
5
);
formContainer.addInputGroup(
new CustomGraphInputGroup(`custom-graph-list ${displayCustom}`, props),
6
);
formContainer.addInputGroup(
new GraphTypeInputGroup("graph-type", props),
7
);
formContainer.addInputGroup(new PeriodInputGroup("period-graph", props), 8);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props),
16
);
return formContainer;
}
}

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

@ -10,17 +10,9 @@ import {
modulePropsDecoder,
notEmptyStringOr,
parseIntOr,
parseFloatOr,
t
parseFloatOr
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup,
AgentModuleInputGroup
} from "../Item";
import { InputGroup, FormContainer } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type PercentileProps = {
type: ItemType.PERCENTILE_BAR;
@ -107,319 +99,6 @@ export function percentilePropsDecoder(
};
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a numeric type input.
* Diameter is stored in the width property
*/
class DiameterInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const diameterLabel = document.createElement("label");
diameterLabel.textContent = t("Diameter");
generalDiv.appendChild(diameterLabel);
const diameterInput = document.createElement("input");
diameterInput.type = "number";
diameterInput.required = true;
diameterInput.value = `${this.currentData.width || this.initialData.width}`;
diameterInput.addEventListener("change", e => {
this.updateData({
width: parseIntOr((e.target as HTMLInputElement).value, 0)
});
});
generalDiv.appendChild(diameterInput);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a numeric type input.
* Minvalue is stored in the minValue property
*/
class MinValueInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const minValueLabel = document.createElement("label");
minValueLabel.textContent = t("Min Value");
generalDiv.appendChild(minValueLabel);
const minValueInput = document.createElement("input");
minValueInput.type = "number";
minValueInput.required = true;
minValueInput.value = `${this.currentData.minValue ||
this.initialData.minValue ||
0}`;
minValueInput.addEventListener("change", e => {
this.updateData({
minValue: parseIntOr((e.target as HTMLInputElement).value, 0)
});
});
generalDiv.appendChild(minValueInput);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a numeric type input.
* Maxvalue is stored in the maxValue property
*/
class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const maxValueLabel = document.createElement("label");
maxValueLabel.textContent = t("Max Value");
generalDiv.appendChild(maxValueLabel);
const maxValueInput = document.createElement("input");
maxValueInput.type = "number";
maxValueInput.required = true;
maxValueInput.value = `${this.currentData.maxValue ||
this.initialData.maxValue ||
0}`;
maxValueInput.addEventListener("change", e => {
this.updateData({
maxValue: parseIntOr((e.target as HTMLInputElement).value, 0)
});
});
generalDiv.appendChild(maxValueInput);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a select.
* options for select: progress-bar, bubble, circular-progress-bar,
* circular-progress-bar-alt.
* Type is stored in the percentileType property
*/
class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const typeLabel = document.createElement("label");
typeLabel.textContent = t("Type");
generalDiv.appendChild(typeLabel);
const options: {
value: PercentileProps["percentileType"];
text: string;
}[] = [
{ value: "progress-bar", text: t("Percentile") },
{ value: "bubble", text: t("Bubble") },
{
value: "circular-progress-bar",
text: t("Circular porgress bar")
},
{
value: "circular-progress-bar-alt",
text: t("Circular progress bar (interior)")
}
];
const typeSelect = document.createElement("select");
typeSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
typeSelect.appendChild(optionElement);
});
typeSelect.value =
this.currentData.percentileType ||
this.initialData.percentileType ||
"progress-bar";
typeSelect.addEventListener("change", event => {
this.updateData({
percentileType: extractPercentileType(
(event.target as HTMLSelectElement).value
)
});
});
generalDiv.appendChild(typeSelect);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a select.
* options for select: percent, value
* Type value is stored in the valueType property
*/
class ValueToShowInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const valueToShowLabel = document.createElement("label");
valueToShowLabel.textContent = t("Value to show");
generalDiv.appendChild(valueToShowLabel);
const options: { value: PercentileProps["valueType"]; text: string }[] = [
{ value: "percent", text: t("Percent") },
{ value: "value", text: t("Value") }
];
const valueToShowInput = document.createElement("select");
valueToShowInput.required = true;
valueToShowInput.value =
this.currentData.valueType || this.initialData.valueType || "percent";
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
valueToShowInput.appendChild(optionElement);
});
valueToShowInput.addEventListener("change", event => {
this.updateData({
valueType: extractValueType((event.target as HTMLSelectElement).value)
});
});
generalDiv.appendChild(valueToShowInput);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a color type input.
* Element color is stored in the color property
*/
class ElementColorInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const elementColorLabel = document.createElement("label");
elementColorLabel.textContent = t("Element color");
generalDiv.appendChild(elementColorLabel);
const elementColorInput = document.createElement("input");
elementColorInput.type = "color";
elementColorInput.required = true;
elementColorInput.value = `${this.currentData.color ||
this.initialData.color}`;
elementColorInput.addEventListener("change", e => {
this.updateData({
color: (e.target as HTMLInputElement).value
});
});
generalDiv.appendChild(elementColorInput);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a color type input.
* Value color is stored in the labelColor property
*/
class ValueColorInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const valueColorLabel = document.createElement("label");
valueColorLabel.textContent = t("Value color");
generalDiv.appendChild(valueColorLabel);
const valueColorInput = document.createElement("input");
valueColorInput.type = "color";
valueColorInput.required = true;
valueColorInput.value = `${this.currentData.labelColor ||
this.initialData.labelColor}`;
valueColorInput.addEventListener("change", e => {
this.updateData({
labelColor: (e.target as HTMLInputElement).value
});
});
generalDiv.appendChild(valueColorInput);
return generalDiv;
}
}
/**
* Class to add item to the percentile item form
* This item consists of a label and a color type input.
* label is stored in the label property
*/
class LabelPercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const labelPercentileLabel = document.createElement("label");
labelPercentileLabel.textContent = t("Label");
generalDiv.appendChild(labelPercentileLabel);
const labelPercentileInput = document.createElement("input");
labelPercentileInput.type = "text";
labelPercentileInput.required = true;
labelPercentileInput.value = `${this.currentData.label ||
this.initialData.label ||
""} `;
labelPercentileInput.addEventListener("change", e => {
this.updateData({
label: (e.target as HTMLInputElement).value
});
});
generalDiv.appendChild(labelPercentileInput);
return generalDiv;
}
}
const svgNS = "http://www.w3.org/2000/svg";
export default class Percentile extends Item<PercentileProps> {
@ -612,67 +291,4 @@ export default class Percentile extends Item<PercentileProps> {
else if (value >= maxValue) return 100;
else return Math.trunc(((value - minValue) / (maxValue - minValue)) * 100);
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* DiameterInputGroup,
* MinValueInputGroup,
* MaxValueInputGroup,
* TypePercentileInputGroup,
* ValueToShowInputGroup,
* ElementColorInputGroup,
* ValueColorInputGroup,
* LabelPercentileInputGroup
* LinkConsoleInputGroup
* are removed:
* inputgrouplabel
* size
*/
public getFormContainer(): FormContainer {
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", 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 TypePercentileInputGroup("type-percentil", props),
5
);
formContainer.addInputGroup(
new ValueToShowInputGroup("value-to-show", props),
6
);
formContainer.addInputGroup(
new ElementColorInputGroup("element-color", props),
7
);
formContainer.addInputGroup(
new ValueColorInputGroup("value-color", props),
8
);
formContainer.addInputGroup(
new LabelPercentileInputGroup("label-percentile", props),
9
);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props),
16
);
return formContainer;
}
}

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

@ -6,12 +6,7 @@ import {
parseIntOr,
t
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
ImageInputGroup
} from "../Item";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
import { FormContainer, InputGroup } from "../Form";
import fontAwesomeIcon from "../lib/FontAwesomeIcon";
import {
@ -146,30 +141,4 @@ export default class Service extends Item<ServiceProps> {
return element;
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* ImageInputGroup
* ServiceListInputGroup
*/
public getFormContainer(): FormContainer {
return Service.getFormContainer(this.props);
}
public static getFormContainer(props: Partial<ServiceProps>): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new ImageInputGroup("image-console", {
...props,
imageKey: "imageSrc",
showStatusImg: false
})
);
formContainer.addInputGroup(
new ServiceListInputGroup("service-list", props)
);
return formContainer;
}
}

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

@ -7,18 +7,9 @@ import {
linkedVCPropsDecoder,
parseIntOr,
modulePropsDecoder,
replaceMacros,
t,
periodSelector
replaceMacros
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup,
AgentModuleInputGroup
} from "../Item";
import { FormContainer, InputGroup } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type SimpleValueProps = {
type: ItemType.SIMPLE_VALUE;
@ -68,139 +59,6 @@ const parseProcessValue = (
}
};
/**
* Class to add item to the Simple value item form
* This item consists of a label and select Process.
* Show process is stored in the processValue property.
*/
class ProcessInputGroup extends InputGroup<Partial<SimpleValueProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const processLabel = document.createElement("label");
const container = document.createElement("div");
processLabel.textContent = t("Process");
const options: {
value: SimpleValueProps["processValue"];
text: string;
}[] = [
{ value: "none", text: t("None") },
{ value: "avg", text: t("Avg Value") },
{ value: "max", text: t("Max Value") },
{ value: "min", text: t("Min Value") }
];
const processSelect = document.createElement("select");
processSelect.required = true;
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
processSelect.appendChild(optionElement);
});
const valueProcess =
this.currentData.processValue || this.initialData.processValue || "none";
processSelect.value = valueProcess;
switch (valueProcess) {
case "avg":
case "max":
case "min":
container.appendChild(this.getPeriodSelector());
break;
case "none":
default:
break;
}
processSelect.addEventListener("change", event => {
const value = (event.target as HTMLSelectElement).value;
container.childNodes.forEach(n => n.remove());
switch (value) {
case "avg":
case "max":
case "min":
container.appendChild(this.getPeriodSelector());
this.updateData({
processValue: value
});
break;
case "none":
default:
this.updateData({
processValue: "none"
});
break;
}
});
processLabel.appendChild(processSelect);
processLabel.appendChild(container);
return processLabel;
}
private getPeriodSelector = (): HTMLElement => {
const periodLabel = document.createElement("label");
periodLabel.textContent = t("Period");
let period = 300;
{
this.currentData as SimpleValueProps;
this.initialData as SimpleValueProps;
if (
(this.currentData.processValue === "avg" ||
this.currentData.processValue === "max" ||
this.currentData.processValue === "min") &&
this.currentData.period != null
) {
period = this.currentData.period;
} else if (
(this.initialData.processValue === "avg" ||
this.initialData.processValue === "max" ||
this.initialData.processValue === "min") &&
this.initialData.period != null
) {
period = this.initialData.period;
}
}
const periodControl = periodSelector(
period,
{ text: t("None"), value: 0 },
[
{ text: t("5 minutes"), value: 300 },
{ text: t("30 minutes"), value: 1800 },
{ text: t("1 hours"), value: 3600 },
{ text: t("6 hours"), value: 21600 },
{ text: t("12 hours"), value: 43200 },
{ text: t("1 day"), value: 86400 },
{ text: t("1 week"), value: 604800 },
{ text: t("15 days"), value: 1296000 },
{ text: t("1 month"), value: 2592000 },
{ text: t("3 months"), value: 7776000 },
{ text: t("6 months"), value: 15552000 },
{ text: t("1 year"), value: 31104000 },
{ text: t("2 years"), value: 62208000 },
{ text: t("3 years"), value: 93312000 }
],
value =>
this.updateData({
period: value
})
);
periodLabel.appendChild(periodControl);
return periodLabel;
};
}
/**
* Build a valid typed object from a raw object.
* This will allow us to ensure the type safety.
@ -266,32 +124,4 @@ export default class SimpleValue extends Item<SimpleValueProps> {
// Always return an empty label.
return element;
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* LinkConsoleInputGroup
* ProcessInputGroup
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
return SimpleValue.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<SimpleValueProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props)
);
formContainer.addInputGroup(
new ProcessInputGroup("process-operation", props)
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", props)
);
return formContainer;
}
}

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

@ -7,18 +7,9 @@ import {
import {
modulePropsDecoder,
linkedVCPropsDecoder,
notEmptyStringOr,
t
notEmptyStringOr
} from "../lib";
import Item, {
ItemType,
ItemProps,
itemBasePropsDecoder,
LinkConsoleInputGroup,
ImageInputGroup,
AgentModuleInputGroup
} from "../Item";
import { InputGroup, FormContainer } from "../Form";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type StaticGraphProps = {
type: ItemType.STATIC_GRAPH;
@ -75,62 +66,6 @@ export function staticGraphPropsDecoder(
};
}
/**
* Class to add item to the static Graph item form
* This item consists of a label and a Show last value select.
* Show Last Value is stored in the showLastValueTooltip property
*/
class ShowLastValueInputGroup extends InputGroup<Partial<StaticGraphProps>> {
protected createContent(): HTMLElement | HTMLElement[] {
const generalDiv = document.createElement("div");
generalDiv.className = "div-input-group";
const showLastValueLabel = document.createElement("label");
showLastValueLabel.textContent = t("Show Last Value");
generalDiv.appendChild(showLastValueLabel);
const options: {
value: StaticGraphProps["showLastValueTooltip"];
text: string;
}[] = [
{ value: "default", text: t("Hide last value on boolean modules") },
{ value: "disabled", text: t("Disabled") },
{ value: "enabled", text: t("Enabled") }
];
const showLastValueSelect = document.createElement("select");
showLastValueSelect.required = true;
const currentValue =
this.currentData.showLastValueTooltip ||
this.initialData.showLastValueTooltip ||
"default";
options.forEach(option => {
const optionElement = document.createElement("option");
optionElement.value = option.value;
optionElement.textContent = option.text;
if (currentValue == optionElement.value) {
optionElement.selected = true;
}
showLastValueSelect.appendChild(optionElement);
});
showLastValueSelect.addEventListener("change", event => {
this.updateData({
showLastValueTooltip: parseShowLastValueTooltip(
(event.target as HTMLSelectElement).value
)
});
});
generalDiv.appendChild(showLastValueSelect);
return generalDiv;
}
}
export default class StaticGraph extends Item<StaticGraphProps> {
protected createDomElement(): HTMLElement {
const imgSrc = this.props.statusImageSrc || this.props.imageSrc;
@ -162,44 +97,4 @@ export default class StaticGraph extends Item<StaticGraphProps> {
const imgSrc = this.props.statusImageSrc || this.props.imageSrc;
element.style.backgroundImage = `url(${imgSrc})`;
}
/**
* @override function to add or remove inputsGroups those that are not necessary.
* Add to:
* ImageInputGroup
* ShowLastValueInputGroup
* LinkConsoleInputGroup
* AgentModuleInputGroup
*/
public getFormContainer(): FormContainer {
return StaticGraph.getFormContainer(this.props);
}
public static getFormContainer(
props: Partial<StaticGraphProps>
): FormContainer {
const formContainer = super.getFormContainer(props);
formContainer.addInputGroup(
new ImageInputGroup("image-console", {
...props,
imageKey: "imageSrc",
showStatusImg: true
}),
3
);
formContainer.addInputGroup(
new AgentModuleInputGroup("agent-autocomplete", props),
4
);
formContainer.addInputGroup(
new ShowLastValueInputGroup("show-last-value", props),
5
);
formContainer.addInputGroup(
new LinkConsoleInputGroup("link-console", props),
13
);
return formContainer;
}
}

2
visual_console_client/src/main.css
View File

@ -23,12 +23,12 @@
.visual-console-item.is-editing {
border: 2px dashed #b2b2b2;
transform: translateX(-2px) translateY(-2px);
cursor: move;
user-select: none;
}
.visual-console-item.is-editing.is-selected {
border: 2px dashed #2b2b2b;
cursor: move;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;