diff --git a/visual_console/src/items/EventsHistory.ts b/visual_console/src/items/EventsHistory.ts index 25b302c555..4906b27e78 100644 --- a/visual_console/src/items/EventsHistory.ts +++ b/visual_console/src/items/EventsHistory.ts @@ -3,13 +3,19 @@ import { UnknownObject, WithModuleProps } from "../types"; -import { linkedVCPropsDecoder, modulePropsDecoder, parseIntOr } from "../lib"; +import { + linkedVCPropsDecoder, + modulePropsDecoder, + parseIntOr, + decodeBase64, + stringIsEmpty +} from "../lib"; import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item"; export type EventsHistoryProps = { type: ItemType.AUTO_SLA_GRAPH; maxTime: number | null; - data: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any + html: string; } & ItemProps & WithModuleProps & LinkedVisualConsoleProps; @@ -26,11 +32,17 @@ export type EventsHistoryProps = { export function eventsHistoryPropsDecoder( data: UnknownObject ): EventsHistoryProps | never { + if (stringIsEmpty(data.html) || stringIsEmpty(data.encodedHtml)) { + throw new TypeError("missing html content."); + } + return { ...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects. type: ItemType.AUTO_SLA_GRAPH, maxTime: parseIntOr(data.maxTime, null), - data: data.data instanceof Array ? data.data : [], + html: !stringIsEmpty(data.html) + ? data.html + : decodeBase64(data.encodedHtml), ...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. }; @@ -38,6 +50,9 @@ export function eventsHistoryPropsDecoder( export default class EventsHistory extends Item { public createDomElement(): HTMLElement { - throw new Error("not implemented"); + const element = document.createElement("div"); + element.innerHTML = this.props.html; + + return element; } } diff --git a/visual_console/src/lib.spec.ts b/visual_console/src/lib.spec.ts index 4b13babfae..ffe3df13ca 100644 --- a/visual_console/src/lib.spec.ts +++ b/visual_console/src/lib.spec.ts @@ -1,4 +1,11 @@ -import { parseIntOr, notEmptyStringOr, padLeft, prefixedCssRules } from "./lib"; +import { + parseIntOr, + stringIsEmpty, + notEmptyStringOr, + padLeft, + prefixedCssRules, + decodeBase64 +} from "./lib"; describe("function parseIntOr", () => { it("should retrieve valid int or a default value", () => { @@ -12,6 +19,15 @@ describe("function parseIntOr", () => { }); }); +describe("function stringIsEmpty", () => { + it("should check properly if a string is empry or not", () => { + expect(stringIsEmpty()).toBe(true); + expect(stringIsEmpty("")).toBe(true); + expect(stringIsEmpty("foo")).toBe(false); + expect(stringIsEmpty("bar")).toBe(false); + }); +}); + describe("function notEmptyStringOr", () => { it("should retrieve not empty string or a default value", () => { expect(notEmptyStringOr("", null)).toBe(null); @@ -50,3 +66,16 @@ describe("function prefixedCssRules", () => { expect(rules).toHaveLength(5); }); }); + +describe("function decodeBase64", () => { + it("should decode the base64 without errors", () => { + expect(decodeBase64("SGkgSSdtIGRlY29kZWQ=")).toEqual("Hi I'm decoded"); + expect(decodeBase64("Rk9PQkFSQkFa")).toEqual("FOOBARBAZ"); + expect(decodeBase64("eyJpZCI6MSwibmFtZSI6ImZvbyJ9")).toEqual( + '{"id":1,"name":"foo"}' + ); + expect( + decodeBase64("PGRpdj5Cb3ggPHA+UGFyYWdyYXBoPC9wPjxociAvPjwvZGl2Pg==") + ).toEqual("
Box

Paragraph


"); + }); +}); diff --git a/visual_console/src/lib.ts b/visual_console/src/lib.ts index 9a8a064fc2..886d2a373a 100644 --- a/visual_console/src/lib.ts +++ b/visual_console/src/lib.ts @@ -22,6 +22,15 @@ export function parseIntOr(value: any, defaultValue: T): number | T { else return defaultValue; } +/** + * Check if a string exists and it's not empty. + * @param value Value to check. + * @return The check result. + */ +export function stringIsEmpty(value?: string | null): boolean { + return value == null || value.length === 0; +} + /** * Return a not empty string or a default value from a raw value. * @param value Raw value from which we will try to extract a non empty string. @@ -241,3 +250,12 @@ export function prefixedCssRules( `${rule}` ]; } + +/** + * Decode a base64 string. + * @param input Data encoded using base64. + * @return Decoded data. + */ +export function decodeBase64(input: string): string { + return decodeURIComponent(escape(window.atob(input))); +}