Commit fef74373e0a5b5ff95308ac21fe52c68f74036a5
Committed by
GitHub
GitHub
1 parent
f63864f0
Fix timeseries table layout (#2569)
Showing
2 changed files
with
49 additions
and
51 deletions
| @@ -31,10 +31,6 @@ tb-timeseries-table-widget { | @@ -31,10 +31,6 @@ tb-timeseries-table-widget { | ||
| 31 | z-index: 10; | 31 | z-index: 10; |
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | - md-table-container { | ||
| 35 | - overflow-x: visible; | ||
| 36 | - } | ||
| 37 | - | ||
| 38 | md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) { | 34 | md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) { |
| 39 | min-height: 0; | 35 | min-height: 0; |
| 40 | } | 36 | } |
| @@ -38,56 +38,58 @@ | @@ -38,56 +38,58 @@ | ||
| 38 | </div> | 38 | </div> |
| 39 | </md-toolbar> | 39 | </md-toolbar> |
| 40 | 40 | ||
| 41 | - <md-tabs flex md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}" | 41 | + <md-tabs md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}" |
| 42 | id="tabs" md-border-bottom flex> | 42 | id="tabs" md-border-bottom flex> |
| 43 | <md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}"> | 43 | <md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}"> |
| 44 | - <md-table-container class="flex"> | ||
| 45 | - <table md-table> | ||
| 46 | - <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)"> | ||
| 47 | - <tr md-row> | ||
| 48 | - <th ng-show="vm.showTimestamp" | ||
| 49 | - md-column md-order-by="0" | ||
| 50 | - > | ||
| 51 | - <span>Timestamp</span> | ||
| 52 | - </th> | ||
| 53 | - <th md-column | ||
| 54 | - md-order-by="{{ h.index }}" | ||
| 55 | - ng-repeat="h in source.ts.header" | ||
| 56 | - > | ||
| 57 | - <span>{{ h.dataKey.label }}</span> | ||
| 58 | - </th> | ||
| 59 | - </tr> | ||
| 60 | - </thead> | 44 | + <div class="tb-absolute-fill" layout="column"> |
| 45 | + <md-table-container flex> | ||
| 46 | + <table md-table> | ||
| 47 | + <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)"> | ||
| 48 | + <tr md-row> | ||
| 49 | + <th ng-show="vm.showTimestamp" | ||
| 50 | + md-column md-order-by="0" | ||
| 51 | + > | ||
| 52 | + <span>Timestamp</span> | ||
| 53 | + </th> | ||
| 54 | + <th md-column | ||
| 55 | + md-order-by="{{ h.index }}" | ||
| 56 | + ng-repeat="h in source.ts.header" | ||
| 57 | + > | ||
| 58 | + <span>{{ h.dataKey.label }}</span> | ||
| 59 | + </th> | ||
| 60 | + </tr> | ||
| 61 | + </thead> | ||
| 61 | 62 | ||
| 62 | - <tbody md-body> | ||
| 63 | - <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)"> | ||
| 64 | - <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)" | ||
| 65 | - md-cell | ||
| 66 | - ng-repeat="d in row track by $index" | ||
| 67 | - ng-style="vm.cellStyle(source, $index, d)" | ||
| 68 | - ng-bind-html="vm.cellContent(source, $index, row, d)" | ||
| 69 | - ></td> | ||
| 70 | - <td md-cell class="tb-action-cell" | ||
| 71 | - ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px', | ||
| 72 | - maxWidth: vm.actionCellDescriptors.length*36+'px', | ||
| 73 | - width: vm.actionCellDescriptors.length*36+'px'}"> | ||
| 74 | - <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors" | ||
| 75 | - aria-label="{{ actionDescriptor.displayName }}" | ||
| 76 | - ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading"> | ||
| 77 | - <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon> | ||
| 78 | - <md-tooltip md-direction="top"> | ||
| 79 | - {{ actionDescriptor.displayName }} | ||
| 80 | - </md-tooltip> | ||
| 81 | - </md-button> | ||
| 82 | - </td> | ||
| 83 | - </tr> | ||
| 84 | - </tbody> | ||
| 85 | - </table> | ||
| 86 | - <md-divider></md-divider> | ||
| 87 | - <span ng-show="!vm.sources[vm.sourceIndex].data.length" | ||
| 88 | - layout-align="center center" | ||
| 89 | - class="no-data-found" translate>widget.no-data-found</span> | ||
| 90 | - </md-table-container> | 63 | + <tbody md-body> |
| 64 | + <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)"> | ||
| 65 | + <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)" | ||
| 66 | + md-cell | ||
| 67 | + ng-repeat="d in row track by $index" | ||
| 68 | + ng-style="vm.cellStyle(source, $index, d)" | ||
| 69 | + ng-bind-html="vm.cellContent(source, $index, row, d)" | ||
| 70 | + ></td> | ||
| 71 | + <td md-cell class="tb-action-cell" | ||
| 72 | + ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px', | ||
| 73 | + maxWidth: vm.actionCellDescriptors.length*36+'px', | ||
| 74 | + width: vm.actionCellDescriptors.length*36+'px'}"> | ||
| 75 | + <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors" | ||
| 76 | + aria-label="{{ actionDescriptor.displayName }}" | ||
| 77 | + ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading"> | ||
| 78 | + <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon> | ||
| 79 | + <md-tooltip md-direction="top"> | ||
| 80 | + {{ actionDescriptor.displayName }} | ||
| 81 | + </md-tooltip> | ||
| 82 | + </md-button> | ||
| 83 | + </td> | ||
| 84 | + </tr> | ||
| 85 | + </tbody> | ||
| 86 | + </table> | ||
| 87 | + <md-divider></md-divider> | ||
| 88 | + <span ng-show="!vm.sources[vm.sourceIndex].data.length" | ||
| 89 | + layout-align="center center" | ||
| 90 | + class="no-data-found" translate>widget.no-data-found</span> | ||
| 91 | + </md-table-container> | ||
| 92 | + </div> | ||
| 91 | </md-tab> | 93 | </md-tab> |
| 92 | </md-tabs> | 94 | </md-tabs> |
| 93 | <md-table-pagination ng-if="vm.displayPagination" | 95 | <md-table-pagination ng-if="vm.displayPagination" |