Better admin tables

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / jobs / jobs-list / jobs-list.component.html

diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
index a90267172896ad14606b0c978258a11ba5de388f..809155338b2c867e057970976f93fb2102f5fb58 100644 (file)
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.html
@@ -1,18 +1,20 @@
-<div class="row">
-  <div class="content-padding">
-    <h3>Jobs list</h3>
-
-    <p-dataTable
-        [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
-        sortField="createdAt" (onLazyLoad)="loadLazy($event)"
-    >
-      <p-column field="id" header="ID"></p-column>
-      <p-column field="category" header="Category"></p-column>
-      <p-column field="handlerName" header="Handler name"></p-column>
-      <p-column field="handlerInputData" header="Input data"></p-column>
-      <p-column field="state" header="State"></p-column>
-      <p-column field="createdAt" header="Created date" [sortable]="true"></p-column>
-      <p-column field="updatedAt" header="Updated date"></p-column>
-    </p-dataTable>
-  </div>
+<div class="admin-sub-header">
+  <div class="admin-sub-title">Jobs list</div>
 </div>
+
+<p-dataTable
+    [value]="jobs" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+    sortField="createdAt" (onLazyLoad)="loadLazy($event)" [scrollable]="true" [virtualScroll]="true" [scrollHeight]="scrollHeight"
+>
+  <p-column field="id" header="ID" [style]="{ width: '60px' }"></p-column>
+  <p-column field="category" header="Category" [style]="{ width: '130px' }"></p-column>
+  <p-column field="handlerName" header="Handler name" [style]="{ width: '210px' }"></p-column>
+  <p-column header="Input data">
+    <ng-template pTemplate="body" let-job="rowData">
+      <pre>{{ job.handlerInputData }}</pre>
+    </ng-template>
+  </p-column>
+  <p-column field="state" header="State" [style]="{ width: '100px' }"></p-column>
+  <p-column field="createdAt" header="Created date" [sortable]="true" [style]="{ width: '250px' }"></p-column>
+  <p-column field="updatedAt" header="Updated date" [style]="{ width: '250px' }"></p-column>
+</p-dataTable>