1 files changed, 44 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
new file mode 100644
index 000000000..5e52880f0
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
@@ -0,0 +1,44 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+import _ from 'lodash';
+
+import { OsdService } from '~/app/shared/api/osd.service';
+import { Permission } from '~/app/shared/models/permissions';
+import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
+
+@Component({
+  selector: 'cd-osd-details',
+  templateUrl: './osd-details.component.html',
+  styleUrls: ['./osd-details.component.scss']
+})
+export class OsdDetailsComponent implements OnChanges {
+  @Input()
+  selection: any;
+
+  osd: {
+    id?: number;
+    details?: any;
+    tree?: any;
+  };
+  grafanaPermission: Permission;
+
+  constructor(private osdService: OsdService, private authStorageService: AuthStorageService) {
+    this.grafanaPermission = this.authStorageService.getPermissions().grafana;
+  }
+
+  ngOnChanges() {
+    if (this.osd?.id !== this.selection?.id) {
+      this.osd = this.selection;
+    }
+
+    if (_.isNumber(this.osd?.id)) {
+      this.refresh();
+    }
+  }
+
+  refresh() {
+    this.osdService.getDetails(this.osd.id).subscribe((data) => {
+      this.osd.details = data;
+    });
+  }
+}