Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/#60 create sidebar navigation #141

Merged
merged 16 commits into from
Jun 14, 2023
Merged

Feat/#60 create sidebar navigation #141

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b4a19c8
feat(Explorer): added sidebar navigation
njochens Jun 6, 2023
fc79ef1
feat(Explorer): further work on sidebar
njochens Jun 7, 2023
3df156f
fix(Explorer): fixed some minor bugs
njochens Jun 7, 2023
f1cde16
feat(Explorer): work on side bar
njochens Jun 11, 2023
c55b6bf
feat(Explorer): work on sidebar
njochens Jun 12, 2023
55468b0
feat(Explorer): performed further changes to sidebar
njochens Jun 13, 2023
dcaf2f7
fix(): repaired containers page
njochens Jun 13, 2023
27046f0
fix(): fixed folder id name
njochens Jun 13, 2023
3a8cb77
Merge branch 'develop' into feat/#60-create-sidebar-navigation
njochens Jun 13, 2023
a969d6f
feat(Explorer): added changes recommended by stefan. current location…
njochens Jun 14, 2023
281139a
Update page.tsx
njochens Jun 14, 2023
134a2ef
fix(): reversed remove of use client
njochens Jun 14, 2023
a3394be
Merge branch 'develop' into feat/#60-create-sidebar-navigation
njochens Jun 14, 2023
434b982
fix(): reversed remove of use client 2
njochens Jun 14, 2023
f09d718
Merge branch 'develop' into feat/#60-create-sidebar-navigation
njochens Jun 14, 2023
a978705
fix(explorer): align explorer with DB schema
vringar Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Explorer/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"parser": "@typescript-eslint/parser",
"root": true,
"rules": {
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-namespace": [
2,
{
Expand Down
882 changes: 601 additions & 281 deletions Explorer/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions Explorer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"react-dom": "18.2.0",
"swr": "^2.1.5",
"tailwindcss": "3.3.2",
"typescript": "5.1.3"
"typescript": "5.0.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.59.8",
Expand All @@ -37,6 +37,7 @@
"eslint-config-next": "13.4.4",
"eslint-config-prettier": "^4.2.1",
"eslint-plugin-cypress": "^2.13.3",
"eslint-plugin-prettier": "^4.2.1"
"eslint-plugin-prettier": "^4.2.1",
"zustand": "^4.3.8"
njochens marked this conversation as resolved.
Show resolved Hide resolved
}
}
Empty file modified Explorer/postcss.config.js
100755 → 100644
View file
Open in desktop
njochens marked this conversation as resolved.
Show resolved Hide resolved
Empty file.
14 changes: 14 additions & 0 deletions Explorer/src/app/cluster/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Cluster"} />
</div>
);
}
0 Explorer/src/app/container/[id]/page.tsx → Explorer/src/app/containers/id/page.tsx
View file
Open in desktop
njochens marked this conversation as resolved.
Show resolved Hide resolved
File renamed without changes.
15 changes: 15 additions & 0 deletions Explorer/src/app/containers/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import ContainerTable from "@/components/containerTable";
import { getContainerList } from "@/lib/db";
import { H1 } from "@/components/style_elements";

export const dynamic = "force-dynamic";
/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
const data = await getContainerList();
return (
<div className="container mx-auto px-4">
<H1 content={"Containers"} />
<ContainerTable list={data} />
</div>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Dashboard"} />
</div>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/deployments/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Deployments"} />
</div>
);
}
2 changes: 2 additions & 0 deletions Explorer/src/app/examples/health_indicators_example/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

njochens marked this conversation as resolved.
Show resolved Hide resolved
import {
HealthIndicatorWidget,
HealthIndicatorBadge,
Expand Down
26 changes: 25 additions & 1 deletion Explorer/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
"use client";

import "@/styles/globals.css";
import { Header } from "@/components/header";
import { SidebarProvider } from "@/context/sidebar_context";
import { ActualSidebar } from "@/components/sidebar";
import { Flowbite } from "flowbite-react";

export default function RootLayout({
children,
Expand All @@ -7,7 +13,25 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body>
<Flowbite>
<SidebarProvider>
<div className="flex dark:bg-gray-900 h-screen">
<div className="order-1 float-left bg-black">
<ActualSidebar />
</div>
<main className="order-2 w-full overflow-x-hidden">
<div className="float-left w-full">
<Header />
</div>
<div className="float-left w-full">
<div className="mx-4 mt-4 mb-24">{children}</div>
</div>
</main>
</div>
</SidebarProvider>
</Flowbite>
</body>
</html>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/nodes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("nodes"));

return (
<div className="p-6">
<H1 content={"Nodes"} />
</div>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/pods/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
njochens marked this conversation as resolved.
Show resolved Hide resolved
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Pods"} />
</div>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/services/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Services"} />
</div>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Settings"} />
</div>
);
}
14 changes: 14 additions & 0 deletions Explorer/src/app/volumes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";
import { H1 } from "@/components/style_elements";
//import { useNavigationStore } from "@/context/sidebar_context";

/* @ts-expect-error Async Server Component */
export default async function Index(): JSX.Element {
//useNavigationStore((state) => state.changePage("dashboard"));

return (
<div className="p-6">
<H1 content={"Volumes"} />
</div>
);
}
62 changes: 62 additions & 0 deletions Explorer/src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
"use client";

import { DarkThemeToggle, Navbar } from "flowbite-react";
import { FC } from "react";
import { useSidebarContext } from "@/context/sidebar_context";

export const Header: FC<Record<string, never>> = function () {
const { isOpenOnSmallScreens, isPageWithSidebar, setOpenOnSmallScreens } =
useSidebarContext();

return (
<header className="sticky top-0 z-20">
<Navbar fluid className="bg-slate-200">
{isPageWithSidebar && (
<button
aria-controls="sidebar"
aria-expanded="true"
className="mr-2 cursor-pointer p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:bg-gray-700 dark:focus:ring-gray-700 lg:hidden"
onClick={() => setOpenOnSmallScreens(!isOpenOnSmallScreens)}
>
{isOpenOnSmallScreens ? (
<svg
className="h-6 w-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
) : (
<svg
className="h-6 w-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
></path>
</svg>
)}
</button>
)}
<Navbar.Brand>
<span className="self-center whitespace-nowrap px-3 text-xl font-semibold dark:text-white">
Todo/Implement/Current/Path
</span>
</Navbar.Brand>
<div className="flex md:order-2">
<Navbar.Toggle />
<DarkThemeToggle />
</div>
</Navbar>
</header>
);
};
118 changes: 118 additions & 0 deletions Explorer/src/components/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
"use client";

import classNames from "classnames";
import { Sidebar as FlowbiteSidebar } from "flowbite-react";
import type { FC, PropsWithChildren } from "react";
import { useSidebarContext } from "@/context/sidebar_context";
import {
HiPresentationChartLine,
HiCog,
HiFolder,
HiServer,
HiTemplate,
HiChip,
HiTable,
HiHome,
} from "react-icons/hi";

const Sidebar: FC<PropsWithChildren<Record<string, unknown>>> = function ({
children,
}) {
const { isOpenOnSmallScreens: isSidebarOpenOnSmallScreens } =
useSidebarContext();

return (
<div
className={classNames(
"fixed overflow-auto top-0 h-screen z-10 lg:sticky lg:!block",
{
hidden: !isSidebarOpenOnSmallScreens,
}
)}
>
<FlowbiteSidebar>{children}</FlowbiteSidebar>
</div>
);
};

/*import { useNavigationStore } from "@/context/sidebar_context";*/

export default Object.assign(Sidebar, { ...FlowbiteSidebar });

export function ActualSidebar(): JSX.Element {
const current_page = "test"; /*useNavigationStore((state) => state.page);*/
njochens marked this conversation as resolved.
Show resolved Hide resolved

return (
<FlowbiteSidebar>
<FlowbiteSidebar.Items>
<FlowbiteSidebar.ItemGroup>
<FlowbiteSidebar.Item
href="dashboard"
icon={HiPresentationChartLine}
active={current_page.localeCompare("dashboard") ? false : true}
njochens marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I don't like this use of the ternary.
Isn't this equivalent to this line?

Suggested change
active={current_page.localeCompare("dashboard") ? false : true}
active={current_page === "dashboard"}

>
Dashboard
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="cluster"
icon={HiHome}
active={current_page.localeCompare("cluster") ? false : true}
>
Cluster
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="deployments"
icon={HiTemplate}
active={current_page.localeCompare("deployments") ? false : true}
>
Deployments
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="nodes"
icon={HiTemplate}
active={current_page.localeCompare("nodes") ? false : true}
>
Nodes
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="pods"
icon={HiTable}
active={current_page.localeCompare("pods") ? false : true}
>
Pods
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="containers"
icon={HiFolder}
active={current_page.localeCompare("containers") ? false : true}
>
Containers
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="volumes"
icon={HiServer}
active={current_page.localeCompare("volumes") ? false : true}
>
Volumes
</FlowbiteSidebar.Item>
<FlowbiteSidebar.Item
href="services"
icon={HiChip}
active={current_page.localeCompare("services") ? false : true}
>
Services
</FlowbiteSidebar.Item>
</FlowbiteSidebar.ItemGroup>
<FlowbiteSidebar.ItemGroup>
<FlowbiteSidebar.Item
href="settings"
icon={HiCog}
active={current_page.localeCompare("settings") ? false : true}
>
Settings
</FlowbiteSidebar.Item>
</FlowbiteSidebar.ItemGroup>
</FlowbiteSidebar.Items>
</FlowbiteSidebar>
);
}
1 change: 1 addition & 0 deletions Explorer/src/components/style_elements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
"use client";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function H1({ content }: any): JSX.Element {
return (
Expand Down
Loading