1 files changed, 205 insertions, 0 deletions
diff --git a/sdnr/wt-odlux/odlux/framework/src/components/objectDump/index.tsx b/sdnr/wt-odlux/odlux/framework/src/components/objectDump/index.tsx
new file mode 100644
index 000000000..10a0547be
--- /dev/null
+++ b/sdnr/wt-odlux/odlux/framework/src/components/objectDump/index.tsx
@@ -0,0 +1,205 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as React from "react";
+import makeStyles from '@mui/styles/makeStyles';
+
+export const getTypeName = (obj: any): string => {
+  if (obj == null) {
+    return obj === undefined ? "Undefined" : "Null";
+  }
+  return Object.prototype.toString.call(obj).slice(8, -1);
+};
+
+const isObjectLike = (obj: any) => {
+  return typeof obj === "object" && obj !== null;
+};
+
+const isBoolean = (obj: any) => {
+  return obj === true || obj === false ||
+    (isObjectLike(obj) && getTypeName(obj) === "Boolean");
+};
+
+const isNumber = (obj: any) => {
+  return typeof obj === "number" ||
+    (isObjectLike(obj) && getTypeName(obj) === "Number");
+};
+
+const isString = (obj: any) => {
+  return typeof obj === "string" ||
+    (isObjectLike(obj) && getTypeName(obj) === "String");
+};
+
+const isNull = (obj: any) => {
+  return obj === null;
+};
+
+const isDate = (obj: any): boolean => {
+  return isObjectLike(obj) && (obj instanceof Date);
+};
+
+const useSimpleTableStyles = makeStyles({
+  root: {
+  },
+  table: {
+    fontFamily: "verdana, arial, helvetica, sans-serif",
+    borderSpacing: "3px",
+    borderCollapse: "separate",
+    marginLeft: "30px"
+  },
+  label: {
+    cursor: "pointer",
+  },
+  th: {
+    textAlign: "left",
+    color: "white",
+    padding: "5px",
+    backgroundColor: "#cccccc",
+
+  },
+  td: {
+    verticalAlign: "top",
+    padding: "0.5rem 1rem",
+    border: "2px solid #DDD"
+  },
+  object: {
+  },
+  objectTh: {
+    backgroundColor: "#cccccc",
+  },
+  objectTd: {
+    padding: "0.5rem 1rem",
+    border: "2px solid #DDD"
+  },
+  chevron: {
+    '&:before': {
+      borderStyle: 'solid',
+      borderWidth: '0.25em 0.25em 0 0',
+      content: '\'\'',
+      display: 'inline-block',
+      height: '0.45em',
+      left: '0.15em',
+      position: 'relative',
+      top: '0.15em',
+      transform: 'rotate(-45deg)',
+      transition: 'all 0.3s',
+      verticalAlign: 'top',
+      width: '0.45em',
+    }
+
+  },
+    right: {
+    '&:before': {
+      left: '0',
+      transform: 'rotate(45deg)',
+    }
+  },
+  bottom: {
+    '&:before': {
+      left: '0',
+      transform: 'rotate(135deg)',
+    }
+  },
+});
+
+
+type SimpleTableProps = {
+  classNameTh?: string;
+  label?: JSX.Element | string | null;
+  cols?: number;
+  expand?: boolean;
+  ariaLabel?: string;
+}
+
+const SimpleTable: React.FC<SimpleTableProps> = (props) => {
+  const { label = '', cols = 2, expand = true, classNameTh, children } = props;
+  const [isExpanded, setIsExpanded] = React.useState(expand);
+
+  const classes = useSimpleTableStyles();
+
+  React.useEffect(() => {
+    setIsExpanded(expand);
+  }, [expand]);
+
+  const handleClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <table className={`${classes.root} ${classes.table}`} aria-label={props.ariaLabel? props.ariaLabel+'-table' : 'table'}>
+      {label && (<thead>
+        <tr aria-label={props.ariaLabel? props.ariaLabel+'-title-row' : 'title row'}>
+          <th className={`${classes.th} ${classes.label} ${classNameTh ? classNameTh : ''}`} colSpan={cols} onClick={handleClick}>
+            <span className={`${classes.chevron} ${isExpanded ? classes.bottom : classes.right }`}></span> { label }
+          </th>
+        </tr>
+      </thead>) || null
+      }
+      {isExpanded && <tbody >{children}</tbody> || null}
+    </table>
+  );
+};
+
+
+type ObjectRendererProps = {
+  className?: string;
+  label?: JSX.Element | string | null;
+  expand?: boolean;
+  object: { [key: string]: any };
+  ariaLabel?: string;
+};
+
+const ObjectRenderer: React.FC<ObjectRendererProps> = (props) => {
+  const { object, className, label = 'Object', expand = true } = props;
+  const classes = useSimpleTableStyles();
+
+  return (
+    <SimpleTable ariaLabel={props.ariaLabel} classNameTh={classes.objectTh} label={getTypeName(object) || label} expand={expand}>
+      {
+        Object.keys(object).map(key => {
+          return (
+            <tr key={String(key)} aria-label={props.ariaLabel? props.ariaLabel+'-row': 'row'}>
+              <td className={`${classes.td} ${classes.objectTd}`} aria-label="object-title">{String(key)} </td>
+              <td className={`${classes.td}`} aria-label="object-details">{renderObject(object[key], "sub-element")}</td>
+            </tr>
+          );
+        })
+      }
+    </SimpleTable>
+  );
+};
+
+
+type ArrayRendererProps = {
+  label?: JSX.Element | string | null;
+  extraRenderer?: { [label: string]: React.ComponentType<{ label?: JSX.Element | string | null; object: any; }> };
+  description?: string;
+  object: any;
+};
+
+const ArrayRenderer: React.FC<ArrayRendererProps> = (props) => {
+
+  return null;
+};
+
+export const renderObject = (object: any, ariaLabel?: string): JSX.Element | string => {
+  if (isString(object) || isNumber(object) || isBoolean(object)) {
+    return String(object);
+  }
+  return <ObjectRenderer object={object} ariaLabel={ariaLabel} />;
+};