-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0587982
commit 1bd0d01
Showing
2 changed files
with
109 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,69 +1,88 @@ | ||
'use client' | ||
|
||
import ServerLine from './components/server'; | ||
import React from 'react' | ||
import ServersTable from './components/server'; | ||
import useSWR from 'swr'; | ||
import useSWRSubscription from 'swr/subscription'; | ||
|
||
const getServers = () => fetch('http://127.0.0.1:8080/list').then(res => res.json()); | ||
|
||
export default function Home() { | ||
const { data, error, isLoading } = useSWR('/list', getServers); | ||
|
||
let content; | ||
function Status({ error, data }) { | ||
let message; | ||
let details; | ||
|
||
if (error) { | ||
content = | ||
<div className="flex flex-col justify-center text-center"> | ||
<div className="flex flex-row justify-center"> | ||
<div className="w-1/2 text-right px-1">Status :</div> | ||
<div className="w-1/2 text-left px-1">Failed to load server list</div> | ||
</div> | ||
<div className="text-orange-700 font-mono">{error.toString()}</div> | ||
</div>; | ||
} else if (isLoading) { | ||
content = | ||
<div className="flex flex-col justify-center text-center"> | ||
<div className="flex flex-row justify-center"> | ||
<div className="w-1/2 text-right px-1">Status :</div> | ||
<div className="w-1/2 text-left px-1">Loading ...</div> | ||
</div> | ||
</div>; | ||
} else { | ||
const serversByCategory = Object.groupBy(data, ({ category }) => category); | ||
message = "Failed to load server list" | ||
details = <div className="text-orange-700">{error.toString()}</div> | ||
} else if (!data||data==undefined) { | ||
message = "Loading ..." | ||
} | ||
|
||
const hidden = !message && !details ? "hidden" : "" | ||
|
||
return ( | ||
<div className={`basis-1/4 flex flex-col justify-center text-nowrap font-mono transition-opacity duration-[2000ms] opacity-0 ${hidden}`}> | ||
<div className="px-0">{message}</div> | ||
{details} | ||
</div> | ||
) | ||
} | ||
|
||
let categoryOrder = { "Kimsufi": {}, "So you Start": {}, "Rise": {}, "": {} } | ||
const ordered = Object.assign(categoryOrder, serversByCategory); | ||
console.log(ordered); | ||
export default function Home() { | ||
const [data, setData] = React.useState(null); | ||
|
||
content = <table className="text-nowrap"> | ||
<thead> | ||
<tr> | ||
<th className="p-4">Plan Code</th> | ||
<th className="p-4">Category</th> | ||
<th className="p-4">Name</th> | ||
<th className="p-4">Price</th> | ||
<th className="p-4">Status</th> | ||
<th className="p-4">Datacenters</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{Object.entries(ordered).map(([category, servers]) => ( | ||
<> | ||
<ServerLine key={category} servers={servers} /> | ||
<tr key={category + " separator0"}><td className="p-2" colSpan={6}></td></tr> | ||
<tr key={category + " separator1"}><td className="p-2" colSpan={6}></td></tr> | ||
</> | ||
))} | ||
</tbody> | ||
</table> | ||
const startWS = (key, { next }) => { | ||
let socket = new WebSocket("ws://127.0.0.1:8080/listWS",'echo-protocol'); | ||
socket.addEventListener('message', (event) => { | ||
console.log("got data", event.data.length); | ||
const res = JSON.parse(event.data) | ||
next(null, res) | ||
setData(res) | ||
}) | ||
socket.addEventListener('error', (event) => { | ||
console.log("socket error", event.error); | ||
next(event.error) | ||
//ws.close() | ||
}) | ||
socket.addEventListener('close', (event) => { | ||
console.log("socket closed", event.code, event.reason); | ||
next(new Error("socket closed")) | ||
setTimeout(function() { | ||
console.log("reconnecting"); | ||
startWS(key, { next }) | ||
}, 5000); | ||
}) | ||
socket.addEventListener('open', () => { | ||
console.log("socket open"); | ||
}) | ||
return () => socket.close() | ||
} | ||
|
||
const { error } = useSWRSubscription('/listWS', startWS) | ||
const status = <Status error={error} data={data} /> | ||
|
||
//const setServers = (data) => { | ||
// setData(data); | ||
// return 5000; | ||
//} | ||
//const opts = { | ||
// revalidateOnFocus: false, | ||
// refreshInterval: setServers | ||
//} | ||
//const { error, isLoading } = useSWR('https://127.0.0.1:8080/list', getServers, opts); | ||
|
||
console.log("in", data?.length); | ||
|
||
return ( | ||
<div className="flex flex-row justify-center"> | ||
<div className="pt-10 pb-20"> | ||
<h1 className="text-center text-xl font-bold p-10">OVH Eco server availability</h1> | ||
{content} | ||
</div> | ||
<div className=""> | ||
<div className="pt-10 pb-20"> | ||
<div className="flex flex-row flex-nowrap"> | ||
<div className="basis-1/4 flex-none"></div> | ||
<h1 className="basis-2/4 flex-none text-center text-xl font-bold p-5">OVH Eco server availability</h1> | ||
{status} | ||
</div> | ||
<ServersTable data={data} /> | ||
</div> | ||
</div> | ||
); | ||
} |