-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
CurrentStatus.tsx
110 lines (100 loc) · 3.32 KB
/
CurrentStatus.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { useQuery } from "@tanstack/react-query";
import React from "react";
import { useLocation } from "react-router-dom";
import { RouteQuery } from "../../utils/Loader";
type CurrentStatusLoaderData = {
listenCount: number;
listenCountsPerDay: {
date: string;
listenCount: number;
label: string;
}[];
userCount: number;
load: string;
};
export default function CurrentStatus() {
const location = useLocation();
const {
data: { userCount, listenCount, listenCountsPerDay, load },
} = useQuery(RouteQuery(["current-status"], location.pathname)) as {
data: CurrentStatusLoaderData;
};
return (
<>
<h2 className="page-title">Current status</h2>
<div className="row">
<div className="col-md-7 col-lg-8">
<h3>ListenBrainz Stats</h3>
<table className="table table-border table-condensed table-striped">
<thead>
<tr>
<th>Description</th>
<th>Number</th>
</tr>
</thead>
<tbody>
{userCount && (
<tr>
<td>Number of users</td>
<td>{userCount}</td>
</tr>
)}
{listenCount && (
<tr>
<td>Number of listens</td>
<td>{listenCount}</td>
</tr>
)}
{listenCountsPerDay &&
listenCountsPerDay.map((data, index) => (
<tr key={`listen-count-${data.date}`}>
<td>
Number of listens submitted {data.label} ({data.date})
</td>
<td>{data.listenCount}</td>
</tr>
))}
</tbody>
</table>
<p>
If you are curious about the state of our Listen ingestion
pipelines, you can create yourself a free account on our{" "}
<a href="https://stats.metabrainz.org">
infrastructure statistics site
</a>
. In particular, the{" "}
<a href="https://stats.metabrainz.org/d/000000059/rabbitmq?orgId=1&refresh=1m&var-queue_vhost=%2Flistenbrainz">
RabbitMQ ListenBrainz view
</a>{" "}
shows how many listens we are currently processing, and the number
of incoming listens currently queued for processing.
</p>
<p>
Something isn't updating? Stay calm and check the{" "}
<a href="https://listenbrainz.readthedocs.io/en/latest/general/data-update-intervals.html">
Expected Data Update Intervals
</a>{" "}
doc.
</p>
<h3>load average</h3>
<p>Current server load average</p>
<div className="well">{load}</div>
</div>
<div className="col-md-5 col-lg-4">
<p style={{ textAlign: "center" }}>
<img
style={{ borderRadius: "15px" }}
src="/static/img/selfie.jpg"
width="250"
alt="Selfie"
/>
</p>
<p style={{ textAlign: "center" }}>
Our server doesn't have a selfie. :( <br />
Have a monkey selfie instead!
</p>
</div>
</div>
</>
);
}