Visual Console Refactor: finished the events history item and added new lib functions

Former-commit-id: b54534b7e5a44764622e2f99c18f4f5edc6703f6

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<EventsHistoryProps> {
   public createDomElement(): HTMLElement {
-    throw new Error("not implemented");
+    const element = document.createElement("div");
+    element.innerHTML = this.props.html;
+
+    return element;
   }
 }

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("<div>Box <p>Paragraph</p><hr /></div>");
+  });
+});

visual_console/src/lib.ts

@@ -22,6 +22,15 @@ export function parseIntOr<T>(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)));
+}