ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.html

   1 <ng-template #usageTooltipTpl>
   2   <table>
   3     <tr>
   4       <td class="text-left">Used:&nbsp;</td>
   5       <td class="text-right"><strong> {{ isBinary ? (used | dimlessBinary) : (used | dimless) }}</strong></td>
   6     </tr>
   7     <tr *ngIf="calculatePerc">
   8       <td class="text-left">Free:&nbsp;</td>
   9       <td class="'text-right"><strong>{{ isBinary ? (total - used | dimlessBinary) : (total - used | dimless) }}</strong></td>
  10     </tr>
  11   </table>
  12 </ng-template>
  13
  14 <div class="progress"
  15      data-placement="left"
  16      [ngbTooltip]="usageTooltipTpl">
  17   <div class="progress-bar bg-info"
  18        [ngClass]="{'bg-warning': usedPercentage/100 >= warningThreshold, 'bg-danger': usedPercentage/100 >= errorThreshold}"
  19        role="progressbar"
  20        [style.width]="usedPercentage + '%'">
  21     <span>{{ usedPercentage | number: '1.0-' + decimals }}%</span>
  22   </div>
  23   <div class="progress-bar bg-freespace"
  24        role="progressbar"
  25        [style.width]="freePercentage + '%'">
  26   </div>
  27 </div>