🎨 Moved integrations in widgets directory

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -0,0 +1,45 @@
+import { Group, Stack, Text } from '@mantine/core';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { bytes } from '../../tools/bytesHelper';
+
+interface DashDotCompactNetworkProps {
+  info: DashDotInfo;
+}
+
+export interface DashDotInfo {
+  storage: {
+    layout: { size: number }[];
+  };
+  network: {
+    speedUp: number;
+    speedDown: number;
+  };
+}
+
+export const DashDotCompactNetwork = ({ info }: DashDotCompactNetworkProps) => {
+  const { t } = useTranslation('modules/dashdot');
+
+  const upSpeed = bytes.toPerSecondString(info?.network?.speedUp);
+  const downSpeed = bytes.toPerSecondString(info?.network?.speedDown);
+
+  return (
+    <Group noWrap align="start" position="apart" w="100%" maw="251px">
+      <Text weight={500}>{t('card.graphs.network.label')}</Text>
+      <Stack align="end" spacing={0}>
+        <Group spacing={0}>
+          <Text size="xs" color="dimmed" align="right">
+            {upSpeed}
+          </Text>
+          <IconArrowNarrowUp size={16} stroke={1.5} />
+        </Group>
+        <Group spacing={0}>
+          <Text size="xs" color="dimmed" align="right">
+            {downSpeed}
+          </Text>
+          <IconArrowNarrowDown size={16} stroke={1.5} />
+        </Group>
+      </Stack>
+    </Group>
+  );
+};

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -0,0 +1,78 @@
+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 './DashDotCompactNetwork';
+
+interface DashDotCompactStorageProps {
+  info: DashDotInfo;
+}
+
+export const DashDotCompactStorage = ({ info }: DashDotCompactStorageProps) => {
+  const { t } = useTranslation('modules/dashdot');
+  const { data: storageLoad } = useDashDotStorage();
+
+  const totalUsed = calculateTotalLayoutSize({
+    layout: storageLoad?.layout ?? [],
+    key: 'load',
+  });
+  const totalSize = calculateTotalLayoutSize({
+    layout: info?.storage?.layout ?? [],
+    key: 'size',
+  });
+
+  return (
+    <Group noWrap align="start" position="apart" w="100%" maw="251px">
+      <Text weight={500}>{t('card.graphs.storage.label')}</Text>
+      <Stack align="end" spacing={0}>
+        <Text color="dimmed" size="xs">
+          {percentage(totalUsed, totalSize)}%
+        </Text>
+        <Text color="dimmed" size="xs">
+          {bytes.toString(totalUsed)} / {bytes.toString(totalSize)}
+        </Text>
+      </Stack>
+    </Group>
+  );
+};
+
+const calculateTotalLayoutSize = <TLayoutItem,>({
+  layout,
+  key,
+}: CalculateTotalLayoutSizeProps<TLayoutItem>) =>
+  layout.reduce((total, current) => total + (current[key] as number), 0);
+
+interface CalculateTotalLayoutSizeProps<TLayoutItem> {
+  layout: TLayoutItem[];
+  key: keyof TLayoutItem;
+}
+
+const useDashDotStorage = () => {
+  const { name: configName, config } = useConfigContext();
+
+  return useQuery({
+    queryKey: [
+      'dashdot/storage',
+      {
+        configName,
+        url: config?.integrations.dashDot?.properties.url,
+      },
+    ],
+    queryFn: () => fetchDashDotStorageLoad(configName),
+  });
+};
+
+async function fetchDashDotStorageLoad(configName: string | undefined) {
+  console.log(`storage request: ${configName}`);
+  if (!configName) throw new Error('configName is undefined');
+  return (await (
+    await axios.get('/api/modules/dashdot/storage', { params: { configName } })
+  ).data) as DashDotStorageLoad;
+}
+
+interface DashDotStorageLoad {
+  layout: { load: number }[];
+}

src/widgets/dashDot/DashDotGraph.tsx

@@ -0,0 +1,73 @@
+import { createStyles, Stack, Title, useMantineTheme } from '@mantine/core';
+import { DashDotGraph as GraphType } from './types';
+
+interface DashDotGraphProps {
+  graph: GraphType;
+  isCompact: boolean;
+  dashDotUrl: string;
+}
+
+export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps) => {
+  const { classes } = useStyles();
+  return (
+    <Stack
+      className={classes.graphStack}
+      w="100%"
+      maw="251px"
+      style={{
+        width: isCompact ? (graph.twoSpan ? '100%' : 'calc(50% - 10px)') : undefined,
+      }}
+    >
+      <Title className={classes.graphTitle} order={4}>
+        {graph.name}
+      </Title>
+      <iframe
+        className={classes.iframe}
+        key={graph.name}
+        title={graph.name}
+        src={useIframeSrc(dashDotUrl, graph, isCompact)}
+        frameBorder="0"
+      />
+    </Stack>
+  );
+};
+
+const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean) => {
+  const { colorScheme, colors, radius } = useMantineTheme();
+  const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
+  return (
+    `${dashDotUrl}` +
+    `?singleGraphMode=true` +
+    `&graph=${graph.id}` +
+    `&theme=${colorScheme}` +
+    `&surface=${surface}` +
+    `&gap=${isCompact ? 10 : 5}` +
+    `&innerRadius=${radius.lg}` +
+    `&multiView=${graph.isMultiView}`
+  );
+};
+
+export const useStyles = createStyles((theme, _params, getRef) => ({
+  iframe: {
+    flex: '1 0 auto',
+    maxWidth: '100%',
+    height: '140px',
+    borderRadius: theme.radius.lg,
+  },
+  graphTitle: {
+    ref: getRef('graphTitle'),
+    position: 'absolute',
+    right: 0,
+    opacity: 0,
+    transition: 'opacity .1s ease-in-out',
+    pointerEvents: 'none',
+    marginTop: 10,
+    marginRight: 25,
+  },
+  graphStack: {
+    position: 'relative',
+    [`&:hover .${getRef('graphTitle')}`]: {
+      opacity: 0.5,
+    },
+  },
+}));

src/widgets/dashDot/DashDotTile.tsx

@@ -0,0 +1,141 @@
+import { createStyles, Group, Title } from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { useTranslation } from 'next-i18next';
+import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
+import { DashDotGraph } from './DashDotGraph';
+import { DashDotCompactStorage } from './DashDotCompactStorage';
+import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { DashDotIntegrationType } from '../../types/integration';
+import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
+import { useConfigContext } from '../../config/provider';
+
+interface DashDotTileProps extends BaseTileProps {
+  module: DashDotIntegrationType; // TODO: change to new type defined through widgetDefinition
+}
+
+export const DashDotTile = ({ module, className }: DashDotTileProps) => {
+  const { classes } = useDashDotTileStyles();
+  const { t } = useTranslation('modules/dashdot');
+
+  const dashDotUrl = module?.properties.url;
+
+  const { data: info } = useDashDotInfo();
+
+  const graphs = module?.properties.graphs.map((g) => ({
+    id: g,
+    name: t(`card.graphs.${g === 'ram' ? 'memory' : g}.title`),
+    twoSpan: ['network', 'gpu'].includes(g),
+    isMultiView:
+      (g === 'cpu' && module.properties.isCpuMultiView) ||
+      (g === 'storage' && module.properties.isStorageMultiView),
+  }));
+
+  const heading = (
+    <Title order={3} mb="xs">
+      {t('card.title')}
+    </Title>
+  );
+
+  const menu = (
+    // TODO: add widgetWrapper that is generic and uses the definition
+    <WidgetsMenu<'dashDot'>
+      module={module}
+      integration="dashDot"
+      options={module?.properties}
+      labels={{
+        isCpuMultiView: 'descriptor.settings.cpuMultiView.label',
+        isStorageMultiView: 'descriptor.settings.storageMultiView.label',
+        isCompactView: 'descriptor.settings.useCompactView.label',
+        graphs: 'descriptor.settings.graphs.label',
+        url: 'descriptor.settings.url.label',
+      }}
+    />
+  );
+
+  if (!dashDotUrl) {
+    return (
+      <HomarrCardWrapper className={className}>
+        {menu}
+        <div>
+          {heading}
+          <p>{t('card.errors.noService')}</p>
+        </div>
+      </HomarrCardWrapper>
+    );
+  }
+
+  const isCompact = module?.properties.isCompactView ?? false;
+
+  const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact);
+
+  const isCompactNetworkVisible = graphs?.some((g) => g.id === 'network' && isCompact);
+
+  const displayedGraphs = graphs?.filter(
+    (g) => !isCompact || !['network', 'storage'].includes(g.id)
+  );
+
+  return (
+    <HomarrCardWrapper className={className}>
+      {menu}
+      {heading}
+      {!info && <p>{t('card.errors.noInformation')}</p>}
+      {info && (
+        <div className={classes.graphsContainer}>
+          <Group position="apart" w="100%">
+            {isCompactStorageVisible && <DashDotCompactStorage info={info} />}
+            {isCompactNetworkVisible && <DashDotCompactNetwork info={info} />}
+          </Group>
+          <Group position="center" w="100%" className={classes.graphsWrapper}>
+            {displayedGraphs?.map((graph) => (
+              <DashDotGraph
+                key={graph.id}
+                graph={graph}
+                dashDotUrl={dashDotUrl}
+                isCompact={isCompact}
+              />
+            ))}
+          </Group>
+        </div>
+      )}
+    </HomarrCardWrapper>
+  );
+};
+
+const useDashDotInfo = () => {
+  const { name: configName, config } = useConfigContext();
+  return useQuery({
+    queryKey: [
+      'dashdot/info',
+      {
+        configName,
+        url: config?.integrations.dashDot?.properties.url,
+      },
+    ],
+    queryFn: () => fetchDashDotInfo(configName),
+  });
+};
+
+const fetchDashDotInfo = async (configName: string | undefined) => {
+  if (!configName) return {} as DashDotInfo;
+  return (await (
+    await axios.get('/api/modules/dashdot/info', { params: { configName } })
+  ).data) as DashDotInfo;
+};
+
+export const useDashDotTileStyles = createStyles(() => ({
+  graphsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    rowGap: 10,
+    columnGap: 10,
+  },
+  graphsWrapper: {
+    '& > *:nth-child(odd):last-child': {
+      width: '100% !important',
+      maxWidth: '100% !important',
+    },
+  },
+}));

src/widgets/dashDot/types.ts

@@ -0,0 +1,8 @@
+import { DashDotGraphType } from '../../types/integration';
+
+export interface DashDotGraph {
+  id: DashDotGraphType;
+  name: string;
+  twoSpan: boolean;
+  isMultiView: boolean | undefined;
+}