diff --git a/app/docker/react/components/index.ts b/app/docker/react/components/index.ts index ee48460bc..a34888528 100644 --- a/app/docker/react/components/index.ts +++ b/app/docker/react/components/index.ts @@ -1,6 +1,7 @@ import angular from 'angular'; import { r2a } from '@/react-tools/react2angular'; +import { withControlledInput } from '@/react-tools/withControlledInput'; import { StackContainersDatatable } from '@/react/docker/stacks/ItemView/StackContainersDatatable'; import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions'; import { TemplateListDropdownAngular } from '@/react/docker/app-templates/TemplateListDropdown'; @@ -11,6 +12,8 @@ import { withReactQuery } from '@/react-tools/withReactQuery'; import { withUIRouter } from '@/react-tools/withUIRouter'; import { DockerfileDetails } from '@/react/docker/images/ItemView/DockerfileDetails'; import { HealthStatus } from '@/react/docker/containers/ItemView/HealthStatus'; +import { GpusList } from '@/react/docker/host/SetupView/GpusList'; +import { GpusInsights } from '@/react/docker/host/SetupView/GpusInsights'; export const componentsModule = angular .module('portainer.docker.react.components', []) @@ -45,4 +48,9 @@ export const componentsModule = angular 'usedAllGpus', 'enableGpuManagement', ]) - ).name; + ) + .component( + 'gpusList', + r2a(withControlledInput(GpusList), ['value', 'onChange']) + ) + .component('gpusInsights', r2a(GpusInsights, [])).name; diff --git a/app/docker/views/docker-features-configuration/docker-features-configuration.html b/app/docker/views/docker-features-configuration/docker-features-configuration.html index 08ddd4f65..db3c6d697 100644 --- a/app/docker/views/docker-features-configuration/docker-features-configuration.html +++ b/app/docker/views/docker-features-configuration/docker-features-configuration.html @@ -151,21 +151,7 @@
Other
- +
- +
diff --git a/app/react/components/InsightsBox/InsightsBox.tsx b/app/react/components/InsightsBox/InsightsBox.tsx index 19ea3a79d..552e96042 100644 --- a/app/react/components/InsightsBox/InsightsBox.tsx +++ b/app/react/components/InsightsBox/InsightsBox.tsx @@ -1,7 +1,6 @@ import clsx from 'clsx'; import { Lightbulb, X } from 'lucide-react'; -import { ReactNode, useMemo } from 'react'; -import sanitize from 'sanitize-html'; +import { ReactNode } from 'react'; import { useStore } from 'zustand'; import { Button } from '@@/buttons'; @@ -15,25 +14,11 @@ export type Props = { insightCloseId?: string; // set if you want to be able to close the box and not show it again }; -export function InsightsBox({ - header, - content, - setHtmlContent, - insightCloseId, -}: Props) { +export function InsightsBox({ header, content, insightCloseId }: Props) { // allow to close the box and not show it again in local storage with zustand const { addInsightIDClosed, isClosed } = useStore(insightStore); const isInsightClosed = isClosed(insightCloseId); - // allow angular views to set html messages for the insights box - const htmlContent = useMemo(() => { - if (setHtmlContent && typeof content === 'string') { - // eslint-disable-next-line react/no-danger - return
; - } - return null; - }, [setHtmlContent, content]); - if (isInsightClosed) { return null; } @@ -44,10 +29,16 @@ export function InsightsBox({
-

+

{header}

-
{htmlContent || content}
+
{content}
{insightCloseId && (