Changed trace view to be a table (#337)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>

portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx

@@ -52,6 +52,7 @@ interface IColumns {
   elementKey: string;
   sortable?: boolean;
   renderFunction?: (input: any) => any;
+  renderFullObject?: boolean;
   globalClass?: any;
 }
 
@@ -84,6 +85,7 @@ interface TableWrapperProps {
   selectedItems?: string[];
   stickyHeader?: boolean;
   radioSelection?: boolean;
+  customEmptyMessage?: string;
   paginatorConfig?: IPaginatorConfig;
 }
 
@@ -192,9 +194,11 @@ const rowColumnsMap = (
     const itemElement = isString(itemData)
       ? itemData
       : get(itemData, column.elementKey, null); // If the element is just a string, we render it as it is
+    const renderConst = column.renderFullObject ? itemData : itemElement;
+
     const renderElement = column.renderFunction
-      ? column.renderFunction(itemElement)
-      : itemElement; // If render function is set, we send the value to the function.
+      ? column.renderFunction(renderConst)
+      : renderConst; // If render function is set, we send the value to the function.
     return (
       <TableCell
         key={`tbRE-${column.elementKey}-${index}`}
@@ -246,6 +250,7 @@ const TableWrapper = ({
   classes,
   stickyHeader = false,
   radioSelection = false,
+  customEmptyMessage = "",
   paginatorConfig,
 }: TableWrapperProps) => {
   const findView = itemActions
@@ -385,7 +390,13 @@ const TableWrapper = ({
           </Table>
         ) : (
           <React.Fragment>
-            {!isLoading && <div>{`There are no ${entityName} yet.`}</div>}
+            {!isLoading && (
+              <div>
+                {customEmptyMessage !== ""
+                  ? customEmptyMessage
+                  : `There are no ${entityName} yet.`}
+              </div>
+            )}
           </React.Fragment>
         )}
       </Paper>

portal-ui/src/screens/Console/Trace/Trace.tsx

@@ -26,6 +26,7 @@ import { wsProtocol } from "../../../utils/wsUtils";
 import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";
 import { Grid } from "@material-ui/core";
+import TableWrapper from "../Common/TableWrapper/TableWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -101,20 +102,50 @@ const Trace = ({
       <PageHeader label={"Trace"} />
       <Grid container>
         <Grid item xs={12} className={classes.container}>
-          <div className={classes.logList}>
-            <ul>
-              {messages.map((m) => {
-                return (
-                  <li key={m.key}>
-                    {timeFromDate(m.time)} - {m.api}[{m.statusCode}{" "}
-                    {m.statusMsg}] {m.api} {m.host} {m.client}{" "}
-                    {m.callStats.duration} ↑ {niceBytes(m.callStats.rx + "")} ↓{" "}
-                    {niceBytes(m.callStats.tx + "")}
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+          <TableWrapper
+            itemActions={[]}
+            columns={[
+              {
+                label: "Time",
+                elementKey: "time",
+                renderFunction: (time: Date) => {
+                  const timeParse = new Date(time);
+                  return timeFromDate(timeParse);
+                },
+              },
+              { label: "Name", elementKey: "api" },
+              {
+                label: "Status",
+                elementKey: "",
+                renderFunction: (fullElement: TraceMessage) =>
+                  `${fullElement.statusCode} ${fullElement.statusMsg}`,
+                renderFullObject: true,
+              },
+              {
+                label: "Location",
+                elementKey: "configuration_id",
+                renderFunction: (fullElement: TraceMessage) =>
+                  `${fullElement.host} ${fullElement.client}`,
+                renderFullObject: true,
+              },
+              { label: "Load Time", elementKey: "callStats.duration" },
+              {
+                label: "Upload",
+                elementKey: "callStats.rx",
+                renderFunction: niceBytes,
+              },
+              {
+                label: "Download",
+                elementKey: "callStats.tx",
+                renderFunction: niceBytes,
+              },
+            ]}
+            isLoading={false}
+            records={messages}
+            entityName="Traces"
+            idField="api"
+            customEmptyMessage="There are no traced Elements yet"
+          />
         </Grid>
       </Grid>
     </React.Fragment>