Luis/nextjs-python-web-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: some util to dashboard

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-12 17:11:41 +02:00
parent 9a40891f7c
commit cdef88e55e
17 changed files with 582 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pkgs/ui/src/app/layout.tsx
View File

@@ -71,7 +71,7 @@ export default function RootLayout({
<div
className={tw`${
!showSidebar && translate
} flex h-full w-full flex-col transition-[margin] ease-in-out duration-150`}
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
>
<div className="min-h-10 static top-0 mb-2 py-2">
<div className="grid grid-cols-3">
@@ -96,7 +96,7 @@ export default function RootLayout({
</div>
<div className="px-1">
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<div className="relative flex flex-1 flex-col overflow-x-hidden">
<main>{children}</main>
</div>
</div>

14
pkgs/ui/src/app/nodes/NodeList.tsx
View File

@@ -38,19 +38,7 @@ import {
} from "@mui/material";
import hexRgb from "hex-rgb";
import useMediaQuery from "@mui/material/useMediaQuery";
export interface TableData {
name: string;
id: string;
status: NodeStatus;
last_seen: number;
}
export enum NodeStatus {
Online,
Offline,
Pending,
}
import { NodeStatus, TableData } from "@/data/nodeData";
interface HeadCell {
disablePadding: boolean;

2
pkgs/ui/src/app/nodes/NodePieChart.tsx
View File

@@ -1,4 +1,4 @@
import React, { PureComponent } from "react";
import React from "react";
import {
PieChart,
Pie,

89
pkgs/ui/src/app/nodes/page.tsx
View File

@@ -1,94 +1,9 @@
"use client";
import { StrictMode } from "react";
import NodeList, { NodeStatus, TableData } from "./NodeList";
import NodeList from "./NodeList";
import Box from "@mui/material/Box";
function createData(
name: string,
id: string,
status: NodeStatus,
last_seen: number,
): TableData {
return {
name,
id,
status,
last_seen: last_seen,
};
}
const tableData = [
createData(
"Matchbox",
"42:0:f21:6916:e333:c47e:4b5c:e74c",
NodeStatus.Pending,
0,
),
createData(
"Ahorn",
"42:0:3c46:b51c:b34d:b7e1:3b02:8d24",
NodeStatus.Online,
0,
),
createData(
"Yellow",
"42:0:3c46:98ac:9c80:4f25:50e3:1d8f",
NodeStatus.Offline,
16.0,
),
createData(
"Rauter",
"42:0:61ea:b777:61ea:803:f885:3523",
NodeStatus.Offline,
6.0,
),
createData(
"Porree",
"42:0:e644:4499:d034:895e:34c8:6f9a",
NodeStatus.Offline,
13,
),
createData(
"Helsinki",
"42:0:3c46:fd4a:acf9:e971:6036:8047",
NodeStatus.Online,
0,
),
createData(
"Kelle",
"42:0:3c46:362d:a9aa:4996:c78e:839a",
NodeStatus.Online,
0,
),
createData(
"Shodan",
"42:0:3c46:6745:adf4:a844:26c4:bf91",
NodeStatus.Online,
0.0,
),
createData(
"Qubasa",
"42:0:3c46:123e:bbea:3529:db39:6764",
NodeStatus.Offline,
7.0,
),
createData(
"Green",
"42:0:a46e:5af:632c:d2fe:a71d:cde0",
NodeStatus.Offline,
2,
),
createData("Gum", "42:0:e644:238d:3e46:c884:6ec5:16c", NodeStatus.Offline, 0),
createData("Xu", "42:0:ca48:c2c2:19fb:a0e9:95b9:794f", NodeStatus.Online, 0),
createData(
"Zaatar",
"42:0:3c46:156e:10b6:3bd6:6e82:b2cd",
NodeStatus.Online,
0,
),
];
import { tableData } from "@/data/nodeData";
export default function Page() {
return (

0
pkgs/ui/src/app/nodes/styles.module.css
View File

27
pkgs/ui/src/app/page.tsx
View File

@@ -1,10 +1,15 @@
import { RecentActivity } from "@/components/dashboard/activity";
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
import { Notifications } from "@/components/dashboard/notifications";
import { QuickActions } from "@/components/quickActions";
interface DashboardCardProps {
children?: React.ReactNode;
}
const DashboardCard = (props: DashboardCardProps) => {
const { children } = props;
return (
<div className="col-span-full border border-dashed border-slate-400 lg:col-span-1">
<div className="col-span-full row-span-1 border border-dashed border-slate-400 lg:col-span-1">
{children}
</div>
);
@@ -16,7 +21,7 @@ interface DashboardPanelProps {
const DashboardPanel = (props: DashboardPanelProps) => {
const { children } = props;
return (
<div className="col-span-full border border-dashed border-slate-400 lg:col-span-2">
<div className="col-span-full row-span-1 shrink-0 border border-dashed border-slate-400 lg:col-span-2">
{children}
</div>
);
@@ -28,12 +33,12 @@ interface SplitDashboardCardProps {
const SplitDashboardCard = (props: SplitDashboardCardProps) => {
const { children } = props;
return (
<div className="col-span-full lg:col-span-1">
<div className="col-span-full row-span-1 lg:col-span-1">
<div className="grid h-full grid-cols-1 gap-4">
{children?.map((row, idx) => (
<div
key={idx}
className="col-span-full border border-dashed border-slate-400"
className="col-span-full row-span-1 border border-dashed border-slate-400"
>
{row}
</div>
@@ -46,12 +51,16 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => {
export default function Dashboard() {
return (
<div className="flex h-screen w-full">
<div className="grid w-full grid-cols-3 gap-4">
<DashboardCard>Current CLAN Overview</DashboardCard>
<DashboardCard>Recent Activity Log</DashboardCard>
<div className="grid w-full auto-rows-min grid-cols-3 gap-4">
<DashboardCard>
<NetworkOverview />
</DashboardCard>
<DashboardCard>
<RecentActivity />
</DashboardCard>
<SplitDashboardCard>
<div>Notifications</div>
<div>Quick Action</div>
<Notifications />
<QuickActions />
</SplitDashboardCard>
<DashboardPanel>Panel</DashboardPanel>
<DashboardCard>Side Bar (misc)</DashboardCard>