Manage domain and account resources.

frontend/src/components/tools/Resources.vue

@@ -0,0 +1,39 @@
+<template>
+<v-card>
+  <v-card-title>
+    <translate class="headline">Resources usage</translate>
+  </v-card-title>
+  <v-card-text>
+    <div
+      v-for="resource in resources"
+      :key="resource.name"
+      class="mt-4"
+      >
+      {{ resource.label }} ({{ Math.ceil(resource.usage) }}%)
+      <v-progress-linear
+        :value="resource.usage"
+        :color="getProgressColor(resource.usage)"
+        />
+    </div>
+  </v-card-text>
+</v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    resources: Array
+  },
+  methods: {
+    getProgressColor (value) {
+      if (value < 50) {
+        return 'primary'
+      }
+      if (value < 80) {
+        return 'warning'
+      }
+      return 'error'
+    }
+  }
+}
+</script>

frontend/src/components/tools/ResourcesForm.vue

@@ -0,0 +1,37 @@
+<template>
+<validation-observer ref="observer">
+  <validation-provider
+    v-for="resource in resources"
+    :key="resource.name"
+    v-slot="{ errors }"
+    rules="required"
+    >
+    <label class="m-label">{{ resource.label }}</label>
+    <v-text-field
+      v-model="resource.max_value"
+      type="number"
+      outlined
+      dense
+      :error-messages="errors"
+      />
+  </validation-provider>
+</validation-observer>
+</template>
+
+<script>
+export default {
+  props: {
+    resources: Array
+  },
+  methods: {
+    async validateForm () {
+      return await this.$refs.observer.validate()
+    },
+    getPayload () {
+      return this.resources.map(r => {
+        return { name: r.name, max_value: r.max_value }
+      })
+    }
+  }
+}
+</script>