Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 23:15:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨Add dashDot tile

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-14 10:32:16 +01:00
parent 2c7ea08b04
commit 9b04328828
7 changed files with 125 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Dashboard/Tiles/DashDot/DashDotCompactStorage.tsx
View File

@@ -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;
};

30
src/components/Dashboard/Tiles/DashDot/DashDotTile.tsx
View File

@@ -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;
};

3
src/components/Dashboard/Tiles/tilesDefinitions.tsx
View File

@@ -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,

67
src/pages/api/modules/calendar.ts
View File

@@ -3,73 +3,6 @@ import { NextApiRequest, NextApiResponse } from 'next';
import { getConfig } from '../../../tools/config/getConfig';
import { ServiceIntegrationType, ServiceType } from '../../../types/service';
/*async function Post(req: NextApiRequest, res: NextApiResponse) {
// Parse req.body as a ServiceItem
const { id } = req.body;
const { type } = req.query;
const configName = getCookie('config-name', { req });
const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
// Find service with serviceId in config
const service = config.services.find((service) => service.id === id);
if (!service) {
return res.status(500).json({
statusCode: 500,
message: 'Missing service',
});
}
const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
const TypeToUrl: { service: string; url: string }[] = [
{
service: 'sonarr',
url: '/api/calendar',
},
{
service: 'radarr',
url: '/api/v3/calendar',
},
{
service: 'lidarr',
url: '/api/v1/calendar',
},
{
service: 'readarr',
url: '/api/v1/calendar',
},
];
if (!type) {
return res.status(400).json({
message: 'Missing required parameter in url: type',
});
}
if (!service) {
return res.status(400).json({
message: 'Missing required parameter in body: service',
});
}
// Match the type to the correct url
const url = TypeToUrl.find((x) => x.service === type);
if (!url) {
return res.status(400).json({
message: 'Invalid type',
});
}
// Get the origin URL
let { href: origin } = new URL(service.url);
if (origin.endsWith('/')) {
origin = origin.slice(0, -1);
}
const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
return axios
.get(`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`)
.then((response) => res.status(200).json(response.data))
.catch((e) => res.status(500).json(e));
// // Make a request to the URL
// const response = await axios.get(url);
// // Return the response
}*/
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'GET') {

29
src/pages/api/modules/dashdot.ts
View File

@@ -1,29 +0,0 @@
import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
async function Get(req: NextApiRequest, res: NextApiResponse) {
// Extract url from req.query as string
const { url, base } = req.query;
// If no url is provided, return an error
if (!url || !base) {
return res.status(400).json({
message: 'Missing required parameter in url',
});
}
// Get the origin URL
const response = await axios.get(url as string, { baseURL: base as string });
// Return the response
return res.status(200).json(response.data);
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'GET') {
return Get(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

42
src/pages/api/modules/dashdot/info.ts Normal file
View File

@@ -0,0 +1,42 @@
import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
import { getConfig } from '../../../../tools/config/getConfig';
async function Get(req: NextApiRequest, res: NextApiResponse) {
const { configName } = req.query;
if (!configName || typeof configName !== 'string') {
return res.status(400).json({
message: 'Missing required configName in url',
});
}
const config = getConfig(configName);
const dashDotUrl = config.integrations.dashDot?.properties.url;
if (!dashDotUrl) {
return res.status(400).json({
message: 'Dashdot url must be defined in config',
});
}
// Get the origin URL
const url = dashDotUrl.endsWith('/')
? dashDotUrl.substring(0, dashDotUrl.length - 1)
: dashDotUrl;
const response = await axios.get(`${url}/info`);
// Return the response
return res.status(200).json(response.data);
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'GET') {
return Get(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

42
src/pages/api/modules/dashdot/storage.ts Normal file
View File

@@ -0,0 +1,42 @@
import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
import { getConfig } from '../../../../tools/config/getConfig';
async function Get(req: NextApiRequest, res: NextApiResponse) {
const { configName } = req.query;
if (!configName || typeof configName !== 'string') {
return res.status(400).json({
message: 'Missing required configName in url',
});
}
const config = getConfig(configName);
const dashDotUrl = config.integrations.dashDot?.properties.url;
if (!dashDotUrl) {
return res.status(400).json({
message: 'Dashdot url must be defined in config',
});
}
// Get the origin URL
const url = dashDotUrl.endsWith('/')
? dashDotUrl.substring(0, dashDotUrl.length - 1)
: dashDotUrl;
const response = await axios.get(`${url}/load/storage`);
// Return the response
return res.status(200).json(response.data);
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'GET') {
return Get(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};