From 80299a2c8596517c524db19f8a34a5a74bd5aecf Mon Sep 17 00:00:00 2001
From: Bryan Bende <bbende@apache.org>
Date: Tue, 23 Jan 2018 10:19:34 -0500
Subject: [PATCH] NIFIREG-125 Adding bucket id and item id to droplet details
 in grid list

---
 .../nf-registry-grid-list-viewer.html         | 63 +++++++++++--------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html b/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html
index 65f90fe36..e31c80585 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html
@@ -72,39 +72,50 @@
                     </div>
                     <div fxLayout="row">
                         <div fxFlex="25" class="pad-left-sm pad-top-sm">
-                            <span class="uppercase">Description</span>
+                            <div>
+                                <div class="pad-bottom-sm">
+                                    <span class="uppercase">Bucket Identifier</span>
+                                </div>
+                                <p *ngIf="droplet.bucketIdentifier">{{droplet.bucketIdentifier}}</p>
+                            </div>
+                            <div class="pad-top-md">
+                                <div class="pad-bottom-sm">
+                                    <span class="uppercase">{{droplet.type}} Identifier</span>
+                                </div>
+                                <p *ngIf="droplet.identifier">{{droplet.identifier}}</p>
+                            </div>
+                            <div class="pad-top-md">
+                                <div class="pad-bottom-sm">
+                                    <span class="uppercase">Description</span>
+                                </div>
+                                <p *ngIf="droplet.description">{{droplet.description}}</p>
+                                <p *ngIf="!droplet.description">No description specified</p>
+                            </div>
                         </div>
                         <div fxFlex="75">
                             <span class="uppercase">Change Log</span>
                             <button (click)="nfRegistryService.getDropletSnapshotMetadata(droplet)" matTooltip="Refresh" mat-icon-button>
                                 <i class="fa fa-refresh info" aria-hidden="true"></i>
                             </button>
-                        </div>
-                    </div>
-                    <div fxLayout="row" class="pad-left-sm">
-                        <div fxFlex="25">
-                            <p *ngIf="droplet.description">{{droplet.description}}</p>
-                            <p *ngIf="!droplet.description">No description specified</p>
-                        </div>
-                        <div id="nifi-registry-explorer-grid-list-viewer-droplet-container-details-change-log"
-                             fxFlex="75">
-                            <td-steps mode="vertical">
-                                <td-step label="Version {{snapshotMeta.version}} - {{snapshotMeta.timestamp | amTimeAgo}}" sublabel="by {{snapshotMeta.author}}"
-                                         *ngFor="let snapshotMeta of droplet.snapshotMetadata; let i = index"
-                                         [active]="i === 0 ? true : false">
-                                    <div fxLayout="column" fxLayoutAlign="space-between stretch">
-                                        <div *ngIf="snapshotMeta.comments" fxLayout="row" class="md-body-2">
-                                            {{snapshotMeta.comments}}
-                                        </div>
-                                        <div *ngIf="!snapshotMeta.comments" fxLayout="row" class="md-body-2">
-                                            No comments specified
-                                        </div>
-                                        <div fxLayout="row" class="mat-caption">
-                                            {{(snapshotMeta.timestamp/1000 | amFromUnix) | amDateFormat:'MMM-DD-YYYY'}} at {{(snapshotMeta.timestamp/1000 | amFromUnix) | amDateFormat:'h:mm A'}}
+                            <div id="nifi-registry-explorer-grid-list-viewer-droplet-container-details-change-log">
+                                <td-steps mode="vertical">
+                                    <td-step label="Version {{snapshotMeta.version}} - {{snapshotMeta.timestamp | amTimeAgo}}" sublabel="by {{snapshotMeta.author}}"
+                                             *ngFor="let snapshotMeta of droplet.snapshotMetadata; let i = index"
+                                             [active]="i === 0 ? true : false">
+                                        <div fxLayout="column" fxLayoutAlign="space-between stretch">
+                                            <div *ngIf="snapshotMeta.comments" fxLayout="row" class="md-body-2">
+                                                {{snapshotMeta.comments}}
+                                            </div>
+                                            <div *ngIf="!snapshotMeta.comments" fxLayout="row" class="md-body-2">
+                                                No comments specified
+                                            </div>
+                                            <div fxLayout="row" class="mat-caption">
+                                                {{(snapshotMeta.timestamp/1000 | amFromUnix) | amDateFormat:'MMM-DD-YYYY'}} at {{(snapshotMeta.timestamp/1000 | amFromUnix) | amDateFormat:'h:mm A'}}
+                                            </div>
                                         </div>
-                                    </div>
-                                </td-step>
-                            </td-steps>
+                                    </td-step>
+                                </td-steps>
+                            </div>
                         </div>
                     </div>
                 </div>