From 6650e8c30eab9092c9c610fa2a0510d3afc0e0f4 Mon Sep 17 00:00:00 2001
From: Christopher Pickering <christopher@going.bg>
Date: Mon, 24 Jul 2023 14:52:49 -0500
Subject: [PATCH] feat(drive): added ability to disable drives and add names

---
 app/components/charts/driveBar.tsx            |   6 ++
 app/components/driveForms/base.tsx            | 100 ++++++++++++++++++
 app/models/monitor.server.ts                  |  49 ++++++++-
 app/monitors/windows.server.ts                |  17 ++-
 app/notifications/notifier.tsx                |   2 +-
 .../route.tsx                                 |  86 ++++++++++-----
 .../route.tsx                                 |  56 ++++++----
 app/routes/_auth.drive.edit/route.tsx         |  66 ++++++++++++
 app/routes/_auth.monitor.new/route.tsx        |  25 +++--
 .../migration.sql                             |   9 ++
 prisma/schema.prisma                          |   2 +-
 11 files changed, 355 insertions(+), 63 deletions(-)
 create mode 100644 app/components/driveForms/base.tsx
 create mode 100644 app/routes/_auth.drive.edit/route.tsx
 create mode 100644 prisma/migrations/20230724185124_inverted_flag/migration.sql

diff --git a/app/components/charts/driveBar.tsx b/app/components/charts/driveBar.tsx
index 26b86d3..0f9b3b7 100644
--- a/app/components/charts/driveBar.tsx
+++ b/app/components/charts/driveBar.tsx
@@ -130,6 +130,8 @@ export const StorageChart = ({ url }: { url: string }) => {
 				{
 					fill: true,
 					label: 'Used',
+					cubicInterpolationMode: 'monotone',
+					tension: 0.4,
 					data: usageFetcher.data?.drive?.usage?.map((x: Usage) =>
 						bytes(Number(x.used), { unit: 'GB' }).replace('GB', ''),
 					),
@@ -153,6 +155,7 @@ export const StorageChart = ({ url }: { url: string }) => {
 						chart.chartArea,
 						darkGradient,
 					),
+					pointStyle: false,
 				},
 				{
 					label: 'Free',
@@ -163,6 +166,9 @@ export const StorageChart = ({ url }: { url: string }) => {
 					borderColor: '#cbd5e1',
 					backgroundColor: '#e2e8f0',
 					borderRadius: { topLeft: 2, topRight: 2 },
+					cubicInterpolationMode: 'monotone',
+					pointStyle: false,
+					tension: 0.4,
 				},
 			],
 		};
diff --git a/app/components/driveForms/base.tsx b/app/components/driveForms/base.tsx
new file mode 100644
index 0000000..44ee88c
--- /dev/null
+++ b/app/components/driveForms/base.tsx
@@ -0,0 +1,100 @@
+import { Form, useFetcher } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { Button } from '~/components/ui/button';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from '~/components/ui/dialog';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+
+import { Textarea } from '~/components/ui/textarea';
+
+import type { Drive } from '~/models/monitor.server';
+import { Switch } from '../ui/switch';
+
+export default function Drive({ drive, children }: { drive: Drive }) {
+	const [open, setOpen] = useState(false);
+	const fetcher = useFetcher();
+
+	const [data, setData] = useState<Drive>(drive);
+
+	useEffect(() => setData(drive), [drive]);
+
+	useEffect(() => {
+		if (fetcher.state === 'idle' && fetcher.data?.drive != null) {
+			setOpen(false);
+		}
+	}, [fetcher]);
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>{children}</DialogTrigger>
+			<DialogContent className="sm:min-w-[425px] sm:max-w-fit">
+				<DialogHeader>
+					<DialogTitle>{drive.name}</DialogTitle>
+					<DialogDescription>Editing drive.</DialogDescription>
+				</DialogHeader>
+				{fetcher.state !== 'submitting' && fetcher.data?.form?.error ? (
+					<small className="text-red-700">{fetcher.data.form.error}</small>
+				) : null}
+				<Form method="post" action="/monitor/new">
+					<div className="grid gap-4 py-4">
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label className="text-right">Enabled</Label>
+							<div className="self-start col-span-3">
+								<Switch
+									name="enabled"
+									checked={data.enabled}
+									onCheckedChange={(enabled) => setData({ ...data, enabled })}
+								/>
+							</div>
+							<Label htmlFor="name" className="text-right">
+								Name
+							</Label>
+							<Input
+								type="text"
+								id="name"
+								value={data.title}
+								placeholder="Logs drive"
+								className="col-span-3"
+								onChange={(e) => setData({ ...data, title: e.target.value })}
+							/>
+							<Label htmlFor="description" className="text-right">
+								Description
+							</Label>
+							<Textarea
+								id="description"
+								className="col-span-3"
+								value={data.description || ''}
+								onChange={(e) =>
+									setData({ ...data, description: e.target.value })
+								}
+							/>
+						</div>
+					</div>
+					<DialogFooter className="sm:justify-between">
+						<div className="flex space-x-2">
+							<Button
+								type="button"
+								onClick={(e) => {
+									fetcher.submit(
+										{ _action: 'edit', ...data },
+										{ method: 'post', action: '/drive/edit' },
+									);
+								}}
+							>
+								Save
+							</Button>
+						</div>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/app/models/monitor.server.ts b/app/models/monitor.server.ts
index 1733c5b..df40209 100644
--- a/app/models/monitor.server.ts
+++ b/app/models/monitor.server.ts
@@ -140,7 +140,7 @@ export function getMonitor({ id }: Pick<Monitor, 'id'>) {
 					id: true,
 					title: true,
 					hasError: true,
-					inactive: true,
+					enabled: true,
 					location: true,
 					name: true,
 					root: true,
@@ -241,10 +241,12 @@ export function getDriveNotifications({ id }: Pick<Drive, 'id'>) {
 		select: {
 			id: true,
 			title: true,
+			enabled: true,
 			monitorId: true,
 			location: true,
-			inactive: true,
+			enabled: true,
 			name: true,
+			root: true,
 			systemDescription: true,
 			description: true,
 			size: true,
@@ -323,7 +325,7 @@ export function getDriveUsage({
 			title: true,
 			monitorId: true,
 			location: true,
-			inactive: true,
+			enabled: true,
 			name: true,
 			description: true,
 			systemDescription: true,
@@ -439,6 +441,23 @@ export async function getMonitorLogs({
 	};
 }
 
+export function getMonitorDisabledDrives({
+	monitorId,
+}: {
+	monitorId: Monitor['id'];
+}) {
+	return prisma.drive.findMany({
+		where: { monitorId, enabled: false },
+		select: {
+			id: true,
+			monitorId: true,
+			location: true,
+			name: true,
+			root: true,
+		},
+	});
+}
+
 export function getMonitorDrives({ monitorId }: { monitorId: Monitor['id'] }) {
 	return prisma.drive.findMany({
 		where: { monitorId },
@@ -447,8 +466,9 @@ export function getMonitorDrives({ monitorId }: { monitorId: Monitor['id'] }) {
 			title: true,
 			monitorId: true,
 			location: true,
-			inactive: true,
+			enabled: true,
 			name: true,
+			root: true,
 			description: true,
 			systemDescription: true,
 			size: true,
@@ -463,7 +483,7 @@ export function getMonitorDrives({ monitorId }: { monitorId: Monitor['id'] }) {
 				take: 1,
 			},
 		},
-		orderBy: { name: 'asc' },
+		orderBy: [{ enabled: 'desc' }, { size: 'desc' }, { name: 'asc' }],
 	});
 }
 
@@ -508,6 +528,25 @@ export async function createMonitor({
 	return monitor;
 }
 
+export function editDrive({
+	id,
+	title,
+	description,
+	enabled,
+}: Pick<Drive, 'id' | 'title' | 'description' | 'enabled'>) {
+	return prisma.drive.update({
+		where: { id },
+		data: {
+			title,
+			description,
+			enabled,
+		},
+		select: {
+			id: true,
+		},
+	});
+}
+
 export async function editMonitor({
 	id,
 	title,
diff --git a/app/monitors/windows.server.ts b/app/monitors/windows.server.ts
index f624998..a2a8805 100644
--- a/app/monitors/windows.server.ts
+++ b/app/monitors/windows.server.ts
@@ -2,6 +2,7 @@ import { decrypt } from '@/lib/utils';
 import { NodeSSH } from 'node-ssh';
 import {
 	Monitor,
+	getMonitorDisabledDrives,
 	monitorError,
 	setDriveDays,
 	setDriveGrowth,
@@ -184,6 +185,20 @@ export default async function WindowsMonitor({
 			lastBoot = new Date(os.LastBootUpTime);
 		}
 
+		const disabledDrives = await getMonitorDisabledDrives({ id: monitor.id });
+
+		// only update drives that are enabled.
+		const updateableDrives = s.filter((drive) => {
+			const l =
+				disabledDrives.filter(
+					(d) =>
+						d.name == drive.Name &&
+						d.root == drive.Root &&
+						d.location == drive.CurrentLocation,
+				).length == 0;
+			return l;
+		});
+
 		const data = await updateMonitor({
 			id: monitor.id,
 			data: {
@@ -209,7 +224,7 @@ export default async function WindowsMonitor({
 				cpuLoad: pc.LoadPercentage.toString(),
 				cpuSpeed: pc.CurrentClockSpeed.toString(),
 			},
-			drives: s.map(
+			drives: updateableDrives.map(
 				(drive: {
 					CurrentLocation: any;
 					Name: any;
diff --git a/app/notifications/notifier.tsx b/app/notifications/notifier.tsx
index fa7f598..07d2a4a 100644
--- a/app/notifications/notifier.tsx
+++ b/app/notifications/notifier.tsx
@@ -28,7 +28,7 @@ export default async function Notifier({
 	// drive notifications
 	monitor?.drives?.map(async (drive: Drive & { usage: DriveUsage[] }) => {
 		// don't report inactive drives.
-		if (drive.inactive) return;
+		if (drive.enabled == false) return;
 
 		// drive has no usages, ignore.
 		if (drive.usage.length <= 0) return;
diff --git a/app/routes/_auth.$monitorType_.$monitorId._index/route.tsx b/app/routes/_auth.$monitorType_.$monitorId._index/route.tsx
index d025c42..007cb1e 100644
--- a/app/routes/_auth.$monitorType_.$monitorId._index/route.tsx
+++ b/app/routes/_auth.$monitorType_.$monitorId._index/route.tsx
@@ -9,7 +9,13 @@ import { getMonitorPublic } from '~/models/monitor.server';
 import { authenticator } from '~/services/auth.server';
 
 import { Link, useFetcher, useLoaderData } from '@remix-run/react';
-import { BellRing, MoveLeft, MoveRight, Settings } from 'lucide-react';
+import {
+	BellRing,
+	MoveLeft,
+	MoveRight,
+	Settings,
+	ToggleRight,
+} from 'lucide-react';
 import { Skeleton } from '~/components/ui/skeleton';
 import invariant from 'tiny-invariant';
 
@@ -31,6 +37,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '/components/ui/dropdown-menu';
+import { ToggleLeft } from 'lucide-react';
 
 export const loader = async ({ params, request }: LoaderArgs) => {
 	await authenticator.isAuthenticated(request, {
@@ -94,7 +101,10 @@ export default function Index() {
 					</Link>
 				</div>
 			</div>
-			<H1>{monitor.title}</H1>
+			<H1 className="space-x-2">
+				<span>{monitor.title}</span>
+				{monitor.host && <span>({monitor.host})</span>}
+			</H1>
 			<div className="space-y-4 pb-4">
 				<div className="text-muted-foreground">{monitor.description}</div>
 
@@ -182,34 +192,56 @@ export default function Index() {
 												to={`/${monitor.type}/${monitor.id}/drive/${drive.id}`}
 												prefetch="intent"
 												key={drive.id}
-												className="flex space-x-4 border rounded-md py-2 px-4 cursor-pointer hover:shadow hover:shadow-sky-200"
+												className={`transition-colors flex space-x-4 border rounded-md py-2 px-4 cursor-pointer hover:shadow hover:shadow-sky-200 ${
+													drive.enabled ? '' : 'opacity-50 hover:opacity-100'
+												}`}
 											>
-												<DoughnutChart
-													className="w-36 h-36"
-													data={{
-														labels: [
-															`Used ${bytes(Number(drive.usage?.[0]?.used))}`,
-															`Free ${bytes(Number(drive.usage?.[0]?.free))}`,
-														],
-														datasets: [
-															{
-																label: 'Drive Usage',
-																data: [
-																	Number(drive.usage?.[0]?.used),
-																	Number(drive.usage?.[0]?.used) +
-																		Number(drive.usage?.[0]?.free) ==
-																	0
-																		? 100
-																		: Number(drive.usage?.[0]?.free),
-																],
-															},
-														],
-													}}
-												/>
+												<div>
+													{drive.enabled ? (
+														<ToggleRight size={20} className="text-slate-400" />
+													) : (
+														<ToggleLeft
+															size={20}
+															className="fill-slate-200 text-slate-400"
+														/>
+													)}
+													<DoughnutChart
+														className="w-36 h-36"
+														data={{
+															labels: [
+																`Used ${bytes(Number(drive.usage?.[0]?.used))}`,
+																`Free ${bytes(Number(drive.usage?.[0]?.free))}`,
+															],
+															datasets: [
+																{
+																	label: 'Drive Usage',
+																	data: [
+																		Number(drive.usage?.[0]?.used),
+																		Number(drive.usage?.[0]?.used) +
+																			Number(drive.usage?.[0]?.free) ==
+																		0
+																			? 100
+																			: Number(drive.usage?.[0]?.free),
+																	],
+																},
+															],
+														}}
+													/>
+												</div>
 
 												<div className="space-y-2 flex-grow">
-													<H3>
-														{drive.name}:\{drive.location}
+													<H3 className="space-x-2">
+														{drive.title ? (
+															<>
+																<span>{drive.title}</span>
+																<span>({drive.root})</span>
+															</>
+														) : (
+															<>
+																{drive.root}
+																{drive.location}
+															</>
+														)}
 													</H3>
 
 													<Table>
diff --git a/app/routes/_auth.$monitorType_.$monitorId.drive.$driveId/route.tsx b/app/routes/_auth.$monitorType_.$monitorId.drive.$driveId/route.tsx
index f0e410a..74f58f9 100644
--- a/app/routes/_auth.$monitorType_.$monitorId.drive.$driveId/route.tsx
+++ b/app/routes/_auth.$monitorType_.$monitorId.drive.$driveId/route.tsx
@@ -5,7 +5,7 @@ import { authenticator } from '~/services/auth.server';
 import { Link, useFetcher, useLoaderData, useParams } from '@remix-run/react';
 import { BarChart, StorageChart } from '~/components/charts/driveBar';
 import { H1, H3 } from '~/components/ui/typography';
-import { AlertTriangle, MoveLeft } from 'lucide-react';
+import { AlertTriangle, MoveLeft, Settings } from 'lucide-react';
 import { BellRing } from 'lucide-react';
 import { MoveRight } from 'lucide-react';
 import { Table, TableBody, TableCell, TableRow } from '~/components/ui/table';
@@ -13,6 +13,8 @@ import bytes from 'bytes';
 import { useEffect, useState } from 'react';
 import { Skeleton } from '~/components/ui/skeleton';
 import { LogTable } from '~/components/logTable/table';
+import { Button } from '~/components/ui/button';
+import Drive from '~/components/driveForms/base';
 
 export const loader = async ({ params, request }: LoaderArgs) => {
 	await authenticator.isAuthenticated(request, {
@@ -42,11 +44,6 @@ export default function Index() {
 			if (document.visibilityState === 'visible') {
 				dataFetcher.load(window.location.pathname);
 			}
-			// if (document.visibilityState === 'visible') {
-			// 	usageFetcher.load(
-			// 		`/${drive.monitor.type}/${drive.monitor.id}/drive/${drive.id}/usage`,
-			// 	);
-			// }
 		}, 30 * 1000);
 		return () => clearInterval(interval);
 	}, []);
@@ -67,10 +64,10 @@ export default function Index() {
 
 	return (
 		<>
-			<div className="flex justify-between">
+			<div className="flex justify-between pb-4">
 				<Link
 					to={`/${monitorType}/${monitorId}`}
-					className="flex content-center space-x-2 pb-4 text-slate-600"
+					className="flex content-center space-x-2 text-slate-600"
 					prefetch="intent"
 				>
 					<MoveLeft size={16} className="my-auto" />
@@ -78,23 +75,42 @@ export default function Index() {
 						Back to <strong>{drive.monitor.title}</strong>
 					</span>
 				</Link>
-
-				<Link
-					to={`/${monitorType}/${monitorId}/drive/${drive.id}/notifications`}
-					className="flex content-center space-x-2 pb-4 text-slate-600"
-					prefetch="intent"
-				>
-					<BellRing size={16} className="my-auto" />
-					<span className="my-auto">Manage Notifications</span>
-					<MoveRight size={16} className="my-auto" />
-				</Link>
+				<div className="flex divide-x">
+					<Drive drive={drive}>
+						<Button variant="link" className="text-slate-700 h-6 ">
+							<Settings size={16} />
+						</Button>
+					</Drive>
+					<Link
+						to={`/${monitorType}/${monitorId}/drive/${drive.id}/notifications`}
+						className="flex content-center space-x-2 pl-3 text-slate-600"
+						prefetch="intent"
+					>
+						<BellRing size={16} className="my-auto" />
+						<span className="my-auto">Manage Notifications</span>
+						<MoveRight size={16} className="my-auto" />
+					</Link>
+				</div>
 			</div>
 
-			<H1>
-				{drive.name}:\{drive.location}
+			<H1 className="space-x-2">
+				{drive.enabled === false && (
+					<span className="!text-slate-400">(Disabled)</span>
+				)}
+				{drive.title ? (
+					<>
+						<span>{drive.title}</span>
+						<span>({drive.root})</span>
+					</>
+				) : (
+					<>
+						{drive.name}:\{drive.location}
+					</>
+				)}
 			</H1>
 
 			<div className="space-y-4 pb-4">
+				<div className="text-muted-foreground">{drive.description}</div>
 				<div className="space-y-2 flex-grow">
 					<Table>
 						<TableBody>
diff --git a/app/routes/_auth.drive.edit/route.tsx b/app/routes/_auth.drive.edit/route.tsx
new file mode 100644
index 0000000..6863a64
--- /dev/null
+++ b/app/routes/_auth.drive.edit/route.tsx
@@ -0,0 +1,66 @@
+import { ActionArgs } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { namedAction } from 'remix-utils';
+import { editDrive } from '~/models/monitor.server';
+import { authenticator } from '~/services/auth.server';
+
+const isNullOrEmpty = (str: string | undefined | FormDataEntryValue) => {
+	if (str === undefined || str === null || str.toString().trim() === '') {
+		return true;
+	}
+	return false;
+};
+
+const checkWindows = function ({ values }) {
+	if (values.type !== 'windows') return null;
+	if (isNullOrEmpty(values.title)) {
+		return json({ form: { error: 'Name is required.' } });
+	}
+
+	if (isNullOrEmpty(values.type)) {
+		return json({ form: { error: 'Type is required.' } });
+	}
+
+	if (isNullOrEmpty(values.host)) {
+		return json({ form: { error: 'Host is required.' } });
+	}
+
+	if (isNullOrEmpty(values.username)) {
+		return json({ form: { error: 'Username is required.' } });
+	}
+
+	if (isNullOrEmpty(values.password) && isNullOrEmpty(values.privateKey)) {
+		return json({
+			form: { error: 'Password or Private Key is required.' },
+		});
+	}
+};
+
+export async function action({ request }: ActionArgs) {
+	await authenticator.isAuthenticated(request, {
+		failureRedirect: `/auth/?returnTo=${encodeURI(
+			new URL(request.url).pathname,
+		)}`,
+	});
+
+	return namedAction(request, {
+		async edit() {
+			const formData = await request.formData();
+			const { _action, ...values } = Object.fromEntries(formData);
+
+			const drive = await editDrive({
+				id: values.id.toString(),
+				title:
+					values.title && values.title.toString() !== 'null'
+						? values.title.toString()
+						: null,
+				enabled: values.enabled.toString() == 'true',
+				description:
+					values.description && values.description.toString() != 'null'
+						? values.description.toString()
+						: null,
+			});
+			return json({ drive });
+		},
+	});
+}
diff --git a/app/routes/_auth.monitor.new/route.tsx b/app/routes/_auth.monitor.new/route.tsx
index 1d5be1e..4d203c5 100644
--- a/app/routes/_auth.monitor.new/route.tsx
+++ b/app/routes/_auth.monitor.new/route.tsx
@@ -60,6 +60,7 @@ export async function action({ request }: ActionArgs) {
 			}
 
 			let monitor = {};
+			console.log(values);
 			if (values.id) {
 				monitor = await editMonitor({
 					id: values.id.toString(),
@@ -67,12 +68,16 @@ export async function action({ request }: ActionArgs) {
 					host: values.host.toString(),
 					username: values.username.toString(),
 					password: values.password ? values.password.toString() : null,
-					privateKey: values.privateKey ? values.privateKey.toString() : null,
+					privateKey:
+						values.privateKey && values.privateKey.toString() != 'null'
+							? values.privateKey.toString()
+							: null,
 					port: (values.port || 22).toString(),
 					type: values.type.toString(),
-					description: values.description
-						? values.description.toString()
-						: undefined,
+					description:
+						values.description && values.description.toString() != 'null'
+							? values.description.toString()
+							: null,
 				});
 
 				return json({ monitor });
@@ -82,12 +87,16 @@ export async function action({ request }: ActionArgs) {
 					host: values.host.toString(),
 					username: values.username.toString(),
 					password: values.password ? values.password.toString() : null,
-					privateKey: values.privateKey ? values.privateKey.toString() : null,
+					privateKey:
+						values.privateKey && values.privateKey.toString() != 'null'
+							? values.privateKey.toString()
+							: null,
 					port: (values.port || 22).toString(),
 					type: values.type.toString(),
-					description: values.description
-						? values.description.toString()
-						: undefined,
+					description:
+						values.description && values.description.toString() != 'null'
+							? values.description.toString()
+							: null,
 				});
 			}
 
diff --git a/prisma/migrations/20230724185124_inverted_flag/migration.sql b/prisma/migrations/20230724185124_inverted_flag/migration.sql
new file mode 100644
index 0000000..9357f71
--- /dev/null
+++ b/prisma/migrations/20230724185124_inverted_flag/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `inactive` on the `Drive` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Drive" DROP COLUMN "inactive",
+ADD COLUMN     "enabled" BOOLEAN NOT NULL DEFAULT true;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index be8f8a4..774f75e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -122,7 +122,7 @@ model Drive {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  inactive Boolean @default(false)
+  enabled Boolean @default(true)
 
   // fields sent from monitor
   location          String?