<template>
  <div class="col">
    <h4>Memory <span :class="'badge badge-' + percentageClass"><formatBytes :bytes="(status.MemUsed + status.Buffers + status.Cached) * 1024" /> / <formatBytes :bytes="status.MemTotal * 1024" /></span></h4>
    <div class="progress">
      <div class="progress-bar bg-success" role="progressbar" :style="{ width: memoryPercentage + '%' }" :aria-valuenow="memoryPercentage" aria-valuemin="0" aria-valuemax="100"></div>
      <div class="progress-bar bg-warning" role="progressbar" :style="{ width: memoryBufCachePercentage + '%' }" :aria-valuenow="memoryBufCachePercentage" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'memory_status',
    props: [ 'status' ],
    computed: {
      memoryPercentage: function() {
        if (!this.status) {
          return 0;
        }
        return parseFloat((this.status.MemUsed / this.status.MemTotal) * 100).toFixed(1).toString();
      },
      memoryBufCachePercentage: function() {
        if (!this.status) {
          return 0;
        }
        return parseFloat(((this.status.Buffers + this.status.Cached) / this.status.MemTotal) * 100).toFixed(1).toString();
      },
      percentageClass: function() {
        let usedPercent = (this.status.MemUsed / this.status.MemTotal) * 100;
        if (usedPercent >= 90) {
          return 'danger';
        } else if (usedPercent >= 80) {
          return 'warning';
        }
        return 'success'
      },
    }
  }
</script>
