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;
}
md-table-container {
overflow-x: visible;
}
md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
min-height: 0;
}

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

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