You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
48 lines
1.5 KiB
import { useContext, useMemo } from "react";
|
|
import dynamic from "next/dynamic";
|
|
|
|
import { ShowDateContext } from "../../utils/contexts/calendar";
|
|
|
|
import MonthlyView from "./monthly-view";
|
|
|
|
import Container from "components/services/widget/container";
|
|
|
|
export default function Component({ service }) {
|
|
const { widget } = service;
|
|
const { showDate } = useContext(ShowDateContext);
|
|
|
|
// params for API fetch
|
|
const params = useMemo(() => {
|
|
if (!showDate) {
|
|
return {};
|
|
}
|
|
|
|
return {
|
|
start: showDate.minus({months: 3}).toFormat("yyyy-MM-dd"),
|
|
end: showDate.plus({months: 3}).toFormat("yyyy-MM-dd"),
|
|
unmonitored: 'false',
|
|
};
|
|
}, [showDate]);
|
|
|
|
// Load active integrations
|
|
const integrations = useMemo(() => widget.integrations?.map(integration => ({
|
|
service: dynamic(() => import(`./integrations/${integration?.type}`)),
|
|
widget: integration,
|
|
})) ?? [], [widget.integrations]);
|
|
|
|
return <Container service={service}>
|
|
<div className="flex flex-col w-full">
|
|
<div className="sticky top-0">
|
|
{integrations.map(integration => {
|
|
const Integration = integration.service;
|
|
const key = integration.widget.type + integration.widget.service_name + integration.widget.service_group;
|
|
|
|
return <Integration key={key} config={integration.widget} params={params}
|
|
className="fixed bottom-0 left-0 bg-red-500 w-screen h-12" />
|
|
})}
|
|
</div>
|
|
<MonthlyView service={service} className="flex"/>
|
|
</div>
|
|
</Container>;
|
|
}
|