cloudron-box/dashboard/src/components/DiskUsage.vue

<script setup>

import { ref, onMounted } from 'vue';
import Section from './Section.vue';
import SystemModel from '../models/SystemModel.js';
import DiskUsageItem from './DiskUsageItem.vue';

const systemModel = SystemModel.create();

const ready = ref(false);
const filesystems = ref([]);

onMounted(async () => {
  const [error, result] = await systemModel.filesystems();
  if (error) return console.error(error);

  filesystems.value = result;
  ready.value = true;
});

</script>

<template>
  <Section :title="$t('system.diskUsage.title')">
    <div class="filesystems-grid">
      <DiskUsageItem v-for="filesystem in filesystems" :key="filesystem.filesystem" :filesystem="filesystem" />
    </div>
  </Section>
</template>

<style scoped>

.filesystems-grid {
  display: flex;
  height: 100%;
  width: 100%;
  transition: 300ms;
  flex-wrap: wrap;
  justify-content: start;
  align-content: start;
}

.usage-bar {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 20px;
  background-color: #d8dee4;
  color: #7f7f7f;
}

@media (prefers-color-scheme: dark) {
  .usage-bar {
    background-color: white;
  }
}

.usage-bar-section {
  display: inline-block;
  height: 100%;
}

.usage-bar-section-remaining {
  display: inline-block;
  height: 100%;
  margin: auto;
}

.color-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  line-height: 16px;
  margin-right: 4px;
}

.disk-content {
  white-space: nowrap;
  overflow: auto;
}

.disk-content-size {
  color: #777;
  margin-left: 4px;
}

.disks-last-updated {
  font-size: 12px;
  font-weight: bold;
  align-self: center;
}

</style>