<template>
  <div class="col">
    <h4>Disk Space <span :class="'badge badge-' + percentageClass"><formatBytes :bytes="status.used"></formatBytes> of <formatBytes :bytes="status.total"></formatBytes></span></h4>
    <div class="progress">
      <div :class="'progress-bar bg-' + percentageClass" role="progressbar" :style="{ width : usedPercentage + '%' }" :aria-valuenow="usedPercentage" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'disk_status',
    props: [ 'status' ],
    computed: {
      usedPercentage: function() {
        if (!this.status) {
          return 0;
        }
        return parseFloat((this.status.used / this.status.total) * 100).toFixed(1).toString();
      },
      percentageClass: function() {
        let usedPercent = (this.status.used / this.status.total) * 100;
        if (usedPercent >= 90) {
          return 'danger';
        } else if (usedPercent >= 75) {
          return 'warning';
        }
        return 'success'
      },
    }
  }
</script>
