display runner details as cards

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { PipelineDetailComponent } from './components/pipeline-detail/pipeline-d
 import { DialogComponent } from './components/dialog/dialog.component';
 import { InfinitySpinnerComponent } from './components/infinity-spinner/infinity-spinner.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { RunnersPageComponent } from './components/runners-page/runners-page.component';
 
 @NgModule({
   declarations: [
@@ -53,6 +54,7 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
     DialogComponent,
     InfinitySpinnerComponent,
     DashboardComponent,
+    RunnersPageComponent,
   ],
   imports: [
     BrowserModule,

src/app/app.routing.ts

@@ -1,17 +1,11 @@
 import { Routes, RouterModule } from "@angular/router";
 import { NgModule } from '@angular/core';
-
-import { TableComponent } from "./table/table.component";
-import { WorkloadDashboardComponent } from "./workload-dashboard/workload-dashboard.component";
-import { WorkloadsComponent } from "./workloads/workloads.component";
-import { OverviewComponent } from "./overview/overview.component";
-import { StableReleaseComponent } from "./stable-release/stable-release.component"
 import { PipelinesDashboardComponent } from "./pipelines-dashboard/pipelines-dashboard.component";
 import { PipelineTableComponent } from "./components/pipeline-table/pipeline-table.component";
 import { PipelineDetailComponent } from "./components/pipeline-detail/pipeline-detail.component";
-import { disableDebugTools } from "@angular/platform-browser";
 import { DialogComponent } from "./components/dialog/dialog.component";
 import { DashboardComponent } from "./components/dashboard/dashboard.component";
+import { RunnersPageComponent } from "./components/runners-page/runners-page.component";
 
 const routes: Routes = [
   { path: "", redirectTo: 'home', pathMatch: 'full' },
@@ -33,7 +27,8 @@ const routes: Routes = [
       }]
     }]
   },
-  { path: "openebs/:platform/:engine/pipeline/:id", component: PipelineDetailComponent }
+  { path: "openebs/:platform/:engine/pipeline/:id", component: PipelineDetailComponent },
+  { path: "runners", component: RunnersPageComponent}
 
 ];
 

src/app/components/runners-page/runners-page.component.html

@@ -0,0 +1,23 @@
+<div class="container-fluid bg-white h-100" style="overflow-y: scroll;">
+  <div *ngIf="RunnersArray" class="d-flex flex-wrap p-1 mt-2" style="overflow-y: scroll;">
+    <div *ngFor="let Runner of RunnersArray" class="card m-2" style="width: 18rem;">
+      <span class="card-title card-header text-center">Name: {{Runner.name}}</span>
+      <div class="m-1 ">
+        <ul class="list-group" style="font-size: 14px;">
+          <li class="list-group-item d-flex justify-content-between">
+            <span>ID: {{Runner.id}}</span>
+            <span>status: <span class="RunnerStatus my-auto" [ngClass]="Runner.online ? 'RunnerOnline' : 'RunnerOffline'">{{Runner.status}}</span></span>
+          </li>
+          <li class="list-group-item">
+            <p class="card-text" >
+              Description:
+              <span class="d-block">{{Runner.description}}</span>
+
+            </p>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/runners-page/runners-page.component.scss

@@ -0,0 +1,18 @@
+.RunnerStatus{
+    width: 1rem;
+    // border: 1px solid #e4e6e8;
+    border-radius: 50px;
+    padding: 0px 5px;
+    font-size: 14px;
+    &.RunnerOnline{
+        // border: 1px solid #64B5F6;
+        background-color: #1E88E5;
+        color: #f2fde4;
+    }
+    &.RunnerOffline{
+        border: none !important;
+        background-color: #E53935;
+        color: #f2fde4;
+    }
+
+}

src/app/components/runners-page/runners-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RunnersPageComponent } from './runners-page.component';
+
+describe('RunnersPageComponent', () => {
+  let component: RunnersPageComponent;
+  let fixture: ComponentFixture<RunnersPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RunnersPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RunnersPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/runners-page/runners-page.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { DashboardData } from "../../services/ci-dashboard.service";
+
+
+@Component({
+  selector: 'app-runners-page',
+  templateUrl: './runners-page.component.html',
+  styleUrls: ['./runners-page.component.scss']
+})
+export class RunnersPageComponent implements OnInit {
+
+  constructor(private ApiService: DashboardData) { }
+  public RunnersArray: any;
+
+  ngOnInit() {
+    this.ApiService.getAnyEndpointData("/runners").subscribe(res => {
+      console.log(res);
+      this.RunnersArray = res
+    },
+      err => { console.log("Error on fetching runners data : \t", err) }
+
+    )
+  }
+}