Skip to content

Commit

Permalink
fix: handle no uptime data available
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistakia
mistakia committed Apr 20, 2024
1 parent 41de25e commit f972788
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 137 deletions.
4 changes: 3 additions & 1 deletion src/views/components/representative-info/representative-info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ export default class RepresentativeNetwork extends React.Component {
label: 'Last Seen',
value: account.get('is_online') ? (
<FiberManualRecordIcon className='green' />
) : (
) : account.getIn(['last_seen']) ? (
timeago.format(account.getIn(['last_seen']) * 1000, 'nano_short')
) : (
'-'
)
},
{
Expand Down
195 changes: 99 additions & 96 deletions src/views/components/representative-uptime/representative-uptime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,120 +6,123 @@ import Uptime from '@components/uptime'

import './representative-uptime.styl'

export default class RepresentativeUptime extends React.Component {
render() {
const { uptime } = this.props.account.toJS()
export default function RepresentativeUptime({ account }) {
const { uptime } = account.toJS()

const lastOnline = this.props.account.get('last_online')
const lastOffline = this.props.account.get('last_offline')
const last_online = account.get('last_online')
const last_offline = account.get('last_offline')

const onlineCount = uptime.filter((i) => i.online).length
const last60 = this.props.account.getIn(['uptime_summary', 'days_60'], {})
const last60Pct =
Math.round(
(last60.online_count / (last60.online_count + last60.offline_count)) *
10000
) / 100
const last60Class =
last60Pct > 95
? 'online'
: last60Pct < 70
? 'offline'
: last60Pct < 80
? 'warning'
: ''
const online_count = uptime.filter((i) => i.online).length
const last_60 = account.getIn(['uptime_summary', 'days_60'], {})
const last_60_pct =
Math.round(
(last_60.online_count / (last_60.online_count + last_60.offline_count)) *
10000
) / 100
const last_60_class =
last_60_pct > 95
? 'online'
: last_60_pct < 70
? 'offline'
: last_60_pct < 80
? 'warning'
: ''

const last90 = this.props.account.getIn(['uptime_summary', 'days_90'], {})
const last90Pct =
Math.round(
(last90.online_count / (last90.online_count + last90.offline_count)) *
10000
) / 100
const last90Class =
last90Pct > 95 ? 'online' : last90Pct < 80 ? 'offline' : ''
const last_90 = account.getIn(['uptime_summary', 'days_90'], {})
const last_90_pct =
Math.round(
(last_90.online_count / (last_90.online_count + last_90.offline_count)) *
10000
) / 100
const last_90_class =
last_90_pct > 95 ? 'online' : last_90_pct < 80 ? 'offline' : ''

let text
let online = true
if (!lastOffline) {
// missing both
if (!lastOnline) {
text = 'Operational'
} else {
// missing offline, has online
text = 'Operational'
}
} else if (!lastOnline) {
// missing online, has offline
text = 'Down'
online = false
let text
let online = true
if (!last_offline) {
// missing both
if (!last_online) {
text = 'Operational'
} else {
// has both
if (lastOnline > lastOffline) {
text = `Up for ${timeago.format(lastOffline * 1000, 'nano_short')}`
} else {
text = `Down for ${timeago.format(lastOnline * 1000, 'nano_short')}`
online = false
}
// missing offline, has online
text = 'Operational'
}
} else if (!last_online) {
// missing online, has offline
text = 'Down'
online = false
} else {
// has both
if (last_online > last_offline) {
text = `Up for ${timeago.format(last_offline * 1000, 'nano_short')}`
} else {
text = `Down for ${timeago.format(last_online * 1000, 'nano_short')}`
online = false
}
}

const uptimePct = Math.round((onlineCount / uptime.length) * 10000) / 100
const uptimeClass =
uptimePct > 90
let uptime_pct
let uptime_class = ''
if (uptime.length === 0) {
uptime_pct = 0
uptime_class = 'offline' // Assuming offline or another class when no uptime data is available
} else {
uptime_pct = Math.round((online_count / uptime.length) * 10000) / 100
uptime_class =
uptime_pct > 90
? 'online'
: uptimePct < 50
: uptime_pct < 50
? 'offline'
: uptimePct < 75
: uptime_pct < 75
? 'warning'
: ''

return (
<div className='representative__section representative__uptime'>
<div className='representative__uptime-metrics'>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
Current Status
</div>
<div
className={`representative__uptime-metric-body ${
online ? 'online' : 'offline'
}`}>
{text}
</div>
}
return (
<div className='representative__section representative__uptime'>
<div className='representative__uptime-metrics'>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
Current Status
</div>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
2W Uptime
</div>
<div
className={`representative__uptime-metric-body ${uptimeClass}`}>
{uptimePct}%
</div>
<div
className={`representative__uptime-metric-body ${
online ? 'online' : 'offline'
}`}>
{text}
</div>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
2M Uptime
</div>
<div
className={`representative__uptime-metric-body ${last60Class}`}>
{last60Pct ? `${last60Pct}%` : '-'}
</div>
</div>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
2W Uptime
</div>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
3M Uptime
</div>
<div
className={`representative__uptime-metric-body ${last90Class}`}>
{last90Pct ? `${last90Pct}%` : '-'}
</div>
<div className={`representative__uptime-metric-body ${uptime_class}`}>
{uptime_pct}%
</div>
</div>
<div className='representative__uptime-bar'>
<Uptime data={uptime} expanded />
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
2M Uptime
</div>
<div
className={`representative__uptime-metric-body ${last_60_class}`}>
{last_60_pct ? `${last_60_pct}%` : '-'}
</div>
</div>
<div className='representative__uptime-metrics-metric'>
<div className='representative__uptime-metric-header section__label'>
3M Uptime
</div>
<div
className={`representative__uptime-metric-body ${last_90_class}`}>
{last_90_pct ? `${last_90_pct}%` : '-'}
</div>
</div>
</div>
)
}
<div className='representative__uptime-bar'>
<Uptime data={uptime} expanded />
</div>
</div>
)
}

RepresentativeUptime.propTypes = {
Expand Down
81 changes: 41 additions & 40 deletions src/views/components/uptime/uptime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,50 @@ import './uptime.styl'
const online = '#3bd671'
const offline = '#ee6666'

export default class Uptime extends React.Component {
render() {
const { data, length, expanded } = this.props

const ticks = []
const sliced = length ? data.slice(0, length) : data
const height = expanded ? 18 : 14
const width = expanded ? 4 : 3
const spacing = expanded ? 4 : 2
sliced.forEach((d, key) =>
ticks.push(
<rect
key={key}
height={height}
width={width}
y='0'
x={key * (spacing + width)}
rx='1.625'
ry='1.625'
fill={d.online ? online : offline}
/>
)
export default function Uptime({ data, length, expanded }) {
const ticks = []
const sliced = length ? data.slice(0, length) : data
if (sliced.length === 0) {
return <div className='uptime'>no uptime data available</div>
}
const height = expanded ? 18 : 14
const width = expanded ? 4 : 3
const spacing = expanded ? 4 : 2
sliced.forEach((d, key) =>
ticks.push(
<rect
key={key}
height={height}
width={width}
y='0'
x={key * (spacing + width)}
rx='1.625'
ry='1.625'
fill={d.online ? online : offline}
/>
)
)

return (
<div className='uptime'>
<svg
height={height}
viewBox={`0 0 ${sliced.length * (spacing + width)} ${height}`}>
{ticks}
</svg>
{Boolean(expanded) && (
<div className='uptime__legend'>
<div className='uptime__legend-text'>Now</div>
<div className='uptime__legend-text'>
{Math.round((sliced[sliced.length - 1].interval * 2) / 24)} days
ago
</div>
return (
<div className='uptime'>
<svg
height={height}
viewBox={`0 0 ${sliced.length * (spacing + width)} ${height}`}>
{ticks}
</svg>
{Boolean(expanded) && (
<div className='uptime__legend'>
<div className='uptime__legend-text'>Now</div>
<div className='uptime__legend-text'>
{sliced.length > 0
? Math.round((sliced[sliced.length - 1].interval * 2) / 24)
: 0}{' '}
days ago
</div>
)}
</div>
)
}
</div>
)}
</div>
)
}

Uptime.propTypes = {
Expand Down

0 comments on commit f972788

Please sign in to comment.