1 files changed, 77 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
new file mode 100644
index 000000000..b41ecfa86
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.html
@@ -0,0 +1,77 @@
+<ul ngbNav
+    #nav="ngbNav"
+    class="nav-tabs">
+  <li ngbNavItem>
+    <a ngbNavLink
+       i18n>Hosts List</a>
+    <ng-template ngbNavContent>
+      <cd-table #table
+                [data]="hosts"
+                [columns]="columns"
+                columnMode="flex"
+                (fetchData)="getHosts($event)"
+                selectionType="single"
+                [hasDetails]="hasTableDetails"
+                (setExpandedRow)="setExpandedRow($event)"
+                (updateSelection)="updateSelection($event)"
+                [toolHeader]="!hideToolHeader">
+        <div class="table-actions btn-toolbar">
+          <cd-table-actions [permission]="permissions.hosts"
+                            [selection]="selection"
+                            class="btn-group"
+                            id="host-actions"
+                            [tableActions]="tableActions">
+          </cd-table-actions>
+        </div>
+        <cd-host-details cdTableDetail
+                         [permissions]="permissions"
+                         [selection]="expandedRow">
+        </cd-host-details>
+      </cd-table>
+    </ng-template>
+  </li>
+  <li ngbNavItem
+      *ngIf="permissions.grafana.read">
+    <a ngbNavLink
+       i18n>Overall Performance</a>
+    <ng-template ngbNavContent>
+      <cd-grafana [grafanaPath]="'host-overview?'"
+                  uid="y0KGL0iZz"
+                  grafanaStyle="two">
+      </cd-grafana>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav"></div>
+
+<ng-template #servicesTpl
+             let-value="value">
+  <span *ngFor="let instance of value; last as isLast">
+    <span class="badge badge-background-primary" >{{ instance }}</span>
+    <ng-container *ngIf="!isLast">&nbsp;</ng-container>
+  </span>
+</ng-template>
+
+<ng-template #maintenanceConfirmTpl>
+  <div *ngFor="let msg of errorMessage; let last=last">
+    <ul *ngIf="!last || errorMessage.length == '1'">
+      <li i18n>{{ msg }}</li>
+    </ul>
+  </div>
+  <ng-container i18n
+                *ngIf="showSubmit">Are you sure you want to continue?</ng-container>
+</ng-template>
+
+<ng-template #orchTmpl>
+  <span i18n
+        i18n-ngbTooltip
+        ngbTooltip="Data will be available only if Orchestrator is available.">N/A</span>
+</ng-template>
+
+<ng-template #flashTmpl>
+  <span i18n
+        i18n-ngbTooltip
+        ngbTooltip="SSD, NVMEs">Flash</span>
+</ng-template>
+<router-outlet name="modal"></router-outlet>