Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filter out of the buttons at the top with three categories #1997

Merged
merged 4 commits into from
Aug 16, 2024
Merged

Filter out of the buttons at the top with three categories #1997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
034733f
UPDATE: filter alarms in alarm box
mabasian Aug 16, 2024
1deab08
FIX: node alert box filter
mabasian Aug 16, 2024
6ccea61
UPDATE: default vol is mute
mabasian Aug 16, 2024
772b218
update: align icons in alarm rows
mabasian Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions launcher/public/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4375,6 +4375,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
Open in desktop
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
Open in desktop
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