@oneuptime/common 10.4.7 → 10.4.9

package/Types/Dashboard/DashboardComponents/DashboardMonitorListComponent.ts

@@ -8,6 +8,7 @@ export default interface DashboardMonitorListComponent extends BaseComponent {
   arguments: {
     title?: string | undefined;
     maxRows?: number | undefined;
+    viewMode?: "list" | "honeycomb" | undefined;
     statusFilter?: string | undefined;
     monitorStatusIds?: Array<string> | undefined;
     monitorTypes?: Array<string> | undefined;

package/Types/Dashboard/DashboardComponents/DashboardTraceListComponent.ts

@@ -9,5 +9,6 @@ export default interface DashboardTraceListComponent extends BaseComponent {
     title?: string | undefined;
     statusFilter?: string | undefined;
     maxRows?: number | undefined;
+    viewMode?: "list" | "honeycomb" | undefined;
   };
 }

package/Types/Telemetry/TelemetryRetentionConfig.ts

@@ -8,10 +8,10 @@ import { SpanStatus } from "../../Models/AnalyticsModels/Span";
  * When a row is ingested, retention falls through, narrowest-first:
  *   1. service[pillar].byX[bucketKey]
  *   2. service[pillar].default
- *   3. service.retainTelemetryDataForDays               (umbrella)
+ *   3. service.retainTelemetryDataForDays            (service default)
  *   4. project[pillar].byX[bucketKey]
  *   5. project[pillar].default
- *   6. project.defaultTelemetryRetentionInDays           (umbrella)
+ *   6. project.defaultTelemetryRetentionInDays       (project default)
  *   7. HARDCODED_DEFAULT_TELEMETRY_RETENTION_IN_DAYS
  */
 export default interface TelemetryRetentionConfig {
@@ -74,26 +74,26 @@ export function resolveTelemetryRetentionInDays(input: {
   pillar: TelemetryPillar;
   bucketKey?: LogSeverity | SpanStatus | null;
   serviceConfig?: TelemetryRetentionConfig | null;
-  serviceUmbrellaInDays?: number | null;
+  serviceRetentionInDays?: number | null;
   projectConfig?: TelemetryRetentionConfig | null;
-  projectUmbrellaInDays?: number | null;
+  projectRetentionInDays?: number | null;
 }): number {
   const {
     pillar,
     bucketKey,
     serviceConfig,
-    serviceUmbrellaInDays,
+    serviceRetentionInDays,
     projectConfig,
-    projectUmbrellaInDays,
+    projectRetentionInDays,
   } = input;
 
   const candidates: Array<number | null> = [
     getBucketValue(serviceConfig, pillar, bucketKey),
     getPillarDefault(serviceConfig, pillar),
-    pickPositive(serviceUmbrellaInDays),
+    pickPositive(serviceRetentionInDays),
     getBucketValue(projectConfig, pillar, bucketKey),
     getPillarDefault(projectConfig, pillar),
-    pickPositive(projectUmbrellaInDays),
+    pickPositive(projectRetentionInDays),
   ];
 
   for (const value of candidates) {

package/Types/Time/RangeStartAndEndDateTime.ts

@@ -13,6 +13,14 @@ export class RangeStartAndEndDateTimeUtil {
   ): InBetween<Date> {
     const currentDate: Date = OneUptimeDate.getCurrentDate();
 
+    // 5 mins.
+    if (dashboardStartAndEndDate.range === TimeRange.PAST_FIVE_MINS) {
+      return new InBetween<Date>(
+        OneUptimeDate.addRemoveMinutes(currentDate, -5),
+        currentDate,
+      );
+    }
+
     // 30 mins.
     if (dashboardStartAndEndDate.range === TimeRange.PAST_THIRTY_MINS) {
       return new InBetween<Date>(

package/Types/Time/TimeRange.ts

@@ -1,4 +1,5 @@
 enum Range {
+  PAST_FIVE_MINS = "Past 5 Mins",
   PAST_THIRTY_MINS = "Past 30 Mins",
   PAST_ONE_HOUR = "Past 1 Hour",
   PAST_TWO_HOURS = "Past 2 Hours",

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

@@ -22,6 +22,7 @@ export interface LogTimeRangePickerProps {
 
 // Preset options to show in the dropdown (ordered for log investigation use)
 const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
+  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
   { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
   { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
   { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -1807,17 +1807,21 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     (): BulkActionButtonSchema<TBaseModel> => {
       return {
         title: "Delete",
-        buttonStyleType: ButtonStyleType.NORMAL,
+        buttonStyleType: ButtonStyleType.DANGER,
         icon: IconProp.Trash,
         confirmMessage: (items: Array<TBaseModel>) => {
-          return `Are you sure you want to delete ${items.length} ${
-            props.pluralName || model.pluralName || "items"
-          }?`;
+          const itemLabel: string =
+            items.length === 1
+              ? props.singularName || model.singularName || "item"
+              : props.pluralName || model.pluralName || "items";
+          return `Are you sure you want to delete ${items.length} ${itemLabel}? This action cannot be undone.`;
         },
         confirmTitle: (items: Array<TBaseModel>) => {
-          return `Delete ${items.length} ${
-            props.pluralName || model.pluralName || "items"
-          }`;
+          const itemLabel: string =
+            items.length === 1
+              ? props.singularName || model.singularName || "item"
+              : props.pluralName || model.pluralName || "items";
+          return `Delete ${items.length} ${itemLabel}`;
         },
         confirmButtonStyleType: ButtonStyleType.DANGER,
         onClick: async ({
@@ -1908,25 +1912,68 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         onFilterRefreshClick={async () => {
           await getFilterDropdownItems();
         }}
-        bulkActions={{
-          buttons: props.bulkActions?.buttons.map(
+        bulkActions={(() => {
+          const permissions: Array<Permission> =
+            PermissionUtil.getAllPermissions();
+          const userCanDelete: boolean =
+            model.hasDeletePermissions(permissions);
+
+          const sourceButtons: Array<
+            BulkActionButtonSchema<TBaseModel> | ModalTableBulkDefaultActions
+          > = [...(props.bulkActions?.buttons ?? [])];
+
+          /*
+           * Auto-include the default Delete bulk action whenever the user has
+           * model-level delete permission, so every table that exposes row
+           * selection also exposes a way to delete the selected rows. This is
+           * intentionally decoupled from `isDeleteable` — that flag governs the
+           * per-row Delete button in the Actions column, not bulk operations.
+           * The confirmation modal is wired up via the schema's confirmMessage
+           * / confirmTitle below. Skip if the table author already added it.
+           */
+          const alreadyHasDeleteAction: boolean = sourceButtons.some(
             (
               action:
                 | BulkActionButtonSchema<TBaseModel>
                 | ModalTableBulkDefaultActions,
             ) => {
-              const permissions: Array<Permission> =
-                PermissionUtil.getAllPermissions();
+              if (action === ModalTableBulkDefaultActions.Delete) {
+                return true;
+              }
               if (
-                action === ModalTableBulkDefaultActions.Delete &&
-                model.hasDeletePermissions(permissions)
+                typeof action === "object" &&
+                action !== null &&
+                "title" in action &&
+                (action as BulkActionButtonSchema<TBaseModel>).title ===
+                  "Delete"
               ) {
-                return getDeleteBulkAction();
+                return true;
               }
-              return action;
+              return false;
             },
-          ) as Array<BulkActionButtonSchema<TBaseModel>>,
-        }}
+          );
+          if (userCanDelete && !alreadyHasDeleteAction) {
+            sourceButtons.push(ModalTableBulkDefaultActions.Delete);
+          }
+
+          return {
+            buttons: sourceButtons.map(
+              (
+                action:
+                  | BulkActionButtonSchema<TBaseModel>
+                  | ModalTableBulkDefaultActions,
+              ) => {
+                if (
+                  action === ModalTableBulkDefaultActions.Delete &&
+                  userCanDelete
+                ) {
+                  return getDeleteBulkAction();
+                }
+                return action;
+              },
+            ) as Array<BulkActionButtonSchema<TBaseModel>>,
+          };
+        })()}
         onBulkActionEnd={async () => {
           setBulkSelectedItems([]);
           await fetchItems();

package/UI/Components/Telemetry/TelemetryRetentionConfigForm.tsx

@@ -178,7 +178,7 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
         <FieldLabelElement title={label} description={description} />
         <Input
           type={InputType.NUMBER}
-          placeholder="Inherit umbrella default"
+          placeholder="Use default retention"
           value={numberToString(
             (config[pillar] as { default?: number | null } | undefined)
               ?.default,
@@ -198,13 +198,13 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
           Logs
         </h3>
         <p className="text-xs text-gray-500 dark:text-slate-400 mb-3">
-          Retention in days for log records. Per-severity values override the
-          logs default; leave blank to inherit.
+          Retention in days for log records. Per-severity values take precedence
+          over the logs default; leave any field blank to fall back.
         </p>
         {renderPillarDefault(
           "logs",
           "Logs default (days)",
-          "Applies to log records whose severity has no specific override.",
+          "Applies to every log record unless its severity has a specific override below.",
         )}
         <div className="border-t border-gray-100 dark:border-slate-800 pt-3 mt-2">
           <p className="text-xs font-medium text-gray-700 dark:text-slate-300 mb-2">
@@ -217,7 +217,7 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
                   <FieldLabelElement title={severity} />
                   <Input
                     type={InputType.NUMBER}
-                    placeholder="Inherit logs default"
+                    placeholder="Use logs default"
                     value={numberToString(config.logs?.bySeverity?.[severity])}
                     onChange={(raw: string) => {
                       setLogSeverityValue(severity, parsePositiveOrNull(raw));
@@ -235,13 +235,13 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
           Traces
         </h3>
         <p className="text-xs text-gray-500 dark:text-slate-400 mb-3">
-          Retention in days for spans (and the exceptions captured on them).
-          Per-status values override the traces default.
+          Retention in days for spans and the exceptions captured on them.
+          Per-status values take precedence over the traces default.
         </p>
         {renderPillarDefault(
           "traces",
           "Traces default (days)",
-          "Applies to spans whose status has no specific override.",
+          "Applies to every span unless its status has a specific override below.",
         )}
         <div className="border-t border-gray-100 dark:border-slate-800 pt-3 mt-2">
           <p className="text-xs font-medium text-gray-700 dark:text-slate-300 mb-2">
@@ -255,7 +255,7 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
                     <FieldLabelElement title={entry.label} />
                     <Input
                       type={InputType.NUMBER}
-                      placeholder="Inherit traces default"
+                      placeholder="Use traces default"
                       value={numberToString(
                         config.traces?.byStatus?.[entry.status],
                       )}
@@ -284,7 +284,7 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
         {renderPillarDefault(
           "metrics",
           "Metrics default (days)",
-          "Applies to all metric points. Leave blank to inherit the umbrella default.",
+          "Applies to all metric points. Leave blank to use the default retention.",
         )}
       </div>
 
@@ -298,7 +298,7 @@ const TelemetryRetentionConfigForm: FunctionComponent<ComponentProps> = (
         {renderPillarDefault(
           "profiles",
           "Profiles default (days)",
-          "Applies to all profile samples. Leave blank to inherit the umbrella default.",
+          "Applies to all profile samples. Leave blank to use the default retention.",
         )}
       </div>
     </div>

package/UI/Components/Telemetry/TelemetryRetentionConfigSummary.tsx

@@ -13,91 +13,209 @@ const SPAN_STATUS_LABEL: Record<SpanStatus, string> = {
   [SpanStatus.Error]: "Error",
 };
 
+const LOG_SEVERITY_ORDER: Array<LogSeverity> = [
+  LogSeverity.Fatal,
+  LogSeverity.Error,
+  LogSeverity.Warning,
+  LogSeverity.Information,
+  LogSeverity.Debug,
+  LogSeverity.Trace,
+  LogSeverity.Unspecified,
+];
+
+const SPAN_STATUS_ORDER: Array<SpanStatus> = [
+  SpanStatus.Error,
+  SpanStatus.Ok,
+  SpanStatus.Unset,
+];
+
+const formatDays: (days: number) => string = (days: number): string => {
+  return days === 1 ? "1 day" : `${days} days`;
+};
+
+const pickPositive: (value: number | null | undefined) => number | null = (
+  value: number | null | undefined,
+): number | null => {
+  return typeof value === "number" && value > 0 ? value : null;
+};
+
+interface PillarOverride {
+  label: string;
+  days: number;
+}
+
+interface PillarRender {
+  title: string;
+  hint: string;
+  defaultDays: number | null;
+  overrides: Array<PillarOverride>;
+}
+
+const PillarCard: FunctionComponent<{ pillar: PillarRender }> = (props: {
+  pillar: PillarRender;
+}): ReactElement => {
+  const { title, hint, defaultDays, overrides } = props.pillar;
+  const hasDefault: boolean = defaultDays !== null;
+  const hasOverrides: boolean = overrides.length > 0;
+  const isCustomized: boolean = hasDefault || hasOverrides;
+
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-slate-100">
+              {title}
+            </h4>
+            <span
+              className={
+                isCustomized
+                  ? "inline-flex items-center rounded-full bg-indigo-50 dark:bg-indigo-950/40 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-indigo-700 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-900"
+                  : "inline-flex items-center rounded-full bg-gray-100 dark:bg-slate-800 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-500 dark:text-slate-400 border border-gray-200 dark:border-slate-700"
+              }
+            >
+              {isCustomized ? "Custom" : "Default"}
+            </span>
+          </div>
+          <p className="mt-1 text-xs text-gray-500 dark:text-slate-400">
+            {hint}
+          </p>
+        </div>
+        <div className="text-right whitespace-nowrap shrink-0">
+          {hasDefault ? (
+            <>
+              <div className="text-lg font-semibold text-gray-900 dark:text-slate-100 leading-tight">
+                {defaultDays}{" "}
+                <span className="text-sm font-normal text-gray-500 dark:text-slate-400">
+                  {(defaultDays as number) === 1 ? "day" : "days"}
+                </span>
+              </div>
+              <div className="text-[10px] uppercase tracking-wide text-gray-400 dark:text-slate-500">
+                Default
+              </div>
+            </>
+          ) : (
+            <div className="text-xs italic text-gray-400 dark:text-slate-500">
+              Uses default
+              <br />
+              retention
+            </div>
+          )}
+        </div>
+      </div>
+      {hasOverrides ? (
+        <div className="mt-3 border-t border-gray-100 dark:border-slate-800 pt-3">
+          <p className="text-[10px] font-semibold uppercase tracking-wide text-gray-400 dark:text-slate-500 mb-2">
+            Specific overrides
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {overrides.map((o: PillarOverride) => {
+              return (
+                <span
+                  key={o.label}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-indigo-100 dark:border-indigo-900 bg-indigo-50 dark:bg-indigo-950/40 px-2.5 py-0.5 text-xs font-medium text-indigo-700 dark:text-indigo-300"
+                >
+                  <span>{o.label}</span>
+                  <span
+                    aria-hidden="true"
+                    className="text-indigo-300 dark:text-indigo-700"
+                  >
+                    ·
+                  </span>
+                  <span className="font-normal">{formatDays(o.days)}</span>
+                </span>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+const sortOverridesByDaysDesc: (
+  list: Array<PillarOverride>,
+) => Array<PillarOverride> = (
+  list: Array<PillarOverride>,
+): Array<PillarOverride> => {
+  return [...list].sort((a: PillarOverride, b: PillarOverride) => {
+    return b.days - a.days;
+  });
+};
+
 const TelemetryRetentionConfigSummary: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const config: TelemetryRetentionConfig | null | undefined = props.config;
 
-  if (
-    !config ||
-    (!config.logs && !config.traces && !config.metrics && !config.profiles)
-  ) {
-    return (
-      <span className="text-sm text-gray-500 dark:text-slate-400">
-        Using umbrella default for all pillars.
-      </span>
-    );
-  }
-
-  const renderPillar: (
-    title: string,
-    defaultDays: number | null | undefined,
-    overrides: Array<{ label: string; days: number | null | undefined }>,
-  ) => ReactElement | null = (
-    title: string,
-    defaultDays: number | null | undefined,
-    overrides: Array<{ label: string; days: number | null | undefined }>,
-  ): ReactElement | null => {
-    const hasDefault: boolean =
-      typeof defaultDays === "number" && defaultDays > 0;
-    const visibleOverrides: Array<{ label: string; days: number }> = overrides
-      .filter((o: { label: string; days: number | null | undefined }) => {
-        return typeof o.days === "number" && o.days > 0;
-      })
-      .map((o: { label: string; days: number | null | undefined }) => {
-        return { label: o.label, days: o.days as number };
-      });
-
-    if (!hasDefault && visibleOverrides.length === 0) {
-      return null;
-    }
-
-    return (
-      <div key={title} className="mb-2">
-        <span className="text-sm font-medium text-gray-900 dark:text-slate-100">
-          {title}:
-        </span>{" "}
-        <span className="text-sm text-gray-700 dark:text-slate-300">
-          {hasDefault ? `${defaultDays} day(s)` : "inherits umbrella default"}
-        </span>
-        {visibleOverrides.length > 0 ? (
-          <ul className="ml-4 text-xs text-gray-600 dark:text-slate-400 list-disc">
-            {visibleOverrides.map((o: { label: string; days: number }) => {
-              return (
-                <li key={o.label}>
-                  {o.label}: {o.days} day(s)
-                </li>
-              );
-            })}
-          </ul>
-        ) : null}
-      </div>
-    );
-  };
+  const logsOverrides: Array<PillarOverride> = LOG_SEVERITY_ORDER.flatMap(
+    (severity: LogSeverity): Array<PillarOverride> => {
+      const days: number | null = pickPositive(
+        config?.logs?.bySeverity?.[severity],
+      );
+      return days === null ? [] : [{ label: severity, days: days }];
+    },
+  );
+
+  const tracesOverrides: Array<PillarOverride> = SPAN_STATUS_ORDER.flatMap(
+    (status: SpanStatus): Array<PillarOverride> => {
+      const days: number | null = pickPositive(
+        config?.traces?.byStatus?.[status],
+      );
+      return days === null
+        ? []
+        : [{ label: SPAN_STATUS_LABEL[status], days: days }];
+    },
+  );
+
+  const pillars: Array<PillarRender> = [
+    {
+      title: "Logs",
+      hint: "Log records, with optional per-severity overrides.",
+      defaultDays: pickPositive(config?.logs?.default),
+      overrides: sortOverridesByDaysDesc(logsOverrides),
+    },
+    {
+      title: "Traces",
+      hint: "Spans and exceptions, with optional per-status overrides.",
+      defaultDays: pickPositive(config?.traces?.default),
+      overrides: sortOverridesByDaysDesc(tracesOverrides),
+    },
+    {
+      title: "Metrics",
+      hint: "Metric data points and aggregates.",
+      defaultDays: pickPositive(config?.metrics?.default),
+      overrides: [],
+    },
+    {
+      title: "Profiles",
+      hint: "Profile samples and stack traces.",
+      defaultDays: pickPositive(config?.profiles?.default),
+      overrides: [],
+    },
+  ];
+
+  const anyConfigured: boolean = pillars.some((p: PillarRender) => {
+    return p.defaultDays !== null || p.overrides.length > 0;
+  });
 
   return (
-    <div>
-      {renderPillar(
-        "Logs",
-        config.logs?.default,
-        Object.entries(config.logs?.bySeverity || {}).map(
-          ([severity, days]: [string, number | null | undefined]) => {
-            return { label: severity as LogSeverity, days: days };
-          },
-        ),
-      )}
-      {renderPillar(
-        "Traces",
-        config.traces?.default,
-        Object.entries(config.traces?.byStatus || {}).map(
-          ([statusKey, days]: [string, number | null | undefined]) => {
-            const status: SpanStatus = Number(statusKey) as SpanStatus;
-            return { label: SPAN_STATUS_LABEL[status] || statusKey, days };
-          },
-        ),
-      )}
-      {renderPillar("Metrics", config.metrics?.default, [])}
-      {renderPillar("Profiles", config.profiles?.default, [])}
+    <div className="space-y-3">
+      {!anyConfigured ? (
+        <div className="rounded-md border border-dashed border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900/40 px-4 py-3">
+          <p className="text-sm font-medium text-gray-700 dark:text-slate-200">
+            No overrides set.
+          </p>
+          <p className="text-xs text-gray-500 dark:text-slate-400 mt-0.5">
+            Every telemetry type uses the default retention shown above.
+          </p>
+        </div>
+      ) : null}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {pillars.map((pillar: PillarRender) => {
+          return <PillarCard key={pillar.title} pillar={pillar} />;
+        })}
+      </div>
     </div>
   );
 };

package/UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker.tsx

@@ -21,6 +21,7 @@ export interface TelemetryTimeRangePickerProps {
 }
 
 const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
+  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
   { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
   { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
   { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },

package/Utils/Dashboard/Components/DashboardAlertListComponent.ts

@@ -9,6 +9,7 @@ import {
   EntityFilterModelType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
 
 const DisplaySection: ComponentArgumentSection = {
   name: "Display Options",
@@ -67,6 +68,10 @@ export default class DashboardAlertListComponentUtil extends DashboardBaseCompon
       section: DisplaySection,
     });
 
+    componentArguments.push(
+      getViewModeArgument<DashboardAlertListComponent>(DisplaySection),
+    );
+
     componentArguments.push({
       name: "Lifecycle State",
       description: "Quick filter by lifecycle state",

package/Utils/Dashboard/Components/DashboardDockerContainerListComponent.ts

@@ -9,6 +9,7 @@ import {
   EntityFilterModelType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
 
 const DisplaySection: ComponentArgumentSection = {
   name: "Display Options",
@@ -67,6 +68,12 @@ export default class DashboardDockerContainerListComponentUtil extends Dashboard
       section: DisplaySection,
     });
 
+    args.push(
+      getViewModeArgument<DashboardDockerContainerListComponent>(
+        DisplaySection,
+      ),
+    );
+
     args.push({
       name: "Hosts",
       description: "Show only containers from the selected hosts",

package/Utils/Dashboard/Components/DashboardDockerHostListComponent.ts

@@ -8,6 +8,7 @@ import {
   ComponentInputType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
 
 const DisplaySection: ComponentArgumentSection = {
   name: "Display Options",
@@ -64,6 +65,10 @@ export default class DashboardDockerHostListComponentUtil extends DashboardBaseC
       section: DisplaySection,
     });
 
+    args.push(
+      getViewModeArgument<DashboardDockerHostListComponent>(DisplaySection),
+    );
+
     args.push({
       name: "Connection Status",
       description: "Quick filter by OTel collector status",

package/Utils/Dashboard/Components/DashboardDockerImageListComponent.ts

@@ -9,6 +9,7 @@ import {
   EntityFilterModelType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
 
 const DisplaySection: ComponentArgumentSection = {
   name: "Display Options",
@@ -66,6 +67,10 @@ export default class DashboardDockerImageListComponentUtil extends DashboardBase
       section: DisplaySection,
     });
 
+    args.push(
+      getViewModeArgument<DashboardDockerImageListComponent>(DisplaySection),
+    );
+
     args.push({
       name: "Hosts",
       description: "Show only images from the selected hosts",