Skip to content

Commit bbe5cfe

Browse files
mistakiamistakia
committed
fix: handle no uptime data available
1 parent e3f9418 commit bbe5cfe

File tree

3 files changed

+143
-137
lines changed

3 files changed

+143
-137
lines changed

‎src/views/components/representative-info/representative-info.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ export default class RepresentativeNetwork extends React.Component {
1515
label: 'Last Seen',
1616
value: account.get('is_online') ? (
1717
<FiberManualRecordIcon className='green' />
18-
) : (
18+
) : account.getIn(['last_seen']) ? (
1919
timeago.format(account.getIn(['last_seen']) * 1000, 'nano_short')
20+
) : (
21+
'-'
2022
)
2123
},
2224
{

‎src/views/components/representative-uptime/representative-uptime.js

Lines changed: 99 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -6,120 +6,123 @@ import Uptime from '@components/uptime'
66

77
import './representative-uptime.styl'
88

9-
export default class RepresentativeUptime extends React.Component {
10-
render() {
11-
const { uptime } = this.props.account.toJS()
9+
export default function RepresentativeUptime({ account }) {
10+
const { uptime } = account.toJS()
1211

13-
const lastOnline = this.props.account.get('last_online')
14-
const lastOffline = this.props.account.get('last_offline')
12+
const last_online = account.get('last_online')
13+
const last_offline = account.get('last_offline')
1514

16-
const onlineCount = uptime.filter((i) => i.online).length
17-
const last60 = this.props.account.getIn(['uptime_summary', 'days_60'], {})
18-
const last60Pct =
19-
Math.round(
20-
(last60.online_count / (last60.online_count + last60.offline_count)) *
21-
10000
22-
) / 100
23-
const last60Class =
24-
last60Pct > 95
25-
? 'online'
26-
: last60Pct < 70
27-
? 'offline'
28-
: last60Pct < 80
29-
? 'warning'
30-
: ''
15+
const online_count = uptime.filter((i) => i.online).length
16+
const last_60 = account.getIn(['uptime_summary', 'days_60'], {})
17+
const last_60_pct =
18+
Math.round(
19+
(last_60.online_count / (last_60.online_count + last_60.offline_count)) *
20+
10000
21+
) / 100
22+
const last_60_class =
23+
last_60_pct > 95
24+
? 'online'
25+
: last_60_pct < 70
26+
? 'offline'
27+
: last_60_pct < 80
28+
? 'warning'
29+
: ''
3130

32-
const last90 = this.props.account.getIn(['uptime_summary', 'days_90'], {})
33-
const last90Pct =
34-
Math.round(
35-
(last90.online_count / (last90.online_count + last90.offline_count)) *
36-
10000
37-
) / 100
38-
const last90Class =
39-
last90Pct > 95 ? 'online' : last90Pct < 80 ? 'offline' : ''
31+
const last_90 = account.getIn(['uptime_summary', 'days_90'], {})
32+
const last_90_pct =
33+
Math.round(
34+
(last_90.online_count / (last_90.online_count + last_90.offline_count)) *
35+
10000
36+
) / 100
37+
const last_90_class =
38+
last_90_pct > 95 ? 'online' : last_90_pct < 80 ? 'offline' : ''
4039

41-
let text
42-
let online = true
43-
if (!lastOffline) {
44-
// missing both
45-
if (!lastOnline) {
46-
text = 'Operational'
47-
} else {
48-
// missing offline, has online
49-
text = 'Operational'
50-
}
51-
} else if (!lastOnline) {
52-
// missing online, has offline
53-
text = 'Down'
54-
online = false
40+
let text
41+
let online = true
42+
if (!last_offline) {
43+
// missing both
44+
if (!last_online) {
45+
text = 'Operational'
5546
} else {
56-
// has both
57-
if (lastOnline > lastOffline) {
58-
text = `Up for ${timeago.format(lastOffline * 1000, 'nano_short')}`
59-
} else {
60-
text = `Down for ${timeago.format(lastOnline * 1000, 'nano_short')}`
61-
online = false
62-
}
47+
// missing offline, has online
48+
text = 'Operational'
6349
}
50+
} else if (!last_online) {
51+
// missing online, has offline
52+
text = 'Down'
53+
online = false
54+
} else {
55+
// has both
56+
if (last_online > last_offline) {
57+
text = `Up for ${timeago.format(last_offline * 1000, 'nano_short')}`
58+
} else {
59+
text = `Down for ${timeago.format(last_online * 1000, 'nano_short')}`
60+
online = false
61+
}
62+
}
6463

65-
const uptimePct = Math.round((onlineCount / uptime.length) * 10000) / 100
66-
const uptimeClass =
67-
uptimePct > 90
64+
let uptime_pct
65+
let uptime_class = ''
66+
if (uptime.length === 0) {
67+
uptime_pct = 0
68+
uptime_class = 'offline' // Assuming offline or another class when no uptime data is available
69+
} else {
70+
uptime_pct = Math.round((online_count / uptime.length) * 10000) / 100
71+
uptime_class =
72+
uptime_pct > 90
6873
? 'online'
69-
: uptimePct < 50
74+
: uptime_pct < 50
7075
? 'offline'
71-
: uptimePct < 75
76+
: uptime_pct < 75
7277
? 'warning'
7378
: ''
74-
75-
return (
76-
<div className='representative__section representative__uptime'>
77-
<div className='representative__uptime-metrics'>
78-
<div className='representative__uptime-metrics-metric'>
79-
<div className='representative__uptime-metric-header section__label'>
80-
Current Status
81-
</div>
82-
<div
83-
className={`representative__uptime-metric-body ${
84-
online ? 'online' : 'offline'
85-
}`}>
86-
{text}
87-
</div>
79+
}
80+
return (
81+
<div className='representative__section representative__uptime'>
82+
<div className='representative__uptime-metrics'>
83+
<div className='representative__uptime-metrics-metric'>
84+
<div className='representative__uptime-metric-header section__label'>
85+
Current Status
8886
</div>
89-
<div className='representative__uptime-metrics-metric'>
90-
<div className='representative__uptime-metric-header section__label'>
91-
2W Uptime
92-
</div>
93-
<div
94-
className={`representative__uptime-metric-body ${uptimeClass}`}>
95-
{uptimePct}%
96-
</div>
87+
<div
88+
className={`representative__uptime-metric-body ${
89+
online ? 'online' : 'offline'
90+
}`}>
91+
{text}
9792
</div>
98-
<div className='representative__uptime-metrics-metric'>
99-
<div className='representative__uptime-metric-header section__label'>
100-
2M Uptime
101-
</div>
102-
<div
103-
className={`representative__uptime-metric-body ${last60Class}`}>
104-
{last60Pct ? `${last60Pct}%` : '-'}
105-
</div>
93+
</div>
94+
<div className='representative__uptime-metrics-metric'>
95+
<div className='representative__uptime-metric-header section__label'>
96+
2W Uptime
10697
</div>
107-
<div className='representative__uptime-metrics-metric'>
108-
<div className='representative__uptime-metric-header section__label'>
109-
3M Uptime
110-
</div>
111-
<div
112-
className={`representative__uptime-metric-body ${last90Class}`}>
113-
{last90Pct ? `${last90Pct}%` : '-'}
114-
</div>
98+
<div className={`representative__uptime-metric-body ${uptime_class}`}>
99+
{uptime_pct}%
115100
</div>
116101
</div>
117-
<div className='representative__uptime-bar'>
118-
<Uptime data={uptime} expanded />
102+
<div className='representative__uptime-metrics-metric'>
103+
<div className='representative__uptime-metric-header section__label'>
104+
2M Uptime
105+
</div>
106+
<div
107+
className={`representative__uptime-metric-body ${last_60_class}`}>
108+
{last_60_pct ? `${last_60_pct}%` : '-'}
109+
</div>
110+
</div>
111+
<div className='representative__uptime-metrics-metric'>
112+
<div className='representative__uptime-metric-header section__label'>
113+
3M Uptime
114+
</div>
115+
<div
116+
className={`representative__uptime-metric-body ${last_90_class}`}>
117+
{last_90_pct ? `${last_90_pct}%` : '-'}
118+
</div>
119119
</div>
120120
</div>
121-
)
122-
}
121+
<div className='representative__uptime-bar'>
122+
<Uptime data={uptime} expanded />
123+
</div>
124+
</div>
125+
)
123126
}
124127

125128
RepresentativeUptime.propTypes = {

‎src/views/components/uptime/uptime.js

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,50 @@ import './uptime.styl'
66
const online = '#3bd671'
77
const offline = '#ee6666'
88

9-
export default class Uptime extends React.Component {
10-
render() {
11-
const { data, length, expanded } = this.props
12-
13-
const ticks = []
14-
const sliced = length ? data.slice(0, length) : data
15-
const height = expanded ? 18 : 14
16-
const width = expanded ? 4 : 3
17-
const spacing = expanded ? 4 : 2
18-
sliced.forEach((d, key) =>
19-
ticks.push(
20-
<rect
21-
key={key}
22-
height={height}
23-
width={width}
24-
y='0'
25-
x={key * (spacing + width)}
26-
rx='1.625'
27-
ry='1.625'
28-
fill={d.online ? online : offline}
29-
/>
30-
)
9+
export default function Uptime({ data, length, expanded }) {
10+
const ticks = []
11+
const sliced = length ? data.slice(0, length) : data
12+
if (sliced.length === 0) {
13+
return <div className='uptime'>no uptime data available</div>
14+
}
15+
const height = expanded ? 18 : 14
16+
const width = expanded ? 4 : 3
17+
const spacing = expanded ? 4 : 2
18+
sliced.forEach((d, key) =>
19+
ticks.push(
20+
<rect
21+
key={key}
22+
height={height}
23+
width={width}
24+
y='0'
25+
x={key * (spacing + width)}
26+
rx='1.625'
27+
ry='1.625'
28+
fill={d.online ? online : offline}
29+
/>
3130
)
31+
)
3232

33-
return (
34-
<div className='uptime'>
35-
<svg
36-
height={height}
37-
viewBox={`0 0 ${sliced.length * (spacing + width)} ${height}`}>
38-
{ticks}
39-
</svg>
40-
{Boolean(expanded) && (
41-
<div className='uptime__legend'>
42-
<div className='uptime__legend-text'>Now</div>
43-
<div className='uptime__legend-text'>
44-
{Math.round((sliced[sliced.length - 1].interval * 2) / 24)} days
45-
ago
46-
</div>
33+
return (
34+
<div className='uptime'>
35+
<svg
36+
height={height}
37+
viewBox={`0 0 ${sliced.length * (spacing + width)} ${height}`}>
38+
{ticks}
39+
</svg>
40+
{Boolean(expanded) && (
41+
<div className='uptime__legend'>
42+
<div className='uptime__legend-text'>Now</div>
43+
<div className='uptime__legend-text'>
44+
{sliced.length > 0
45+
? Math.round((sliced[sliced.length - 1].interval * 2) / 24)
46+
: 0}{' '}
47+
days ago
4748
</div>
48-
)}
49-
</div>
50-
)
51-
}
49+
</div>
50+
)}
51+
</div>
52+
)
5253
}
5354

5455
Uptime.propTypes = {

0 commit comments

Comments
 (0)