Update Historian In Playground

packages/composer-playground/src/app/test/registry/registry.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="_registry" class="resource-header">
     <div class="resource-header-left">
-        <h1>{{_registry.name}}</h1>
+        <h1 *ngIf="!isHistorian()">{{_registry.name}}</h1>
     </div>
     <div *ngIf="!isHistorian()">
         <button type="button" class="registry" (click)="openNewResourceModal()">
@@ -48,22 +48,20 @@ <h1>{{_registry.name}}</h1>
     <table *ngIf="resources && resources.length > 0 && isHistorian()">
         <thead [ngClass]="{'tbody-scrolled' : tableScrolled}">
         <tr>
-            <th class="width-30">ID</th>
-            <th class="width-10">Time</th>
-            <th class="width-20">Participant ID</th>
-            <th class="width-20">Transaction Type</th>
-            <th class="width-10"></th>
+            <th class="normal-column">Date, Time</th>
+            <th class="normal-column">Entry Type</th>
+            <th class="normal-column">Participant</th>
+            <th class="narrow-column"></th>
         </tr>
         </thead>
         <tbody id="transactiontbody" checkScroll (hasScroll)="updateTableScroll($event)">
         <tr *ngFor="let resource of resources">
-            <td class="width-30 truncate-text">{{ resource.getIdentifier() }}</td>
-            <td class="width-10 truncate-text">{{ resource.transactionTimestamp | date:'HH:mm:ss' }}</td>
-            <td class="width-20 truncate-text">{{ resource.participantInvoking ?
-                resource.participantInvoking.$identifier : 'none' }}
+            <td class="normal-column truncate-text">{{ resource.transactionTimestamp | date:'y-MM-dd, HH:mm:ss' }}</td>
+            <td class="normal-column truncate-text"><span placement="top" container="body" ngbTooltip="{{resource.transactionType || null}}">{{ resource.transactionType ? resource.transactionType.substring(resource.transactionType.lastIndexOf('.') + 1) : 'TBC' }}</span></td>
+            <td class="normal-column truncate-text"><span placement="top" container="body" ngbTooltip="{{resource.participantInvoking ? resource.participantInvoking.$namespace + '.' + resource.participantInvoking.$type : null}}">{{ resource.participantInvoking ?
+                resource.participantInvoking.$identifier + ' (' + resource.participantInvoking.$type + ')'  : 'none' }}</span>
             </td>
-            <td class="width-20 truncate-text">{{ resource.transactionType || 'TBC' }}</td>
-            <td class="width-10 truncate-text"><a href="#" (click)="viewTransactionData(resource)">view record</a></td>
+            <td class="narrow-column"><a href="#" (click)="viewTransactionData(resource)">view record</a></td>
         </tr>
         </tbody>
     </table>

packages/composer-playground/src/app/test/registry/registry.component.scss

@@ -2,7 +2,7 @@
 @import '../../../assets/styles/base/variables';
 
 registry {
-    height: 90%;
+    height: 95%;
     display: block;
     position: relative;
     $highlighted: #e4e4e4;
@@ -141,6 +141,16 @@ registry {
                 display: block; // required to allow seperated tbody scrolling
                 height: 100%;
                 border-spacing: 0px;
+
+                .normal-column {
+                    width: 28%
+                }
+
+                .narrow-column {
+                    width: 16%;
+                    text-align: right;
+                }
+
                 thead, tbody {
                     display: block;
                 }

packages/composer-playground/src/app/test/registry/registry.component.spec.ts

@@ -38,6 +38,15 @@ class MockCheckOverFlowDirective {
     @Input() public expanded: boolean;
 }
 
+@Directive({
+    selector: '[ngbTooltip]'
+})
+class MockToolTipDirective {
+    @Input() public ngbTooltip: string;
+    @Input() public placement: string;
+    @Input() public container: string;
+}
+
 describe(`RegistryComponent`, () => {
     let component: RegistryComponent;
     let fixture: ComponentFixture<RegistryComponent>;
@@ -80,6 +89,7 @@ describe(`RegistryComponent`, () => {
             ],
             declarations: [
                 MockCheckOverFlowDirective,
+                MockToolTipDirective,
                 RegistryComponent,
             ],
             providers: [

packages/composer-playground/src/app/test/test.component.scss

@@ -46,7 +46,7 @@ app-test {
         flex-direction: column;
 
         .main-view-content {
-            height: calc(100vh - 63px - 76px - 32px);
+            height: calc(100vh - 63px - 55px);
         }
     }
 }