mirror of
https://github.com/logos-storage/logos-storage-marketplace-ui.git
synced 2026-01-02 13:33:06 +00:00
Add logs page
This commit is contained in:
Arnaud
parent
301a6720e8
commit
df40ee5bca
8
package-lock.json
generated
8
package-lock.json
generated
@ -9,7 +9,7 @@
|
||||
"version": "0.0.7",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.34",
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.35",
|
||||
"@codex-storage/sdk-js": "^0.0.15",
|
||||
"@sentry/browser": "^8.32.0",
|
||||
"@sentry/react": "^8.31.0",
|
||||
@ -379,9 +379,9 @@
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@codex-storage/marketplace-ui-components": {
|
||||
"version": "0.0.34",
|
||||
"resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.34.tgz",
|
||||
"integrity": "sha512-WRSgQU/OiERKBqpUIq95tgz1jKizM8fd28hottD4Ra8Z0gHkFZThxoVGad2pq96ha7U/Q/U+VEW+f+t4Z251rg==",
|
||||
"version": "0.0.35",
|
||||
"resolved": "file:../storybook/codex-storage-marketplace-ui-components-0.0.35.tgz",
|
||||
"integrity": "sha512-wHh+oDRAt2NoIDxehzogDxowKEOwg6xxDHT3KkXfwawBhcmZIrfff9melJ4/hdAXRPo9IPTO/Zpi6Yj0KmlyWQ==",
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.453.0"
|
||||
},
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"React"
|
||||
],
|
||||
"dependencies": {
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.34",
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.35",
|
||||
"@codex-storage/sdk-js": "^0.0.15",
|
||||
"@sentry/browser": "^8.32.0",
|
||||
"@sentry/react": "^8.31.0",
|
||||
|
||||
BIN
public/img/assistance.png
Normal file
BIN
public/img/assistance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@ -11,6 +11,8 @@ import { usePersistence } from "../../hooks/usePersistence";
|
||||
import { useLocation, useNavigate } from "@tanstack/react-router";
|
||||
import { PeersIcon } from "../Menu/PeersIcon";
|
||||
import { SettingsIcon } from "../Menu/SettingsIcon";
|
||||
import { FilesIcon } from "../FilesIcon/FilesIcon";
|
||||
import { LogsIcon } from "../Menu/LogsIcon";
|
||||
|
||||
type Props = {
|
||||
onIconClick: () => void;
|
||||
@ -20,12 +22,16 @@ const icons: Record<string, ReactElement> = {
|
||||
dashboard: <DashboardIcon />,
|
||||
peers: <PeersIcon />,
|
||||
settings: <SettingsIcon />,
|
||||
files: <FilesIcon />,
|
||||
logs: <LogsIcon />,
|
||||
};
|
||||
|
||||
const descriptions: Record<string, string> = {
|
||||
dashboard: "Get Overview of your Codex Vault",
|
||||
peers: "Monitor your Codex peer connections",
|
||||
settings: "Manage your Codex Vault",
|
||||
dashboard: "Get Overview of your Codex Vault.",
|
||||
peers: "Monitor your Codex peer connections.",
|
||||
settings: "Manage your Codex Vault.",
|
||||
files: "Manage your files in your local vault.",
|
||||
logs: "Manage your logs and debug console.",
|
||||
};
|
||||
|
||||
export function AppBar({ onIconClick }: Props) {
|
||||
|
||||
@ -1,7 +1,26 @@
|
||||
.logLevel {
|
||||
.log-level {
|
||||
flex-grow: 1;
|
||||
}
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 14px;
|
||||
|
||||
.logLevel-select {
|
||||
margin-bottom: 0.75rem;
|
||||
> div {
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
background-position: url(/icons/logs.svg);
|
||||
}
|
||||
|
||||
select {
|
||||
border-color: #969696;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@ import {
|
||||
Toast,
|
||||
} from "@codex-storage/marketplace-ui-components";
|
||||
import { Promises } from "../../utils/promises";
|
||||
import { LogsIcon } from "../Menu/LogsIcon";
|
||||
import { SaveIcon } from "./SaveIcon";
|
||||
|
||||
export function LogLevel() {
|
||||
const queryClient = useQueryClient();
|
||||
@ -52,34 +54,39 @@ export function LogLevel() {
|
||||
};
|
||||
|
||||
const levels = [
|
||||
["DEBUG", "DEBUG"],
|
||||
["TRACE", "TRACE"],
|
||||
["INFO", "INFO"],
|
||||
["NOTICE", "NOTICE"],
|
||||
["WARN", "WARN"],
|
||||
["ERROR", "ERROR"],
|
||||
["FATAL", "FATAL"],
|
||||
["DEBUG", "Debug"],
|
||||
["TRACE", "Trace"],
|
||||
["INFO", "Info"],
|
||||
["NOTICE", "Notice"],
|
||||
["WARN", "Warn"],
|
||||
["ERROR", "Error"],
|
||||
["FATAL", "Fatal"],
|
||||
] satisfies [string, string][];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
className="logLevel-select"
|
||||
id="level"
|
||||
label="Log level"
|
||||
options={levels}
|
||||
value={level}
|
||||
onChange={onChange}></Select>
|
||||
<div className="log-level">
|
||||
<div>
|
||||
<Select
|
||||
id="level"
|
||||
label=""
|
||||
options={levels}
|
||||
value={level}
|
||||
onChange={onChange}></Select>
|
||||
<LogsIcon></LogsIcon>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="primary"
|
||||
label="Save changes"
|
||||
variant="outline"
|
||||
label="Save"
|
||||
Icon={SaveIcon}
|
||||
fetching={isPending}
|
||||
size="small"
|
||||
onClick={onClick}></Button>
|
||||
<Toast
|
||||
message={toast.message}
|
||||
time={toast.time}
|
||||
variant={toast.variant}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
15
src/components/LogLevel/SaveIcon.tsx
Normal file
15
src/components/LogLevel/SaveIcon.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export function SaveIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.5 13.75V7.75H2.5V13.75H1C0.801088 13.75 0.610322 13.671 0.46967 13.5303C0.329018 13.3897 0.25 13.1989 0.25 13V1C0.25 0.801088 0.329018 0.610322 0.46967 0.46967C0.610322 0.329018 0.801088 0.25 1 0.25H10.75L13.75 3.25V13C13.75 13.1989 13.671 13.3897 13.5303 13.5303C13.3897 13.671 13.1989 13.75 13 13.75H11.5ZM10 13.75H4V9.25H10V13.75Z"
|
||||
fill="#99A0AE"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
38
src/components/RequireAssitance/RequireAssitance.css
Normal file
38
src/components/RequireAssitance/RequireAssitance.css
Normal file
@ -0,0 +1,38 @@
|
||||
.require-assistance {
|
||||
background-color: #0a1410;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
border-left: 4px solid #6ccc93;
|
||||
height: 144px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
background-image: url(/img/assistance.png);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
width: 500px;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
h5 {
|
||||
font-family: Azeret Mono;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #6ccc93;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 19.36px;
|
||||
letter-spacing: 0.01em;
|
||||
text-align: left;
|
||||
color: #7bfbaf;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
20
src/components/RequireAssitance/RequireAssitance.tsx
Normal file
20
src/components/RequireAssitance/RequireAssitance.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { DiscordIcon } from "../Welcome/DiscordIcon";
|
||||
import "./RequireAssitance.css";
|
||||
|
||||
export function RequireAssitance() {
|
||||
return (
|
||||
<a
|
||||
href={import.meta.env.VITE_DISCORD_LINK}
|
||||
className="require-assistance"
|
||||
target="_blank">
|
||||
<h5>Require Assistance?</h5>
|
||||
|
||||
<DiscordIcon></DiscordIcon>
|
||||
|
||||
<div>
|
||||
<h6>Join Codex Discord</h6>
|
||||
<small>Get direct access to the Core Team.</small>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -62,7 +62,7 @@ export function WelcomeCard() {
|
||||
<Link to="/dashboard/help" className="welcome-link">
|
||||
Learn more<ArrowRight></ArrowRight>
|
||||
</Link>
|
||||
<a href="">
|
||||
<a href={import.meta.env.VITE_DISCORD_LINK}>
|
||||
<DiscordIcon></DiscordIcon>
|
||||
Join Codex Discord
|
||||
</a>
|
||||
|
||||
49
src/routes/dashboard/logs.css
Normal file
49
src/routes/dashboard/logs.css
Normal file
@ -0,0 +1,49 @@
|
||||
.logs-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #96969633;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
> div:first-child {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: Inter;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.015em;
|
||||
text-align: left;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
color: #969696cc;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 187px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.logs {
|
||||
.node {
|
||||
pre {
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.011em;
|
||||
text-align: left;
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,44 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import "./logs.css";
|
||||
import { RequireAssitance } from "../../components/RequireAssitance/RequireAssitance";
|
||||
import { LogLevel } from "../../components/LogLevel/LogLevel";
|
||||
import { LogsIcon } from "../../components/Menu/LogsIcon";
|
||||
import { useDebug } from "../../hooks/useDebug";
|
||||
|
||||
const throwOnError = false;
|
||||
|
||||
export const Route = createFileRoute("/dashboard/logs")({
|
||||
component: () => <div>Hello /dashboard/logs!</div>,
|
||||
component: () => {
|
||||
const { data } = useDebug(throwOnError);
|
||||
|
||||
const { table, ...rest } = data ?? {};
|
||||
|
||||
return (
|
||||
<div className="logs">
|
||||
<div className="logs-card">
|
||||
<div>
|
||||
<h5>Log level</h5>
|
||||
<small>
|
||||
Manage the type of logs being displayed on your CLI for Codex
|
||||
Node.
|
||||
</small>
|
||||
<LogLevel></LogLevel>
|
||||
</div>
|
||||
<RequireAssitance></RequireAssitance>
|
||||
</div>
|
||||
|
||||
<div className="card node">
|
||||
<header>
|
||||
<div>
|
||||
<LogsIcon></LogsIcon>
|
||||
<h5>Node</h5>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<pre>{JSON.stringify(rest, null, 2)}</pre>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@ -82,31 +82,6 @@ export const Route = createFileRoute("/dashboard/settings")({
|
||||
<Debug />
|
||||
</ErrorBoundary>
|
||||
</div> */}
|
||||
|
||||
{/* <div className="input-floating">
|
||||
<input
|
||||
className="input input-floating-input"
|
||||
id="input-floating"
|
||||
placeholder=""
|
||||
/>
|
||||
<label className="input-floating-label" htmlFor="input-floating">
|
||||
Floating
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="input-floating">
|
||||
<input
|
||||
className="input input-floating-input"
|
||||
id="input-floating-with-value"
|
||||
placeholder=""
|
||||
value="Some value"
|
||||
/>
|
||||
<label
|
||||
className="input-floating-label"
|
||||
htmlFor="input-floating-with-value">
|
||||
Floating
|
||||
</label>
|
||||
</div> */}
|
||||
</div>
|
||||
),
|
||||
});
|
||||
|
||||
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@ -3,6 +3,7 @@
|
||||
interface ImportMetaEnv {
|
||||
VITE_CODEX_API_URL: string;
|
||||
VITE_GEO_IP_URL: string;
|
||||
VITE_DISCORD_LINK: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user