Skip to content

Commit

Permalink
Filter out of the buttons at the top with three categories (#1997)
Browse files Browse the repository at this point in the history 
* UPDATE: filter alarms in alarm box

* FIX: node alert box filter

* UPDATE: default vol is mute

* update: align icons in alarm rows
  • Loading branch information
@mabasian
mabasian authored Aug 16, 2024
1 parent 83a646b commit c60e40e
Show file tree
Hide file tree
Showing 4 changed files with 239 additions and 113 deletions.
20 changes: 20 additions & 0 deletions launcher/public/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4380,6 +4380,26 @@ video {
padding-top: 2rem;
}

.pt-\[0\.20rel\]{
padding-top: 0.20rel;
}

.pt-\[0\.20rem\]{
padding-top: 0.20rem;
}

.pt-\[0\.10rem\]{
padding-top: 0.10rem;
}

.pt-\[0\.05rem\]{
padding-top: 0.05rem;
}

.pt-0\.5{
padding-top: 0.125rem;
}

.text-left{
text-align: left;
}
Expand Down
4 changes: 2 additions & 2 deletions launcher/src/components/UI/language-page/components/MenuBody.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const checkSettings = async () => {
}
// Handle volume settings
langStore.currentVolume = savedVolume?.volume ?? 0.95;
langStore.currentVolume = savedVolume?.volume ?? 0;
} catch (error) {
console.error("Failed to load saved settings:", error);
}
Expand All @@ -101,7 +101,7 @@ const checkVolume = async () => {
try {
const savedConfig = await ControlService.readConfig();
const { savedVolume } = savedConfig || {};
langStore.currentVolume = savedVolume?.volume ?? 0.95;
langStore.currentVolume = savedVolume?.volume ?? 0;
} catch (error) {
console.error("Failed to load saved settings:", error);
}
Expand Down
177 changes: 120 additions & 57 deletions launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,37 @@
<div class="status-box flex flex-col justify-between items-center">
<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"
class="status-box_icon-box border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center pl-2"
>
<div class="icon-line">
<div class="status-icon" :class="{ active: perfect }">
<div
v-if="alertShowState === 'showAll' || alertShowState === 'green'"
class="status-icon"
:class="{ active: perfect }"
@click="alertPicker(perfect ? 'green' : 'showAll')"
>
<img src="/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png" alt="green" />
</div>
<div class="status-icon" :class="{ active: warning || pointStatus.length !== 0 }">
<div
v-if="alertShowState === 'showAll' || alertShowState === 'yellow'"
class="status-icon"
:class="{ active: warning || pointStatus.length !== 0 }"
@click="alertPicker(warning || pointStatus.length !== 0 ? 'yellow' : 'showAll')"
>
<img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
</div>
<div class="status-icon" :class="{ active: alarm }">
<div
v-if="alertShowState === 'showAll' || alertShowState === 'red'"
class="status-icon"
:class="{
active: alarm || notSetAddresses.length !== 0 || synchronizationErrorControl || errorAlarm,
}"
@click="
alertPicker(
alarm || notSetAddresses.length !== 0 || synchronizationErrorControl || errorAlarm ? 'red' : 'showAll'
)
"
>
<img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
</div>
</div>
Expand All @@ -33,7 +54,11 @@
<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">
<router-link
v-if="storageWarning && (alertShowState === 'showAll' || alertShowState === 'yellow')"
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" />
</div>
Expand All @@ -44,7 +69,11 @@
<div class="val-message">{{ availDisk }} GB Free</div>
</div>
</router-link>
<router-link v-if="cpuWarning" to="/control" class="status-message_yellow h-9">
<router-link
v-if="cpuWarning && (alertShowState === 'showAll' || alertShowState === 'yellow')"
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" />
</div>
Expand All @@ -57,20 +86,26 @@
</div>
</div>
</router-link>
<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" />
</div>
<div class="message-text_container">
<div class="main-message">
<span>{{ point }}</span>
<template v-if="pointStatus && (alertShowState === 'showAll' || alertShowState === 'yellow')">
<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" />
</div>
<div class="val-message">
<span> > {{ $t("nodeAlert.stats") }}</span>
<div class="message-text_container">
<div class="main-message">
<span>{{ point }}</span>
</div>
<div class="val-message">
<span> > {{ $t("nodeAlert.stats") }}</span>
</div>
</div>
</div>
</router-link>
<router-link v-if="cpuAlarm" to="/control" class="status-message_red h-9">
</router-link>
</template>
<router-link
v-if="cpuAlarm && (alertShowState === 'showAll' || alertShowState === 'red')"
to="/control"
class="status-message_red h-9"
>
<div class="message-icon">
<img src="/img/icon/node-alert-icons/alert-cpu-red.png" alt="warn_storage" />
</div>
Expand All @@ -85,7 +120,7 @@
</router-link>

<div
v-if="connectionStatusIsPoor"
v-if="connectionStatusIsPoor && (alertShowState === 'showAll' || alertShowState === 'red')"
class="w-full h-10 grid grid-cols-12 rounded-md bg-red-700 p-1 cursor-pointer hover:bg-red-500"
@click="callReconnectModal"
>
Expand All @@ -99,7 +134,11 @@
</div>
</div>

<router-link v-if="synchronizationErrorControl" to="/control" class="status-message_red h-9">
<router-link
v-if="synchronizationErrorControl && (alertShowState === 'showAll' || alertShowState === 'red')"
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" />
</div>
Expand All @@ -112,7 +151,11 @@
</div>
</div>
</router-link>
<div v-if="errorAlarm" class="status-message_red h-9" @click="isTaskModalActive = true">
<div
v-if="errorAlarm && (alertShowState === 'showAll' || alertShowState === 'red')"
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" />
</div>
Expand All @@ -123,29 +166,34 @@
</div>
</div>

<div
v-for="validator in notSetAddresses"
:key="validator"
class="status-message_red h-9 pointer"
@mouseenter="cursorLocation = `${clkFee}`"
@mouseleave="cursorLocation = ''"
@click="expertHandler(validator.serviceID)"
>
<div class="message-icon">
<img :src="validator.icon" />
</div>
<div class="message-text_container">
<div class="main-message">
<span>{{ $t("nodeAlert.noFee") }}</span>
<template v-if="notSetAddresses && (alertShowState === 'showAll' || alertShowState === 'red')">
<div
v-for="validator in notSetAddresses"
:key="validator"
class="status-message_red h-9 pointer"
@mouseenter="cursorLocation = `${clkFee}`"
@mouseleave="cursorLocation = ''"
@click="expertHandler(validator.serviceID)"
>
<div class="message-icon">
<img :src="validator.icon" />
</div>
<div class="val-message">
<span> > {{ validator.name }} vc</span>
<div class="message-text_container">
<div class="main-message">
<span>{{ $t("nodeAlert.noFee") }}</span>
</div>
<div class="val-message">
<span> > {{ validator.name }} vc</span>
</div>
</div>
</div>
</div>
</template>

<div
v-if="stereumUpdate.current !== stereumUpdate.version"
v-if="
stereumUpdate.current !== stereumUpdate.version &&
(alertShowState === 'showAll' || alertShowState === 'green')
"
class="status-message_green h-9"
@mouseenter="cursorLocation = `${clkUpdate}`"
@mouseleave="cursorLocation = ''"
Expand All @@ -163,26 +211,28 @@
</div>
</div>
</div>
<div
v-for="item in updatedNewUpdates"
:key="item"
class="status-message_green h-9"
@mouseenter="cursorLocation = `${clkUpdate}`"
@mouseleave="cursorLocation = ''"
@click="showUpdate"
>
<div class="message-icon">
<img :src="item.sIcon" alt="warn_storage" />
</div>
<div class="message-text_container update-items">
<div class="main-message">
<span class="overflow-hidden truncate text-md">{{ item.name }} UPDATE</span>
<template v-if="updatedNewUpdates && (alertShowState === 'showAll' || alertShowState === 'green')">
<div
v-for="item in updatedNewUpdates"
:key="item"
class="status-message_green h-9"
@mouseenter="cursorLocation = `${clkUpdate}`"
@mouseleave="cursorLocation = ''"
@click="showUpdate"
>
<div class="message-icon">
<img :src="item.sIcon" alt="warn_storage" />
</div>
<div class="val-message">
<span>{{ item.version }}</span>
<div class="message-text_container update-items">
<div class="main-message">
<span class="overflow-hidden truncate text-md">{{ item.name }} UPDATE</span>
</div>
<div class="val-message">
<span>{{ item.version }}</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
Expand Down Expand Up @@ -219,6 +269,7 @@ export default {
clkUpdate: this.$t("nodeAlert.clkUpdate"),
loadingAlerts: false,
skeletons: [1, 2, 3, 4, 5, 6, 7, 8],
alertShowState: "showAll",
};
},
computed: {
Expand Down Expand Up @@ -337,6 +388,13 @@ export default {
this.cpuMeth();
},
methods: {
alertPicker(color) {
if (this.alertShowState === color) {
this.alertShowState = "showAll";
} else {
this.alertShowState = color;
}
},
async checkSettings() {
try {
const savedConfig = await ControlService.readConfig();
Expand Down Expand Up @@ -592,7 +650,7 @@ export default {
.icon-line {
display: flex;
justify-content: space-evenly;
justify-content: flex-start;
padding-top: 4px;
width: 100%;
height: 30px;
Expand All @@ -606,9 +664,14 @@ export default {
align-items: center;
opacity: 25%;
border-radius: 5px;
margin-right: 5px;
}
.active {
opacity: 100%;
cursor: pointer;
}
.active:hover {
transform: scale(1.1);
}
.status-icon img {
Expand Down
Loading

0 comments on commit c60e40e

Please sign in to comment.