Skip to content

Commit

Permalink
Bids 2821/dashboard validator management - group selection, dashboard…
Browse files Browse the repository at this point in the history
… loading (#78)

* dropdown styles

* group selection

* load dashboard group

---------

Co-authored-by: D13ce <[email protected]>
  • Loading branch information
MauserBitfly and D13ce authored Mar 7, 2024
1 parent 7589800 commit aa94361
Show file tree
Hide file tree
Showing 22 changed files with 335 additions and 26 deletions.
16 changes: 15 additions & 1 deletion frontend/assets/css/colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
--light-grey: #f0f0f0;
--light-grey-2: #dfdfdf;
--light-grey-3: #d3d3d3;
--light-grey-5: #eaeaea;
--light-grey-6: #a8a8a8;
--dark-grey: #5c4e4e;
--very-dark-grey: #362f32;
--asphalt: #484f56;
Expand All @@ -29,12 +31,13 @@
--primary-orange-pressed: #ffb346;

--primary-contrast-color: var(--grey-4);
--primary-contrast-color-discreet: var(--light-grey-5);

--background-color: var(--grey-1);
--text-color: var(--light-black);
--text-color-inverted: var(--light-grey);
--text-color-disabled: var(--grey);
--text-color-discreet: var(--grey);
--text-color-discreet: var(--dark-grey);

--button-color-active: var(--primary-orange);
--button-color-hover: var(--primary-orange-hover);
Expand Down Expand Up @@ -65,15 +68,22 @@
--megamenu-text-color: var(--grey);
--megamenu-hover-color: var(--light-grey-3);

--list-highlight-background: var(--primary-orange-hover);
--list-hover-background: var(--light-grey-6);
--list-hover-color: var(--light-grey);
--list-hover-descrete-color: var(--light-grey-5);

&.dark-mode {
--primary-color: var(--primary-orange);
--primary-contrast-color: var(--light-black);
--primary-contrast-color-discreet: var(--dark-grey);

--background-color: var(--almost-black);

--text-color: var(--light-grey);
--text-color-inverted: var(--light-black);
--text-color-disabled: var(--grey);
--text-color-discreet: var(--grey);

--button-color-active: var(--primary-orange);
--button-color-hover: var(--primary-orange-hover);
Expand Down Expand Up @@ -103,5 +113,9 @@
--megamenu-panel-color: var(--graphite);
--megamenu-text-color: var(--grey);
--megamenu-hover-color: var(--asphalt);

--list-highlight-background: var(--primary-orange);
--list-hover-background: var(--dark-grey);
--list-hover-descrete-color: var(--grey);
}
}
7 changes: 1 addition & 6 deletions frontend/assets/css/main.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import "~/assets/css/colors.scss";
@import "~/assets/css/variables.scss";
@import "~/assets/css/fonts.scss";
@import "~/assets/css/utils.scss";

html {
margin: 0;
Expand Down Expand Up @@ -40,12 +41,6 @@ a {
@include container;
}

@mixin truncate-text() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.text-positive{
color: var(--positive-color)
}
Expand Down
86 changes: 86 additions & 0 deletions frontend/assets/css/prime.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "~/assets/css/fonts.scss";
@use "~/assets/css/utils.scss";
@import "~/assets/css/prime_datatable.scss";
@import "~/assets/css/prime_megamenu.scss";

Expand Down Expand Up @@ -204,3 +205,88 @@
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
color: #ff5757;
}

/***
* Dropdown
* https://primevue.org/dropdown/
* different Dropdown variant's:
* - 'default' (=default) : default style for dropdown
* - 'table' : dropdown style within a data table
***/

.p-dropdown {
background: var(--input-background);
border: 1px solid var(--input-border-color);
color: var(--input-active-text-color);
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
border-radius: var(--border-radius);
padding: var(--padding);

&.table {
background: var(--background-color);
}

&:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
}
&.p-overlay-open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.p-dropdown-label {
background: transparent;
border: 0 none;
padding: 0;
&.p-placeholder {
color: var(--input-placeholder-text-color);
}
&:focus,
&:enabled:focus {
outline: 0 none;
box-shadow: none;
}
}
.p-dropdown-trigger {
margin-left: var(--padding);
background: transparent;
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
}

.p-dropdown-panel {
background: var(--input-background);
border: 1px solid var(--input-border-color);
color: var(--input-active-text-color);
border-radius: 0 0 var(--border-radius) var(--border-radius);
transform: translateY(-1px);
&.table {
background: var(--background-color);
}
.p-dropdown-items {
padding: var(--padding-small);
.p-dropdown-item {
@include utils.truncate-text;
padding: var(--padding-small) 4px;
border-radius: var(--border-radius);
.discreet {
color: var(--text-color-discreet);
}
&.p-highlight:not(:hover) {
background: var(--list-highlight-background);
color: var(--primary-contrast-color);
.discreet {
color: var(--primary-contrast-color-discreet);
}
}
&:hover {
background: var(--list-hover-background);
color: var(--list-hover-color);
.discreet {
color: var(--list-hover-descrete-color);
}
}
}
}
}
9 changes: 9 additions & 0 deletions frontend/assets/css/utils.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@mixin truncate-text() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.truncate-text{
@include truncate-text;
}
19 changes: 19 additions & 0 deletions frontend/components/bc/BcDropdown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
interface Props {
variant?: 'default' | 'table'
}
defineProps<Props>()
</script>

<template>
<Dropdown :class="variant" :panel-class="variant">
<template #value="slotProps">
<slot name="value" v-bind="slotProps" />
</template>
<template #option="slotProps">
<slot name="option" v-bind="slotProps.option" />
</template>
</Dropdown>
</template>
6 changes: 3 additions & 3 deletions frontend/components/dashboard/ValidatorOverview.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
import { type OverviewTableData } from '~/types/dashboard/overview'
import { totalElClNumbers } from '~/utils/bigMath'
Expand All @@ -10,10 +10,10 @@ const { converter } = useValue()
const tPath = 'dashboard.validator.overview.'
// TODO: implement dashboard switching
const { getOverview } = useValidatorDashboardOverview()
const { getOverview } = useValidatorDashboardOverviewStore()
await useAsyncData('validator_dashboard_overview', () => getOverview())
const { overview } = storeToRefs(useValidatorDashboardOverview())
const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
const dataList = computed(() => {
const v = overview.value
Expand Down
7 changes: 4 additions & 3 deletions frontend/components/dashboard/chart/SummaryChart.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ import {
import VChart from 'vue-echarts'
import SummaryChartTooltip from './SummaryChartTooltip.vue'
import { formatEpochToDate } from '~/utils/format'
import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
import { getSummaryChartGroupColors, getSummaryChartTextColor, getSummaryChartTooltipBackgroundColor } from '~/utils/colors'
import type { DashboardKey } from '~/types/dashboard'
import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
use([
CanvasRenderer,
Expand All @@ -39,7 +40,7 @@ watch(props, () => {
getDashboardSummaryChart(props.dashboardKey)
}, { immediate: true })
const { overview } = storeToRefs(useValidatorDashboardOverview())
const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
const { t: $t } = useI18n()
const colorMode = useColorMode()
Expand Down Expand Up @@ -70,7 +71,7 @@ const option = computed(() => {
const allGroups = $t('dashboard.validator.summary.chart.all_groups')
chartData.value.series.forEach((element) => {
let name = allGroups
if (element.id !== -1) {
if (element.id !== DAHSHBOARDS_ALL_GROUPS_ID) {
const group = overview.value?.groups.find(group => group.id === element.id)
name = group?.name || element.id.toString()
}
Expand Down
26 changes: 26 additions & 0 deletions frontend/components/dashboard/group/GroupLabel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script setup lang="ts">
import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
interface Props {
group: VDBOverviewGroup,
}
const props = defineProps<Props>()
const { t: $t } = useI18n()
const name = computed(() => {
if (props.group.id === DAHSHBOARDS_ALL_GROUPS_ID) {
return $t('dashboard.group.selection.all')
} else if (props.group.id === 0) {
return props.group.name && props.group.name !== 'default' ? props.group.name : $t('dashboard.group.selection.default')
}
return props.group.name
})
</script>

<template>
<span><span>{{ name }}</span> <span v-if="group.id >= 0" class="discreet">(ID: {{ group.id }})</span></span>
</template>
47 changes: 47 additions & 0 deletions frontend/components/dashboard/group/GroupSelection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script setup lang="ts">
import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
interface Props {
includeAll?: boolean,
}
const props = defineProps<Props>()
const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
const list = computed(() => {
const groups = overview.value?.groups ?? []
if (props.includeAll) {
return [{ id: DAHSHBOARDS_ALL_GROUPS_ID, name: '' }].concat(groups)
}
return groups
})
const selected = defineModel<number>({ required: true })
const selectedGroup = computed(() => {
return list.value.find(item => item.id === selected.value)
})
</script>

<template>
<BcDropdown
v-model="selected"
:options="list"
option-value="id"
option-label="name"
:placeholder="$t('dashboard.group.selection.placeholder')"
>
<template v-if="selectedGroup" #value>
<span>{{ $t('dashboard.group.selection.group') }}:
<DashboardGroupLabel :group="selectedGroup" />
</span>
</template>

<template #option="slotProps">
<DashboardGroupLabel :group="slotProps" />
</template>
</BcDropdown>
</template>

<style lang="scss" scoped></style>
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ const data = computed(() => {
</template>

<style lang="scss" scoped>
@use '~/assets/css/main.scss';
@use '~/assets/css/utils.scss';
.efficiency {
@include main.truncate-text;
@include utils.truncate-text;
display: block;
.positive {
Expand Down
6 changes: 4 additions & 2 deletions frontend/components/dashboard/table/DashboardTableSummary.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import SummaryChart from '../chart/SummaryChart.vue'
import type { InternalGetValidatorDashboardSummaryResponse, VDBSummaryTableRow } from '~/types/api/validator_dashboard'
import type { DashboardKey } from '~/types/dashboard'
import type { Cursor, TableQueryParams } from '~/types/datatable'
import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
interface Props {
dashboardKey: DashboardKey
Expand All @@ -19,7 +21,7 @@ const { getSummary } = store
const { summaryMap, queryMap } = storeToRefs(store)
const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
const { overview } = storeToRefs(useValidatorDashboardOverview())
const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
const { width, isMobile } = useWindowSize()
const colsVisible = computed(() => {
Expand Down Expand Up @@ -91,7 +93,7 @@ const setSearch = (value?: string) => {
}
const getRowClass = (row: VDBSummaryTableRow) => {
if (row.group_id === -1) {
if (row.group_id === DAHSHBOARDS_ALL_GROUPS_ID) {
return 'total-row'
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const props = defineProps<Props>()
const modalVisibility = ref(false)
const { t: $t } = useI18n()
const { overview } = storeToRefs(useValidatorDashboardOverview())
const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
const openValidatorModal = () => {
modalVisibility.value = true
Expand Down Expand Up @@ -61,15 +61,15 @@ const groupName = computed(() => {
</template>

<style lang="scss" scoped>
@use '~/assets/css/main.scss';
@use '~/assets/css/utils.scss';
.validator_column {
display: flex;
justify-content: space-between;
align-items: center;
.validators {
@include main.truncate-text;
@include utils.truncate-text;
span:last-child {
display: none;
Expand Down
Loading

0 comments on commit aa94361

Please sign in to comment.