You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by fj...@apache.org on 2019/06/04 02:29:06 UTC
[incubator-druid] branch master updated: Add minor CSS to make long
value copy even easier (#7829)
This is an automated email from the ASF dual-hosted git repository.
fjy pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git
The following commit(s) were added to refs/heads/master by this push:
new 0de7983 Add minor CSS to make long value copy even easier (#7829)
0de7983 is described below
commit 0de7983db5c9fd0a80b12d77a09c2d4031fa5d3d
Author: Vadim Ogievetsky <va...@gmail.com>
AuthorDate: Mon Jun 3 19:28:57 2019 -0700
Add minor CSS to make long value copy even easier (#7829)
---
web-console/package.json | 2 +-
.../src/components/action-icon/action-icon.spec.tsx | 2 +-
.../__snapshots__/table-cell.spec.tsx.snap | 16 ++++++++++++++--
.../src/components/table-cell/table-cell.scss | 17 ++++++++++++++++-
web-console/src/components/table-cell/table-cell.tsx | 20 +++++++++++++++++---
5 files changed, 49 insertions(+), 8 deletions(-)
diff --git a/web-console/package.json b/web-console/package.json
index ae61883..e6e6b8c 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -29,7 +29,7 @@
"compile": "./script/build",
"pretest": "./script/build",
"run": "./script/run",
- "test": "jest --silent 2>&1",
+ "test": "npm run tslint && jest --silent 2>&1",
"coverage": "jest --coverage",
"update-snapshots": "jest -u",
"tslint": "./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter 'src/**/*.ts?(x)'",
diff --git a/web-console/src/components/action-icon/action-icon.spec.tsx b/web-console/src/components/action-icon/action-icon.spec.tsx
index 856fe1b..4e74d8b 100644
--- a/web-console/src/components/action-icon/action-icon.spec.tsx
+++ b/web-console/src/components/action-icon/action-icon.spec.tsx
@@ -16,11 +16,11 @@
* limitations under the License.
*/
+import { IconNames } from '@blueprintjs/icons';
import * as React from 'react';
import { render } from 'react-testing-library';
import { ActionIcon } from './action-icon';
-import { IconNames } from '@blueprintjs/icons';
describe('action icon', () => {
it('matches snapshot', () => {
diff --git a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
index 97e1609..48d579d 100644
--- a/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
+++ b/web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap
@@ -4,7 +4,13 @@ exports[`table cell matches snapshot array long 1`] = `
<span
class="table-cell truncated"
>
- [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 ...323 omitted... 7, 98, 99]
+ [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
+ <span
+ class="omitted"
+ >
+ ...323 omitted...
+ </span>
+ 7, 98, 99]
<span
class="bp3-icon bp3-icon-clipboard action-icon"
icon="clipboard"
@@ -43,7 +49,13 @@ exports[`table cell matches snapshot truncate 1`] = `
<span
class="table-cell truncated"
>
- testtesttesttesttesttesttesttesttesttesttesttesttesttestt ...329 omitted... sttesttest
+ testtesttesttesttesttesttesttesttesttesttesttesttesttestt
+ <span
+ class="omitted"
+ >
+ ...329 omitted...
+ </span>
+ sttesttest
<span
class="bp3-icon bp3-icon-clipboard action-icon"
icon="clipboard"
diff --git a/web-console/src/components/table-cell/table-cell.scss b/web-console/src/components/table-cell/table-cell.scss
index 783fad4..ee21b54 100644
--- a/web-console/src/components/table-cell/table-cell.scss
+++ b/web-console/src/components/table-cell/table-cell.scss
@@ -30,8 +30,23 @@
}
&.truncated {
+ position: relative;
+ width: 100%;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-right: 16px;
+
+ .omitted {
+ margin: 0 0.2em;
+ font-style: italic;
+ }
+
.action-icon {
- margin-left: 5px;
+ position: absolute;
+ top: 0;
+ right: 0;
}
}
}
diff --git a/web-console/src/components/table-cell/table-cell.tsx b/web-console/src/components/table-cell/table-cell.tsx
index 0c82685..9f5e6dd 100644
--- a/web-console/src/components/table-cell/table-cell.tsx
+++ b/web-console/src/components/table-cell/table-cell.tsx
@@ -33,13 +33,23 @@ export interface NullTableCellProps extends React.Props<any> {
unparseable?: boolean;
}
+interface ShortParts {
+ prefix: string;
+ omitted: string;
+ suffix: string;
+}
+
export class TableCell extends React.Component<NullTableCellProps, {}> {
static MAX_CHARS_TO_SHOW = 50;
static possiblyTruncate(str: string): React.ReactNode {
if (str.length < TableCell.MAX_CHARS_TO_SHOW) return str;
+
+ const { prefix, omitted, suffix } = TableCell.shortenString(str);
return <span className="table-cell truncated">
- {TableCell.shortenString(str)}
+ {prefix}
+ <span className="omitted">{omitted}</span>
+ {suffix}
<ActionIcon
icon={IconNames.CLIPBOARD}
onClick={() => {
@@ -53,13 +63,17 @@ export class TableCell extends React.Component<NullTableCellProps, {}> {
</span>;
}
- static shortenString(str: string): string {
+ static shortenString(str: string): ShortParts {
// Print something like:
// BAAAArAAEiQKpDAEAACwZCBAGSBgiSEAAAAQpAIDwAg...23 omitted...gwiRoQBJIC
const omit = str.length - (TableCell.MAX_CHARS_TO_SHOW + 17);
const prefix = str.substr(0, str.length - (omit + 10));
const suffix = str.substr(str.length - 10);
- return `${prefix} ...${omit} omitted... ${suffix}`;
+ return {
+ prefix,
+ omitted: `...${omit} omitted...`,
+ suffix
+ };
}
render() {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org