RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve about

Browse Source
This commit is contained in:
SrGooglo 2023-03-06 02:07:29 +00:00
parent 8923d2e637
commit 203b1f8e5a
2 changed files with 128 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/app/constants/settings/about/index.jsx
View File

@ -1,6 +1,5 @@
import React from "react"
import * as antd from "antd"
import moment from "moment"
import { Icons } from "components/Icons"
@ -8,7 +7,13 @@ import config from "config"
import "./index.less"
const Footer = (props) => {
const connectionsTooltipStrings = {
secure: "This connection is secure",
insecure: "This connection is insecure, cause it's not using HTTPS protocol and the server cannot be verified on the trusted certificate authority.",
warning: "This connection is secure but the server cannot be verified on the trusted certificate authority.",
}
const Footer = () => {
const isDevMode = window.__evite?.env?.NODE_ENV !== "production"
return <div className="footer">
@ -39,6 +44,8 @@ export default {
const [serverManifest, setServerManifest] = React.useState(null)
const [serverOrigin, setServerOrigin] = React.useState(null)
const [serverHealth, setServerHealth] = React.useState(null)
const [secureConnection, setSecureConnection] = React.useState(false)
const checkServerVersion = async () => {
const serverManifest = await app.cores.api.customRequest()
@ -51,12 +58,30 @@ export default {
if (instance) {
setServerOrigin(instance.origin)
if (instance.origin.startsWith("https")) {
setSecureConnection(true)
}
}
}
const featchServerHealth = async () => {
const response = await app.cores.api.customRequest({
method: "GET",
url: "/server/health",
}).catch(() => null)
console.log(response.data)
if (response) {
setServerHealth(response.data)
}
}
React.useEffect(() => {
checkServerVersion()
checkServerOrigin()
featchServerHealth()
}, [])
return <div className="about_app">
@ -83,23 +108,59 @@ export default {
</div>
</div>
<h3><Icons.Info />Server information</h3>
<div className="group">
<h3><Icons.Server />Server info</h3>
<div className="field">
Powered by Linebridge™
<div className="field_header">
<h3><Icons.MdOutlineStream /> Origin</h3>
<div className="value">
<antd.Tag>v{serverManifest?.LINEBRIDGE_SERVER_VERSION ?? "Unknown"}</antd.Tag>
<antd.Tooltip
title={secureConnection ? connectionsTooltipStrings.secure : connectionsTooltipStrings.insecure}
>
<antd.Tag
color={secureConnection ? "green" : "red"}
icon={secureConnection ? <Icons.MdHttps /> : <Icons.MdWarning />}
>
{
secureConnection ? " Secure connection" : "Insecure connection"
}
</antd.Tag>
</antd.Tooltip>
</div>
<div className="field_value">
{serverOrigin ?? "Unknown"}
</div>
</div>
<div className="field">
Server origin
<div className="value">
<antd.Tag>{serverOrigin ?? "Unknown"}</antd.Tag>
<div className="field_header">
<h3><Icons.MdBuild /> Version</h3>
</div>
<div className="field_value">
{serverManifest?.version ?? "Unknown"}
</div>
</div>
<div className="field">
<div className="field_header">
<h3><Icons.MdDataUsage /> Instance usage</h3>
</div>
<div className="field_value">
<antd.Progress
percent={serverHealth?.cpuUsage.percent ?? 0}
status="active"
showInfo={false}
/>
</div>
</div>
<div className="group_footer">
{
serverManifest?.LINEBRIDGE_SERVER_VERSION && <h5>Powered by Linebridge™</h5>
}
</div>
</div>

59
packages/app/constants/settings/about/index.less
View File

@ -71,22 +71,75 @@
margin-bottom: 10px;
background-color: var(--background-color-primary);
border-radius: 12px;
padding: 15px;
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 5px;
}
.field {
display: inline-flex;
flex-direction: column;
margin-bottom: 10px;
font-size: 0.9rem;
.field_header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.value {
font-size: 0.8rem;
margin-bottom: 8px;
h3 {
margin: 0;
}
}
.field_value {
font-size: 0.9rem;
display: inline-flex;
flex-direction: row;
margin-left: 10px;
margin-top: 5px;
font-family: "DM Mono", monospace;
background-color: var(--background-color-accent);
border-radius: 7px;
padding: 7px;
.ant-progress {
margin: 0;
}
}
}
.group_footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
.button {
margin-left: 10px;
}
}
}