1 files changed, 102 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
new file mode 100644
index 000000000..fc076a185
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
@@ -0,0 +1,102 @@
+<cd-orchestrator-doc-panel *ngIf="showDocPanel"></cd-orchestrator-doc-panel>
+
+<div *ngIf="flag === 'hostDetails'; else serviceDetailsTpl">
+  <ng-container *ngTemplateOutlet="serviceDaemonDetailsTpl"></ng-container>
+</div>
+
+<ng-template #serviceDetailsTpl>
+  <ng-container>
+    <ul ngbNav
+        #nav="ngbNav"
+        class="nav-tabs"
+        cdStatefulTab="service-details">
+      <li ngbNavItem="details">
+        <a ngbNavLink
+           i18n>Details</a>
+        <ng-template ngbNavContent>
+          <ng-container *ngTemplateOutlet="serviceDaemonDetailsTpl"></ng-container>
+        </ng-template>
+      </li>
+      <li ngbNavItem="service_events">
+        <a ngbNavLink
+           i18n>Service Events</a>
+        <ng-template ngbNavContent>
+          <cd-table *ngIf="hasOrchestrator"
+                    #serviceTable
+                    [data]="services"
+                    [columns]="serviceColumns"
+                    columnMode="flex"
+                    (fetchData)="getServices($event)">
+          </cd-table>
+        </ng-template>
+      </li>
+    </ul>
+    <div [ngbNavOutlet]="nav"></div>
+  </ng-container>
+</ng-template>
+
+<ng-template #statusTpl
+             let-row="row">
+  <span class="badge"
+        [ngClass]="row | pipeFunction:getStatusClass">
+    {{ row.status_desc }}
+  </span>
+</ng-template>
+
+<ng-template #listTpl
+             let-events="value">
+  <ul class="list-group list-group-flush"
+      *ngIf="events?.length else noEventsAvailable">
+    <li class="list-group-item"
+        *ngFor="let event of events; trackBy:trackByFn">
+      <b>{{ event.created | relativeDate }} - </b>
+      <span class="badge badge-info">{{ event.subject }}</span><br>
+      <span *ngIf="event.level === 'INFO'">
+      <i [ngClass]="[icons.infoCircle]"
+         aria-hidden="true"></i>
+      </span>
+      <span *ngIf="event.level === 'ERROR'">
+      <i [ngClass]="[icons.warning]"
+         aria-hidden="true"></i>
+      </span>
+      {{ event.message }}
+    </li>
+  </ul>
+  <ng-template #noEventsAvailable>
+    <div *ngIf="events?.length === 0"
+         class="list-group-item">
+      <span>No data available</span>
+    </div>
+  </ng-template>
+</ng-template>
+
+<ng-template #serviceDaemonDetailsTpl>
+  <cd-table *ngIf="hasOrchestrator"
+            #daemonsTable
+            [data]="daemons"
+            selectionType="single"
+            [columns]="columns"
+            columnMode="flex"
+            identifier="daemon_name"
+            (fetchData)="getDaemons($event)"
+            (updateSelection)="updateSelection($event)">
+    <cd-table-actions id="service-daemon-list-actions"
+                      class="table-actions"
+                      [selection]="selection"
+                      [permission]="permissions.hosts"
+                      [tableActions]="tableActions">
+    </cd-table-actions>
+  </cd-table>
+</ng-template>
+
+<ng-template #cpuTpl
+             let-row="row">
+  <cd-usage-bar [total]="total"
+                [calculatePerc]="false"
+                [used]="row.cpu_percentage"
+                [isBinary]="false"
+                [warningThreshold]="warningThreshold"
+                [errorThreshold]="errorThreshold">
+  </cd-usage-bar>
+</ng-template>
+