[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / dashboard / health / health.component.html

<div *ngIf="healthData && enabledFeature$ | async as enabledFeature"
     class="container-fluid">
  <cd-info-group groupTitle="Status"
                 i18n-groupTitle
                 class="row info-group"
                 *ngIf="healthData.health?.status
                 || healthData.mon_status
                 || healthData.osd_map
                 || healthData.mgr_map
                 || healthData.hosts != null
                 || healthData.rgw != null
                 || healthData.fs_map
                 || healthData.iscsi_daemons != null">

    <cd-info-card cardTitle="Cluster Status"
                  i18n-cardTitle
                  class="col-sm-6 col-md-4 col-lg-3"
                  [contentClass]="healthData.health?.checks?.length > 0 ? 'content-highlight text-area-size-2' : 'content-highlight'"
                  *ngIf="healthData.health?.status">
      <ng-container *ngIf="healthData.health?.checks?.length > 0">
        <ng-template #healthChecks>
          <ng-container *ngTemplateOutlet="logsLink"></ng-container>
          <ul>
            <li *ngFor="let check of healthData.health.checks">
              <span [ngStyle]="check.severity | healthColor">{{ check.type }}</span>: {{ check.summary.message }}
            </li>
          </ul>
        </ng-template>
        <div class="info-card-content-clickable"
             [ngStyle]="healthData.health.status | healthColor"
             [popover]="healthChecks"
             triggers=""
             #healthChecksTarget="bs-popover"
             placement="bottom"
             container="body"
             containerClass="info-card-popover-cluster-status"
             (click)="healthChecksTarget.toggle()">
          {{ healthData.health.status }}
        </div>
      </ng-container>
      <ng-container *ngIf="!healthData.health?.checks?.length">
        <div [ngStyle]="healthData.health.status | healthColor">
          {{ healthData.health.status }}
        </div>
      </ng-container>
    </cd-info-card>

    <cd-info-card cardTitle="Monitors"
                  i18n-cardTitle
                  link="/monitor"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-highlight"
                  *ngIf="healthData.mon_status">
      {{ healthData.mon_status | monSummary }}
    </cd-info-card>

    <cd-info-card cardTitle="OSDs"
                  i18n-cardTitle
                  link="/osd"
                  class="col-sm-6 col-md-4 col-lg-3"
                  *ngIf="(healthData.osd_map | osdSummary) as transformedResult"
                  [contentClass]="(transformedResult.length == 5 ? 'text-area-size-3' : 'text-area-size-2') + ' content-highlight'">
      <span *ngFor="let result of transformedResult"
            [ngClass]="result.class">
        {{ result.content }}
      </span>
    </cd-info-card>

    <cd-info-card cardTitle="Manager Daemons"
                  i18n-cardTitle
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-highlight text-area-size-2"
                  *ngIf="healthData.mgr_map">
      <span *ngFor="let result of (healthData.mgr_map | mgrSummary)"
            [ngClass]="result.class"
            [title]="result.titleText != null ? result.titleText : ''">
        {{ result.content }}
      </span>
    </cd-info-card>

    <cd-info-card cardTitle="Hosts"
                  i18n-cardTitle
                  link="/hosts"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-medium content-highlight"
                  *ngIf="healthData.hosts != null">
      {{ healthData.hosts }} total
    </cd-info-card>

    <cd-info-card cardTitle="Object Gateways"
                  i18n-cardTitle
                  link="/rgw/daemon"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-medium content-highlight"
                  *ngIf="enabledFeature.rgw && healthData.rgw != null">
      {{ healthData.rgw }} total
    </cd-info-card>
    <cd-info-card cardTitle="Metadata Servers"
                  i18n-cardTitle
                  class="col-sm-6 col-md-4 col-lg-3"
                  *ngIf="(enabledFeature.cephfs && healthData.fs_map | mdsSummary) as transformedResult"
                  [contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
      <span *ngFor="let result of transformedResult"
            [ngClass]="result.class">
        {{ result.content }}
      </span>
    </cd-info-card>

    <cd-info-card cardTitle="iSCSI Gateways"
                  i18n-cardTitle
                  link="/block/iscsi"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-medium content-highlight"
                  *ngIf="enabledFeature.iscsi && healthData.iscsi_daemons != null">
      {{ healthData.iscsi_daemons }} total
    </cd-info-card>
  </cd-info-group>

  <cd-info-group groupTitle="Performance"
                 i18n-groupTitle
                 class="row info-group"
                 *ngIf="healthData.client_perf || healthData.scrub_status">

    <div class="cd-container-flex">
      <cd-info-card cardTitle="Client IOPS"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="healthData.client_perf">
        {{ (healthData.client_perf.read_op_per_sec + healthData.client_perf.write_op_per_sec) | round:1 }}
      </cd-info-card>

      <cd-info-card cardTitle="Client Throughput"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="healthData.client_perf">
        {{ ((healthData.client_perf.read_bytes_sec + healthData.client_perf.write_bytes_sec) | dimlessBinary) + '/s' }}
      </cd-info-card>

      <cd-info-card cardTitle="Client Read/Write"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    [contentClass]="isClientReadWriteChartShowable() ? 'content-chart': 'content-medium content-highlight'"
                    *ngIf="healthData.client_perf">
        <cd-health-pie *ngIf="isClientReadWriteChartShowable()"
                       [data]="healthData"
                       (prepareFn)="prepareReadWriteRatio($event[0], $event[1])">
        </cd-health-pie>
        <span *ngIf="!isClientReadWriteChartShowable()">
          N/A
        </span>
      </cd-info-card>

      <cd-info-card cardTitle="Recovery Throughput"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="healthData.client_perf">
        {{ (healthData.client_perf.recovering_bytes_per_sec | dimlessBinary) + '/s' }}
      </cd-info-card>

      <cd-info-card cardTitle="Scrub"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="healthData.scrub_status">
        {{ healthData.scrub_status }}
      </cd-info-card>
    </div>
  </cd-info-group>

  <cd-info-group groupTitle="Capacity"
                 i18n-groupTitle
                 class="row info-group"
                 *ngIf="healthData.pools
                 || healthData.df
                 || healthData.pg_info">

    <div class="cd-container-flex">
      <cd-info-card cardTitle="Pools"
                    i18n-cardTitle
                    link="/pool"
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="healthData.pools">
        {{ healthData.pools.length }}
      </cd-info-card>

      <cd-info-card cardTitle="Raw Capacity"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-chart"
                    *ngIf="healthData.df">
        <cd-health-pie [data]="healthData"
                       [config]="rawCapacityChartConfig"
                       [showLabelAsTooltip]="true"
                       (prepareFn)="prepareRawUsage($event[0], $event[1])">
        </cd-health-pie>
      </cd-info-card>

      <cd-info-card cardTitle="Objects"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-chart"
                    *ngIf="healthData.pg_info?.object_stats?.num_objects != null">
        <cd-health-pie [data]="healthData"
                       [config]="objectsChartConfig"
                       (prepareFn)="prepareObjects($event[0], $event[1])">
        </cd-health-pie>
      </cd-info-card>

      <cd-info-card cardTitle="PGs per OSD"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="healthData.pg_info">
        {{ healthData.pg_info.pgs_per_osd | dimless }}
      </cd-info-card>

      <cd-info-card cardTitle="PG Status"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-chart"
                    (click)="pgStatusTarget.toggle()"
                    *ngIf="healthData.pg_info">
        <ng-template #pgStatus>
          <ng-container *ngTemplateOutlet="logsLink"></ng-container>
          <ul>
            <li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
              {{ pgStatesText.key }}: {{ pgStatesText.value }}
            </li>
          </ul>
        </ng-template>
        <div class="pg-status-popover-wrapper">
          <div [popover]="pgStatus"
               triggers=""
               #pgStatusTarget="bs-popover"
               placement="bottom">
            <cd-health-pie [data]="healthData"
                           [config]="pgStatusChartConfig"
                           (prepareFn)="preparePgStatus($event[0], $event[1])">
            </cd-health-pie>
          </div>
        </div>
      </cd-info-card>
    </div>
  </cd-info-group>

  <ng-template #logsLink>
    <ng-container *ngIf="permissions.log.read">
      <p class="logs-link"
         i18n><i class="fa fa-info-circle"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
    </ng-container>
  </ng-template>
</div>
Commit	Line	Data
11fdf7f2 TL	1	<div *ngIf="healthData && enabledFeature$ \| async as enabledFeature"
	2	class="container-fluid">
	3	<cd-info-group groupTitle="Status"
	4	i18n-groupTitle
	5	class="row info-group"
	6	*ngIf="healthData.health?.status
	7	\|\| healthData.mon_status
	8	\|\| healthData.osd_map
	9	\|\| healthData.mgr_map
	10	\|\| healthData.hosts != null
	11	\|\| healthData.rgw != null
	12	\|\| healthData.fs_map
	13	\|\| healthData.iscsi_daemons != null">
	14
	15	<cd-info-card cardTitle="Cluster Status"
	16	i18n-cardTitle
	17	class="col-sm-6 col-md-4 col-lg-3"
	18	[contentClass]="healthData.health?.checks?.length > 0 ? 'content-highlight text-area-size-2' : 'content-highlight'"
	19	*ngIf="healthData.health?.status">
	20	<ng-container *ngIf="healthData.health?.checks?.length > 0">
	21	<ng-template #healthChecks>
	22	<ng-container *ngTemplateOutlet="logsLink"></ng-container>
	23	<ul>
	24	<li *ngFor="let check of healthData.health.checks">
	25	<span [ngStyle]="check.severity \| healthColor">{{ check.type }}</span>: {{ check.summary.message }}
	26	</li>
	27	</ul>
	28	</ng-template>
	29	<div class="info-card-content-clickable"
	30	[ngStyle]="healthData.health.status \| healthColor"
	31	[popover]="healthChecks"
	32	triggers=""
	33	#healthChecksTarget="bs-popover"
	34	placement="bottom"
	35	container="body"
	36	containerClass="info-card-popover-cluster-status"
	37	(click)="healthChecksTarget.toggle()">
	38	{{ healthData.health.status }}
	39	</div>
	40	</ng-container>
	41	<ng-container *ngIf="!healthData.health?.checks?.length">
	42	<div [ngStyle]="healthData.health.status \| healthColor">
	43	{{ healthData.health.status }}
	44	</div>
	45	</ng-container>
	46	</cd-info-card>
	47
	48	<cd-info-card cardTitle="Monitors"
	49	i18n-cardTitle
	50	link="/monitor"
	51	class="col-sm-6 col-md-4 col-lg-3"
	52	contentClass="content-highlight"
	53	*ngIf="healthData.mon_status">
	54	{{ healthData.mon_status \| monSummary }}
	55	</cd-info-card>
	56
	57	<cd-info-card cardTitle="OSDs"
	58	i18n-cardTitle
	59	link="/osd"
	60	class="col-sm-6 col-md-4 col-lg-3"
	61	*ngIf="(healthData.osd_map \| osdSummary) as transformedResult"
	62	[contentClass]="(transformedResult.length == 5 ? 'text-area-size-3' : 'text-area-size-2') + ' content-highlight'">
	63	<span *ngFor="let result of transformedResult"
	64	[ngClass]="result.class">
65	{{ result.content }}
66	</span>
67	</cd-info-card>
68
69	<cd-info-card cardTitle="Manager Daemons"
70	i18n-cardTitle
71	class="col-sm-6 col-md-4 col-lg-3"
72	contentClass="content-highlight text-area-size-2"
73	*ngIf="healthData.mgr_map">
74	<span *ngFor="let result of (healthData.mgr_map \| mgrSummary)"
75	[ngClass]="result.class"
76	[title]="result.titleText != null ? result.titleText : ''">
77	{{ result.content }}
78	</span>
79	</cd-info-card>
80
81	<cd-info-card cardTitle="Hosts"
82	i18n-cardTitle
83	link="/hosts"
84	class="col-sm-6 col-md-4 col-lg-3"
85	contentClass="content-medium content-highlight"
86	*ngIf="healthData.hosts != null">
87	{{ healthData.hosts }} total
88	</cd-info-card>
89
90	<cd-info-card cardTitle="Object Gateways"
91	i18n-cardTitle
92	link="/rgw/daemon"
93	class="col-sm-6 col-md-4 col-lg-3"
94	contentClass="content-medium content-highlight"
95	*ngIf="enabledFeature.rgw && healthData.rgw != null">
96	{{ healthData.rgw }} total
97	</cd-info-card>
98	<cd-info-card cardTitle="Metadata Servers"
99	i18n-cardTitle
100	class="col-sm-6 col-md-4 col-lg-3"
101	*ngIf="(enabledFeature.cephfs && healthData.fs_map \| mdsSummary) as transformedResult"
102	[contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
103	<span *ngFor="let result of transformedResult"
104	[ngClass]="result.class">
105	{{ result.content }}
106	</span>
107	</cd-info-card>
108
109	<cd-info-card cardTitle="iSCSI Gateways"
110	i18n-cardTitle
111	link="/block/iscsi"
112	class="col-sm-6 col-md-4 col-lg-3"
113	contentClass="content-medium content-highlight"
114	*ngIf="enabledFeature.iscsi && healthData.iscsi_daemons != null">
115	{{ healthData.iscsi_daemons }} total
116	</cd-info-card>
117	</cd-info-group>
118
119	<cd-info-group groupTitle="Performance"
120	i18n-groupTitle
121	class="row info-group"
122	*ngIf="healthData.client_perf \|\| healthData.scrub_status">
123
124	<div class="cd-container-flex">
125	<cd-info-card cardTitle="Client IOPS"
126	i18n-cardTitle
127	class="cd-col-5"
128	cardClass="card-medium"
129	contentClass="content-medium content-highlight"
130	*ngIf="healthData.client_perf">
131	{{ (healthData.client_perf.read_op_per_sec + healthData.client_perf.write_op_per_sec) \| round:1 }}
132	</cd-info-card>
133
134	<cd-info-card cardTitle="Client Throughput"
135	i18n-cardTitle
136	class="cd-col-5"
137	cardClass="card-medium"
138	contentClass="content-medium content-highlight"
139	*ngIf="healthData.client_perf">
140	{{ ((healthData.client_perf.read_bytes_sec + healthData.client_perf.write_bytes_sec) \| dimlessBinary) + '/s' }}
141	</cd-info-card>
142
143	<cd-info-card cardTitle="Client Read/Write"
144	i18n-cardTitle
145	class="cd-col-5"
146	cardClass="card-medium"
147	[contentClass]="isClientReadWriteChartShowable() ? 'content-chart': 'content-medium content-highlight'"
148	*ngIf="healthData.client_perf">
149	<cd-health-pie *ngIf="isClientReadWriteChartShowable()"
150	[data]="healthData"
11fdf7f2 TL	151	(prepareFn)="prepareReadWriteRatio($event[0], $event[1])">
	152	</cd-health-pie>
	153	<span *ngIf="!isClientReadWriteChartShowable()">
	154	N/A
	155	</span>
	156	</cd-info-card>
	157
	158	<cd-info-card cardTitle="Recovery Throughput"
	159	i18n-cardTitle
	160	class="cd-col-5"
	161	cardClass="card-medium"
	162	contentClass="content-medium content-highlight"
	163	*ngIf="healthData.client_perf">
	164	{{ (healthData.client_perf.recovering_bytes_per_sec \| dimlessBinary) + '/s' }}
	165	</cd-info-card>
	166
	167	<cd-info-card cardTitle="Scrub"
	168	i18n-cardTitle
	169	class="cd-col-5"
	170	cardClass="card-medium"
	171	contentClass="content-medium content-highlight"
	172	*ngIf="healthData.scrub_status">
	173	{{ healthData.scrub_status }}
	174	</cd-info-card>
	175	</div>
	176	</cd-info-group>
	177
	178	<cd-info-group groupTitle="Capacity"
	179	i18n-groupTitle
	180	class="row info-group"
	181	*ngIf="healthData.pools
	182	\|\| healthData.df
11fdf7f2 TL	183	\|\| healthData.pg_info">
	184
	185	<div class="cd-container-flex">
	186	<cd-info-card cardTitle="Pools"
	187	i18n-cardTitle
	188	link="/pool"
	189	class="cd-col-5"
	190	cardClass="card-medium"
	191	contentClass="content-medium content-highlight"
	192	*ngIf="healthData.pools">
	193	{{ healthData.pools.length }}
	194	</cd-info-card>
	195
	196	<cd-info-card cardTitle="Raw Capacity"
	197	i18n-cardTitle
	198	class="cd-col-5"
	199	cardClass="card-medium"
	200	contentClass="content-chart"
	201	*ngIf="healthData.df">
	202	<cd-health-pie [data]="healthData"
81eedcae TL	203	[config]="rawCapacityChartConfig"
81eedcae TL	204	[showLabelAsTooltip]="true"
11fdf7f2 TL	205	(prepareFn)="prepareRawUsage($event[0], $event[1])">
	206	</cd-health-pie>
	207	</cd-info-card>
	208
	209	<cd-info-card cardTitle="Objects"
	210	i18n-cardTitle
	211	class="cd-col-5"
	212	cardClass="card-medium"
81eedcae TL	213	contentClass="content-chart"
	214	*ngIf="healthData.pg_info?.object_stats?.num_objects != null">
	215	<cd-health-pie [data]="healthData"
	216	[config]="objectsChartConfig"
	217	(prepareFn)="prepareObjects($event[0], $event[1])">
	218	</cd-health-pie>
11fdf7f2 TL	219	</cd-info-card>
	220
	221	<cd-info-card cardTitle="PGs per OSD"
	222	i18n-cardTitle
	223	class="cd-col-5"
	224	cardClass="card-medium"
	225	contentClass="content-medium content-highlight"
	226	*ngIf="healthData.pg_info">
	227	{{ healthData.pg_info.pgs_per_osd \| dimless }}
	228	</cd-info-card>
	229
	230	<cd-info-card cardTitle="PG Status"
	231	i18n-cardTitle
	232	class="cd-col-5"
	233	cardClass="card-medium"
	234	contentClass="content-chart"
	235	(click)="pgStatusTarget.toggle()"
	236	*ngIf="healthData.pg_info">
	237	<ng-template #pgStatus>
	238	<ng-container *ngTemplateOutlet="logsLink"></ng-container>
	239	<ul>
	240	<li *ngFor="let pgStatesText of healthData.pg_info.statuses \| keyvalue">
	241	{{ pgStatesText.key }}: {{ pgStatesText.value }}
	242	</li>
	243	</ul>
	244	</ng-template>
	245	<div class="pg-status-popover-wrapper">
	246	<div [popover]="pgStatus"
	247	triggers=""
	248	#pgStatusTarget="bs-popover"
	249	placement="bottom">
	250	<cd-health-pie [data]="healthData"
81eedcae	251	[config]="pgStatusChartConfig"
11fdf7f2 TL	252	(prepareFn)="preparePgStatus($event[0], $event[1])">
	253	</cd-health-pie>
	254	</div>
	255	</div>
	256	</cd-info-card>
	257	</div>
	258	</cd-info-group>
	259
	260	<ng-template #logsLink>
	261	<ng-container *ngIf="permissions.log.read">
	262	<p class="logs-link"
	263	i18n><i class="fa fa-info-circle"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
	264	</ng-container>
	265	</ng-template>
	266	</div>