Skip to content

Commit

Permalink
Alert Box Improvements (#1986)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mabasian
mabasian authored Aug 13, 2024
1 parent ba144d0 commit b22b5de
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 139 deletions.
Binary file added launcher/public/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added launcher/public/img/icon/node-alert-icons/alert-settings-mute.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions launcher/public/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1846,6 +1846,10 @@ video {
height: 100vh;
}

.h-\[8\%\]{
height: 8%;
}

.max-h-10{
max-height: 2.5rem;
}
Expand Down
15 changes: 9 additions & 6 deletions launcher/src/components/UI/language-page/components/MenuBody.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,7 @@
}"
@click="handleClick(lang, index)"
>
<img
:src="lang.flag"
:alt="`${lang.name} Flag`"
class="col-start-1 col-span-3 w-10 h-10 rounded-full"
/>
<img :src="lang.flag" :alt="`${lang.name} Flag`" class="col-start-1 col-span-3 w-10 h-10 rounded-full" />
<span
class="col-start-4 col-span-full text-lg font-bold uppercase"
:class="{ 'text-gray-700': selectedLanguage }"
Expand Down Expand Up @@ -80,11 +76,18 @@ onBeforeMount(async () => {
const checkSettings = async () => {
try {
const savedConfig = await ControlService.readConfig();
if (savedConfig?.savedLanguage.flag && savedConfig?.savedLanguage.label) {
// Handle language settings and routing
const { savedLanguage, savedVolume } = savedConfig || {};
if (savedLanguage?.flag && savedLanguage?.label) {
router.push("/login");
} else {
router.push("/");
}
// Handle volume settings
langStore.currentVolume = savedVolume?.volume ?? 0.95;
} catch (error) {
console.error("Failed to load saved settings:", error);
}
Expand Down
186 changes: 85 additions & 101 deletions launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,41 @@
<template>
<div class="status-box flex flex-col justify-between items-center">
<div class="status-box_header bg-[#151618] border border-gray-600 rounded-md">
<div class="icon-line">
<div class="status-icon" :class="{ active: perfect }">
<img src="/img/icon/node-alert-icons/alert-notification.png" alt="green" />
</div>
<div class="status-icon" :class="{ active: warning || pointStatus.length !== 0 }">
<img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
</div>
<div class="status-icon" :class="{ active: alarm }">
<img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
<div class="status-box_header h-[8%] w-full flex">
<div
class="status-box_icon-box border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-center items-center"
>
<div class="icon-line">
<div class="status-icon" :class="{ active: perfect }">
<img src="/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png" alt="green" />
</div>
<div class="status-icon" :class="{ active: warning || pointStatus.length !== 0 }">
<img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
</div>
<div class="status-icon" :class="{ active: alarm }">
<img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
</div>
</div>
<div
class="status-icon"
:class="{
active:
stereumUpdate.current !== stereumUpdate.version ||
updatedNewUpdates.length > 0,
}"
>
<img src="/img/icon/node-alert-icons/alert-settings.png" alt="green" />
</div>
<div class="status-box_vol-state w-1/4 h-full flex justify-center items-center">
<div class="volBtn cursor-pointer w-8" @click="volToggle">
<img
:src="
volState
? '/img/icon/node-alert-icons/alert-settings.png'
: '/img/icon/node-alert-icons/alert-settings-mute.png'
"
alt="green"
/>
</div>
</div>
</div>
<div
class="status-box_messages bg-[#151618] border border-gray-600 rounded-md overflow-x-hidden overflow-y-auto"
>

<div class="status-box_messages bg-[#151618] border border-gray-600 rounded-md overflow-x-hidden overflow-y-auto">
<AlertSkeleton v-for="i in skeletons" v-show="loadingAlerts" :key="i" />
<div
v-show="!loadingAlerts"
class="status_innerBox overflow-x-hidden overflow-y-auto space-y-1 px-[2px]"
>
<router-link
v-if="storageWarning"
to="/control"
class="status-message_yellow h-9"
>
<div v-show="!loadingAlerts" class="status_innerBox overflow-x-hidden overflow-y-auto space-y-1 px-[2px]">
<router-link v-if="storageWarning" to="/control" class="status-message_yellow h-9">
<div class="message-icon">
<img
src="/img/icon/node-alert-icons/alert-storage-yellow.png"
alt="warn_storage"
/>
<img src="/img/icon/node-alert-icons/alert-storage-yellow.png" alt="warn_storage" />
</div>
<div class="message-text_container">
<div class="main-message">
Expand All @@ -51,10 +46,7 @@
</router-link>
<router-link v-if="cpuWarning" to="/control" class="status-message_yellow h-9">
<div class="message-icon">
<img
src="/img/icon/node-alert-icons/alert-cpu-yellow.png"
alt="warn_storage"
/>
<img src="/img/icon/node-alert-icons/alert-cpu-yellow.png" alt="warn_storage" />
</div>
<div class="message-text_container">
<div class="main-message">
Expand All @@ -65,17 +57,9 @@
</div>
</div>
</router-link>
<router-link
v-for="point in pointStatus"
:key="point"
to="/control"
class="status-message_yellow h-9"
>
<router-link v-for="point in pointStatus" :key="point" to="/control" class="status-message_yellow h-9">
<div class="message-icon">
<img
src="/img/icon/control-page-icons/PORT_LIST_ICON.png"
alt="warn_storage"
/>
<img src="/img/icon/control-page-icons/PORT_LIST_ICON.png" alt="warn_storage" />
</div>
<div class="message-text_container">
<div class="main-message">
Expand Down Expand Up @@ -105,36 +89,19 @@
class="w-full h-10 grid grid-cols-12 rounded-md bg-red-700 p-1 cursor-pointer hover:bg-red-500"
@click="callReconnectModal"
>
<div
class="col-start-1 col-end-4 w-full h-full flex justify-center items-center p-1"
>
<img
class="w-8"
src="/img/icon/connection-status/searching.gif"
alt="WIFI Icon"
/>
<div class="col-start-1 col-end-4 w-full h-full flex justify-center items-center p-1">
<img class="w-8" src="/img/icon/connection-status/searching.gif" alt="WIFI Icon" />
</div>
<div class="col-start-5 col-span-full flex flex-col justify-center items-start">
<span class="text-[8px] text-gray-100 font-semibold uppercase"
>Poor Connection</span
>
<span class="text-[8px] text-gray-100 font-semibold uppercase">Poor Connection</span>

<span class="text-[8px] text-left text-gray-100 font-semibold lowercase"
>> Click to reconnect</span
>
<span class="text-[8px] text-left text-gray-100 font-semibold lowercase">> Click to reconnect</span>
</div>
</div>

<router-link
v-if="synchronizationErrorControl"
to="/control"
class="status-message_red h-9"
>
<router-link v-if="synchronizationErrorControl" to="/control" class="status-message_red h-9">
<div class="message-icon">
<img
src="/img/icon/node-alert-icons/alert-sync-error.gif"
alt="warn_storage"
/>
<img src="/img/icon/node-alert-icons/alert-sync-error.gif" alt="warn_storage" />
</div>
<div class="message-text_container">
<div class="main-message">
Expand All @@ -145,16 +112,9 @@
</div>
</div>
</router-link>
<div
v-if="errorAlarm"
class="status-message_red h-9"
@click="isTaskModalActive = true"
>
<div v-if="errorAlarm" class="status-message_red h-9" @click="isTaskModalActive = true">
<div class="message-icon">
<img
src="/img/icon/node-alert-icons/alert-task-error.png"
alt="warn_storage"
/>
<img src="/img/icon/node-alert-icons/alert-task-error.png" alt="warn_storage" />
</div>
<div class="message-text_container">
<div class="main-message">
Expand Down Expand Up @@ -192,10 +152,7 @@
@click="showUpdate"
>
<div class="message-icon">
<img
src="/img/icon/node-alert-icons/alert-notification-stereum-update.png"
alt="warn_storage"
/>
<img src="/img/icon/node-alert-icons/alert-notification-stereum-update.png" alt="warn_storage" />
</div>
<div class="message-text_container">
<div class="main-message">
Expand Down Expand Up @@ -293,6 +250,7 @@ export default {
...mapWritableState(useFooter, {
cursorLocation: "cursorLocation",
stereumStatus: "stereumStatus",
volState: "volState",
}),
...mapWritableState(useNodeStore, {
skeletonLoading: "skeletonLoading",
Expand Down Expand Up @@ -321,8 +279,7 @@ export default {
updatedNewUpdates() {
const updatedUpdates = this.newUpdates.map((update) => {
const matchingService = this.allServices.find(
(service) =>
service.service.replace(/(Beacon|Validator|Service)/gm, "") === update.name
(service) => service.service.replace(/(Beacon|Validator|Service)/gm, "") === update.name
);
if (matchingService) {
return {
Expand Down Expand Up @@ -365,6 +322,7 @@ export default {
},
},
mounted() {
this.checkSettings();
this.readService();
this.watchAlertStatus();
this.polling = setInterval(() => {
Expand All @@ -379,6 +337,39 @@ export default {
this.cpuMeth();
},
methods: {
async checkSettings() {
try {
const savedConfig = await ControlService.readConfig();
if (savedConfig?.savedVolume?.volume !== undefined) {
this.volState = savedConfig.savedVolume.volume !== 0;
this.currentVolume = savedConfig.savedVolume.volume;
} else {
this.volState = false;
console.warn("Volume configuration is missing or invalid.");
}
} catch (error) {
console.error("Failed to load saved settings:", error);
}
},
async updateSettings(vol) {
try {
const prevConf = await ControlService.readConfig();
const conf = {
...prevConf,
savedVolume: { volume: vol },
};
await ControlService.writeConfig(conf);
} catch (error) {
console.error("Failed to update settings:", error);
}
},
volToggle() {
this.volState = !this.volState;
this.updateSettings(this.volState ? 0.95 : 0);
},
iconFilter(arg) {
if (arg.name === "PrometheusNodeExporter") {
return "/img/icon/service-icons/Other/PrometheusNodeExporter-s.png";
Expand All @@ -400,9 +391,7 @@ export default {
this.stereumStatus = false;
},
expertHandler(el) {
let selectedObject = this.installedServices.find(
(obj) => obj.config.serviceID === el
);
let selectedObject = this.installedServices.find((obj) => obj.config.serviceID === el);
this.selectedValidatorFromNodeAlert = selectedObject;
this.openModalFromNodeAlert = true;
},
Expand All @@ -421,15 +410,11 @@ export default {
}
if (!validator.yaml)
try {
validator.yaml = await ControlService.getServiceYAML(
validator.config.serviceID
);
validator.yaml = await ControlService.getServiceYAML(validator.config.serviceID);
} catch (e) {
console.log("couldn't get service yaml");
}
const patternIndex = validator.expertOptions.findIndex(
(o) => o.title === "Default Fee Recipient"
);
const patternIndex = validator.expertOptions.findIndex((o) => o.title === "Default Fee Recipient");
if (patternIndex === -1 || !validator.yaml) {
continue;
}
Expand All @@ -447,8 +432,7 @@ export default {
}
}
const notSetAddresses = addresses.filter(
(validator) =>
validator.address === "0x0000000000000000000000000000000000000000"
(validator) => validator.address === "0x0000000000000000000000000000000000000000"
);
this.notSetAddresses = notSetAddresses;
}
Expand Down Expand Up @@ -504,6 +488,9 @@ export default {
</script>
<style scoped>
.volBtn:active {
transform: scale(0.9);
}
.update-items {
height: 90% !important;
justify-content: center !important;
Expand Down Expand Up @@ -559,9 +546,6 @@ export default {
}
.status-box_header {
width: 100%;
height: 8%;
display: flex;
justify-content: center;
align-items: center;
}
Expand Down
15 changes: 11 additions & 4 deletions launcher/src/components/UI/setting-page/components/VolumeSlider.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
class="absolute h-2 rounded-full bg-teal-600"
></div>
<div
:style="{ left: (volumePercentage <= 92 ? volumePercentage : 92) + '%' }"
:style="{
left: (volumePercentage <= 92 ? volumePercentage : 92) + '%',
background: langStore.currentVolume === 0 ? '#ff0000' : '#336666',
}"
class="slider-thumb absolute h-4 flex items-center justify-center w-4 rounded-full shadow border border-gray-300 top-0 cursor-pointer"
@mousedown="startDrag"
></div>
Expand All @@ -33,8 +36,13 @@ const checkSettings = async () => {
const savedConfig = await ControlService.readConfig();
if (savedConfig?.savedVolume?.volume) {
volumePercentage.value = savedConfig.savedVolume.volume;
langStore.currentVolume = savedConfig.savedVolume.volume;
volumePercentage.value = savedConfig.savedVolume.volume * 100;
} else if (savedConfig?.savedVolume?.volume === 0) {
langStore.currentVolume = 0;
volumePercentage.value = 0;
} else {
langStore.currentVolume = 0.95;
volumePercentage.value = 95;
}
} catch (error) {
Expand All @@ -60,7 +68,7 @@ const updateVolume = async (clientX) => {
const newVolume = Math.max(0, Math.min(1, (clientX - barRect.left) / barRect.width));
langStore.currentVolume = newVolume;
volumePercentage.value = newVolume * 100;
await updateSettings(volumePercentage.value);
await updateSettings(langStore.currentVolume);
};
const playSoundEffect = async (base64Data) => {
Expand Down Expand Up @@ -115,7 +123,6 @@ onUnmounted(() => {
<style>
.slider-thumb {
background-color: #336666;
cursor: pointer;
touch-action: none;
}
Expand Down
Loading

0 comments on commit b22b5de

Please sign in to comment.