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.
60 lines
1.7 KiB
60 lines
1.7 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>
|
|
);
|
|
}
|