Removed unused space in summary tables

Signed-off-by: GuessWhoSamFoo <foos@vmware.com>
Signed-off-by: GuessWhoSamFoo <foos@vmware.com>

internal/printer/rolebinding.go

@@ -80,20 +80,6 @@ func RoleBindingHandler(ctx context.Context, roleBinding *rbacv1.RoleBinding, op
 		return nil, errors.Wrap(err, "print rolebinding subjects")
 	}
 
-	// configSummary, err := printRoleBindingConfig(ctx, roleBinding, opts)
-	// if err != nil {
-	// 	return nil, err
-	// }
-
-	// o.RegisterConfig(configSummary)
-
-	// o.RegisterItems(ItemDescriptor{
-	// 	Func: func() (component.Component, error) {
-	// 		return printRoleBindingSubjects(ctx, roleBinding, opts)
-	// 	},
-	// 	Width: component.WidthFull,
-	// })
-
 	return o.ToComponent(ctx, options)
 }
 

web/src/app/modules/shared/components/presentation/datagrid/datagrid.component.html

-<div class="card">
-    <div class="card-block">
-        <h3 class="card-title">{{ title }}</h3>
-        <clr-datagrid>
-            <clr-dg-placeholder>
-                <ng-container *ngIf="placeholder?.length >0; else emptyPlaceholder">
-                    {{placeholder}}
-                </ng-container>
-                <ng-template #emptyPlaceholder>
-                    All content has been filtered out.
-                </ng-template>
-            </clr-dg-placeholder>
-            <clr-dg-column *ngFor="let columnName of columns; trackBy: identifyColumn">
-                {{ columnName }}
-                <clr-dg-filter *ngIf="hasFilter(columnName)">
-                    <app-content-filter
-                            [column]="columnName"
-                            [filter]="filters[columnName]"
-                    ></app-content-filter>
-                </clr-dg-filter>
-            </clr-dg-column>
-            <clr-dg-row *clrDgItems="let row of rows; trackBy: identifyRow">
-                <clr-dg-cell *ngFor="let column of columns; trackBy: identifyColumn">
-                    <app-content-switcher [view]="row[column]"></app-content-switcher>
-                </clr-dg-cell>
-            </clr-dg-row>
+<h4>{{ title }}</h4>
+<clr-datagrid>
+    <clr-dg-placeholder>
+        <ng-container *ngIf="placeholder?.length >0; else emptyPlaceholder">
+            {{placeholder}}
+        </ng-container>
+        <ng-template #emptyPlaceholder>
+            All content has been filtered out.
+        </ng-template>
+    </clr-dg-placeholder>
+    <clr-dg-column *ngFor="let columnName of columns; trackBy: identifyColumn">
+        {{ columnName }}
+        <clr-dg-filter *ngIf="hasFilter(columnName)">
+            <app-content-filter
+                    [column]="columnName"
+                    [filter]="filters[columnName]"
+            ></app-content-filter>
+        </clr-dg-filter>
+    </clr-dg-column>
+    <clr-dg-row *clrDgItems="let row of rows; trackBy: identifyRow">
+        <clr-dg-cell *ngFor="let column of columns; trackBy: identifyColumn">
+            <app-content-switcher [view]="row[column]"></app-content-switcher>
+        </clr-dg-cell>
+    </clr-dg-row>
 
-            <clr-dg-footer>
-                <clr-dg-pagination #pagination [clrDgPageSize]="10">
-                    <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Items per page</clr-dg-page-size>
-                    <ng-container *ngIf="rows?.length > 0">
-                        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-                        of {{pagination.totalItems}} items
-                    </ng-container>
-                </clr-dg-pagination>
+    <clr-dg-footer>
+        <clr-dg-pagination #pagination [clrDgPageSize]="10">
+            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Items per page</clr-dg-page-size>
+            <ng-container *ngIf="rows?.length > 0">
+                {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+                of {{pagination.totalItems}} items
+            </ng-container>
+        </clr-dg-pagination>
 
-                <ng-container *ngIf="loading">
-                    <span class="spinner spinner-inline" style="margin-right: 10px">
-                        Loading...
-                    </span>
-                </ng-container>
-            </clr-dg-footer>
-        </clr-datagrid>
-    </div>
-</div>
+        <ng-container *ngIf="loading">
+            <span class="spinner spinner-inline" style="margin-right: 10px">
+                Loading...
+            </span>
+        </ng-container>
+    </clr-dg-footer>
+</clr-datagrid>

web/src/app/modules/shared/components/presentation/summary/summary.component.html

@@ -21,11 +21,11 @@
 
             <app-alert *ngIf="v?.config.alert" [alert]="v.config.alert"></app-alert>
 
-            <table class="table table-vertical table-noborder">
+            <table class="table-noborder">
                 <tbody>
                 <tr *ngFor="let item of v?.config.sections; trackBy: identifyItem">
-                    <th>{{ item.header }}</th>
-                    <td [ngSwitch]="item.content.metadata.type">
+                    <td class="left">{{ item.header }}</td>
+                    <td class="left" [ngSwitch]="item.content.metadata.type">
                         <ng-container *ngSwitchCase="'annotations'">
                             <app-view-annotations [view]="item.content"></app-view-annotations>
                         </ng-container>

web/src/app/modules/shared/components/presentation/summary/summary.component.scss

@@ -3,6 +3,16 @@
  */
 
 .card {
+  :host-context(body) {
+    --tableLabel-color: #565656;
+    --tableValue-color: #737373;
+  }
+
+  :host-context(body.dark) {
+    --tableLabel-color: #eaedf0;
+    --tableValue-color: #acbac3;
+  }
+
   .progress.loop {
     height: 5px;
     position: absolute;
@@ -10,9 +20,25 @@
     left: 0;
   }
 
-  .table.table-noborder {
-    th:first-child {
-      padding-left: 0.5rem;
+  .card-title {
+    margin: 0;
+  }
+
+  .left {
+    font-size: 0.65rem;
+    vertical-align: top;
+    padding-top: 4px;
+  }
+
+  .table-noborder {
+    td:first-child {
+      color: var(--tableLabel-color);
+      font-weight: 600;
+      padding-right: 24px;
+      white-space: nowrap;
+    }
+    td:last-child {
+      color: var(--tableValue-color);
     }
   }
 }

web/src/app/modules/shared/components/presentation/table/table.component.html

-<table class="table table-compact table-noborder">
+<table class="table table-compact">
   <thead>
     <tr>
-      <td *ngFor="let column of columns; trackBy: trackByIdentity">{{ column }}</td>
+      <td class="left" *ngFor="let column of columns; trackBy: trackByIdentity">{{ column }}</td>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let row of rows; trackBy: trackByIndex">
-      <td *ngFor="let column of columns; trackBy: trackByIdentity">
+      <td class="left" *ngFor="let column of columns; trackBy: trackByIdentity">
         <app-content-switcher [view]="row[column]"></app-content-switcher>
       </td>
     </tr>

web/src/app/modules/shared/components/presentation/table/table.component.scss

@@ -5,10 +5,20 @@
 .table {
   margin-top: 0;
 
-  &.table-noborder {
-    th:first-child,
-    td:first-child {
-      padding-left: 0.5rem;
-    }
+  :host-context(body) {
+    --tableHeader-color: #fafafa;
+  }
+
+  :host-context(body.dark) {
+    --tableHeader-color: #1b2a32;
+  }
+
+  thead tr td.left {
+    font-weight: 600;
+    background-color:var(--tableHeader-color);
+  }
+
+  .left {
+    padding-left: 6px;
   }
 }