infra proxy list pages UI improvements (#4673)

* added changes for the new list UI Signed-off-by: Vinay Sharma <[email protected]> * added changes for the list UI pages Signed-off-by: Vinay Sharma <[email protected]> * added some minor changes Signed-off-by: Vinay Sharma <[email protected]> * added review comment changes Signed-off-by: Vinay Sharma <[email protected]> * added some minor changes Signed-off-by: Vinay Sharma <[email protected]>
chef · Feb 17, 2021 · 8648d2b · 8648d2b
1 parent 61e04f5
commit 8648d2b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 17 deletions.
diff --git a/components/automate-ui/src/app/modules/infra-proxy/clients/clients.component.html b/components/automate-ui/src/app/modules/infra-proxy/clients/clients.component.html
@@ -4,8 +4,8 @@
   <ng-container *ngIf="!clientsListLoading && !authFailure">
     <chef-table>
       <chef-thead>
-        <chef-tr>
-          <chef-th>Clients Name</chef-th>
+        <chef-tr class="no_border_tr">
+          <chef-th class="no_border_th">Name</chef-th>
         </chef-tr>
       </chef-thead>
       <chef-tbody>

diff --git a/components/automate-ui/src/app/modules/infra-proxy/cookbooks/cookbooks.component.html b/components/automate-ui/src/app/modules/infra-proxy/cookbooks/cookbooks.component.html
@@ -4,9 +4,12 @@
   <ng-container  *ngIf="!cookbooksListLoading && !authFailure">
     <chef-table>
       <chef-thead>
-        <chef-tr>
-          <chef-th>Cookbook Name</chef-th>
-          <chef-th>Cookbook Version</chef-th>
+        <chef-tr class="no_border_tr">
+          <chef-th class="no_border_th">Name</chef-th>
+          <chef-th class="no_border_th">Cookbook Version</chef-th>
+          <chef-th class="no_border_th"></chef-th>
+          <chef-th class="no_border_th"></chef-th>
+          <chef-th class="no_border_th"></chef-th>
         </chef-tr>
       </chef-thead>
       <chef-tbody>
@@ -15,6 +18,9 @@
             <a [routerLink]="['/infrastructure','chef-servers', serverId, 'organizations', orgId, 'cookbooks', cookbook.name]">{{ cookbook.name }}</a>
           </chef-td>
           <chef-td>{{ cookbook.version }}</chef-td>
+          <chef-td></chef-td>
+          <chef-td></chef-td>
+          <chef-td></chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>

diff --git a/...ents/automate-ui/src/app/modules/infra-proxy/data-bags-list/data-bags-list.component.html b/...ents/automate-ui/src/app/modules/infra-proxy/data-bags-list/data-bags-list.component.html
@@ -2,11 +2,13 @@
   <chef-loading-spinner *ngIf="dataBagsListLoading" size="50"></chef-loading-spinner>
   <app-empty-state *ngIf="authFailure" moduleTitle="data bags" (resetKeyRedirection)="resetKeyTabRedirection($event)"></app-empty-state>
   <ng-container  *ngIf="!dataBagsListLoading && !authFailure">
+    <div class="head-container">
+      <chef-tr class="no_border_tr">
+        <chef-th class="no_border_th">Name</chef-th>
+      </chef-tr>
+    </div>
     <chef-table>
       <chef-thead>
-        <chef-tr>
-          <chef-th>Name</chef-th>
-        </chef-tr>
       </chef-thead>
       <chef-tbody>
         <chef-tr *ngFor="let dataBag of dataBags">

diff --git a/components/automate-ui/src/app/modules/infra-proxy/environments/environments.component.html b/components/automate-ui/src/app/modules/infra-proxy/environments/environments.component.html
@@ -4,8 +4,8 @@
   <ng-container *ngIf="!environmentsListLoading && !authFailure">
     <chef-table>
       <chef-thead>
-        <chef-tr>
-          <chef-th>Environments Name</chef-th>
+        <chef-tr class="no_border_tr">
+          <chef-th class="no_border_th">Name</chef-th>
         </chef-tr>
       </chef-thead>
       <chef-tbody>

diff --git a/components/automate-ui/src/app/modules/infra-proxy/infra-roles/infra-roles.component.html b/components/automate-ui/src/app/modules/infra-proxy/infra-roles/infra-roles.component.html
@@ -4,10 +4,12 @@
   <ng-container *ngIf="!rolesListLoading && !authFailure">
     <chef-table>
       <chef-thead>
-        <chef-tr>
-          <chef-th>Role Name</chef-th>
-          <chef-th>Description</chef-th>
-          <chef-th>Environments</chef-th>
+        <chef-tr class="no_border_tr">
+          <chef-th class="no_border_th">Name</chef-th>
+          <chef-th class="no_border_th">Description</chef-th>
+          <chef-th class="no_border_th">Environments</chef-th>
+          <chef-th class="no_border_th"></chef-th>
+          <chef-th class="no_border_th"></chef-th>
         </chef-tr>
       </chef-thead>
       <chef-tbody>
@@ -17,6 +19,8 @@
           </chef-td>
           <chef-td>{{ role.description === '' ?  '...' : role.description }}</chef-td>
           <chef-td>{{ role.environments.join(", ") }}</chef-td>
+          <chef-td></chef-td>
+          <chef-td></chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>

diff --git a/components/automate-ui/src/app/modules/infra-proxy/org-details/org-details.component.scss b/components/automate-ui/src/app/modules/infra-proxy/org-details/org-details.component.scss
@@ -75,6 +75,32 @@ chef-table {
     margin: 100px auto;
     width: 100px;
   }
+
+  ::ng-deep button.nav-tab.active {
+    background: #F4F6F8;
+  }
+
+  ::ng-deep button.nav-tab:focus {
+    outline: none;
+  }
+
+  ::ng-deep .nav-tab:before {
+    height: 4px;
+    background: #E7E9E9;
+  }
+
+  ::ng-deep .nav-tabs-item {
+    margin-right: 4px;
+    outline: none;
+  }
+
+  ::ng-deep .no_border_th,
+  .no_border_tr,
+  .no_border_tr:first-child,
+  .no_border_tr:last-child {
+    border: none;
+    font-size: 12px;
+  }
 }
 
 chef-loading-spinner {

diff --git a/components/automate-ui/src/app/modules/infra-proxy/policy-files/policy-files.component.html b/components/automate-ui/src/app/modules/infra-proxy/policy-files/policy-files.component.html
@@ -4,15 +4,21 @@
   <ng-container *ngIf="!policyFilesListLoading && !authFailure">
     <chef-table>
       <chef-thead>
-        <chef-tr>
-          <chef-th>Policy Name</chef-th>
-          <chef-th>Policy Group</chef-th>
+        <chef-tr class="no_border_tr">
+          <chef-th class="no_border_th">Name</chef-th>
+          <chef-th class="no_border_th">Group of Policies </chef-th>
+          <chef-th class="no_border_th"></chef-th>
+          <chef-th class="no_border_th"></chef-th>
+          <chef-th class="no_border_th"></chef-th>
         </chef-tr>
       </chef-thead>
       <chef-tbody>
         <chef-tr *ngFor="let policyFile of policyFiles">
           <chef-td>{{ policyFile.name }}</chef-td>
           <chef-td>{{ policyFile.policy_group }}</chef-td>
+          <chef-td></chef-td>
+          <chef-td></chef-td>
+          <chef-td></chef-td>
         </chef-tr>
       </chef-tbody>
     </chef-table>