hasura · rikinsk-zz · Aug 9, 2019 · Jul 29, 2019 · Jul 29, 2019 · Jul 30, 2019
@@ -2,28 +2,27 @@
   border: 0;
 }
 
+.ReactTable.-fit-content,
+.ReactTable.-fit-content .rt-table {
+  width: fit-content;
+  max-width: 100%;
+}
+
 .ReactTable .rt-tbody {
-  min-height: 40px;
+  min-height: 32px;
   overflow: unset;
 }
 
 .ReactTable .rt-noData {
-  padding: 5px;
-  top: 62px;
+  padding: 0;
+  top: 48px;
   background: none;
 }
 
-.ReactTable .-pagination .-btn {
-  height: 35px !important;
-  width: 40%;
-  display: inline-block;
-  font-weight: bold;
-}
-
 .ReactTable .rt-thead {
   font-size: 16px;
   color: #333;
-  background-color: #ddd;
+  background-color: #f2f2f2;
   cursor: pointer;
   text-align: left;
 }
@@ -50,6 +49,18 @@
   border: none;
 }
 
+.ReactTable .-pagination .-center {
+  flex: unset;
+}
+
+.ReactTable .-pagination .-btn {
+  height: 35px !important;
+  width: 40%;
+  min-width: 65px;
+  display: inline-block;
+  font-weight: bold;
+}
+
 .ReactTable .rt-table .rt-thead .rt-th,
 .ReactTable .rt-table .rt-thead .rt-td {
   padding-left: 20px !important;
@@ -65,7 +76,7 @@
 
 .ReactTable .rt-tbody .rt-th,
 .ReactTable .rt-tbody .rt-td {
-  padding: 8px;
+  padding: 4px 8px;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   word-wrap: break-word;
 }
@@ -79,6 +90,19 @@
   text-overflow: ellipsis;
 }
 
+.ReactTable .rt-table .rt-tr.-even {
+  background-color: #f4f4f4;
+}
+
+.ReactTable .rt-table .rt-tr.-odd {
+  background-color: #ffffff;
+}
+
+.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-even:hover,
+.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-odd:hover {
+  background-color: #ebf7de;
+}
+
 .ReactTable .rt-table .rt-thead .rt-tr .rt-th {
   background-color: #f2f2f2 !important;
   color: #4d4d4d;
@@ -87,24 +111,12 @@
   text-align: left;
 }
 
-.ReactTable .rt-table .rt-thead .rt-tr .rt-th:first-child {
-  flex: 24 0 auto !important;
-  min-width: 170px;
-}
-
-.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-odd .rt-td:first-child {
-  flex: 24 0 auto !important;
-  min-width: 170px;
-}
-
+.ReactTable .rt-table .rt-thead .rt-tr .rt-th:first-child,
+.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-odd .rt-td:first-child,
 .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-even .rt-td:first-child {
   flex: 24 0 auto !important;
-  min-width: 170px;
 }
 
-.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-odd:hover {
-  background-color: #ebf7de;
-}
 .ReactTable .rt-table {
   overflow: unset;
 }
@@ -128,10 +140,6 @@
   border-bottom: solid 1px rgba(0, 0, 0, 0.05);
 }
 
-.ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-even:hover {
-  background-color: #ebf7de;
-}
-
 .ReactTable .rt-table .rt-tbody {
   overflow-x: unset !important;
   min-width: fit-content !important;

@@ -63,18 +63,18 @@
 .table {
   width: auto;
 
-  thead {
-    background: #333;
-    color: #ddd;
+  tr:nth-child(even) {
+    background: #f4f4f4
   }
 
   th {
-    min-width: 100px;
+    //min-width: 100px;
     font-weight: 300;
   }
 
-  td {
-    max-width: 300px;
+  tbody > tr > td {
+    padding: 4px 8px;
+    max-width: 600px;
     white-space: pre;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -190,5 +190,5 @@ a.expanded {
 }
 
 .tableCellExpanded {
-  white-space: normal;
+  white-space: pre-wrap;
 }
@@ -177,7 +177,7 @@ class FilterQuery extends Component {
     const { dispatch, whereAnd, tableSchema, orderBy } = this.props; // eslint-disable-line no-unused-vars
     const styles = require('../../../Common/FilterQuery/FilterQuery.scss');
     return (
-      <div>
+      <div className={styles.add_mar_top}>
         <form
           onSubmit={e => {
             e.preventDefault();

@@ -87,7 +87,7 @@ const ViewRows = ({
       _curRelName &&
       parentTableSchema &&
       parentTableSchema.relationships.find(
-        r => r.name === _curRelName && r.rel_type === 'object'
+        r => r.rel_name === _curRelName && r.rel_type === 'object'
       )
     ) {
       // Am I an obj_rel for my parent?
@@ -106,10 +106,69 @@ const ViewRows = ({
   const getGridHeadings = (_columns, _relationships) => {
     const _gridHeadings = [];
 
+    const getColWidth = (header, contentRows = []) => {
+      const MAX_WIDTH = 600;
+      const HEADER_PADDING = 42;
+      const CONTENT_PADDING = 18;
+      const HEADER_FONT = 'bold 16px Gudea';
+      const CONTENT_FONT = '14px Gudea';
+
+      const getTextWidth = (text, font) => {
+        // Doesn't work well with non-monospace fonts
+        // const CHAR_WIDTH = 8;
+        // return text.length * CHAR_WIDTH;
+
+        // if given, use cached canvas for better performance
+        // else, create new canvas
+        const canvas =
+          getTextWidth.canvas ||
+          (getTextWidth.canvas = document.createElement('canvas'));
+
+        const context = canvas.getContext('2d');
+        context.font = font;
+
+        const metrics = context.measureText(text);
+        return metrics.width;
+      };
+
+      let maxContentWidth = 0;
+      for (let i = 0; i < contentRows.length; i++) {
+        if (contentRows[i] !== undefined && contentRows[i][header] !== null) {
+          const content = contentRows[i][header];
+
+          let contentString;
+          if (content === null || content === undefined) {
+            contentString = 'NULL';
+          } else if (typeof content === 'object') {
+            contentString = JSON.stringify(content, null, 4);
+          } else {
+            contentString = content.toString();
+          }
+
+          const currLength = getTextWidth(contentString, CONTENT_FONT);
+
+          if (currLength > maxContentWidth) {
+            maxContentWidth = currLength;
+          }
+        }
+      }
+
+      const maxContentCellWidth = maxContentWidth + CONTENT_PADDING;
+
+      const headerCellWidth =
+        getTextWidth(header, HEADER_FONT) + HEADER_PADDING;
+
+      return Math.min(
+        MAX_WIDTH,
+        Math.max(maxContentCellWidth, headerCellWidth)
+      );
+    };
+
     _gridHeadings.push({
       Header: '',
       accessor: 'tableRowActionButtons',
       id: 'tableRowActionButtons',
+      width: 152,
     });
 
     _columns.map(col => {
@@ -137,6 +196,7 @@ const ViewRows = ({
         accessor: columnName,
         id: columnName,
         foldable: true,
+        width: getColWidth(columnName, curRows),
       });
     });
 
@@ -152,6 +212,7 @@ const ViewRows = ({
         accessor: relName,
         id: relName,
         foldable: true,
+        width: getColWidth(relName),
       });
     });
 
@@ -423,13 +484,10 @@ const ViewRows = ({
           } else if (rowColumnValue === undefined) {
             cellValue = 'NULL';
             cellTitle = cellValue;
-          } else if (col.data_type === 'json' || col.data_type === 'jsonb') {
-            cellValue = JSON.stringify(rowColumnValue);
+          } else if (typeof rowColumnValue === 'object') {
+            cellValue = JSON.stringify(rowColumnValue, null, 4);
             cellTitle = cellValue;
           } else {
-            /*
-             * This will render [object Object] if the state is not common data types
-             * */
             cellValue = rowColumnValue.toString();
             cellTitle = cellValue;
           }
@@ -596,10 +654,13 @@ const ViewRows = ({
         const rel = tableSchema.relationships.find(r => r.rel_name === cq.name);
 
         if (rel) {
+          const isObjectRel = rel.rel_type === 'object';
+
           let childRows = curRows[0][cq.name];
-          if (rel.rel_type === 'object') {
+          if (isObjectRel) {
             childRows = [childRows];
           }
+
           // Find the name of this childTable using the rel
           return (
             <ViewRows
@@ -753,7 +814,7 @@ const ViewRows = ({
 
     return (
       <DragFoldTable
-        className="-highlight"
+        className="-highlight -fit-content"
         data={_gridRows}
         columns={_gridHeadings}
         resizable
@@ -762,8 +823,8 @@ const ViewRows = ({
         minRows={0}
         getTheadThProps={getTheadThProps}
         getResizerProps={getResizerProps}
-        showPagination={count > curFilter.limit}
-        defaultPageSize={Math.min(curFilter.limit, count)}
+        showPagination={!isSingleRow}
+        pageSize={curFilter.limit}
         pages={Math.ceil(count / curFilter.limit)}
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
@@ -781,8 +842,7 @@ const ViewRows = ({
   return (
     <div className={isVisible ? '' : 'hide '}>
       {getFilterQuery()}
-      <hr />
-      <div className="row">
+      <div className={`row ${styles.add_mar_top}`}>
         <div className="col-xs-12">
           <div className={styles.tableContainer}>{renderTableBody()}</div>
           <br />

@@ -231,7 +231,7 @@ class ViewTable extends Component {
     let comment = null;
     if (tableSchema.comment) {
       comment = (
-        <div className={styles.mar_bottom}>
+        <div className={styles.add_mar_top}>
           <div className={styles.commentText + ' alert alert-warning'}>
             {tableSchema.comment}
           </div>
@@ -242,7 +242,6 @@ class ViewTable extends Component {
     return (
       <div>
         {header}
-        <br />
         {comment}
         <div>{viewRows}</div>
       </div>

@@ -1,14 +1,26 @@
-@import "../../../Common/TableCommon/ReactTableOverrides.css";
+@import '../../../Common/TableCommon/ReactTableOverrides.css';
 
 .eventsTableBody .ReactTable .rt-table .rt-thead .rt-tr .rt-th:first-child {
   min-width: 75px;
 }
 
-.eventsTableBody .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-odd .rt-td:first-child {
+.eventsTableBody
+  .ReactTable
+  .rt-table
+  .rt-tbody
+  .rt-tr-group
+  .rt-tr.-odd
+  .rt-td:first-child {
   min-width: 75px;
 }
 
-.eventsTableBody .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-even .rt-td:first-child {
+.eventsTableBody
+  .ReactTable
+  .rt-table
+  .rt-tbody
+  .rt-tr-group
+  .rt-tr.-even
+  .rt-td:first-child {
   min-width: 75px;
 }
 
@@ -38,12 +50,6 @@
 .processedEventsTable .invocationsFailure {
   color: red;
 }
-.streamingLogs .ReactTable {
-  // max-height: 350px;
-}
-.streamingLogs .ReactTable .rt-thead.-header {
-  // display: none;
-}
 .streamingLogs .ReactTable .rt-table .rt-thead .rt-tr .rt-th:nth-child(2) {
   width: 100px;
   max-width: 100px;