status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-03-03 04:20:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add alerts and logs components on right sidebar

Browse Source
This commit is contained in:
Ivana Andersson 2023-09-27 11:40:33 +03:00
parent af344e6e70
commit 5f27d7d2f8
2 changed files with 83 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/Dashboard/RightSideBar/RightSidebar.tsx
View File

@ -1,8 +1,8 @@
import { Avatar, Tabs, Text } from '@status-im/components' import { Avatar, InformationBox, Tabs, Text } from '@status-im/components'
import { XStack, YStack } from 'tamagui' import { XStack, YStack } from 'tamagui'
import ValidatorListItem from './ValidatorListItem' import ValidatorListItem from './ValidatorListItem'
import InputSearch from './SearchInput' import InputSearch from './SearchInput'
// import { NodeIcon } from '@status-im/icons' import { CloseCircleIcon, ChevronRightIcon } from '@status-im/icons'
const RightSidebar = () => { const RightSidebar = () => {
return ( return (
@ -34,18 +34,77 @@ const RightSidebar = () => {
Inactive Inactive
</Tabs.Trigger> </Tabs.Trigger>
</Tabs.List> </Tabs.List>
<Tabs.Content value="active"> <Tabs.Content value="active" style={{ marginTop: '16px' }}>
<InputSearch /> <InputSearch />
<YStack> <YStack space={'$2'} mt="16px">
<ValidatorListItem name={'Validator 1'} avatarKey={'37880sfsef38fsb'} selected={true} /> <ValidatorListItem name={'Validator 1'} avatarKey={'37880sfsef38fsb'} selected={true} />
<ValidatorListItem name={'Validator 2'} avatarKey={'37880sfsef38fsb'} /> <ValidatorListItem name={'Validator 2'} avatarKey={'37880sfsef38fsb'} />
<ValidatorListItem name={'Validator 3'} avatarKey={'37880sfsef38fsb'} /> <ValidatorListItem name={'Validator 3'} avatarKey={'37880sfsef38fsb'} />
<ValidatorListItem name={'Validator 4'} avatarKey={'37880sfsef38fsb'} /> <ValidatorListItem name={'Validator 4'} avatarKey={'37880sfsef38fsb'} />
</YStack> </YStack>
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="pending"></Tabs.Content> <Tabs.Content value="pending">
<Tabs.Content value="inactive"></Tabs.Content> <ValidatorListItem name={'Validator 5'} avatarKey={'37880sfsef38fsb'} />
</Tabs.Content>
<Tabs.Content value="inactive">
<ValidatorListItem name={'Validator 6'} avatarKey={'37880sfsef38fsb'} />
</Tabs.Content>
</Tabs> </Tabs>
<YStack space={'$2'}>
<XStack justifyContent="space-between">
<Text size={15} weight={'semibold'}>
Alerts
</Text>
<div style={{ marginRight: '8px' }}>
<ChevronRightIcon size={20} />
</div>
</XStack>
<InformationBox
message="Network: Participation rate below 66%"
icon={<CloseCircleIcon size={20} />}
variant="default"
onClosePress={() => alert('dismissed')}
/>
<InformationBox
message="Node: 32 Peers Connected"
icon={<CloseCircleIcon size={20} />}
variant="information"
onClosePress={() => alert('dismissed')}
/>
<InformationBox
message="Node / Validator: Process Down"
icon={<CloseCircleIcon size={20} />}
variant="error"
onClosePress={() => alert('dismissed')}
/>
</YStack>
<YStack space={'$2'}>
<XStack justifyContent="space-between">
<Text size={15} weight={'semibold'}>
Logs
</Text>
<div style={{ marginRight: '8px' }}>
<ChevronRightIcon size={20} />
</div>
</XStack>
<InformationBox
message="Critical Logs: 0.01 / M"
icon={<CloseCircleIcon size={20} />}
variant="default"
/>
<InformationBox
message="Warning Logs: 0.01 / M"
icon={<CloseCircleIcon size={20} />}
variant="default"
/>
<InformationBox
message="Error Logs: 0.01 / M"
icon={<CloseCircleIcon size={20} />}
variant="default"
/>
</YStack>
</YStack> </YStack>
) )
} }

38
src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
View File

@ -1,23 +1,23 @@
import { useState } from 'react'; import { useState } from 'react'
import { XStack, YStack } from 'tamagui'; import { XStack, YStack } from 'tamagui'
import { Avatar, Checkbox, Text } from '@status-im/components'; import { Avatar, Checkbox, Text } from '@status-im/components'
import { VerifiedIcon, ContactIcon } from '@status-im/icons'; import { VerifiedIcon, ContactIcon } from '@status-im/icons'
type ValidatorListItemProps = { type ValidatorListItemProps = {
name: string; name: string
avatarKey: string; avatarKey: string
selected?: boolean; selected?: boolean
}; }
const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => { const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps) => {
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false)
const [isSelected, setIsSelected] = useState(selected); const [isSelected, setIsSelected] = useState(selected)
const handleMouseEnter = () => setHovered(true); const handleMouseEnter = () => setHovered(true)
const handleMouseLeave = () => setHovered(false); const handleMouseLeave = () => setHovered(false)
const handleClick = () => setIsSelected(!isSelected); const handleClick = () => setIsSelected(!isSelected)
const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'; const backgroundColor = isSelected || hovered ? 'rgba(42, 74, 245, 0.05)' : 'transparent'
return ( return (
<XStack <XStack
@ -37,7 +37,7 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps
<Avatar <Avatar
type="user" type="user"
size={32} size={32}
name="1" name={name}
backgroundColor="$red-50" backgroundColor="$red-50"
colorHash={[ colorHash={[
[3, 30], [3, 30],
@ -56,11 +56,9 @@ const ValidatorListItem = ({ name, avatarKey, selected }: ValidatorListItemProps
<Text size={13}>{avatarKey}</Text> <Text size={13}>{avatarKey}</Text>
</YStack> </YStack>
</XStack> </XStack>
{isSelected && {isSelected && <Checkbox id="" variant="outline" size={20} selected={isSelected} />}
<Checkbox id="" variant="outline" size={20} selected={isSelected} />
}
</XStack> </XStack>
); )
} }
export default ValidatorListItem; export default ValidatorListItem