dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix timeseries table layout (#2569)

Browse Source
This commit is contained in:
Vladyslav 2020-04-01 09:42:03 +03:00 committed by GitHub
parent f63864f06e
commit fef74373e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/app/widget/lib/timeseries-table-widget.scss
View File

@ -31,10 +31,6 @@ tb-timeseries-table-widget {
z-index: 10; z-index: 10;
} }
md-table-container {
overflow-x: visible;
}
md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) { md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
min-height: 0; min-height: 0;
} }

96
ui/src/app/widget/lib/timeseries-table-widget.tpl.html
View File

@ -38,56 +38,58 @@
</div> </div>
</md-toolbar> </md-toolbar>
<md-tabs flex md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}" <md-tabs md-selected="vm.sourceIndex" ng-class="{'tb-headless': vm.sources.length === 1}"
id="tabs" md-border-bottom flex> id="tabs" md-border-bottom flex>
<md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}"> <md-tab ng-repeat="source in vm.sources" label="{{ source.datasource.name }}">
<md-table-container class="flex"> <div class="tb-absolute-fill" layout="column">
<table md-table> <md-table-container flex>
<thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)"> <table md-table>
<tr md-row> <thead fix-head md-head md-order="source.query.order" md-on-reorder="vm.onReorder(source)">
<th ng-show="vm.showTimestamp" <tr md-row>
md-column md-order-by="0" <th ng-show="vm.showTimestamp"
> md-column md-order-by="0"
<span>Timestamp</span> >
</th> <span>Timestamp</span>
<th md-column </th>
md-order-by="{{ h.index }}" <th md-column
ng-repeat="h in source.ts.header" md-order-by="{{ h.index }}"
> ng-repeat="h in source.ts.header"
<span>{{ h.dataKey.label }}</span> >
</th> <span>{{ h.dataKey.label }}</span>
</tr> </th>
</thead> </tr>
</thead>
<tbody md-body> <tbody md-body>
<tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)"> <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
<td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)" <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
md-cell md-cell
ng-repeat="d in row track by $index" ng-repeat="d in row track by $index"
ng-style="vm.cellStyle(source, $index, d)" ng-style="vm.cellStyle(source, $index, d)"
ng-bind-html="vm.cellContent(source, $index, row, d)" ng-bind-html="vm.cellContent(source, $index, row, d)"
></td> ></td>
<td md-cell class="tb-action-cell" <td md-cell class="tb-action-cell"
ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px', ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
maxWidth: vm.actionCellDescriptors.length*36+'px', maxWidth: vm.actionCellDescriptors.length*36+'px',
width: vm.actionCellDescriptors.length*36+'px'}"> width: vm.actionCellDescriptors.length*36+'px'}">
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors" <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
aria-label="{{ actionDescriptor.displayName }}" aria-label="{{ actionDescriptor.displayName }}"
ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading"> ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
<md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon> <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
<md-tooltip md-direction="top"> <md-tooltip md-direction="top">
{{ actionDescriptor.displayName }} {{ actionDescriptor.displayName }}
</md-tooltip> </md-tooltip>
</md-button> </md-button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<md-divider></md-divider> <md-divider></md-divider>
<span ng-show="!vm.sources[vm.sourceIndex].data.length" <span ng-show="!vm.sources[vm.sourceIndex].data.length"
layout-align="center center" layout-align="center center"
class="no-data-found" translate>widget.no-data-found</span> class="no-data-found" translate>widget.no-data-found</span>
</md-table-container> </md-table-container>
</div>
</md-tab> </md-tab>
</md-tabs> </md-tabs>
<md-table-pagination ng-if="vm.displayPagination" <md-table-pagination ng-if="vm.displayPagination"