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

Jump to bottom

Sub columns for services #1662

Closed
wants to merge 14 commits into from
Closed

Sub columns for services #1662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
02f24d3
Sub columns for services
Lukylix Jul 5, 2023
1bd300e
Fix Lint
Lukylix Jul 5, 2023
20e0d65
Fix widgets
Lukylix Jul 6, 2023
d19e382
Removed yarn lock
Lukylix Jul 6, 2023
f79e196
Revert Dockerfile
Lukylix Jul 6, 2023
726828c
Better sub-columns breakpoints && wip
Lukylix Jul 7, 2023
5aad759
Services widget wrap
Jul 7, 2023
79386c1
Fix hooks order
Lukylix Jul 7, 2023
4b3e240
Fix lint errors
Lukylix Jul 7, 2023
0dcc789
Fix padding
Lukylix Jul 7, 2023
5c78a1f
Fix columns number && elipsis
Lukylix Jul 8, 2023
1c6e5a1
Wrap services grid-combine or grid-preserve
Lukylix Jul 10, 2023
6dc931f
Merge branch 'main' into sub-columns
Lukylix Jul 10, 2023
34d9fcf
grid-combine
Lukylix Jul 10, 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
8 changes: 4 additions & 4 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ COPY --link package.json pnpm-lock.yaml* ./

SHELL ["/bin/ash", "-xeo", "pipefail", "-c"]
RUN apk add --no-cache libc6-compat \
&& apk add --no-cache --virtual .gyp python3 make g++ \
&& npm install -g pnpm
&& apk add --no-cache --virtual .gyp python3 make g++ \
&& npm install -g pnpm

RUN --mount=type=cache,id=pnpm-store,target=/root/.local/share/pnpm/store pnpm fetch | grep -v "cross-device link not permitted\|Falling back to copying packages from store"

Expand All @@ -29,8 +29,8 @@ COPY . .

SHELL ["/bin/ash", "-xeo", "pipefail", "-c"]
RUN npm run telemetry \
&& mkdir config \
&& NEXT_PUBLIC_BUILDTIME=$BUILDTIME NEXT_PUBLIC_VERSION=$VERSION NEXT_PUBLIC_REVISION=$REVISION npm run build
&& mkdir config \
&& NEXT_PUBLIC_BUILDTIME=$BUILDTIME NEXT_PUBLIC_VERSION=$VERSION NEXT_PUBLIC_REVISION=$REVISION npm run build

# Production image, copy all the files and run next
FROM docker.io/node:18-alpine AS runner
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"dependencies": {
"@headlessui/react": "^1.7.2",
"@kubernetes/client-node": "^0.17.1",
"@tailwindcss/container-queries": "^0.1.1",
"classnames": "^2.3.2",
"compare-versions": "^5.0.1",
"dockerode": "^3.3.4",
Expand Down
65 changes: 33 additions & 32 deletions src/components/services/group.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,52 @@
import classNames from "classnames";
import { Disclosure, Transition } from '@headlessui/react';
import { Disclosure, Transition } from "@headlessui/react";
import { MdKeyboardArrowDown } from "react-icons/md";

import List from "components/services/list";
import ResolvedIcon from "components/resolvedicon";

export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) {

return (
<div
key={services.name}
className={classNames(
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
"flex-1 p-1"
"flex-1 p-1 @container"
)}
>
<Disclosure defaultOpen>
{({ open }) => (
<>
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon &&
<div className="flex-shrink-0 mr-2 w-7 h-7">
<ResolvedIcon icon={layout.icon} />
</div>
}
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
<MdKeyboardArrowDown className={classNames(
disableCollapse ? 'hidden' : '',
'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
open ? 'rotate-180 transform' : ''
)} />
</Disclosure.Button>
<Transition
enter="transition duration-200 ease-out"
enterFrom="transform scale-75 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-75 opacity-0"
>
<Disclosure.Panel>
<List group={group} services={services.services} layout={layout} />
</Disclosure.Panel>
</Transition>
</>
)}
{({ open }) => (
<>
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7">
<ResolvedIcon icon={layout.icon} />
</div>
)}
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
<MdKeyboardArrowDown
className={classNames(
disableCollapse ? "hidden" : "",
"transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
open ? "rotate-180 transform" : ""
)}
/>
</Disclosure.Button>
<Transition
enter="transition duration-200 ease-out"
enterFrom="transform scale-75 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-75 opacity-0"
>
<Disclosure.Panel>
<List group={group} services={services.services} layout={layout} />
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
</div>
);
Expand Down
76 changes: 42 additions & 34 deletions src/components/services/item.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import ResolvedIcon from "components/resolvedicon";
export default function Item({ service, group }) {
const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext);
const showStats = (service.showStats === false) ? false : settings.showStats;
const showStats = service.showStats === false ? false : settings.showStats;
const [statsOpen, setStatsOpen] = useState(service.showStats);
const [statsClosing, setStatsClosing] = useState(false);

Expand All @@ -30,7 +30,7 @@ export default function Item({ service, group }) {
};

return (
<li key={service.name}>
<li key={service.name} className="@container">
<div
className={`${
hasLink ? "cursor-pointer " : " "
Expand Down Expand Up @@ -58,50 +58,50 @@ export default function Item({ service, group }) {
href={service.href}
target={service.target ?? settings.target ?? "_blank"}
rel="noreferrer"
className="flex-1 flex items-center justify-between rounded-r-md "
className="flex-1 flex items-center justify-between rounded-r-md w-full overflow-hidden"
>
<div className="flex-1 px-2 py-2 text-sm text-left">
<div className="flex-1 px-2 py-2 text-sm text-left text-ellipsis whitespace-nowrap overflow-hidden ...">
{service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
</div>
</a>
) : (
<div className="flex-1 flex items-center justify-between rounded-r-md ">
<div className="flex-1 px-2 py-2 text-sm text-left">
<div className="flex-1 flex items-center justify-between rounded-r-md w-full overflow-hidden">
<div className="flex-1 px-2 py-2 text-sm text-left text-ellipsis whitespace-nowrap overflow-hidden ...">
{service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
</div>
</div>
)}

<div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2">
{service.ping && (
<div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
<Ping group={group} service={service.name} />
<span className="sr-only">Ping status</span>
</div>
)}
{service.ping && (
<div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
<Ping group={group} service={service.name} />
<span className="sr-only">Ping status</span>
</div>
)}

{service.container && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer"
>
<Status service={service} />
<span className="sr-only">View container stats</span>
</button>
)}
{(service.app && !service.external) && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer"
>
<KubernetesStatus service={service} />
<span className="sr-only">View container stats</span>
</button>
)}
{service.container && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer"
>
<Status service={service} />
<span className="sr-only">View container stats</span>
</button>
)}
{service.app && !service.external && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer"
>
<KubernetesStatus service={service} />
<span className="sr-only">View container stats</span>
</button>
)}
</div>
</div>

Expand All @@ -112,7 +112,9 @@ export default function Item({ service, group }) {
"w-full overflow-hidden transition-all duration-300 ease-in-out"
)}
>
{(showStats || statsOpen) && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
{(showStats || statsOpen) && (
<Docker service={{ widget: { container: service.container, server: service.server } }} />
)}
</div>
)}
{service.app && (
Expand All @@ -122,7 +124,13 @@ export default function Item({ service, group }) {
"w-full overflow-hidden transition-all duration-300 ease-in-out"
)}
>
{(showStats || statsOpen) && <Kubernetes service={{ widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector } }} />}
{(showStats || statsOpen) && (
<Kubernetes
service={{
widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector },
}}
/>
)}
</div>
)}

Expand Down
Loading
Loading