@oneuptime/common 11.0.2 → 11.0.4

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -23,6 +23,7 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Service from "../../../Models/DatabaseModels/Service";
 import Host from "../../../Models/DatabaseModels/Host";
 import DockerHost from "../../../Models/DatabaseModels/DockerHost";
+import PodmanHost from "../../../Models/DatabaseModels/PodmanHost";
 import KubernetesCluster from "../../../Models/DatabaseModels/KubernetesCluster";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
@@ -228,6 +229,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [dockerHostMap, setDockerHostMap] = useState<Dictionary<DockerHost>>(
     {},
   );
+  const [podmanHostMap, setPodmanHostMap] = useState<Dictionary<PodmanHost>>(
+    {},
+  );
   const [kubernetesClusterMap, setKubernetesClusterMap] = useState<
     Dictionary<KubernetesCluster>
   >({});
@@ -394,10 +398,17 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         setIsPageLoading(true);
         setPageError("");
 
-        const [telemetryServices, hosts, dockerHosts, kubernetesClusters]: [
+        const [
+          telemetryServices,
+          hosts,
+          dockerHosts,
+          podmanHosts,
+          kubernetesClusters,
+        ]: [
           ListResult<Service>,
           ListResult<Host>,
           ListResult<DockerHost>,
+          ListResult<PodmanHost>,
           ListResult<KubernetesCluster>,
         ] = await Promise.all([
           ModelAPI.getList({
@@ -439,6 +450,19 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               name: SortOrder.Ascending,
             },
           }),
+          ModelAPI.getList({
+            modelType: PodmanHost,
+            query: {},
+            select: {
+              name: true,
+              hostIdentifier: true,
+            },
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            sort: {
+              name: SortOrder.Ascending,
+            },
+          }),
           ModelAPI.getList({
             modelType: KubernetesCluster,
             query: {},
@@ -492,6 +516,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
           dockerHostsById[dockerHost.id.toString()] = dockerHost;
         });
 
+        const podmanHostsById: Dictionary<PodmanHost> = {};
+        podmanHosts.data.forEach((podmanHost: PodmanHost) => {
+          if (!podmanHost.id) {
+            return;
+          }
+          podmanHostsById[podmanHost.id.toString()] = podmanHost;
+        });
+
         const clustersById: Dictionary<KubernetesCluster> = {};
         kubernetesClusters.data.forEach((cluster: KubernetesCluster) => {
           if (!cluster.id) {
@@ -503,6 +535,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         setServiceMap(services);
         setHostMap(hostsById);
         setDockerHostMap(dockerHostsById);
+        setPodmanHostMap(podmanHostsById);
         setKubernetesClusterMap(clustersById);
       } catch (err) {
         setPageError(
@@ -846,6 +879,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             dockerHost?.name || dockerHost?.hostIdentifier || filter.value,
         };
       }
+      if (filter.facetKey === "podmanHostId" && podmanHostMap[filter.value]) {
+        const podmanHost: PodmanHost | undefined = podmanHostMap[filter.value];
+        return {
+          ...filter,
+          displayValue:
+            podmanHost?.name || podmanHost?.hostIdentifier || filter.value,
+        };
+      }
       if (
         filter.facetKey === "kubernetesClusterId" &&
         kubernetesClusterMap[filter.value]
@@ -866,6 +907,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     serviceMap,
     hostMap,
     dockerHostMap,
+    podmanHostMap,
     kubernetesClusterMap,
   ]);
 
@@ -1084,6 +1126,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               serviceMap={serviceMap}
               hostMap={hostMap}
               dockerHostMap={dockerHostMap}
+              podmanHostMap={podmanHostMap}
               kubernetesClusterMap={kubernetesClusterMap}
               onIncludeFilter={props.onFacetInclude || (() => {})}
               onExcludeFilter={props.onFacetExclude || (() => {})}

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -9,6 +9,7 @@ import FacetSection from "./FacetSection";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Host from "../../../../Models/DatabaseModels/Host";
 import DockerHost from "../../../../Models/DatabaseModels/DockerHost";
+import PodmanHost from "../../../../Models/DatabaseModels/PodmanHost";
 import KubernetesCluster from "../../../../Models/DatabaseModels/KubernetesCluster";
 import Dictionary from "../../../../Types/Dictionary";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
@@ -21,6 +22,7 @@ export interface LogsFacetSidebarProps {
   serviceMap: Dictionary<Service>;
   hostMap?: Dictionary<Host>;
   dockerHostMap?: Dictionary<DockerHost>;
+  podmanHostMap?: Dictionary<PodmanHost>;
   kubernetesClusterMap?: Dictionary<KubernetesCluster>;
   onIncludeFilter: (facetKey: string, value: string) => void;
   onExcludeFilter: (facetKey: string, value: string) => void;
@@ -42,6 +44,7 @@ const RESOURCE_FACET_KEYS: ReadonlySet<string> = new Set([
   "primaryEntityId",
   "hostId",
   "dockerHostId",
+  "podmanHostId",
   "kubernetesClusterId",
 ]);
 
@@ -126,6 +129,23 @@ function buildDockerHostDisplayMap(
   return map;
 }
 
+function buildPodmanHostDisplayMap(
+  podmanHostMap: Dictionary<PodmanHost> | undefined,
+): Record<string, string> {
+  const map: Record<string, string> = {};
+  if (!podmanHostMap) {
+    return map;
+  }
+  for (const [id, podmanHost] of Object.entries(podmanHostMap)) {
+    const label: string | undefined =
+      podmanHost?.name || podmanHost?.hostIdentifier;
+    if (label) {
+      map[id] = label;
+    }
+  }
+  return map;
+}
+
 function buildClusterDisplayMap(
   clusterMap: Dictionary<KubernetesCluster> | undefined,
 ): Record<string, string> {
@@ -149,6 +169,7 @@ function getFacetTitle(key: string): string {
     primaryEntityId: "Service",
     hostId: "Host",
     dockerHostId: "Docker Host",
+    podmanHostId: "Podman Host",
     kubernetesClusterId: "Kubernetes Cluster",
     traceId: "Trace ID",
     spanId: "Span ID",
@@ -180,6 +201,10 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
     return buildDockerHostDisplayMap(props.dockerHostMap);
   }, [props.dockerHostMap]);
 
+  const podmanHostDisplayMap: Record<string, string> = useMemo(() => {
+    return buildPodmanHostDisplayMap(props.podmanHostMap);
+  }, [props.podmanHostMap]);
+
   const clusterDisplayMap: Record<string, string> = useMemo(() => {
     return buildClusterDisplayMap(props.kubernetesClusterMap);
   }, [props.kubernetesClusterMap]);
@@ -190,6 +215,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
       "primaryEntityId",
       "hostId",
       "dockerHostId",
+      "podmanHostId",
       "kubernetesClusterId",
     ];
     const otherKeys: Array<string> = Object.keys(props.facetData).filter(
@@ -287,6 +313,8 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
             valueDisplayMap = hostDisplayMap;
           } else if (key === "dockerHostId") {
             valueDisplayMap = dockerHostDisplayMap;
+          } else if (key === "podmanHostId") {
+            valueDisplayMap = podmanHostDisplayMap;
           } else if (key === "kubernetesClusterId") {
             valueDisplayMap = clusterDisplayMap;
           } else if (key === "severityText") {

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -30,6 +30,7 @@ export interface ComponentProps {
   // Default: false (spell check enabled). Set to true to disable spell check.
   disableSpellCheck?: boolean | undefined;
   dataTestId?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 type EditorMode = "wysiwyg" | "markdown";
@@ -1112,6 +1113,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
               ref={editableRef}
               role="textbox"
               aria-multiline="true"
+              aria-labelledby={props.ariaLabelledby}
               contentEditable
               suppressContentEditableWarning
               spellCheck={props.disableSpellCheck !== true}
@@ -1159,6 +1161,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
             <textarea
               ref={textareaRef}
               autoFocus={false}
+              aria-labelledby={props.ariaLabelledby}
               placeholder={props.placeholder || "Type your markdown here..."}
               className={`${className} rounded-t-none min-h-32 ${
                 isDraggingOver

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -316,6 +316,35 @@ const LocalTime: FunctionComponent<{ isoValue: string }> = ({
   );
 };
 
+/*
+ * Recursively pull the plain text out of a React children tree. Used to derive
+ * an accessible name for task-list checkboxes (WCAG 4.1.2), whose visible label
+ * is a sibling text node not otherwise associated with the <input>.
+ */
+const extractTextFromChildren: (children: unknown) => string = (
+  children: unknown,
+): string => {
+  if (children === null || children === undefined || children === false) {
+    return "";
+  }
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children
+      .map((child: unknown) => {
+        return extractTextFromChildren(child);
+      })
+      .join("");
+  }
+  if (React.isValidElement(children)) {
+    return extractTextFromChildren(
+      (children.props as { children?: unknown }).children,
+    );
+  }
+  return "";
+};
+
 const MarkdownViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -439,12 +468,44 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
               />
             );
           },
-          li: ({ ...props }: any) => {
+          li: ({ children, ...props }: any) => {
+            const isTaskItem: boolean =
+              typeof props.className === "string" &&
+              props.className.includes("task-list-item");
+
+            // Give the task-list checkbox an accessible name from its label text.
+            const renderedChildren: any = isTaskItem
+              ? React.Children.map(children, (child: any) => {
+                  if (
+                    React.isValidElement(child) &&
+                    (child.type === "input" ||
+                      (child.props as { type?: string } | null)?.type ===
+                        "checkbox")
+                  ) {
+                    const existingLabel: string | undefined = (
+                      child.props as { ["aria-label"]?: string }
+                    )["aria-label"];
+                    return React.cloneElement(
+                      child as ReactElement,
+                      {
+                        "aria-label":
+                          existingLabel ||
+                          extractTextFromChildren(children).trim() ||
+                          "Task item",
+                      } as any,
+                    );
+                  }
+                  return child;
+                })
+              : children;
+
             return (
               <li
                 className="text-sm mt-1 mb-1 text-gray-700 leading-relaxed"
                 {...props}
-              />
+              >
+                {renderedChildren}
+              </li>
             );
           },
           ul: ({ ...props }: any) => {

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -53,6 +53,9 @@ export default class TemplateVariablesCatalog {
       input.monitorType === MonitorType.Metrics ||
       input.monitorType === MonitorType.Kubernetes ||
       input.monitorType === MonitorType.Docker ||
+      input.monitorType === MonitorType.Host ||
+      input.monitorType === MonitorType.Podman ||
+      input.monitorType === MonitorType.DockerSwarm ||
       input.monitorType === MonitorType.Proxmox ||
       input.monitorType === MonitorType.Ceph
     ) {
@@ -487,6 +490,9 @@ export default class TemplateVariablesCatalog {
       case MonitorType.Metrics:
       case MonitorType.Kubernetes:
       case MonitorType.Docker:
+      case MonitorType.Host:
+      case MonitorType.Podman:
+      case MonitorType.DockerSwarm:
       case MonitorType.Proxmox:
       case MonitorType.Ceph:
         return {

package/UI/Components/Radio/Radio.tsx

@@ -24,6 +24,7 @@ export interface ComponentProps {
   error?: string | undefined;
   dataTestId?: string | undefined;
   ariaLabel?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const Radio: FunctionComponent<ComponentProps> = (
@@ -47,6 +48,7 @@ const Radio: FunctionComponent<ComponentProps> = (
       data-testid={props.dataTestId}
       role="radiogroup"
       aria-label={props.ariaLabel}
+      aria-labelledby={props.ariaLabelledby}
       aria-invalid={props.error ? "true" : undefined}
       aria-describedby={props.error ? errorId : undefined}
     >

package/UI/Components/RadioButtons/GroupRadioButtons.tsx

@@ -20,6 +20,7 @@ export interface ComponentProps {
   options: Array<RadioButton>;
   error?: string | undefined;
   dataTestId?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const RadioButtons: FunctionComponent<ComponentProps> = (
@@ -46,7 +47,11 @@ const RadioButtons: FunctionComponent<ComponentProps> = (
 
   return (
     <div>
-      <fieldset role="radiogroup" data-testid={props.dataTestId}>
+      <fieldset
+        role="radiogroup"
+        aria-labelledby={props.ariaLabelledby}
+        data-testid={props.dataTestId}
+      >
         <div className="space-y-2 mt-2">
           {props.options &&
             props.options.map((radioButton: RadioButton, i: number) => {

package/UI/Components/Tabs/Tabs.tsx

@@ -19,6 +19,67 @@ const Tabs: FunctionComponent<ComponentProps> = (
   const hasInitialized: React.MutableRefObject<boolean> =
     useRef<boolean>(false);
 
+  /*
+   * When the active tab changes as a result of keyboard arrow navigation we move
+   * DOM focus onto the newly active tab (roving tabindex pattern). This ref keeps
+   * us from stealing focus when the tab changes for any other reason (e.g. click).
+   */
+  const moveFocusToActiveTab: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  useEffect(() => {
+    if (moveFocusToActiveTab.current && currentTabName) {
+      document.getElementById(`tab-${currentTabName}`)?.focus();
+      moveFocusToActiveTab.current = false;
+    }
+  }, [currentTabName]);
+
+  type ActivateTabByOffsetFunction = (offset: number) => void;
+
+  const activateTabByOffset: ActivateTabByOffsetFunction = (
+    offset: number,
+  ): void => {
+    if (props.tabs.length === 0) {
+      return;
+    }
+    const currentIndex: number = props.tabs.findIndex((t: Tab) => {
+      return t.name === currentTabName;
+    });
+    const fromIndex: number = currentIndex < 0 ? 0 : currentIndex;
+    const nextIndex: number =
+      (fromIndex + offset + props.tabs.length) % props.tabs.length;
+    moveFocusToActiveTab.current = true;
+    setCurrentTabName(props.tabs[nextIndex]!.name);
+  };
+
+  type HandleTabListKeyDownFunction = (
+    event: React.KeyboardEvent<HTMLElement>,
+  ) => void;
+
+  const handleTabListKeyDown: HandleTabListKeyDownFunction = (
+    event: React.KeyboardEvent<HTMLElement>,
+  ): void => {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      activateTabByOffset(1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      activateTabByOffset(-1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      if (props.tabs.length > 0) {
+        moveFocusToActiveTab.current = true;
+        setCurrentTabName(props.tabs[0]!.name);
+      }
+    } else if (event.key === "End") {
+      event.preventDefault();
+      if (props.tabs.length > 0) {
+        moveFocusToActiveTab.current = true;
+        setCurrentTabName(props.tabs[props.tabs.length - 1]!.name);
+      }
+    }
+  };
+
   // Initialize current tab only once, or when the tab list names change
   useEffect(() => {
     const tabNames: Array<string> = props.tabs.map((t: Tab) => {
@@ -60,8 +121,10 @@ const Tabs: FunctionComponent<ComponentProps> = (
     <div>
       <nav
         role="tablist"
+        aria-orientation="horizontal"
         className="flex space-x-2 overflow-x-auto md:overflow-visible md:space-x-4"
         aria-label="Tabs"
+        onKeyDown={handleTabListKeyDown}
       >
         {props.tabs.map((tab: Tab) => {
           return (

package/UI/Components/TextArea/TextArea.tsx

@@ -11,6 +11,7 @@ import React, {
 export interface ComponentProps {
   onChange?: undefined | ((value: string) => void);
   initialValue?: string | undefined;
+  id?: string | undefined;
   value?: string | undefined;
   placeholder?: undefined | string;
   onFocus?: () => void;
@@ -63,6 +64,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
       <div className="relative mt-2 mb-1 rounded-md shadow-sm">
         <textarea
           autoFocus={props.autoFocus}
+          id={props.id}
           placeholder={translateString(props.placeholder)}
           data-testid={props.dataTestId}
           className={`${className || ""}`}

package/UI/Components/TimePicker/TimePicker.tsx

@@ -24,6 +24,7 @@ export interface ComponentProps {
   tabIndex?: number | undefined;
   autoFocus?: boolean | undefined;
   error?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const pad2: (n: number) => string = (n: number): string => {
@@ -161,6 +162,7 @@ const TimePicker: FunctionComponent<ComponentProps> = (
         }
         role="group"
         aria-label="Time input"
+        aria-labelledby={props.ariaLabelledby}
         aria-disabled={props.disabled ? true : undefined}
         aria-describedby={props.error ? "timepicker-error" : undefined}
         onClick={openModal}

package/UI/Components/Toggle/Toggle.tsx

@@ -21,6 +21,7 @@ export interface ComponentProps {
   error?: string | undefined;
   dataTestId?: string | undefined;
   tooltip?: string | undefined;
+  ariaLabelledby?: string | undefined;
 }
 
 const Toggle: FunctionComponent<ComponentProps> = (
@@ -96,7 +97,7 @@ const Toggle: FunctionComponent<ComponentProps> = (
           className={buttonClassName}
           role="switch"
           aria-checked={isChecked ? "true" : "false"}
-          aria-labelledby={labelId}
+          aria-labelledby={props.ariaLabelledby || labelId}
           aria-describedby={props.error ? errorId : undefined}
           aria-invalid={props.error ? "true" : undefined}
         >

package/UI/Components/Tooltip/Tooltip.tsx

@@ -48,7 +48,12 @@ const Tooltip: FunctionComponent<ComponentProps> = (
       {...animationProps}
       aria={{
         content: "describedby",
-        expanded: "auto",
+        /*
+         * Tippy's default ("auto") stamps aria-expanded onto the trigger, but our
+         * triggers are often plain non-interactive elements (e.g. uptime bars) whose
+         * role does not support aria-expanded (WCAG 4.1.2). Disable it.
+         */
+        expanded: false,
       }}
     >
       {props.children}

package/UI/Utils/TelemetryService.ts

@@ -102,6 +102,7 @@ export default class TelemetryServiceUtil {
     const typeLabels: Record<string, string> = {
       [ServiceType.Host]: "Host telemetry",
       [ServiceType.DockerHost]: "Docker host telemetry",
+      [ServiceType.PodmanHost]: "Podman host telemetry",
       [ServiceType.KubernetesCluster]: "Kubernetes telemetry",
       [ServiceType.ProxmoxCluster]: "Proxmox Cluster",
       [ServiceType.CephCluster]: "Ceph Cluster",

package/Utils/Dashboard/Components/DashboardDockerSwarmNodeListComponent.ts

@@ -0,0 +1,70 @@
+import DashboardDockerSwarmNodeListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardDockerSwarmNodeListComponent";
+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 {
+  DockerSwarmFiltersSection,
+  getDockerSwarmCommonArguments,
+} from "./DashboardDockerSwarmResourceListShared";
+
+export default class DashboardDockerSwarmNodeListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardDockerSwarmNodeListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.DockerSwarmNodeList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardDockerSwarmNodeListComponent>
+  > {
+    const args: Array<
+      ComponentArgument<DashboardDockerSwarmNodeListComponent>
+    > = getDockerSwarmCommonArguments<DashboardDockerSwarmNodeListComponent>();
+
+    args.push({
+      name: "Role",
+      description: "Show only manager nodes or only worker nodes",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "roleFilter",
+      section: DockerSwarmFiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Managers only", value: "manager" },
+        { label: "Workers only", value: "worker" },
+      ],
+    });
+
+    args.push({
+      name: "Status",
+      description: "Quick filter by node readiness",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "statusFilter",
+      section: DockerSwarmFiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Ready only", value: "ready" },
+        { label: "Not ready only", value: "notready" },
+      ],
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/DashboardDockerSwarmResourceListShared.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 DockerSwarmDisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+export const DockerSwarmFiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which resources are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export function getDockerSwarmCommonArguments<
+  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: DockerSwarmDisplaySection,
+  });
+
+  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: DockerSwarmDisplaySection,
+  });
+
+  args.push(getViewModeArgument<T>(DockerSwarmDisplaySection));
+
+  args.push({
+    name: "Clusters",
+    description: "Show only resources from the selected Docker Swarm clusters",
+    required: false,
+    type: ComponentInputType.EntityMultiSelectDropdown,
+    id: "dockerSwarmClusterIds" as keyof T["arguments"],
+    placeholder: "All clusters",
+    section: DockerSwarmFiltersSection,
+    entityFilterModelType: EntityFilterModelType.DockerSwarmCluster,
+  });
+
+  return args;
+}