这是indexloc提供的服务,不要输入任何密码
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
15894ff
update table looks
rikinsk Jul 29, 2019
9b93a80
Merge branch 'master' into console-table
rikinsk Jul 29, 2019
222ab27
aset Col Width
rikinsk Jul 30, 2019
b9c88fb
set rel widths
rikinsk Jul 30, 2019
572fd6b
fix filter for obj rel + no result style + width of action btns
rikinsk Jul 31, 2019
c189722
style RawSQL result table + set browse rows table width
rikinsk Jul 31, 2019
0a14fdc
rawSql table content padding
rikinsk Jul 31, 2019
46b0119
react tabel header background same as content
rikinsk Jul 31, 2019
61b8164
fix min table width
rikinsk Jul 31, 2019
3e483b5
Merge branch 'master' into console-table
rikinsk Jul 31, 2019
e81e8b5
optimise first col widht
rikinsk Jul 31, 2019
6766fe8
Merge branch 'console-table' of github.com:rikinsk/graphql-engine int…
rikinsk Jul 31, 2019
68b5daa
fix typo
rikinsk Jul 31, 2019
99f1dd1
improve fit-content css
rikinsk Jul 31, 2019
0d6ce56
content pre-wrap on expansion
rikinsk Jul 31, 2019
ea878ea
set max pagination width
rikinsk Jul 31, 2019
0dbd0a1
.
rikinsk Jul 31, 2019
767aaa1
format json data
rikinsk Aug 1, 2019
34468d0
Merge branch 'master' into console-table
rikinsk Aug 2, 2019
cda7caf
.
rikinsk Aug 2, 2019
d12e9cd
Merge branch 'master' into console-table
rikinsk Aug 2, 2019
5718dac
Merge branch 'console-table' of github.com:rikinsk/graphql-engine int…
rikinsk Aug 2, 2019
15375da
update hover colour
rikinsk Aug 7, 2019
f47271f
Merge branch 'master' into console-table
rikinsk Aug 7, 2019
727d5d9
Merge branch 'master' into console-table
rikinsk Aug 9, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 38 additions & 30 deletions console/src/components/Common/TableCommon/ReactTableOverrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down
14 changes: 7 additions & 7 deletions console/src/components/Common/TableCommon/Table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -190,5 +190,5 @@ a.expanded {
}

.tableCellExpanded {
white-space: normal;
white-space: pre-wrap;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
84 changes: 72 additions & 12 deletions console/src/components/Services/Data/TableBrowseRows/ViewRows.js
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand All @@ -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 => {
Expand Down Expand Up @@ -137,6 +196,7 @@ const ViewRows = ({
accessor: columnName,
id: columnName,
foldable: true,
width: getColWidth(columnName, curRows),
});
});

Expand All @@ -152,6 +212,7 @@ const ViewRows = ({
accessor: relName,
id: relName,
foldable: true,
width: getColWidth(relName),
});
});

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -753,7 +814,7 @@ const ViewRows = ({

return (
<DragFoldTable
className="-highlight"
className="-highlight -fit-content"
data={_gridRows}
columns={_gridHeadings}
resizable
Expand All @@ -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}
Expand All @@ -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 />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -242,7 +242,6 @@ class ViewTable extends Component {
return (
<div>
{header}
<br />
{comment}
<div>{viewRows}</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}

Expand Down Expand Up @@ -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;
Expand Down