From 7a6fbc83461f98a2c95078a897aac32012894c7d Mon Sep 17 00:00:00 2001 From: Henry Dollman Date: Sun, 25 Aug 2024 18:19:47 -0400 Subject: [PATCH] add toggle for chart grid layout --- beszel/site/bun.lockb | Bin 146961 -> 147545 bytes beszel/site/package.json | 1 + .../components/charts/chart-time-select.tsx | 2 +- beszel/site/src/components/routes/system.tsx | 88 ++++++++++++++---- .../systems-table/systems-table.tsx | 2 +- beszel/site/src/components/ui/table.tsx | 2 +- beszel/site/src/components/ui/toggle.tsx | 43 +++++++++ beszel/site/src/lib/utils.ts | 19 ++++ 8 files changed, 135 insertions(+), 22 deletions(-) create mode 100644 beszel/site/src/components/ui/toggle.tsx diff --git a/beszel/site/bun.lockb b/beszel/site/bun.lockb index 92418a31ea75773c8d02c5d2ccb7167e7122fd00..ee6192e80e03a186da7f248417fa97236ceb44ec 100755 GIT binary patch delta 22334 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 delta 21844 zcmeHv3s_Y}*Z-a)2iYij=Ww`)h<60JhzH|x@`fdvq9LLoBA}umH?zEQv^34Mbg~i4 z3z?akmYJEi)VHj(ig3N{4)3*=<*2ZhBsB?WmCbF|h_4usqfNOrt{q&FtBq~QMX znw9~f7x=v%GQTi))FiUI0eopwWE@upKLSz@-d31f5;{7sV5Bwz-6q4kASe6^JQ-Z8 z_PR^?Bo zK5N=%5K<>6jL8{KHs4hIK_GSNG|IuO%jh}u*Lh3*{M_-mg_$KK7r;|zo&e&{HBa$A zKC&(OK(wONHB)7{+tu(PgDN-=o(${*l9!hGN?Zh<;wub6Me!31q=pVgKB3KDmLCPA za=&jUL~|_bi_kO-t!p;& zsMgJx5N&`xqBN}qa1r<*U{GgGgU?-Op^q_fO@tifN?pT{parQ15V7Vu5iJXJ1WzO9 z4J5;LfK+g%Lw0LI2^Kt5`Yw25?0^&>=|J*lgRXKs+!ZE5ZiD=DG@vo?FtDChiWZ_L zRI%xS>8fWF)yi62ke7E~p{8|B&@{xRD*#A6))fD3y!6O^AY#+C8i=uT%>t4KMk{$w zAe`-L2_#R{0S4ZI#K}0h621i_18WpN59klR5J(=%0@6_Bl#IMDH!oWonTQ_ofVzIA zo=B08F7}drKLMn{d0*i+g{u`VR5(pxuEG?B-GSumP73`M>IyIQls^2I#8TH`CD^O* zMTN^^Ws~Ot$>}@#$w8P1q^O#6xAa9mkh(YwNP4T0PaS$p;Y^?x_$=6I2aE*P1G){Q zV8I}+L4tg@7)S=@0;z(NgQOwc%QEvavvWQHPlnzAl83eeNzYs#CuQd4<(5p)N^&-w4X91+KS%CZo*+|S7BBNszka|)|8Ndy|M!+L!GCZ-sIJiJ45 zFc*rS1yNIUEX} z8e#)dfrwGk8S{bE{HZ{4k~uePT{L(8MD4!n1#Jmm)cYAwUW?Ggi#lsu@c#Z7iMk z5_Q+We5GZR2)d zr{$_UAL^UHdhs$}C!548@VS}W{ha#Obv3OUidcD&uS0Kz9aT?o?mQFR7;u>8t_J*s zkAofIc7Lbd6E`*tk&97<)^*_Gc)Cw4`-WE_Hw5E_GpTBRIH0mb85D z$&Usk=)UmE00_}ysEh?i)yv*&1c!xHai)SrV#$*`Nz=%2t* zr51yWzzkP;J`Q~%xZ7nOy!8?|>ARpnhyJ6|tjjaO#UO~OC04`AEO1n=E_Isi=4C-n z{i>3op6nQIZ|P)@@wAps{S8cYYPFT0@O3c8E08mY+k>5KHc!LnPF@!5w0a@N@8AKx zvFu)MZ{=jq@HBj$;AQx1%PU$rEg6mZ(pCw&z@(stSojIQ7&kC|`0;>P)`eHJcCy9X z-p0uq@icsn49!P#YL8Z{^StHU$V>(St3-iZK*z8V~P3%(0< zuy47&9mQ7~KDY3)c23=fMIr|I=sCuxKR7HXE>B(#OOJrN2b>WK`sd)tM>@|$oozAq z6TumyV432>eeDVQZU{*Q4Qc6M-n^`XQy+qH(@w9s?-=;{RMC|G@22+XTedeIxi1$urOW`=G60=YucTVA)dn=`T=mHftJ9s z2ezxk)#Vg@1>hpV$%#{5$sykK!{DSZiEGnB_CU^&G2m!?z>SXa07D&-gL#yvML1bL zFT>{^UJ>E6wrOdEk8iAAh!mN`(1khJUS1aI)Xzf}CS|Q1dJF7Nh{L*onS3`m8HE^l zwuqNSIjvEx5DYxs7R&DE_RdcBGEeL5)Qel24Wbof9XJ_!C&t8hRAvRWbLc^BWMk1| z^nVyQ*$-L=I5<@dp4zYSj8#qVjLkJQMSAf8#UZ3nZYMb94V1e8j@$v?fD3D9+9b_v za84tSy0;2kyyP$ozU1~8rykngl+ofhmX|@c7P2HmFEiL-t`UdUvE$c~~nY zxvUqX{yI2nFIdi4`6jjC~vEB==t1(1aDdL^_yWqRantU8q zuTGj4&eH>9Sv;?Zce2Ucp5SC#d0K)~4+=+~Y&BwTERwWJGa4)FA#jO2z#eOjiomqv z=?JK~NcAx^F#D|)2<5RPw`N6QGhk@!MQVhpq4&VTJF?Q^YH&Rb{ZmL87Ol=`^qr>% z$67g3cN@7D1jPs=H4>@5MrtEceMrx8xeH&~Jwc!EkS>73eI1sc9o)A^g0&sOq9+d+ z8RvlnO-Xd6r9*!O+(2+xT`^QXT`NPfox?hiII4m@%FB8>tzUufZdBO{QI)_0+QsT4 zks5;X8b8s-p>GFAPJ=Z#?R#)k6NVMsKCGLRhrw$_%R^eC(>fR{uCRF0AIz<6gEsnM0Gw~&%0 zf_s>`Gm(-lIEGXzmCz#*w`eweg+XNx@QOZ8>!d^)jN^S`t#2dM*GM(#ZKg6RQ|l{J zmyp6u3njY29d{b3xs|Cyl_~pOW^QI>YHeleTxF^&;!IkZfmEVwi;)WG8|Q}UDMf=S zQ)NhD?30Ylo`!x{{BmA!$y#srItWx2fU9;bciCUMi9?{5awg8;%reU>QDJ@ro3uJ}yN@Fs45i z)z#qSGD_Tc;4r)BZi=0o|6rO*)S)X#jpyk@;@ncrro4yLP<}i)&JDqhZ3?uOBXzIT zM{0h-|S=eyy8<)VGJT2X+PaR%)^Tpz|5!_&-FK!v+8R|%4Yab8#f$5wLpgG1Fa&-yVq z%(IL*k1TWDB;yZ)L##uIhV=bPE~t5oN46Y$*^2Gp5UI+VM-EwAHadG?8+)?4xw7Hlu*?kP6**2_Kt>C*tmhOs*=zDafB3A@iPqKN`p`~V z_Zeq~6={tDhgDTsc&;k1bBr4p+%nM7JGgy}Q(ur*ZGP!rfs^LTLt{MhWxKJDjfrss zGla_Nr;(yj#Td7U@fdFwpn9JLS2aRER_0;6SWlid)@dm(;7i9Q=wB3=cLc;QYryT} zoalTSJ{Rz^aZbx;h5YEa1ie?0tO~an>|5r6qh7i3a@^eZ7xATe39KQn$aAt}ZqIk> zPZXO@$Qh^Sno8AFDtO=l)#XJ+c4P{K{{B&jEj(L%N9r^9@E*l2pRV(w3QNz z`EOj+(FzIXnsE`5bxb6~Dkg-%BixOPkgSgdksjjExT>QEBqd5tNO}|Sbks=Pr!ol1 z(EXsgpy?pGsw4S&28ayIRQMo}uG-KY^0^?gI}b!x6&n4Q0y6k0h;TlLE3rTHDn2h^vghW5t96AVsKSQ(pv^1Tn?gZISm9ACkmC zk@VMr$j*9_^J`P(0KY&SE<)0Jkr-TrWMvaExc&-yLVpK{?7a@6T6cqP1HBKT3)tAm z_y7zk93&}UR&47^@%1r?q(>Bf0;KDAk-uMTjv> zLsEI$(BscdyseZ%<9)Cs`9R@8AXR?|NU?rQ$v;!_&w*6k3B`X6q-K1p819Tx_7&xa2R7Vn>S8_sX*ad|@D>)&_FDt$_r2H$$r-olsde>+UG=#tl zx#Zx+3T;4A^abKi^H+SJ;)8(XxweXLulP4rsRZ;p z47v!ZWy^qe;HyAdrgkZO6No?UEqsvPyFfC01V|gO(?BoaFF;ym>Y>{dL(PEHKyM(j zG#?H{P`N$C+1Pgfg?zcw;$ zAQfl_B8Bz}I{@jbj+7q)qK0+@QMn!K9q^;CZw(3O@bOc8SV=rLw|2M zwZFHV&ma)!BBZEVO$@Hukb-B8k^A?SQ@P=$E$H7{PU)4ux19eSJ3;boO}l?@Ise{r z{=MbIeTi;O{|C36*Be}Co4-kh3 zbKZ+DJD-Fv2Tp>&Lf&dktK`I7v@d|LCf{Xt(i4Eg(e?|X(MgPF1^RCy>zia5sBAOyw^dnrxnX1RB$SGu6q_0`ZatQQlg<{##xc^=$I9QQYl&iS6Smpf z3p;jC%iHhh=*#zkb74G_1qi#A`k*-1=Uj?1htb*xaoVc6POg=kw|Z^=}Rr zqtjVD)(l+NZ^(<%^gM}9A@tycE|aGQ(z%VUcqkB0`@~TCz(voWs2m+A!j$X|C8P7) z?Ml{7$>@}OhK@;Os5^x9fpjkW5k#`Pl_H%ow;@eeeM7YEdQ?P}(aEyD5~e6cI&Yr`QKJSc869npgXl_CGCC&DF(g$F(;9)_ ziF|52Jy4_0)2a1w5M4A1RBtIg3S2}IT*H;Yrbu%`f^)c%H3R>Il8sOX>5xc|n#nLd zjl-WYY>R=UpRHs*NI$7$IZ8%DDe(7j2J>p}3x=Li)0mG|3TLS`xE{|IZ)LFUo^%YR zhX6$u@%aem8$ieF)*w1ww*|EWwFiZOI*PR;SX3zuc`S&Iq>`L0+H+pkHC~ z8t6Lc28cYxKyDx_$Q^VLa(ZmA0`v@M4QM@R185`YMbJVJJ%u4ZP`}a7QQ9aZs6QXV z?jg`epnrnsBu)>lUj}Uky#m?-dKI)4^csjx?{w6^3)B+nYo(HW3JqDubw-B@lL^JFO(4(N? zps^r&(D)tb6lgtleI10WK+l4n0+oa4=_5Ufq^FG|L1!TQ5tI+g1oZ^bTx1{%s1C>t zWChUzMGKM+@&wUBMC;CZ6ruHkCS7MxD9Aq@9|54opvzGB3N#nA8~h&7UJ%XyrJyCC z5B7=CC@!hKh6ftceIO zWFGCigO35xjioiH6Q~;~7}N&T9&~dV|Daoy=>px}phS^h$b!A7SWD1$)ZR;0`BEXv zW_?800v2emSz}e{UHQz`C9#k2tJX8#2RAvQA3MJa=R{aw5XQ!yJfuag{7B5uNS_d?QxOX7(oC5f3`l zzkB|X21ky#7g|`PcPKQ6!Eup1iPa(oI*7xQ&=Dc(P6j+FVkcvVXVh+I zFNj@}4V6zQZ-b~e1>9cIdJ603XTI*YYV5@OCS4yE0Q-?)5m9iSpO{a2t;L!tD3u|O zk@|@Ga%eo4ojCeX-LIphI`!f!(PJv>$MVI(sVH?)tOxj+@9?<|iM;21_jUWA9xYox zReS-3=mLyiLwI~%_7j_S9^L+wV^e(kASWU$5-|XOg-%0@3@1mi zJH+B?XxMKJMWP~%fX2kNX=qVDVVe#;^CiLMvv>4({@QKNS=jXGFc`)bK$K30+2dj} z^w1Ahic-gfAAuYc*}0}I!oxb_{)D))q2*6C+xorltexY~K13)P`dU0#%Azc%n~2v+ zSzkZ%Rl@I+v!)D~*KWF@7!lT0)7}(;E;z}2cW~g`BO99!>Ej6n6&at2K`s`ex5nIo z-(6Cl6^n8dV>87Lf_dU&7mMm*zEHTX{*mi9dVJj3a923Z0rM5aSq<;a%X^4DZRA8m zV9YLfi-Z}hgMQ6hzQo}pie|uKzL*E_`^CrDce<9ZTl9l>vyWz>Tnt=_4!VooP>42P zIlPv~UMg(a^C%RQE4SF?s9wG@Wz0W@Jh9rsmP10`+9$kbGJEbxury<{)86>U@&+rd z7IqL4S|ZH%5>pPJZZ)}}VVY4Z<}7BquWV0*=eZv`BsO)ku&XH36lKhJb?)x;k7w)$ z-e`(4rUXnOf{u=sEm)++NA$pfs>(f;edy8?{}ObILw z9-_`{782~;O1_+R0LwD1vr~LxujD>_&!~pX%o#6|u@I~ESUfbF`KolZ`5tDN4l!xKOY_aNL_7w9G&N-}?&f3a>ttaNsK`3RnmXRB}drQFR5EmA}rcj{H;Dyr( zx%oNTq%IA2ESj}4#liwqP8)G-4(r#&eB(6wiud@e$oeNNtb=i{#C|{-T~HL5In!&& zeN{OZ+Kb_H;o8IyIioJQuHQM}y%87D1-iw-wV#WHbJ6xwVm-ieBSgIP2x}^i&Sl>5 zddFM2+srZFO1FGc7t;Mn^IA z5$5B6YZJ09k^a9O?S%M=DB@5EhcGv;E^VJ^M{+^TT^ysl2IAu4%JRWx`C8|%af34&6ei|9$!yA?r&-9HOonfJS&eRs zg2gOABnm9qks?!|!gw(S;Ag%p+@^)MBXDZUabpdMq{VBVc#-s$iTwf%TPH3GR^aOq zC+~F&I}M%RW=nk6rtD&@+{KG8--PidV%k1T;Fp)MF)T~?m7%+ZqJJ6IX7feuEjLb| z_w+r`+Kr(SEEYIu!)73yn!NPKAMaRs=z3MoTVffC`kC*3Z*J|D9{$~|CRGY`#33lK zmf{D}GhZIRJiKgr=cfVB5qn(lg(x=dq`Q$If3mr%LaHcnk{B=4<%N z{ld2&K9x1JO2K?le_+CgA^ri4)>P%R5XZ@Omqg=7F0S>7x#`8uwog|n;MlwjZ5Sy+ z2qucX&#-1zI#SLQ8IVMqugce7)a#x`4}IFZ>RxWXOdtQ2N4r5DZ*Qr}*&#Mm8f)rq zOuk{_1c~y+Rf0L<#b&8V1;BD65{lRM)EJra*Kh(8l!OfX{`*H}zjj&hM=*>jjO zFD+*y^z3A*Y#5+Z1X|rpoPCD5u_DoL1^RBjGT*&_O80{2d#6hWNv=uzZ7`OzsdDwryBTFnOP%NtVFxb_rjwVWli3@ zY$f)A>jufbz9G)N!|(p?iQoV zSx~h3qJP13-m79w2YPbhzy=z_ZT{zh;T31Y?q2CTw<>3|*j0`i)R_HKoFmQ{0vnz$ zD8Jtf(y`*vXIN($Qa2CGO%9JX|FyvZ?<>tb8=U*Ns%G<_AKboe-aS{FWxrgNquQhz zb5rHNGv2kth#GYHT*D2cdqnhp7LM#Lrci`d$z}JWYdM?Y1VUqL{-=cnL~ZQrvhAVC??v*f8x_11?z{+6*(s zw$08S5C^wmF2+625`)DE`JV4@w+m(t9?QJ|?bo60XUb~P7J+No=s#gjwq1O`hxv*D zoHfStqM~&yN;gd#Tf8PBVI4N*HL_H+md*r;l&I_0jKfM`7kxB8j? zC*#-G7Op+gdfZc0hKfa<4J_kNc(kfd(xa8GEEb11U|&|li`B;SPZ*C7pKLS&u-=Pk zt@+Sb{G=|rzm{qAe>OZ<4FT*Hp$cUb&UwF#XUiy{Y!tU+f_b|tZCk| zevAlz?N$?|=G36@mM04%?A*<1B0Euiw)}4VBiw9a_-5A1&-~9MyB@ue*z~7KZ&lr8 zYX%2q<)l`oZ*CojHN2+gy>gzK)KTK6SJ024Lf^tN{-~i*l^*+Ptk|=K`It*f?VhvT z7%QfeKX0y5Iq0v|Tp69!;_y$n;IFk)Es4g_)y{^AcWFtib%9hXV^uKK9Ddb1xn|-) z6rITBIXff%k4NqnXRXfv@mWhn&~GMA3*%_|hvWVqdcXDnln%9gnlBpesvaDN_TX^- z$G%ZU{~+Z4{7_cj>x>BC{bocckp7w{YQL}78pJi%u z|FD}k*DfZ!frG9wJ0=bO3a%)4zfy2&>vxY4oMl=8Y*?^zQ*9?7U>b=IT z+t{+$g>yf%cS$di50O{ByJXUeu^;8)>w_3PXN?HgYK{(a=$q5Xu$Yx4V!?jq)9SYx z=5ytC^a}=D?e>cU``KW8^BZ))_yV{aAZUCO`Jm-k%9LkQ*SD}w0#9Ev&9J51cB5(M z&u57l2k^}>e%K`oQCVN(_gzpD*Q2`Uy_D2=$bMPHr1-7A@3KeO*6r`Hj-$7Rceb>z F|6gC^fI|QP diff --git a/beszel/site/package.json b/beszel/site/package.json index 0c354ca..ac8711f 100644 --- a/beszel/site/package.json +++ b/beszel/site/package.json @@ -21,6 +21,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-toast": "^1.2.1", + "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", "@tanstack/react-table": "^8.20.1", "@vitejs/plugin-react": "^4.3.1", diff --git a/beszel/site/src/components/charts/chart-time-select.tsx b/beszel/site/src/components/charts/chart-time-select.tsx index 26a4018..ce7cc5f 100644 --- a/beszel/site/src/components/charts/chart-time-select.tsx +++ b/beszel/site/src/components/charts/chart-time-select.tsx @@ -21,7 +21,7 @@ export default function ChartTimeSelect({ className }: { className?: string }) { onValueChange={(value: ChartTimes) => $chartTime.set(value)} > - + diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 234421a..9bfbd96 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -4,12 +4,20 @@ import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } fro import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card' import { useStore } from '@nanostores/react' import Spinner from '../spinner' -import { ClockArrowUp, CpuIcon, GlobeIcon } from 'lucide-react' +import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon } from 'lucide-react' import ChartTimeSelect from '../charts/chart-time-select' -import { chartTimeData, cn, getPbTimestamp, useClampedIsInViewport } from '@/lib/utils' +import { + chartTimeData, + cn, + getPbTimestamp, + useClampedIsInViewport, + useLocalStorage, +} from '@/lib/utils' import { Separator } from '../ui/separator' import { scaleTime } from 'd3-scale' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip' +import { Toggle } from '../ui/toggle' +import { buttonVariants } from '../ui/button' const CpuChart = lazy(() => import('../charts/cpu-chart')) const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart')) @@ -25,6 +33,7 @@ const TemperatureChart = lazy(() => import('../charts/temperature-chart')) export default function SystemDetail({ name }: { name: string }) { const systems = useStore($systems) const chartTime = useStore($chartTime) + const [grid, setGrid] = useLocalStorage('grid', true) const [ticks, setTicks] = useState([] as number[]) const [system, setSystem] = useState({} as SystemRecord) const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[]) @@ -244,57 +253,96 @@ export default function SystemDetail({ name }: { name: string }) { )} - +
+ + + + + + + + + + + Toggle grid + + +
- + {hasDockerStats && ( - + )} - + {hasDockerStats && ( - + )} {(systemStats.at(-1)?.stats.s ?? 0) > 0 && ( - + )} + + + + {systemStats.at(-1)?.stats.t && ( - + )} - - - - - + - + {hasDockerStats && dockerNetChartData.length > 0 && ( <> @@ -319,21 +367,23 @@ function ChartCard({ title, description, children, + grid, }: { title: string description: string children: React.ReactNode + grid: boolean }) { const target = useRef(null) const [isInViewport, wrappedTargetRef] = useClampedIsInViewport({ target: target }) return ( - + {title} {description} - {/*
- -
*/}
{} diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx index 07a3267..6953473 100644 --- a/beszel/site/src/components/systems-table/systems-table.tsx +++ b/beszel/site/src/components/systems-table/systems-table.tsx @@ -135,7 +135,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {