Skip to content

Commit

Permalink
fix(ubuntu): fixed drive name mapping
Browse files Browse the repository at this point in the history
  • Loading branch information
@christopherpickering
christopherpickering committed Sep 11, 2023
1 parent 3ee1cc5 commit 82cb7d1
Show file tree
Hide file tree
Showing 13 changed files with 104 additions and 147 deletions.
91 changes: 54 additions & 37 deletions app/components/charts/cpuChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,12 @@ import {
Tooltip,
Filler,
TimeScale,
TooltipItem,
Tick,
Scale,
ChartOptions,
} from 'chart.js';
import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Line } from 'react-chartjs-2';
import { createLinearGradient, darkGradient, lightGradient } from './functions';
import { useFetcher } from '@remix-run/react';
Expand All @@ -31,6 +35,7 @@ import 'chartjs-adapter-date-fns';
import { H2, H3 } from '../ui/typography';
import { Circle, Loader, RefreshCw } from 'lucide-react';
import { Button } from '../ui/button';
import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types';

const SubChart = ({
speed,
Expand All @@ -43,11 +48,11 @@ const SubChart = ({
speed?: boolean;
unit: string;
fetcherState: string;
data: MonitorFeeds[];
data: Array<{ createdAt: Date; cpuLoad: string; cpuSpeed: string }>;
startDate: Date;
endDate: Date;
}) => {
const chartRef = useRef<ChartJS>(null);
const chartRef = useRef<ChartJSOrUndefined>(null);

Tooltip.positioners.mouse = function (items, evtPos) {
return evtPos;
Expand All @@ -63,16 +68,10 @@ const SubChart = ({
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'index',
mode: 'index' as const,
},
animation: {
duration: 300,
resize: {
duration: 0,
},
active: {
duration: 0,
},
},
plugins: {
title: {
Expand All @@ -82,13 +81,11 @@ const SubChart = ({
display: false,
},
tooltip: {
position: 'mouse',
position: 'mouse' as const,
callbacks: {
label: function (tooltipItem: {
datasetIndex: number;
formattedValue: string;
raw: { y: number };
}) {
label: function (
tooltipItem: TooltipItem<'line'> & { raw: { y: number } },
) {
if (tooltipItem.datasetIndex === 0) {
return tooltipItem.formattedValue + '% Used';
}
Expand All @@ -107,8 +104,13 @@ const SubChart = ({
position: 'left' as const,
beginAtZero: true,
ticks: {
callback: function (value: string) {
return value + '%';
callback: function (
this: Scale,
tickValue: number | string,
index: number,
ticks: Tick[],
) {
return tickValue + '%';
},
},
stacked: false,
Expand All @@ -120,15 +122,20 @@ const SubChart = ({
position: 'right' as const,
beginAtZero: true,
ticks: {
callback: function (value: string) {
return Number(value) / 1000 + 'GHz';
callback: function (
this: Scale,
tickValue: number | string,
index: number,
ticks: Tick[],
) {
return Number(tickValue) / 1000 + 'GHz';
},
},
stacked: false,
},
x: {
stacked: true,
type: 'time',
type: 'time' as const,
min: () => startDate,
max: () => endDate,
time: {
Expand All @@ -143,9 +150,11 @@ const SubChart = ({
},
};
}, [unit, data]);
const [options, setOptions] = useState(getOptions());

const [chartData, setChartData] = useState<ChartData<'bar'>>(emptyDataset);
const [options, setOptions] = useState<ChartOptions<'line'>>(getOptions());

const [chartData, setChartData] =
useState<ChartData<'line', { x: Date; y: number }[]>>(emptyDataset);
useEffect(() => {
if (fetcherState === 'loading') {
setChartData(emptyDataset);
Expand All @@ -168,14 +177,14 @@ const SubChart = ({
spanGaps: 1000 * 60 * (xUnit == 'hour' ? 1.5 : 90), // 1.5 min or 1.5 hour
fill: speed,
label: 'Load',
cubicInterpolationMode: 'monotone',
cubicInterpolationMode: 'monotone' as const,
tension: 0.4,
data: data?.map((x: MonitorFeeds) => ({
data: data?.map((x) => ({
x: x.createdAt,
y: Number(x.cpuLoad),
})),
segment: {
borderColor: (ctx: { p0: { stop: any }; p1: { stop: any } }) => {
borderColor: (ctx: { p0: { stop?: any }; p1: { stop?: any } }) => {
if (ctx.p0.stop || ctx.p1.stop) return 'transparent';
return createLinearGradient(
chart.ctx,
Expand All @@ -184,8 +193,8 @@ const SubChart = ({
);
},
backgroundColor: (ctx: {
p0: { stop: any };
p1: { stop: any };
p0: { stop?: any };
p1: { stop?: any };
}) => {
if (ctx.p0.stop || ctx.p1.stop) return 'transparent';
return createLinearGradient(
Expand All @@ -195,8 +204,8 @@ const SubChart = ({
);
},
hoverBackgroundColor: (ctx: {
p0: { stop: any };
p1: { stop: any };
p0: { stop?: any };
p1: { stop?: any };
}) => {
if (ctx.p0.stop || ctx.p1.stop) return 'transparent';
return createLinearGradient(
Expand All @@ -206,8 +215,8 @@ const SubChart = ({
);
},
hoverBorderColor: (ctx: {
p0: { stop: any };
p1: { stop: any };
p0: { stop?: any };
p1: { stop?: any };
}) => {
if (ctx.p0.stop || ctx.p1.stop) return 'transparent';
return createLinearGradient(
Expand All @@ -217,21 +226,21 @@ const SubChart = ({
);
},
},
pointStyle: false,
pointStyle: false as const,
},
{
spanGaps: 1000 * 60 * (xUnit == 'hour' ? 1.5 : 90), // 1.5 min or 1.5 hour
label: 'Speed',
fill: false,
data: data?.map((x: MonitorFeeds) => ({
data: data?.map((x) => ({
x: x.createdAt,
y: Number(x.cpuSpeed),
})),
borderColor: '#cbd5e1',
backgroundColor: '#e2e8f0',
borderRadius: { topLeft: 2, topRight: 2 },
cubicInterpolationMode: 'monotone',
pointStyle: false,
cubicInterpolationMode: 'monotone' as const,
pointStyle: false as const,
tension: 0.4,
yAxisID: 'y2',
},
Expand Down Expand Up @@ -300,7 +309,15 @@ export const CpuChart = ({

<div className="grid sm:grid-cols-1 md:grid-cols-3 ls:grid-cols-4">
{usageFetcher.data?.monitor?.cpus.map(
(x: Cpu & { usage: CpuUsage }) => (
(
x: Cpu & {
usage: Array<{
createdAt: Date;
cpuLoad: string;
cpuSpeed: string;
}>;
},
) => (
<div key={x.id}>
<H3 className="text-base">CPU {x.title}</H3>
<div className="h-[150px] relative" key={x.id}>
Expand Down
2 changes: 1 addition & 1 deletion app/components/driveForms/base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Label } from '~/components/ui/label';

import { Textarea } from '~/components/ui/textarea';

import type { Drive } from '~/models/monitor.server';
import type { Drive } from '~/models/drive.server';
import { Switch } from '../ui/switch';

export default function Drive({
Expand Down
25 changes: 1 addition & 24 deletions app/models/drive.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,7 @@ export function getDriveMeta({ id }: Pick<Drive, 'id'>) {
systemDescription: true,
description: true,
size: true,
daysTillFull: true,
growthRate: true,
online: true,
monitor: {
select: {
title: true,
Expand Down Expand Up @@ -177,8 +176,6 @@ export function getDriveUsage({
description: true,
systemDescription: true,
size: true,
daysTillFull: true,
growthRate: true,
monitor: {
select: {
title: true,
Expand Down Expand Up @@ -237,16 +234,6 @@ export function getDriveLatestFeeds({ id }: Pick<Drive, 'id'>) {
});
}

export function setDriveGrowth({
id,
growthRate,
}: Pick<Drive, 'id' | 'growthRate'>) {
return prisma.drive.update({
where: { id },
data: { growthRate },
});
}

export function editDrive({
id,
title,
Expand All @@ -266,16 +253,6 @@ export function editDrive({
});
}

export function setDriveDays({
id,
daysTillFull,
}: Pick<Drive, 'id' | 'daysTillFull'>) {
return prisma.drive.update({
where: { id },
data: { daysTillFull },
});
}

export function setDriveOnline({ id, online }: Pick<Drive, 'id' | 'online'>) {
return prisma.drive.update({
where: { id },
Expand Down
4 changes: 0 additions & 4 deletions app/models/monitor.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,8 +301,6 @@ export function getMonitor({ id }: Pick<Monitor, 'id'>) {
description: true,
systemDescription: true,
size: true,
daysTillFull: true,
growthRate: true,
missingNotify: true,
missingNotifyResendAfterMinutes: true,
missingNotifySentAt: true,
Expand Down Expand Up @@ -904,8 +902,6 @@ export function getMonitorDrives({ monitorId }: { monitorId: Monitor['id'] }) {
description: true,
systemDescription: true,
size: true,
daysTillFull: true,
growthRate: true,
online: true,
},
orderBy: [
Expand Down
46 changes: 14 additions & 32 deletions app/monitors/ubuntu.server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ import {
updateMonitor,
} from '~/models/monitor.server';

import {
setDriveDays,
setDriveGrowth,
setDriveOnline,
} from '~/models/drive.server';
import { setDriveOnline } from '~/models/drive.server';
import Notifier from '~/notifications/notifier';
import { disposeSsh } from './helpers.server';
import { NodeSSH } from 'node-ssh';
Expand Down Expand Up @@ -119,12 +115,13 @@ export default async function UbuntuMonitor({ monitor }: { monitor: Monitor }) {
'use%': string;
};

// only update drives that are enabled.
// only update drives that are enabled and not tmpfs
const updateableDrives = drives.discarray.filter((drive: Drive) => {
const l =
disabledDrives.filter(
(d) => d.name == drive.filesystem && d.root == drive.mount,
).length == 0;
).length == 0 && drive.filesystem !== 'tmpfs';

return l;
});
const oldMonitor = await getMonitor({ id: monitor.id });
Expand Down Expand Up @@ -170,8 +167,8 @@ export default async function UbuntuMonitor({ monitor }: { monitor: Monitor }) {
drives: updateableDrives.map((drive: Drive) => {
return {
data: {
name: drive.filesystem,
root: drive.mount,
root: drive.filesystem,
name: drive.mount,
size: (Number(drive.size) * 1000).toString(),
},
used: (Number(drive.used) * 1000).toString(),
Expand All @@ -183,34 +180,19 @@ export default async function UbuntuMonitor({ monitor }: { monitor: Monitor }) {
.map((x: string, i: number) => ({ name: i.toString(), used: x })),
});

const oneDay = 24 * 60 * 60 * 1000;
// calculate days till full
// online/offline
data.drives?.map(
async (drive: { size: string; usage: string | any[]; id: any }) => {
// if (!drive.usage || drive.usage.length <= 1) {
await setDriveDays({ id: drive.id, daysTillFull: null });
await setDriveGrowth({ id: drive.id, growthRate: null });
// } else {
// const end = drive.usage[0];
// const start = drive.usage[drive.usage.length - 1];
// const diffDays = differenceInDays(end.createdAt, start.createdAt) + 1;
// const usedGrowth = end.used - start.used;
// const free = Number(drive.size) - end.used;
// const daysTillFull = (
// Math.max(Math.round((free * diffDays) / usedGrowth), -1) || -1
// ).toString();
// await setDriveDays({ id: drive.id, daysTillFull });
// await setDriveGrowth({
// id: drive.id,
// growthRate: (usedGrowth / diffDays).toString(),
// });
// }
// online/offline
async (drive: {
size: string;
usage: string | any[];
id: any;
name: string;
}) => {
await setDriveOnline({
id: drive.id,
online:
updateableDrives.filter(
(x: { Name: string }) => x.Name == drive.name,
(x: { filesystem: string }) => x.filesystem == drive.name,
).length > 0,
});
},
Expand Down
Loading

0 comments on commit 82cb7d1

Please sign in to comment.