Link apps and volumes in disk usage listing

dashboard/src/components/DiskUsageItem.vue

@@ -44,6 +44,8 @@ async function refresh() {
         if (payload.speed) {
           speed.value = payload.speed;
         } else if (payload.content) {
+          // this can happen if more than one backup sites for filesystem share the folder, so avoid negativ values here
+          if (payload.content.usage < 0) payload.content.usage = 0;
           contents.value.push(payload.content);
         } else {
           console.error('Unkown data', payload);
@@ -92,7 +94,11 @@ onUnmounted(() => {
         <table style="width: 100%;table-layout: fixed">
           <tr v-for="content in contents" :key="content.id" @mouseover="highlight = content.id" :class="{ highlight: highlight === content.id }">
             <td style="width: 20px"><div class="content-color-indicator" :style="{ backgroundColor: content.color }"></div></td>
-            <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ content.name }}</td>
+            <td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+              <a v-if="content.type === 'app'" :href="`/#/app/${content.id}/info`">{{ content.name }}</a>
+              <a v-else-if="content.type === 'volume'" href="/#/volumes">{{ content.name }} (Volume)</a>
+              <span v-else>{{ content.name }}</span>
+            </td>
             <td style="text-align: right; white-space: nowrap;">{{ prettyDecimalSize(content.usage) }}</td>
           </tr>
         </table>