@oneuptime/common 11.0.1 → 11.0.3

package/Utils/Dashboard/Components/DashboardPodmanHostListComponent.ts

@@ -0,0 +1,88 @@
+import DashboardPodmanHostListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardPodmanHostListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which Podman hosts are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardPodmanHostListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardPodmanHostListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.PodmanHostList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardPodmanHostListComponent>
+  > {
+    const args: Array<ComponentArgument<DashboardPodmanHostListComponent>> = [];
+
+    args.push({
+      name: "Title",
+      description: "Header shown above the host list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    args.push({
+      name: "Max Rows",
+      description: "Maximum number of hosts to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    args.push(
+      getViewModeArgument<DashboardPodmanHostListComponent>(DisplaySection),
+    );
+
+    args.push({
+      name: "Connection Status",
+      description: "Quick filter by OTel collector status",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "statusFilter",
+      section: FiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Connected only", value: "connected" },
+        { label: "Disconnected only", value: "disconnected" },
+      ],
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardPodmanImageListComponent.ts

@@ -0,0 +1,97 @@
+import DashboardPodmanImageListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardPodmanImageListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+  EntityFilterModelType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which images are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardPodmanImageListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardPodmanImageListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.PodmanImageList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardPodmanImageListComponent>
+  > {
+    const args: Array<ComponentArgument<DashboardPodmanImageListComponent>> =
+      [];
+
+    args.push({
+      name: "Title",
+      description: "Header shown above the image list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    args.push({
+      name: "Max Rows",
+      description: "Maximum number of images to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    args.push(
+      getViewModeArgument<DashboardPodmanImageListComponent>(DisplaySection),
+    );
+
+    args.push({
+      name: "Hosts",
+      description: "Show only images from the selected hosts",
+      required: false,
+      type: ComponentInputType.EntityMultiSelectDropdown,
+      id: "podmanHostIds",
+      placeholder: "All hosts",
+      section: FiltersSection,
+      entityFilterModelType: EntityFilterModelType.PodmanHost,
+    });
+
+    args.push({
+      name: "Name Contains",
+      description: "Show only images whose name contains this substring",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "nameSearch",
+      placeholder: "nginx",
+      section: FiltersSection,
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardPodmanNetworkListComponent.ts

@@ -0,0 +1,87 @@
+import DashboardPodmanNetworkListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardPodmanNetworkListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+  EntityFilterModelType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which networks are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardPodmanNetworkListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardPodmanNetworkListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.PodmanNetworkList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardPodmanNetworkListComponent>
+  > {
+    const args: Array<ComponentArgument<DashboardPodmanNetworkListComponent>> =
+      [];
+
+    args.push({
+      name: "Title",
+      description: "Header shown above the network list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    args.push({
+      name: "Max Rows",
+      description: "Maximum number of networks to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    args.push(
+      getViewModeArgument<DashboardPodmanNetworkListComponent>(DisplaySection),
+    );
+
+    args.push({
+      name: "Hosts",
+      description: "Show only networks from the selected hosts",
+      required: false,
+      type: ComponentInputType.EntityMultiSelectDropdown,
+      id: "podmanHostIds",
+      placeholder: "All hosts",
+      section: FiltersSection,
+      entityFilterModelType: EntityFilterModelType.PodmanHost,
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardPodmanVolumeListComponent.ts

@@ -0,0 +1,87 @@
+import DashboardPodmanVolumeListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardPodmanVolumeListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+  EntityFilterModelType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+const FiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which volumes are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardPodmanVolumeListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardPodmanVolumeListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.PodmanVolumeList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardPodmanVolumeListComponent>
+  > {
+    const args: Array<ComponentArgument<DashboardPodmanVolumeListComponent>> =
+      [];
+
+    args.push({
+      name: "Title",
+      description: "Header shown above the volume list",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    args.push({
+      name: "Max Rows",
+      description: "Maximum number of volumes to show",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "maxRows",
+      placeholder: "25",
+      section: DisplaySection,
+    });
+
+    args.push(
+      getViewModeArgument<DashboardPodmanVolumeListComponent>(DisplaySection),
+    );
+
+    args.push({
+      name: "Hosts",
+      description: "Show only volumes from the selected hosts",
+      required: false,
+      type: ComponentInputType.EntityMultiSelectDropdown,
+      id: "podmanHostIds",
+      placeholder: "All hosts",
+      section: FiltersSection,
+      entityFilterModelType: EntityFilterModelType.PodmanHost,
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardProxmoxGuestListComponent.ts

@@ -0,0 +1,69 @@
+import DashboardProxmoxGuestListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardProxmoxGuestListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import {
+  ProxmoxFiltersSection,
+  getProxmoxCommonArguments,
+} from "./DashboardProxmoxResourceListShared";
+
+export default class DashboardProxmoxGuestListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardProxmoxGuestListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.ProxmoxGuestList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardProxmoxGuestListComponent>
+  > {
+    const args: Array<ComponentArgument<DashboardProxmoxGuestListComponent>> =
+      getProxmoxCommonArguments<DashboardProxmoxGuestListComponent>();
+
+    args.push({
+      name: "Guest Type",
+      description: "Show only QEMU VMs or only LXC containers",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "guestTypeFilter",
+      section: ProxmoxFiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "QEMU VMs only", value: "qemu" },
+        { label: "LXC containers only", value: "lxc" },
+      ],
+    });
+
+    args.push({
+      name: "Status",
+      description: "Quick filter by guest run state",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "statusFilter",
+      section: ProxmoxFiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Running only", value: "running" },
+        { label: "Stopped only", value: "stopped" },
+      ],
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardProxmoxNodeListComponent.ts

@@ -0,0 +1,55 @@
+import DashboardProxmoxNodeListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardProxmoxNodeListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import {
+  ProxmoxFiltersSection,
+  getProxmoxCommonArguments,
+} from "./DashboardProxmoxResourceListShared";
+
+export default class DashboardProxmoxNodeListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardProxmoxNodeListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.ProxmoxNodeList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardProxmoxNodeListComponent>
+  > {
+    const args: Array<ComponentArgument<DashboardProxmoxNodeListComponent>> =
+      getProxmoxCommonArguments<DashboardProxmoxNodeListComponent>();
+
+    args.push({
+      name: "Status",
+      description: "Quick filter by node availability",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "statusFilter",
+      section: ProxmoxFiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Online only", value: "online" },
+        { label: "Offline only", value: "offline" },
+      ],
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardProxmoxResourceListShared.ts

@@ -0,0 +1,61 @@
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+  EntityFilterModelType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents/DashboardBaseComponent";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
+
+export const ProxmoxDisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+export const ProxmoxFiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which resources are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export function getProxmoxCommonArguments<
+  T extends DashboardBaseComponent,
+>(): Array<ComponentArgument<T>> {
+  const args: Array<ComponentArgument<T>> = [];
+
+  args.push({
+    name: "Title",
+    description: "Header shown above the list",
+    required: false,
+    type: ComponentInputType.Text,
+    id: "title" as keyof T["arguments"],
+    section: ProxmoxDisplaySection,
+  });
+
+  args.push({
+    name: "Max Rows",
+    description: "Maximum number of rows to show",
+    required: false,
+    type: ComponentInputType.Number,
+    id: "maxRows" as keyof T["arguments"],
+    placeholder: "25",
+    section: ProxmoxDisplaySection,
+  });
+
+  args.push(getViewModeArgument<T>(ProxmoxDisplaySection));
+
+  args.push({
+    name: "Clusters",
+    description: "Show only resources from the selected Proxmox clusters",
+    required: false,
+    type: ComponentInputType.EntityMultiSelectDropdown,
+    id: "proxmoxClusterIds" as keyof T["arguments"],
+    placeholder: "All clusters",
+    section: ProxmoxFiltersSection,
+    entityFilterModelType: EntityFilterModelType.ProxmoxCluster,
+  });
+
+  return args;
+}

package/Utils/Dashboard/Components/Index.ts

@@ -3,6 +3,8 @@ import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
 import BadDataException from "../../../Types/Exception/BadDataException";
 import DashboardAlertListComponentUtil from "./DashboardAlertListComponent";
+import DashboardCephOsdListComponentUtil from "./DashboardCephOsdListComponent";
+import DashboardCephPoolListComponentUtil from "./DashboardCephPoolListComponent";
 import DashboardChartComponentUtil from "./DashboardChartComponent";
 import DashboardDockerContainerListComponentUtil from "./DashboardDockerContainerListComponent";
 import DashboardDockerHostListComponentUtil from "./DashboardDockerHostListComponent";
@@ -22,6 +24,15 @@ import DashboardKubernetesPodListComponentUtil from "./DashboardKubernetesPodLis
 import DashboardKubernetesStatefulSetListComponentUtil from "./DashboardKubernetesStatefulSetListComponent";
 import DashboardLogStreamComponentUtil from "./DashboardLogStreamComponent";
 import DashboardMonitorListComponentUtil from "./DashboardMonitorListComponent";
+import DashboardPodmanContainerListComponentUtil from "./DashboardPodmanContainerListComponent";
+import DashboardPodmanHostListComponentUtil from "./DashboardPodmanHostListComponent";
+import DashboardPodmanImageListComponentUtil from "./DashboardPodmanImageListComponent";
+import DashboardPodmanNetworkListComponentUtil from "./DashboardPodmanNetworkListComponent";
+import DashboardPodmanVolumeListComponentUtil from "./DashboardPodmanVolumeListComponent";
+import DashboardProxmoxGuestListComponentUtil from "./DashboardProxmoxGuestListComponent";
+import DashboardProxmoxNodeListComponentUtil from "./DashboardProxmoxNodeListComponent";
+import DashboardDockerSwarmNodeListComponentUtil from "./DashboardDockerSwarmNodeListComponent";
+import DashboardDockerSwarmServiceListComponentUtil from "./DashboardDockerSwarmServiceListComponent";
 import DashboardTableComponentUtil from "./DashboardTableComponent";
 import DashboardTextComponentUtil from "./DashboardTextComponent";
 import DashboardTraceChartComponentUtil from "./DashboardTraceChartComponent";
@@ -187,12 +198,80 @@ export default class DashboardComponentsUtil {
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.PodmanHostList) {
+      return DashboardPodmanHostListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.PodmanContainerList) {
+      return DashboardPodmanContainerListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.PodmanImageList) {
+      return DashboardPodmanImageListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.PodmanNetworkList) {
+      return DashboardPodmanNetworkListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.PodmanVolumeList) {
+      return DashboardPodmanVolumeListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     if (dashboardComponentType === DashboardComponentType.HostList) {
       return DashboardHostListComponentUtil.getComponentConfigArguments() as Array<
         ComponentArgument<DashboardBaseComponent>
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.ProxmoxNodeList) {
+      return DashboardProxmoxNodeListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.ProxmoxGuestList) {
+      return DashboardProxmoxGuestListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.DockerSwarmNodeList) {
+      return DashboardDockerSwarmNodeListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (
+      dashboardComponentType === DashboardComponentType.DockerSwarmServiceList
+    ) {
+      return DashboardDockerSwarmServiceListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.CephOsdList) {
+      return DashboardCephOsdListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.CephPoolList) {
+      return DashboardCephPoolListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     throw new BadDataException(
       `Unknown dashboard component type: ${dashboardComponentType}`,
     );