✨Add dashDot tile

src/components/Dashboard/Tiles/DashDot/DashDotCompactStorage.tsx

@@ -2,33 +2,25 @@ import { Group, Stack, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';
+import { useConfigContext } from '../../../../config/provider';
 import { bytes } from '../../../../tools/bytesHelper';
 import { percentage } from '../../../../tools/percentage';
 import { DashDotInfo } from './DashDotTile';
 
 interface DashDotCompactStorageProps {
   info: DashDotInfo;
-  dashDotUrl: string;
 }
 
-export const DashDotCompactStorage = ({ info, dashDotUrl }: DashDotCompactStorageProps) => {
+export const DashDotCompactStorage = ({ info }: DashDotCompactStorageProps) => {
   const { t } = useTranslation('modules/dashdot');
-  const { data: storageLoad } = useQuery({
-    queryKey: [
-      'dashdot/storageLoad',
-      {
-        dashDotUrl,
-      },
-    ],
-    queryFn: () => fetchDashDotStorageLoad(dashDotUrl),
-  });
+  const { data: storageLoad } = useDashDotStorage();
 
   const totalUsed = calculateTotalLayoutSize({
     layout: storageLoad?.layout ?? [],
     key: 'load',
   });
   const totalSize = calculateTotalLayoutSize({
-    layout: info?.storage.layout ?? [],
+    layout: info?.storage?.layout ?? [],
     key: 'size',
   });
 
@@ -61,9 +53,26 @@ interface CalculateTotalLayoutSizeProps<TLayoutItem> {
   key: keyof TLayoutItem;
 }
 
-const fetchDashDotStorageLoad = async (targetUrl: string) => {
+const useDashDotStorage = () => {
+  const { name: configName, config } = useConfigContext();
+
+  return useQuery({
+    queryKey: [
+      'dashdot/storage',
+      {
+        configName,
+        url: config?.integrations.dashDot?.properties.url,
+      },
+    ],
+    queryFn: () => fetchDashDotStorageLoad(configName),
+  });
+};
+
+const fetchDashDotStorageLoad = async (configName: string | undefined) => {
+  console.log('storage request: ' + configName);
+  if (!configName) return;
   return (await (
-    await axios.get('/api/modules/dashdot', { params: { url: '/load/storage', base: targetUrl } })
+    await axios.get('/api/modules/dashdot/storage', { params: { configName } })
   ).data) as DashDotStorageLoad;
 };
 

src/components/Dashboard/Tiles/DashDot/DashDotTile.tsx

@@ -17,6 +17,8 @@ import { BaseTileProps } from '../type';
 import { DashDotGraph } from './DashDotGraph';
 import { DashDotIntegrationType } from '../../../../types/integration';
 import { IntegrationsMenu } from '../Integrations/IntegrationsMenu';
+import { useConfigContext } from '../../../../config/provider';
+import { HomarrCardWrapper } from '../HomarrCardWrapper';
 
 interface DashDotTileProps extends BaseTileProps {
   module: DashDotIntegrationType | undefined;
@@ -28,7 +30,7 @@ export const DashDotTile = ({ module, className }: DashDotTileProps) => {
 
   const dashDotUrl = module?.properties.url;
 
-  const { data: info } = useDashDotInfo(dashDotUrl);
+  const { data: info } = useDashDotInfo();
 
   const graphs = module?.properties.graphs.map((g) => ({
     id: g,
@@ -62,13 +64,13 @@ export const DashDotTile = ({ module, className }: DashDotTileProps) => {
 
   if (!dashDotUrl) {
     return (
-      <Card className={className} withBorder p="xs">
+      <HomarrCardWrapper className={className}>
         {menu}
         <div>
           {heading}
           <p>{t('card.errors.noService')}</p>
         </div>
-      </Card>
+      </HomarrCardWrapper>
     );
   }
 
@@ -83,16 +85,14 @@ export const DashDotTile = ({ module, className }: DashDotTileProps) => {
   );
 
   return (
-    <Card className={className} withBorder p="xs">
+    <HomarrCardWrapper className={className}>
       {menu}
       {heading}
       {!info && <p>{t('card.errors.noInformation')}</p>}
       {info && (
         <div className={classes.graphsContainer}>
           <Group position="apart" w="100%">
-            {isCompactStorageVisible && (
-              <DashDotCompactStorage dashDotUrl={dashDotUrl} info={info} />
-            )}
+            {isCompactStorageVisible && <DashDotCompactStorage info={info} />}
             {isCompactNetworkVisible && <DashDotCompactNetwork info={info} />}
           </Group>
           <Group position="center" w="100%" className={classes.graphsWrapper}>
@@ -107,26 +107,28 @@ export const DashDotTile = ({ module, className }: DashDotTileProps) => {
           </Group>
         </div>
       )}
-    </Card>
+    </HomarrCardWrapper>
   );
 };
 
-const useDashDotInfo = (dashDotUrl: string | undefined) => {
+const useDashDotInfo = () => {
+  const { name: configName, config } = useConfigContext();
   return useQuery({
     queryKey: [
       'dashdot/info',
       {
-        dashDotUrl,
+        configName,
+        url: config?.integrations.dashDot?.properties.url,
       },
     ],
-    queryFn: () => fetchDashDotInfo(dashDotUrl),
+    queryFn: () => fetchDashDotInfo(configName),
   });
 };
 
-const fetchDashDotInfo = async (targetUrl: string | undefined) => {
-  if (!targetUrl) return {} as DashDotInfo;
+const fetchDashDotInfo = async (configName: string | undefined) => {
+  if (!configName) return {} as DashDotInfo;
   return (await (
-    await axios.get('/api/modules/dashdot', { params: { url: '/info', base: targetUrl } })
+    await axios.get('/api/modules/dashdot/info', { params: { configName } })
   ).data) as DashDotInfo;
 };
 

src/components/Dashboard/Tiles/tilesDefinitions.tsx

@@ -1,6 +1,7 @@
 import { IntegrationsType } from '../../../types/integration';
 import { CalendarTile } from './Calendar/CalendarTile';
 import { ClockTile } from './Clock/ClockTile';
+import { DashDotTile } from './DashDot/DashDotTile';
 import { EmptyTile } from './EmptyTile';
 import { ServiceTile } from './Service/ServiceTile';
 import { UseNetTile } from './UseNet/UseNetTile';
@@ -50,7 +51,7 @@ export const Tiles: TileDefinitionProps = {
     maxHeight: 12,
   },
   dashDot: {
-    component: EmptyTile, //DashDotTile,
+    component: DashDotTile,
     minWidth: 4,
     maxWidth: 9,
     minHeight: 5,