add news input group
This commit is contained in:
Daniel Barbero Martin
parent
09817311eb
commit
8290783f3a
|
|
@ -253,7 +253,7 @@ class SizeInputGroup extends InputGroup<Partial<ItemProps>> {
|
|||
|
||||
/**
|
||||
* Class to add item to the general items form
|
||||
* This item consists of a label and a color type select.
|
||||
* This item consists of a label and a Parent select.
|
||||
* Parent is stored in the parentId property
|
||||
*/
|
||||
class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
|
||||
|
|
@ -298,7 +298,7 @@ class ParentInputGroup extends InputGroup<Partial<ItemProps>> {
|
|||
|
||||
/**
|
||||
* Class to add item to the general items form
|
||||
* This item consists of a label and a color type select.
|
||||
* This item consists of a label and a Acl Group type select.
|
||||
* Acl is stored in the aclGroupId property
|
||||
*/
|
||||
class AclGroupInputGroup extends InputGroup<Partial<ItemProps>> {
|
||||
|
|
@ -386,7 +386,7 @@ class CacheExpirationInputGroup extends InputGroup<Partial<ItemProps>> {
|
|||
|
||||
/**
|
||||
* Class to add item to the general items form
|
||||
* This item consists of a label and a color type select.
|
||||
* This item consists of a label and a Link console type select.
|
||||
* Parent is stored in the parentId property
|
||||
*/
|
||||
export class LinkConsoleInputGroup extends InputGroup<
|
||||
|
|
@ -424,18 +424,18 @@ export class LinkConsoleInputGroup extends InputGroup<
|
|||
);
|
||||
}
|
||||
|
||||
// Create principal element select
|
||||
const linkConsoleSelect = document.createElement("select");
|
||||
linkConsoleSelect.required = true;
|
||||
|
||||
// Default option principal select.
|
||||
const defaultOptionElement = document.createElement("option");
|
||||
defaultOptionElement.value = "0";
|
||||
defaultOptionElement.textContent = t("none");
|
||||
linkConsoleSelect.appendChild(defaultOptionElement);
|
||||
|
||||
// Check data is array
|
||||
if (data instanceof Array) {
|
||||
// Create principal element select
|
||||
const linkConsoleSelect = document.createElement("select");
|
||||
linkConsoleSelect.required = true;
|
||||
|
||||
// Default option principal select.
|
||||
const defaultOptionElement = document.createElement("option");
|
||||
defaultOptionElement.value = "0";
|
||||
defaultOptionElement.textContent = t("none");
|
||||
linkConsoleSelect.appendChild(defaultOptionElement);
|
||||
|
||||
// Create other options for principal select.
|
||||
data.forEach(option => {
|
||||
let id = option.id;
|
||||
|
|
@ -520,6 +520,10 @@ export class LinkConsoleInputGroup extends InputGroup<
|
|||
)
|
||||
);
|
||||
container.appendChild(lvcTypeContainer);
|
||||
} else {
|
||||
// Add principal select to label.
|
||||
linkConsoleLabel.appendChild(linkConsoleSelect);
|
||||
container.appendChild(linkConsoleLabel);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -790,7 +794,7 @@ export class LinkConsoleInputGroup extends InputGroup<
|
|||
|
||||
/**
|
||||
* Class to add item to the static Graph item form
|
||||
* This item consists of a label and a color type select.
|
||||
* This item consists of a label and a Image select.
|
||||
* Show Last Value is stored in the showLastValueTooltip property
|
||||
*/
|
||||
export class ImageInputGroup extends InputGroup<Partial<ImageInputGroupProps>> {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,169 @@
|
|||
import { AnyObject, WithModuleProps } from "../lib/types";
|
||||
import { modulePropsDecoder, decodeBase64, stringIsEmpty } from "../lib";
|
||||
import { modulePropsDecoder, decodeBase64, stringIsEmpty, t } from "../lib";
|
||||
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
|
||||
import { InputGroup, FormContainer } from "../Form";
|
||||
|
||||
export type BarsGraphProps = {
|
||||
type: ItemType.BARS_GRAPH;
|
||||
html: string;
|
||||
backgroundColor: "white" | "black" | "transparent";
|
||||
typeGraph: "horizontal" | "vertical";
|
||||
gridColor: string;
|
||||
} & ItemProps &
|
||||
WithModuleProps;
|
||||
|
||||
/**
|
||||
* Extract a valid enum value from a raw unknown value.
|
||||
* @param BarsGraphProps Raw value.
|
||||
*/
|
||||
const parseBarsGraphProps = (
|
||||
backgroundColor: unknown
|
||||
): BarsGraphProps["backgroundColor"] => {
|
||||
switch (backgroundColor) {
|
||||
case "white":
|
||||
case "black":
|
||||
case "transparent":
|
||||
return backgroundColor;
|
||||
default:
|
||||
return "transparent";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract a valid enum value from a raw unknown value.
|
||||
* @param typeGraph Raw value.
|
||||
*/
|
||||
const parseTypeGraph = (typeGraph: unknown): BarsGraphProps["typeGraph"] => {
|
||||
switch (typeGraph) {
|
||||
case "horizontal":
|
||||
case "vertical":
|
||||
return typeGraph;
|
||||
default:
|
||||
return "vertical";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 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.
|
||||
|
|
@ -28,6 +184,9 @@ export function barsGraphPropsDecoder(data: AnyObject): BarsGraphProps | never {
|
|||
html: !stringIsEmpty(data.html)
|
||||
? data.html
|
||||
: decodeBase64(data.encodedHtml),
|
||||
backgroundColor: parseBarsGraphProps(data.backgroundColor),
|
||||
typeGraph: parseTypeGraph(data.typeGraph),
|
||||
gridColor: stringIsEmpty(data.gridColor) ? "#000000" : data.gridColor,
|
||||
...modulePropsDecoder(data) // Object spread. It will merge the properties of the two objects.
|
||||
};
|
||||
}
|
||||
|
|
@ -62,4 +221,26 @@ export default class BarsGraph extends Item<BarsGraphProps> {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @override function to add or remove inputsGroups those that are not necessary.
|
||||
* Add to:
|
||||
* BackgroundColorInputGroup
|
||||
* GridColorInputGroup
|
||||
* TypeGraphInputGroup
|
||||
*/
|
||||
public getFormContainer(): FormContainer {
|
||||
const formContainer = super.getFormContainer();
|
||||
formContainer.addInputGroup(
|
||||
new BackgroundColorInputGroup("backgroundColor-type", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new TypeGraphInputGroup("type-graph", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new GridColorInputGroup("grid-color", this.props)
|
||||
);
|
||||
|
||||
return formContainer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ import {
|
|||
linkedVCPropsDecoder,
|
||||
modulePropsDecoder,
|
||||
decodeBase64,
|
||||
stringIsEmpty
|
||||
stringIsEmpty,
|
||||
t
|
||||
} from "../lib";
|
||||
import Item, {
|
||||
ItemType,
|
||||
|
|
@ -15,11 +16,12 @@ import Item, {
|
|||
itemBasePropsDecoder,
|
||||
LinkConsoleInputGroup
|
||||
} from "../Item";
|
||||
import { FormContainer } from "../Form";
|
||||
import { FormContainer, InputGroup } from "../Form";
|
||||
|
||||
export type DonutGraphProps = {
|
||||
type: ItemType.DONUT_GRAPH;
|
||||
html: string;
|
||||
legendBackgroundColor: string;
|
||||
} & ItemProps &
|
||||
WithModuleProps &
|
||||
LinkedVisualConsoleProps;
|
||||
|
|
@ -46,11 +48,46 @@ export function donutGraphPropsDecoder(
|
|||
html: !stringIsEmpty(data.html)
|
||||
? data.html
|
||||
: decodeBase64(data.encodedHtml),
|
||||
legendBackgroundColor: stringIsEmpty(data.legendBackgroundColor)
|
||||
? "#000000"
|
||||
: data.legendBackgroundColor,
|
||||
...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
|
||||
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 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");
|
||||
|
|
@ -92,6 +129,9 @@ export default class DonutGraph extends Item<DonutGraphProps> {
|
|||
formContainer.addInputGroup(
|
||||
new LinkConsoleInputGroup("link-console", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new LegendBackgroundColorInputGroup("legend-background-color", this.props)
|
||||
);
|
||||
return formContainer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@ import {
|
|||
modulePropsDecoder,
|
||||
parseIntOr,
|
||||
decodeBase64,
|
||||
stringIsEmpty
|
||||
stringIsEmpty,
|
||||
t
|
||||
} from "../lib";
|
||||
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
|
||||
import { InputGroup, FormContainer } from "../Form";
|
||||
|
||||
export type EventsHistoryProps = {
|
||||
type: ItemType.AUTO_SLA_GRAPH;
|
||||
|
|
@ -14,6 +16,53 @@ 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.
|
||||
|
|
@ -75,4 +124,16 @@ export default class EventsHistory extends Item<EventsHistoryProps> {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @override function to add or remove inputsGroups those that are not necessary.
|
||||
* Add to:
|
||||
* MaxTimeInputGroup
|
||||
*/
|
||||
public getFormContainer(): FormContainer {
|
||||
const formContainer = super.getFormContainer();
|
||||
formContainer.addInputGroup(new MaxTimeInputGroup("max-time", this.props));
|
||||
|
||||
return formContainer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ import {
|
|||
linkedVCPropsDecoder,
|
||||
modulePropsDecoder,
|
||||
decodeBase64,
|
||||
stringIsEmpty
|
||||
stringIsEmpty,
|
||||
t,
|
||||
parseIntOr,
|
||||
periodSelector
|
||||
} from "../lib";
|
||||
import Item, {
|
||||
ItemType,
|
||||
|
|
@ -15,15 +18,49 @@ import Item, {
|
|||
itemBasePropsDecoder,
|
||||
LinkConsoleInputGroup
|
||||
} from "../Item";
|
||||
import { FormContainer } from "../Form";
|
||||
import { FormContainer, InputGroup } from "../Form";
|
||||
|
||||
export type ModuleGraphProps = {
|
||||
type: ItemType.MODULE_GRAPH;
|
||||
html: string;
|
||||
backgroundType: "white" | "black" | "transparent";
|
||||
graphType: "line" | "area";
|
||||
period: number | null;
|
||||
} & ItemProps &
|
||||
WithModuleProps &
|
||||
LinkedVisualConsoleProps;
|
||||
|
||||
/**
|
||||
* Extract a valid enum value from a raw unknown value.
|
||||
* @param backgroundType Raw value.
|
||||
*/
|
||||
const parseBackgroundType = (
|
||||
backgroundType: unknown
|
||||
): ModuleGraphProps["backgroundType"] => {
|
||||
switch (backgroundType) {
|
||||
case "white":
|
||||
case "black":
|
||||
case "transparent":
|
||||
return backgroundType;
|
||||
default:
|
||||
return "transparent";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract a valid enum value from a raw unknown value.
|
||||
* @param graphType Raw value.
|
||||
*/
|
||||
const parseGraphType = (graphType: unknown): ModuleGraphProps["graphType"] => {
|
||||
switch (graphType) {
|
||||
case "line":
|
||||
case "area":
|
||||
return graphType;
|
||||
default:
|
||||
return "line";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Build a valid typed object from a raw object.
|
||||
* This will allow us to ensure the type safety.
|
||||
|
|
@ -46,11 +83,137 @@ export function moduleGraphPropsDecoder(
|
|||
html: !stringIsEmpty(data.html)
|
||||
? data.html
|
||||
: decodeBase64(data.encodedHtml),
|
||||
backgroundType: parseBackgroundType(data.backgroundType),
|
||||
period: parseIntOr(data.period, null),
|
||||
graphType: parseGraphType(data.graphType),
|
||||
...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
|
||||
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 backgroundTypeLabel = document.createElement("label");
|
||||
backgroundTypeLabel.textContent = t("Background color");
|
||||
|
||||
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
|
||||
)
|
||||
});
|
||||
});
|
||||
|
||||
backgroundTypeLabel.appendChild(backgroundTypeSelect);
|
||||
|
||||
return backgroundTypeLabel;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 graphTypeLabel = document.createElement("label");
|
||||
graphTypeLabel.textContent = t("Graph Type");
|
||||
|
||||
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)
|
||||
});
|
||||
});
|
||||
|
||||
graphTypeLabel.appendChild(graphTypeSelect);
|
||||
|
||||
return graphTypeLabel;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Document
|
||||
class PeriodInputGroup extends InputGroup<Partial<ModuleGraphProps>> {
|
||||
protected createContent(): HTMLElement | HTMLElement[] {
|
||||
const periodLabel = document.createElement("label");
|
||||
periodLabel.textContent = t("Period");
|
||||
|
||||
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 })
|
||||
);
|
||||
|
||||
periodLabel.appendChild(periodControl);
|
||||
|
||||
return periodLabel;
|
||||
}
|
||||
}
|
||||
|
||||
export default class ModuleGraph extends Item<ModuleGraphProps> {
|
||||
protected createDomElement(): HTMLElement {
|
||||
const element = document.createElement("div");
|
||||
|
|
@ -112,9 +275,21 @@ export default class ModuleGraph extends Item<ModuleGraphProps> {
|
|||
* @override function to add or remove inputsGroups those that are not necessary.
|
||||
* Add to:
|
||||
* LinkConsoleInputGroup
|
||||
* PeriodInputGroup
|
||||
* GraphTypeInputGroup
|
||||
* BackgroundTypeInputGroup
|
||||
*/
|
||||
public getFormContainer(): FormContainer {
|
||||
const formContainer = super.getFormContainer();
|
||||
formContainer.addInputGroup(
|
||||
new BackgroundTypeInputGroup("background-type", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new GraphTypeInputGroup("graph-type", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new PeriodInputGroup("period-graph", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new LinkConsoleInputGroup("link-console", this.props)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ class MaxValueInputGroup extends InputGroup<Partial<PercentileProps>> {
|
|||
class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
|
||||
protected createContent(): HTMLElement | HTMLElement[] {
|
||||
const typeLabel = document.createElement("label");
|
||||
typeLabel.textContent = t("Max Value");
|
||||
typeLabel.textContent = t("Type");
|
||||
|
||||
const options: {
|
||||
value: PercentileProps["percentileType"];
|
||||
|
|
@ -225,11 +225,6 @@ class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
|
|||
const typeSelect = document.createElement("select");
|
||||
typeSelect.required = true;
|
||||
|
||||
typeSelect.value =
|
||||
this.currentData.percentileType ||
|
||||
this.initialData.percentileType ||
|
||||
"progress-bar";
|
||||
|
||||
options.forEach(option => {
|
||||
const optionElement = document.createElement("option");
|
||||
optionElement.value = option.value;
|
||||
|
|
@ -237,6 +232,11 @@ class TypePercentileInputGroup extends InputGroup<Partial<PercentileProps>> {
|
|||
typeSelect.appendChild(optionElement);
|
||||
});
|
||||
|
||||
typeSelect.value =
|
||||
this.currentData.percentileType ||
|
||||
this.initialData.percentileType ||
|
||||
"progress-bar";
|
||||
|
||||
typeSelect.addEventListener("change", event => {
|
||||
this.updateData({
|
||||
percentileType: extractPercentileType(
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ import {
|
|||
linkedVCPropsDecoder,
|
||||
parseIntOr,
|
||||
modulePropsDecoder,
|
||||
replaceMacros
|
||||
replaceMacros,
|
||||
t,
|
||||
periodSelector
|
||||
} from "../lib";
|
||||
import Item, {
|
||||
ItemType,
|
||||
|
|
@ -15,7 +17,7 @@ import Item, {
|
|||
itemBasePropsDecoder,
|
||||
LinkConsoleInputGroup
|
||||
} from "../Item";
|
||||
import { FormContainer } from "../Form";
|
||||
import { FormContainer, InputGroup } from "../Form";
|
||||
|
||||
export type SimpleValueProps = {
|
||||
type: ItemType.SIMPLE_VALUE;
|
||||
|
|
@ -65,6 +67,139 @@ 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";
|
||||
|
||||
switch (valueProcess) {
|
||||
case "avg":
|
||||
case "max":
|
||||
case "min":
|
||||
container.appendChild(this.getPeriodSelector());
|
||||
break;
|
||||
case "none":
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
processSelect.value = valueProcess;
|
||||
|
||||
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.
|
||||
|
|
@ -135,12 +270,16 @@ export default class SimpleValue extends Item<SimpleValueProps> {
|
|||
* @override function to add or remove inputsGroups those that are not necessary.
|
||||
* Add to:
|
||||
* LinkConsoleInputGroup
|
||||
* ProcessInputGroup
|
||||
*/
|
||||
public getFormContainer(): FormContainer {
|
||||
const formContainer = super.getFormContainer();
|
||||
formContainer.addInputGroup(
|
||||
new LinkConsoleInputGroup("link-console", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new ProcessInputGroup("process-operation", this.props)
|
||||
);
|
||||
return formContainer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export function staticGraphPropsDecoder(
|
|||
|
||||
/**
|
||||
* Class to add item to the static Graph item form
|
||||
* This item consists of a label and a color type select.
|
||||
* 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>> {
|
||||
|
|
@ -145,6 +145,7 @@ export default class StaticGraph extends Item<StaticGraphProps> {
|
|||
/**
|
||||
* @override function to add or remove inputsGroups those that are not necessary.
|
||||
* Add to:
|
||||
* ImageInputGroup
|
||||
* ShowLastValueInputGroup
|
||||
* LinkConsoleInputGroup
|
||||
*/
|
||||
|
|
@ -153,12 +154,13 @@ export default class StaticGraph extends Item<StaticGraphProps> {
|
|||
formContainer.addInputGroup(
|
||||
new ImageInputGroup("image-console", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new ShowLastValueInputGroup("show-last-value", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new LinkConsoleInputGroup("link-console", this.props)
|
||||
);
|
||||
formContainer.addInputGroup(
|
||||
new ShowLastValueInputGroup("show-last-value", this.props)
|
||||
);
|
||||
|
||||
return formContainer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue