misc(ui): styling improvements and bug fix

Author: aarthy-dk

observability_ui/apps/shell/src/app/projects/components/components-list/components-list.component.html

@@ -103,11 +103,26 @@ <h1>Components</h1>
               [createdOn]="component.created_on"></created-by>
           </div>
 
-          <div class="card__chips__container">
-            <div class="card__chip filled">{{ 'componentTypeTag.' + component.type | translate}}</div>
-
-            <div *ngIf="component.tool"
-              class="card__chip">{{ ((component.tool | getToolClass)?._displayName || component.tool) | lowercase}}</div>
+          <div class="card__bottom">
+            <div class="card__chips__container">
+              <div class="card__chip filled">{{ 'componentTypeTag.' + component.type | translate}}</div>
+
+              <div *ngIf="component.tool"
+                class="card__chip">{{ ((component.tool | getToolClass)?._displayName || component.tool) | lowercase}}</div>
+            </div>
+            <div class="card__links__container"
+              (click)="$event.stopPropagation()">
+              <a [routerLink]="['..', 'events', 'all']"
+                [queryParams]="{ 'component_id': component.id }"
+                class="link">Events</a>
+              <ng-container *ngIf="component.type === ComponentType.BatchPipeline">
+                |
+                <a [routerLink]="['..', 'events', 'runs']"
+                  [queryParams]="{ 'pipeline_key': component.key }"
+                  class="link">Runs</a>
+              </ng-container>
+              <mat-icon inline>arrow_forward</mat-icon>
+            </div>
           </div>
         </div>
       </mat-card>
@@ -119,7 +134,7 @@ <h1>Components</h1>
   [class.hidden]="(total$ | async) === 0"
   [length]="(total$ | async)"
   [pageSize]="pageSize"
-  [pageSizeOptions]="[5, 10, 25, 50, 100]"
+  [pageSizeOptions]="[25, 50, 100, 200]"
   [showFirstLastButtons]="true"></mat-paginator>
 
 <ng-template #loadingTemplate>

observability_ui/apps/shell/src/app/projects/components/components-list/components-list.component.scss

@@ -84,9 +84,13 @@
   font-style: italic;
 }
 
+.card__bottom {
+  @include mixins.flex-row($justify: space-between);
+  margin-top: 12px;
+}
+
 .card__chips__container {
   @include mixins.flex-row($justify: flex-start);
-  margin-top: 12px;
 
   .card__chip {
     font-size: 12px;
@@ -102,16 +106,10 @@
   }
 }
 
-.card__link {
-  @include mixins.flex-row;
-
-  color: #1976d2;
-  line-height: 32px;
-  padding: 0 8px;
-
-  mat-icon {
-    @include mixins.icon-size(18px);
-  }
+.card__links__container {
+  @include mixins.flex-row($justify: flex-end);
+  @include mixins.font-color(secondary);
+  gap: variables.$space-xxs;
 }
 
 :host ::ng-deep .search-components .mat-form-field-wrapper {

observability_ui/apps/shell/src/app/projects/components/components-list/components-list.component.ts

@@ -52,8 +52,9 @@ export class ComponentsListComponent extends CoreComponent implements OnInit, Ha
 
   storageKey!: string;
   parentId: string;
-  pageSize: number = 10;
+  pageSize: number = 50;
   componentTypes = Object.values(ComponentType).sort((a, b) => a > b ? 1 : a < b ? -1 : 0);
+  ComponentType = ComponentType;
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 

observability_ui/apps/shell/src/app/projects/instances/instance-details/instance-details.component.scss

@@ -10,7 +10,7 @@
 .dates-container {
   @include mixins.flex-row();
 
-  margin-top: variables.$space-sm;
+  margin-top: variables.$space-xs;
 }
 
 .duration {

observability_ui/apps/shell/src/app/projects/instances/instance-tests/instance-tests.component.scss

@@ -24,7 +24,7 @@
 
     span {
       height: 100%;
-      min-width: 10%;
+      min-width: 5px;
       cursor: pointer;
     }
 

observability_ui/apps/shell/src/app/projects/runs/run-details/run-details.component.scss

@@ -11,7 +11,7 @@
       width: fit-content;
       margin: {
         left: auto;
-        bottom: variables.$space-sm;
+        bottom: variables.$space-xs;
         top: variables.$space-xs;
       }
     }

observability_ui/apps/shell/src/app/projects/runs/run-tests/run-tests.component.html

@@ -4,7 +4,8 @@
     <span *ngIf="summary.TOTAL === 0"
       class="empty"></span>
     <ng-container *ngFor="let status of testStatuses">
-      <span [ngClass]="status"
+      <span *ngIf="summary[status]"
+        [ngClass]="status"
         [style.width]="(summary[status] / summary.TOTAL * 100) + '%'"
         dkTooltip="Filter by {{ 'testStatus.' + status | translate | titlecase }} status"
         (click)="filterByStatus(status)"></span>

observability_ui/apps/shell/src/app/projects/runs/run-tests/run-tests.component.scss

@@ -24,7 +24,7 @@
 
     span {
       height: 100%;
-      min-width: 10%;
+      min-width: 5px;
       cursor: pointer;
     }
 

observability_ui/libs/ui/styles/_details-page.scss

@@ -9,6 +9,15 @@ details-header {
   padding: variables.$space-sm variables.$space-lg 0 variables.$space-lg;
 
   nav {
+    min-width: calc(100vw - 64px);
     border-bottom: unset !important;
+
+    .mat-drawer-opened ~ mat-sidenav-content & {
+      min-width: calc(100vw - 264px);
+    }
+
+    .mat-tab-link {
+      min-width: 100px;
+    }
   }
 }