diff --git a/visual_console/playground/index.html b/visual_console/playground/index.html
index 189b0ed656..4cd72a7ec2 100644
--- a/visual_console/playground/index.html
+++ b/visual_console/playground/index.html
@@ -7,6 +7,11 @@
+
@@ -19,8 +24,8 @@
id: 1,
groupId: 0,
name: "Test Visual Console",
- width: 800,
- height: 300,
+ width: 1000,
+ height: 400,
backgroundURL: null,
backgroundColor: "rgb(86, 86, 86)",
isFavorite: false
@@ -185,6 +190,44 @@
color: "white"
};
+ var labelRawProps = {
+ // Generic props.
+ id: 8,
+ type: 4, // Label = 4
+ label: 'I\'m a label
',
+ isLinkEnabled: false,
+ isOnTop: false,
+ parentId: null,
+ aclGroupId: null,
+ // Position props.
+ x: 410,
+ y: 0,
+ // Size props.
+ width: 200,
+ height: 200
+ };
+
+ var simpleValueRawProps = {
+ // Generic props.
+ id: 9,
+ type: 2, // Simple value = 2
+ label: 'Simple Value: 10
',
+ isLinkEnabled: false,
+ isOnTop: false,
+ parentId: null,
+ aclGroupId: null,
+ // Position props.
+ x: 10,
+ y: 10,
+ // Size props.
+ width: 50,
+ height: 50,
+ // Custom props.
+ valueType: "string",
+ value: "10",
+ processValue: "none"
+ };
+
var items = [
staticGraphRawProps,
colorCloudRawProps,
@@ -192,7 +235,9 @@
digitalClockRawProps2,
analogicClockRawProps,
boxRawProps,
- lineRawProps
+ lineRawProps,
+ labelRawProps,
+ simpleValueRawProps
];
try {
diff --git a/visual_console/src/VisualConsole.ts b/visual_console/src/VisualConsole.ts
index 0b834d9ee3..3f627790c3 100644
--- a/visual_console/src/VisualConsole.ts
+++ b/visual_console/src/VisualConsole.ts
@@ -13,6 +13,8 @@ import Group, { groupPropsDecoder } from "./items/Group";
import Clock, { clockPropsDecoder } from "./items/Clock";
import Box, { boxPropsDecoder } from "./items/Box";
import Line, { linePropsDecoder } from "./items/Line";
+import Label, { labelPropsDecoder } from "./items/Label";
+import SimpleValue, { simpleValuePropsDecoder } from "./items/SimpleValue";
// Base properties.
export interface VisualConsoleProps extends Size {
@@ -82,15 +84,14 @@ function itemInstanceFrom(data: UnknownObject) {
case ItemType.SIMPLE_VALUE_MAX:
case ItemType.SIMPLE_VALUE_MIN:
case ItemType.SIMPLE_VALUE_AVG:
- throw new TypeError("item not found");
+ return new SimpleValue(simpleValuePropsDecoder(data));
case ItemType.PERCENTILE_BAR:
- throw new TypeError("item not found");
- case ItemType.LABEL:
- throw new TypeError("item not found");
- case ItemType.ICON:
- return new Icon(iconPropsDecoder(data));
case ItemType.PERCENTILE_BUBBLE:
throw new TypeError("item not found");
+ case ItemType.LABEL:
+ return new Label(labelPropsDecoder(data));
+ case ItemType.ICON:
+ return new Icon(iconPropsDecoder(data));
case ItemType.SERVICE:
throw new TypeError("item not found");
case ItemType.GROUP_ITEM:
@@ -102,11 +103,8 @@ function itemInstanceFrom(data: UnknownObject) {
case ItemType.AUTO_SLA_GRAPH:
throw new TypeError("item not found");
case ItemType.CIRCULAR_PROGRESS_BAR:
- throw new TypeError("item not found");
case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
- throw new TypeError("item not found");
case ItemType.DONUT_GRAPH:
- throw new TypeError("item not found");
case ItemType.BARS_GRAPH:
throw new TypeError("item not found");
case ItemType.CLOCK:
diff --git a/visual_console/src/items/Label.ts b/visual_console/src/items/Label.ts
index 0f67473dcc..9395653499 100644
--- a/visual_console/src/items/Label.ts
+++ b/visual_console/src/items/Label.ts
@@ -26,6 +26,10 @@ export function labelPropsDecoder(data: UnknownObject): LabelProps | never {
export default class Label extends Item {
public createDomElement(): HTMLElement {
- throw new Error("not implemented");
+ const element = document.createElement("div");
+ element.className = "label";
+ element.innerHTML = this.props.label || "";
+
+ return element;
}
}
diff --git a/visual_console/src/items/SimpleValue.ts b/visual_console/src/items/SimpleValue.ts
index 2f0eb5ca9e..8b5116a044 100644
--- a/visual_console/src/items/SimpleValue.ts
+++ b/visual_console/src/items/SimpleValue.ts
@@ -89,6 +89,17 @@ export function simpleValuePropsDecoder(
export default class SimpleValue extends Item {
public createDomElement(): HTMLElement {
- throw new Error("not implemented");
+ const element = document.createElement("div");
+ element.className = "simple-value";
+
+ if (this.props.valueType === "image") {
+ const img = document.createElement("img");
+ img.src = this.props.value;
+ element.append(img);
+ } else {
+ element.innerHTML = this.props.label || "";
+ }
+
+ return element;
}
}