From 9e647590acdd217b1629d80888bf4ae8fbb60479 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Thu, 18 Oct 2018 10:42:25 +0200 Subject: [PATCH] Review feedback, increased height --- public/app/features/explore/Explore.tsx | 2 +- public/app/features/explore/Table.tsx | 7 +- public/sass/_grafana.scss | 6 +- public/sass/pages/_explore.scss | 14 +- public/vendor/css/react-table.css | 421 ------------------------ 5 files changed, 14 insertions(+), 436 deletions(-) delete mode 100644 public/vendor/css/react-table.css diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index a013cb60368..4fe67d9d37b 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -645,7 +645,7 @@ export class Explore extends React.PureComponent { )} {supportsTable && showingTable ? (
- +
) : null} {supportsLogs && showingLogs ? : null} diff --git a/public/app/features/explore/Table.tsx b/public/app/features/explore/Table.tsx index ffb876c525b..e1c71fa55e4 100644 --- a/public/app/features/explore/Table.tsx +++ b/public/app/features/explore/Table.tsx @@ -7,7 +7,6 @@ import TableModel from 'app/core/table_model'; const EMPTY_TABLE = new TableModel(); interface TableProps { - className?: string; data: TableModel; loading: boolean; onClickCell?: (columnKey: string, rowValue: string) => void; @@ -17,7 +16,7 @@ function prepareRows(rows, columnNames) { return rows.map(cells => _.zipObject(columnNames, cells)); } -export default class Table extends PureComponent { +export default class Table extends PureComponent { getCellProps = (state, rowInfo, column) => { return { onClick: () => { @@ -38,6 +37,7 @@ export default class Table extends PureComponent { show: text !== 'Time', Cell: row => {row.value}, })); + const noDataText = data ? 'The queries returned no data for a table.' : ''; return ( { getTdProps={this.getCellProps} loading={loading} minRows={0} - noDataText="No data returned from query." + noDataText={noDataText} resolveData={data => prepareRows(data, columnNames)} + showPagination={data} /> ); } diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index a2000b24b6b..eab681d31f8 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -1,8 +1,10 @@ -// vendor +// DEPENDENCIES +@import '../../node_modules/react-table/react-table.css'; + +// VENDOR @import '../vendor/css/timepicker.css'; @import '../vendor/css/spectrum.css'; @import '../vendor/css/rc-cascader.scss'; -@import '../vendor/css/react-table.css'; // MIXINS @import 'mixins/mixins'; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 2785e9793ec..5ef0688249e 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -111,15 +111,6 @@ .link { text-decoration: underline; } - - // React table - .explore-table-wrapper { - margin-top: 2 * $panel-margin; - } - - .rt-tr .rt-td:last-child { - text-align: right; - } } .explore + .explore { @@ -201,6 +192,8 @@ .ReactTable { border: none; + // Allow some space for the no-data text + min-height: 120px; } .ReactTable .rt-thead.-header { @@ -247,3 +240,6 @@ .ReactTable .-loading > div { color: $input-color; } +.ReactTable .rt-tr .rt-td:last-child { + text-align: right; +} diff --git a/public/vendor/css/react-table.css b/public/vendor/css/react-table.css deleted file mode 100644 index 661b594a7f2..00000000000 --- a/public/vendor/css/react-table.css +++ /dev/null @@ -1,421 +0,0 @@ -.ReactTable { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - border: 1px solid rgba(0,0,0,0.1); -} -.ReactTable * { - box-sizing: border-box; -} -.ReactTable .rt-table { - -webkit-box-flex: 1; - -ms-flex: auto 1; - flex: auto 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - width: 100%; - border-collapse: collapse; - overflow: auto; -} -.ReactTable .rt-thead { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.ReactTable .rt-thead.-headerGroups { - background: rgba(0,0,0,0.03); - border-bottom: 1px solid rgba(0,0,0,0.05); -} -.ReactTable .rt-thead.-filters { - border-bottom: 1px solid rgba(0,0,0,0.05); -} -.ReactTable .rt-thead.-filters input, -.ReactTable .rt-thead.-filters select { - border: 1px solid rgba(0,0,0,0.1); - background: #fff; - padding: 5px 7px; - font-size: inherit; - border-radius: 3px; - font-weight: normal; - outline: none; -} -.ReactTable .rt-thead.-filters .rt-th { - border-right: 1px solid rgba(0,0,0,0.02); -} -.ReactTable .rt-thead.-header { - box-shadow: 0 2px 15px 0 rgba(0,0,0,0.15); -} -.ReactTable .rt-thead .rt-tr { - text-align: center; -} -.ReactTable .rt-thead .rt-td, -.ReactTable .rt-thead .rt-th { - padding: 5px; - line-height: normal; - position: relative; - border-right: 1px solid rgba(0,0,0,0.05); - transition: box-shadow 0.3s cubic-bezier(.175,.885,.32,1.275); - box-shadow: inset 0 0 0 0 transparent; -} -.ReactTable .rt-thead .rt-td.-sort-asc, -.ReactTable .rt-thead .rt-th.-sort-asc { - box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6); -} -.ReactTable .rt-thead .rt-td.-sort-desc, -.ReactTable .rt-thead .rt-th.-sort-desc { - box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6); -} -.ReactTable .rt-thead .rt-td.-cursor-pointer, -.ReactTable .rt-thead .rt-th.-cursor-pointer { - cursor: pointer; -} -.ReactTable .rt-thead .rt-td:last-child, -.ReactTable .rt-thead .rt-th:last-child { - border-right: 0; -} -.ReactTable .rt-thead .rt-resizable-header { - overflow: visible; -} -.ReactTable .rt-thead .rt-resizable-header:last-child { - overflow: hidden; -} -.ReactTable .rt-thead .rt-resizable-header-content { - overflow: hidden; - text-overflow: ellipsis; -} -.ReactTable .rt-thead .rt-header-pivot { - border-right-color: #f7f7f7; -} -.ReactTable .rt-thead .rt-header-pivot:after, -.ReactTable .rt-thead .rt-header-pivot:before { - left: 100%; - top: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} -.ReactTable .rt-thead .rt-header-pivot:after { - border-color: rgba(255,255,255,0); - border-left-color: #fff; - border-width: 8px; - margin-top: -8px; -} -.ReactTable .rt-thead .rt-header-pivot:before { - border-color: rgba(102,102,102,0); - border-left-color: #f7f7f7; - border-width: 10px; - margin-top: -10px; -} -.ReactTable .rt-tbody { - -webkit-box-flex: 99999; - -ms-flex: 99999 1 auto; - flex: 99999 1 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - overflow: auto; -} -.ReactTable .rt-tbody .rt-tr-group { - border-bottom: solid 1px rgba(0,0,0,0.05); -} -.ReactTable .rt-tbody .rt-tr-group:last-child { - border-bottom: 0; -} -.ReactTable .rt-tbody .rt-td { - border-right: 1px solid rgba(0,0,0,0.02); -} -.ReactTable .rt-tbody .rt-td:last-child { - border-right: 0; -} -.ReactTable .rt-tbody .rt-expandable { - cursor: pointer; - text-overflow: clip; -} -.ReactTable .rt-tr-group { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; -} -.ReactTable .rt-tr { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; -} -.ReactTable .rt-td, -.ReactTable .rt-th { - -webkit-box-flex: 1; - -ms-flex: 1 0 0; - flex: 1 0 0; - white-space: nowrap; - text-overflow: ellipsis; - padding: 7px 5px; - overflow: hidden; - transition: 0.3s ease; - transition-property: width,min-width,padding,opacity; -} -.ReactTable .rt-td.-hidden, -.ReactTable .rt-th.-hidden { - width: 0 !important; - min-width: 0 !important; - padding: 0 !important; - border: 0 !important; - opacity: 0 !important; -} -.ReactTable .rt-expander { - display: inline-block; - position: relative; - margin: 0; - color: transparent; - margin: 0 10px; -} -.ReactTable .rt-expander:after { - content: ''; - position: absolute; - width: 0; - height: 0; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%,-50%) rotate(-90deg); - transform: translate(-50%,-50%) rotate(-90deg); - border-left: 5.04px solid transparent; - border-right: 5.04px solid transparent; - border-top: 7px solid rgba(0,0,0,0.8); - transition: all 0.3s cubic-bezier(.175,.885,.32,1.275); - cursor: pointer; -} -.ReactTable .rt-expander.-open:after { - -webkit-transform: translate(-50%,-50%) rotate(0); - transform: translate(-50%,-50%) rotate(0); -} -.ReactTable .rt-resizer { - display: inline-block; - position: absolute; - width: 36px; - top: 0; - bottom: 0; - right: -18px; - cursor: col-resize; - z-index: 10; -} -.ReactTable .rt-tfoot { - -webkit-box-flex: 1; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); -} -.ReactTable .rt-tfoot .rt-td { - border-right: 1px solid rgba(0,0,0,0.05); -} -.ReactTable .rt-tfoot .rt-td:last-child { - border-right: 0; -} -.ReactTable.-striped .rt-tr.-odd { - background: rgba(0,0,0,0.03); -} -.ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover { - background: rgba(0,0,0,0.05); -} -.ReactTable .-pagination { - z-index: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: 3px; - box-shadow: 0 0 15px 0 rgba(0,0,0,0.1); - border-top: 2px solid rgba(0,0,0,0.1); -} -.ReactTable .-pagination input, -.ReactTable .-pagination select { - border: 1px solid rgba(0,0,0,0.1); - background: #fff; - padding: 5px 7px; - font-size: inherit; - border-radius: 3px; - font-weight: normal; - outline: none; -} -.ReactTable .-pagination .-btn { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: block; - width: 100%; - height: 100%; - border: 0; - border-radius: 3px; - padding: 6px; - font-size: 1em; - color: rgba(0,0,0,0.6); - background: rgba(0,0,0,0.1); - transition: all 0.1s ease; - cursor: pointer; - outline: none; -} -.ReactTable .-pagination .-btn[disabled] { - opacity: 0.5; - cursor: default; -} -.ReactTable .-pagination .-btn:not([disabled]):hover { - background: rgba(0,0,0,0.3); - color: #fff; -} -.ReactTable .-pagination .-next, -.ReactTable .-pagination .-previous { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - text-align: center; -} -.ReactTable .-pagination .-center { - -webkit-box-flex: 1.5; - -ms-flex: 1.5; - flex: 1.5; - text-align: center; - margin-bottom: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: distribute; - justify-content: space-around; -} -.ReactTable .-pagination .-pageInfo { - display: inline-block; - margin: 3px 10px; - white-space: nowrap; -} -.ReactTable .-pagination .-pageJump { - display: inline-block; -} -.ReactTable .-pagination .-pageJump input { - width: 70px; - text-align: center; -} -.ReactTable .-pagination .-pageSizeOptions { - margin: 3px 10px; -} -.ReactTable .rt-noData { - display: block; - position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%,-50%); - transform: translate(-50%,-50%); - background: rgba(255,255,255,0.8); - transition: all 0.3s ease; - z-index: 1; - pointer-events: none; - padding: 20px; - color: rgba(0,0,0,0.5); -} -.ReactTable .-loading { - display: block; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(255,255,255,0.8); - transition: all 0.3s ease; - z-index: -1; - opacity: 0; - pointer-events: none; -} -.ReactTable .-loading > div { - position: absolute; - display: block; - text-align: center; - width: 100%; - top: 50%; - left: 0; - font-size: 15px; - color: rgba(0,0,0,0.6); - -webkit-transform: translateY(-52%); - transform: translateY(-52%); - transition: all 0.3s cubic-bezier(.25,.46,.45,.94); -} -.ReactTable .-loading.-active { - opacity: 1; - z-index: 2; - pointer-events: all; -} -.ReactTable .-loading.-active > div { - -webkit-transform: translateY(50%); - transform: translateY(50%); -} -.ReactTable .rt-resizing .rt-td, -.ReactTable .rt-resizing .rt-th { - transition: none !important; - cursor: col-resize; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -}