Merge pull request #5429 from influxdata/fix/text-formatting

fix(ui): fixed table bug that was forcing long values to one line
pull/5430/head
Ariel Salem 2020-03-24 10:35:10 -07:00 committed by GitHub
commit 8c21b22079
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 149 additions and 30 deletions

View File

@ -3,6 +3,7 @@
### Bug Fixes
1. [#5426](https://github.com/influxdata/chronograf/pull/5426): Update Flux functions for latest Flux version.
1. [#5429](https://github.com/influxdata/chronograf/pull/5429): Updated Table results to output formatted strings rather than as single-line values
### Features

View File

@ -83,6 +83,7 @@
"node-sass": "^4.13.0",
"parcel": "^1.10.1",
"prettier": "1.12.1",
"sass": "^1.26.3",
"ts-jest": "^23.10.3",
"tslib": "^1.9.0",
"tslint": "^5.9.1",

View File

@ -305,11 +305,11 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
return (
<AutoSizer>
{({width, height}) => (
{({width}) => (
<FancyScrollbar
style={{
width,
height: this.props.height - ROW_HEIGHT,
height: this.props.height,
}}
autoHide={true}
scrollTop={this.state.scrollTop}
@ -322,14 +322,14 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
cellRenderer={this.cellRendererBottomLeftGrid}
className={this.props.classNameBottomLeftGrid}
columnCount={fixedColumnCount}
height={height}
height={this.props.height}
ref={this.bottomLeftGridRef}
rowCount={calculatedRowCount}
rowHeight={ROW_HEIGHT}
rowHeight={this.props.height}
columnWidth={columnWidth}
style={{
overflowY: 'hidden',
height: calculatedRowCount * ROW_HEIGHT,
height: this.props.height,
position: 'absolute',
}}
tabIndex={null}
@ -364,12 +364,12 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
return (
<AutoSizer>
{({width, height}) => (
{({width}) => (
<FancyScrollbar
style={{
marginLeft: leftWidth,
width: this.props.width - leftWidth,
height: this.props.height - ROW_HEIGHT,
height: this.props.height,
}}
autoHide={true}
scrollTop={scrollTop}
@ -383,15 +383,15 @@ class MultiGrid extends React.PureComponent<PropsMultiGrid, State> {
columnCount={Math.max(0, columnCount - fixedColumnCount)}
columnWidth={this.columnWidthRightGrid}
overscanRowCount={100}
height={height}
height={this.props.height}
ref={this.bottomRightGridRef}
onScroll={this.onGridScroll}
rowCount={calculatedRowCount}
rowHeight={ROW_HEIGHT}
rowHeight={this.props.height}
scrollToRow={scrollToRow - fixedRowCount}
style={{
overflowY: 'hidden',
height: calculatedRowCount * ROW_HEIGHT + SCROLLBAR_SIZE_BUFFER,
height: SCROLLBAR_SIZE_BUFFER + ROW_HEIGHT + this.props.height,
}}
width={width - leftWidth}
/>

View File

@ -87,7 +87,6 @@ interface State {
@ErrorHandling
class TableGraph extends PureComponent<Props, State> {
private gridContainer: HTMLDivElement
private multiGrid?: MultiGrid
constructor(props: Props) {
@ -116,7 +115,6 @@ class TableGraph extends PureComponent<Props, State> {
return (
<div
className={this.tableContainerClassName}
ref={gridContainer => (this.gridContainer = gridContainer)}
onMouseLeave={this.handleMouseLeave}
>
{rowCount > 0 && (
@ -147,7 +145,10 @@ class TableGraph extends PureComponent<Props, State> {
onMount={this.handleMultiGridMount}
fixedColumnCount={fixedColumnCount}
classNameBottomRightGrid="table-graph--scroll-window"
columnWidth={this.calculateColumnWidth(columnWidth)}
columnWidth={this.calculateColumnWidth(
columnWidth,
adjustedWidth
)}
/>
)}
</ColumnSizer>
@ -287,16 +288,6 @@ class TableGraph extends PureComponent<Props, State> {
return this.columnCount
}
private get tableWidth(): number {
let tableWidth = 0
if (this.gridContainer && this.gridContainer.clientWidth) {
tableWidth = this.gridContainer.clientWidth
}
return tableWidth
}
private handleUpdateFieldOptions = (fieldOptions: FieldOption[]): void => {
const {onUpdateFieldOptions} = this.props
@ -406,9 +397,12 @@ class TableGraph extends PureComponent<Props, State> {
this.props.onSort(clickedFieldName)
}
private calculateColumnWidth = (columnSizerWidth: number) => (column: {
index: number
}): number => {
// adjustedWidth is the size of the table
// columnSizerWidth is the size of the table / the amount of columns
private calculateColumnWidth = (
columnSizerWidth: number,
adjustedWidth: number
) => (column: {index: number}): number => {
const {index} = column
const {
@ -422,11 +416,17 @@ class TableGraph extends PureComponent<Props, State> {
const original = columnWidths[columnLabel]
if (original > adjustedWidth) {
// if the original calculated size of the column is greater than the table size
// use the table size - half the average column size to determine the size of the column
return adjustedWidth - columnSizerWidth / 2
}
if (this.fixFirstColumn && index === 0) {
return original
}
if (this.tableWidth <= totalColumnWidths) {
if (adjustedWidth <= totalColumnWidths) {
return original
}
@ -434,7 +434,7 @@ class TableGraph extends PureComponent<Props, State> {
return columnSizerWidth
}
const difference = this.tableWidth - totalColumnWidths
const difference = adjustedWidth - totalColumnWidths
const increment = difference / this.computedColumnCount
return original + increment

View File

@ -14,6 +14,19 @@
overflow: hidden;
}
// removes default styling for scrollbar
.table-graph-cell::-webkit-scrollbar-track {
border: none;
}
.table-graph-cell::-webkit-scrollbar {
width: 0;
}
.table-graph-cell::-webkit-scrollbar-thumb {
border: none;
}
.table-graph-cell {
user-select: text !important;
-o-user-select: text !important;
@ -25,8 +38,8 @@
font-weight: 500;
color: $g12-forge;
border: 1px solid $g5-pepper;
overflow: hidden;
white-space: nowrap;
overflow-y: scroll;
white-space: pre-line;
text-overflow: ellipsis;
&__highlight-row {

View File

@ -1094,6 +1094,14 @@ anymatch@^2.0.0:
micromatch "^3.1.4"
normalize-path "^2.1.1"
anymatch@~3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
dependencies:
normalize-path "^3.0.0"
picomatch "^2.0.4"
append-transform@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
@ -1585,6 +1593,11 @@ binary-extensions@^1.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
integrity sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==
binary-extensions@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
bindings@~1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.2.1.tgz#14ad6113812d2d37d72e67b4cacb4bb726505f11"
@ -1661,6 +1674,13 @@ braces@^2.3.0, braces@^2.3.1:
split-string "^3.0.2"
to-regex "^3.0.1"
braces@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
dependencies:
fill-range "^7.0.1"
brfs@^1.2.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/brfs/-/brfs-1.6.1.tgz#b78ce2336d818e25eea04a0947cba6d4fb8849c3"
@ -1995,6 +2015,21 @@ cheerio@^1.0.0-rc.2:
lodash "^4.15.0"
parse5 "^3.0.1"
"chokidar@>=2.0.0 <4.0.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
dependencies:
anymatch "~3.1.1"
braces "~3.0.2"
glob-parent "~5.1.0"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.3.0"
optionalDependencies:
fsevents "~2.1.2"
chokidar@^2.0.0, chokidar@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
@ -3918,6 +3953,13 @@ fill-range@^4.0.0:
repeat-string "^1.6.1"
to-regex-range "^2.1.0"
fill-range@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
dependencies:
to-regex-range "^5.0.1"
finalhandler@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
@ -4059,6 +4101,11 @@ fsevents@^1.2.2, fsevents@^1.2.3:
nan "^2.9.2"
node-pre-gyp "^0.10.0"
fsevents@~2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
fstream@^1.0.0, fstream@^1.0.2:
version "1.0.11"
resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
@ -4176,6 +4223,13 @@ glob-parent@^3.1.0:
is-glob "^3.1.0"
path-dirname "^1.0.0"
glob-parent@~5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
dependencies:
is-glob "^4.0.1"
glob-to-regexp@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
@ -4712,6 +4766,13 @@ is-binary-path@^1.0.0:
dependencies:
binary-extensions "^1.0.0"
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
dependencies:
binary-extensions "^2.0.0"
is-boolean-object@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
@ -4884,6 +4945,13 @@ is-glob@^4.0.0:
dependencies:
is-extglob "^2.1.1"
is-glob@^4.0.1, is-glob@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
dependencies:
is-extglob "^2.1.1"
is-hexadecimal@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz#b6e710d7d07bb66b98cb8cece5c9b4921deeb835"
@ -4913,6 +4981,11 @@ is-number@^4.0.0:
resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
is-number@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
is-obj@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@ -6457,6 +6530,11 @@ normalize-path@^2.0.1, normalize-path@^2.1.1:
dependencies:
remove-trailing-separator "^1.0.1"
normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
normalize-range@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
@ -6993,6 +7071,11 @@ physical-cpu-count@^2.0.0:
resolved "https://registry.yarnpkg.com/physical-cpu-count/-/physical-cpu-count-2.0.0.tgz#18de2f97e4bf7a9551ad7511942b5496f7aba660"
integrity sha1-GN4vl+S/epVRrXURlCtUlverpmA=
picomatch@^2.0.4, picomatch@^2.0.7:
version "2.2.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
pify@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -8101,6 +8184,13 @@ readdirp@^2.0.0:
micromatch "^3.1.10"
readable-stream "^2.0.2"
readdirp@~3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
dependencies:
picomatch "^2.0.7"
realistic-structured-clone@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/realistic-structured-clone/-/realistic-structured-clone-2.0.2.tgz#2f8ec225b1f9af20efc79ac96a09043704414959"
@ -8626,6 +8716,13 @@ sass-graph@^2.2.4:
scss-tokenizer "^0.2.3"
yargs "^7.0.0"
sass@^1.26.3:
version "1.26.3"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"
integrity sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==
dependencies:
chokidar ">=2.0.0 <4.0.0"
sax@^1.2.1, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@ -9384,6 +9481,13 @@ to-regex-range@^2.1.0:
is-number "^3.0.0"
repeat-string "^1.6.1"
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
dependencies:
is-number "^7.0.0"
to-regex@^3.0.1, to-regex@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"