Skip to content

Commit

Permalink
FIX: icon added to the volume sets
Browse files Browse the repository at this point in the history
  • Loading branch information
@mabasian
mabasian committed Sep 19, 2024
1 parent 1398fee commit 6bf5312
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 47 deletions.
2 changes: 2 additions & 0 deletions launcher/src/backend/Monitoring.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1710,6 +1710,7 @@ export class Monitoring {
var storagesizes = result.stdout.trim().split("\n");
storagesizes.forEach(function (val, index) {
let svc = index in sshcommands ? sshcommands[index].svc : false;

if (svc) {
// Prometheus NE does not store data but using "/" as volume, see #1095
// Likely not queried at all if defined in ignoreServices (see above)
Expand All @@ -1725,6 +1726,7 @@ export class Monitoring {
.replace(/NodeExporter/gi, " ne")
.toUpperCase(),
storageValue: (!val || val < 1 ? "0 " : val.replace(/([a-z]+)/is, " $1")) + "B",
service: svc.service,
});
}
});
Expand Down
104 changes: 57 additions & 47 deletions launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,69 @@
<div class="volume-Ico-container flex justify-center items-center w-full h-4/5">
<img class="w-3/4" src="/img/icon/control-page-icons/hdd.svg" />
</div>
<span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">volume</span>
<span
class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase"
>volume</span
>
</div>
<div class="volume-box w-2/3 h-full flex flex-col justify-center items-center p-1">
<div class="volume_services p-1 gap-1 flex w-full h-2/3 border rounded-md border-gray-500 overflow-x-scroll">
<div
class="volume_services p-1 gap-1 flex w-full h-2/3 border rounded-md border-gray-500 overflow-x-scroll"
>
<div
v-for="item in storagestatus"
:key="item.id"
:class="getDynamicClass(item.percentage)"
class="squa flex-shrink-0 border border-gray-500 rounded-none flex items-center justify-center"
class="squa flex-shrink-0 border border-gray-500 rounded-none flex justify-center items-center"
>
<img :src="item.icon" alt="icon" class="h-1/2 w-1/2" />
<!-- Display service icon -->
<img :src="item.icon" alt="Service Icon" class="w-4/5 h-4/5" />
</div>
</div>
<div class="hdd-services w-full h-1/3 flex">
<div class="left-side w-3/5 h-full flex justify-center items-center text-[40%] text-green-500 uppercase">
<div
class="left-side w-3/5 h-full flex justify-center items-center text-[40%] text-green-500 uppercase"
>
<span>{{ availDisk }} GB {{ $t("controlPage.free") }} </span
><span class="text-gray-400"> / {{ totalDisk }} GB {{ $t("controlPage.total") }}</span>
><span class="text-gray-400">
/ {{ totalDisk }} GB {{ $t("controlPage.total") }}</span
>
</div>
<div class="right-side w-2/5 h-full flex justify-center items-center uppercase">
<div class="ttl-box w-1/4 h-full flex flex-col justify-center items-center">
<div class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase">write</div>
<div class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase">read</div>
<div
class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase"
>
write
</div>
<div
class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase"
>
read
</div>
</div>
<div class="val-box w-3/4 h-full flex flex-col text-[60%] justify-center font-semibold items-center">
<div class="title w-full h-1/2 flex justify-center items-center text-orange-500 uppercase">
<div
class="val-box w-3/4 h-full flex flex-col text-[60%] justify-center font-semibold items-center"
>
<div
class="title w-full h-1/2 flex justify-center items-center text-orange-500 uppercase"
>
{{ convertWriteValueToMb }}
{{ controlStore.writeValue / 1024 < 1 && controlStore.writeValue / 1024 > 0 ? "KB" : "MB" }}
{{
controlStore.writeValue / 1024 < 1 && controlStore.writeValue / 1024 > 0
? "KB"
: "MB"
}}
</div>
<div class="title w-full h-1/2 flex justify-center items-center text-teal-700 uppercase">
<div
class="title w-full h-1/2 flex justify-center items-center text-teal-700 uppercase"
>
{{ convertReadValueToMb }}
{{ controlStore.readValue / 1024 < 1 && controlStore.writeValue / 1024 > 0 ? "KB" : "MB" }}
{{
controlStore.readValue / 1024 < 1 && controlStore.writeValue / 1024 > 0
? "KB"
: "MB"
}}
</div>
</div>
</div>
Expand All @@ -44,7 +76,7 @@
</template>

<script setup>
import { computed, onMounted } from "vue";
import { computed } from "vue";
import { useControlStore } from "@/store/theControl";
import { useServices } from "@/store/services";
Expand All @@ -63,44 +95,22 @@ const storagestatus = computed(() => {
}
const percentage = (valueInGB / totalDisk.value) * 100;
const matchingService = serviceStore.installedServices.find(
(service) => service.service === item.service
);
const serviceIcon = matchingService
? matchingService.icon
: "/path/to/default/icon.png";
return {
...item,
percentage: parseFloat(percentage.toFixed(2)),
icon: "", // Placeholder for the icon we'll assign later
icon: serviceIcon,
};
});
});
// Function to add icons for Validators (VC) and Notifications
const addIconsToStorageStatus = () => {
storagestatus.value.forEach((statusItem) => {
if (statusItem.title.toLowerCase() === "vc") {
// Assign the icon for Validators
statusItem.icon = "/img/Nimbus-Validator-Circle.851cf9fc.png"; // Replace with actual icon path for Validators
} else if (statusItem.title.toLowerCase() === "notifications") {
// Assign the icon for Notifications
statusItem.icon = "/img/icon/service-icons/Other/NotifierService.svg"; // Replace with actual icon path for Notifications
} else {
// Find matching service from installedServices
const matchingService = serviceStore.installedServices.find(
(service) => service.name.toLowerCase() === statusItem.title.toLowerCase()
);
if (matchingService) {
// Add the icon to the storage status
statusItem.icon = matchingService.icon || matchingService.sIcon || "";
}
}
});
};
console.log(storagestatus.value);
// Call the function when the component is mounted
onMounted(() => {
addIconsToStorageStatus();
});
const availDisk = computed(() => controlStore.availDisk);
const writeValue = computed(() => controlStore.writeValue);
Expand All @@ -110,9 +120,9 @@ const readValue = computed(() => controlStore.readValue);
const getDynamicClass = (percentage) => {
if (percentage < 10) {
return "w-[10%] h-[30%]";
} else if (percentage < 30) {
} else if (percentage < 25) {
return "w-[20%] h-[50%]";
} else if (percentage < 50) {
} else if (percentage < 40) {
return "w-[30%] h-[70%]";
} else if (percentage < 75) {
return "w-[40%] h-[90%]";
Expand Down

0 comments on commit 6bf5312

Please sign in to comment.