@oneuptime/common 10.0.96 → 10.0.97

package/Types/Permission.ts

@@ -812,6 +812,21 @@ enum Permission {
   EditDockerHostOwnerUser = "EditDockerHostOwnerUser",
   ReadDockerHostOwnerUser = "ReadDockerHostOwnerUser",
 
+  CreateHost = "CreateHost",
+  DeleteHost = "DeleteHost",
+  EditHost = "EditHost",
+  ReadHost = "ReadHost",
+
+  CreateHostOwnerTeam = "CreateHostOwnerTeam",
+  DeleteHostOwnerTeam = "DeleteHostOwnerTeam",
+  EditHostOwnerTeam = "EditHostOwnerTeam",
+  ReadHostOwnerTeam = "ReadHostOwnerTeam",
+
+  CreateHostOwnerUser = "CreateHostOwnerUser",
+  DeleteHostOwnerUser = "DeleteHostOwnerUser",
+  EditHostOwnerUser = "EditHostOwnerUser",
+  ReadHostOwnerUser = "ReadHostOwnerUser",
+
   CreateService = "CreateService",
   DeleteService = "DeleteService",
   EditService = "EditService",
@@ -5602,6 +5617,125 @@ export class PermissionHelper {
         group: PermissionGroup.Telemetry,
       },
 
+      {
+        permission: Permission.CreateHost,
+        title: "Create Host",
+        description: "This permission can create Host in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteHost,
+        title: "Delete Host",
+        description: "This permission can delete Host of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditHost,
+        title: "Edit Host",
+        description: "This permission can edit Host of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadHost,
+        title: "Read Host",
+        description: "This permission can read Host of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
+      {
+        permission: Permission.CreateHostOwnerTeam,
+        title: "Create Host Team Owner",
+        description:
+          "This permission can create Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteHostOwnerTeam,
+        title: "Delete Host Team Owner",
+        description:
+          "This permission can delete Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditHostOwnerTeam,
+        title: "Edit Host Team Owner",
+        description:
+          "This permission can edit Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadHostOwnerTeam,
+        title: "Read Host Team Owner",
+        description:
+          "This permission can read Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
+      {
+        permission: Permission.CreateHostOwnerUser,
+        title: "Create Host User Owner",
+        description:
+          "This permission can create Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteHostOwnerUser,
+        title: "Delete Host User Owner",
+        description:
+          "This permission can delete Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditHostOwnerUser,
+        title: "Edit Host User Owner",
+        description:
+          "This permission can edit Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadHostOwnerUser,
+        title: "Read Host User Owner",
+        description:
+          "This permission can read Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
       {
         permission: Permission.CreateService,
         title: "Create Service",

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -115,7 +115,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         connectNulls={true}
         curve={props.curve || ChartCurve.MONOTONE}
         syncid={props.sync ? props.syncid : undefined}
-        yAxisWidth={60}
+        yAxisWidth={64}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
         formattedExemplarPoints={

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -79,7 +79,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}
-        yAxisWidth={60}
+        yAxisWidth={64}
         syncid={props.sync ? props.syncid : undefined}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -695,9 +695,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                 : () => {}
             }
             margin={{
-              bottom: (xAxisLabel ? 30 : undefined) as unknown as number,
-              left: (yAxisLabel ? 20 : undefined) as unknown as number,
-              right: (yAxisLabel ? 5 : undefined) as unknown as number,
+              bottom: (xAxisLabel ? 30 : 8) as unknown as number,
+              left: (yAxisLabel ? 20 : 0) as unknown as number,
+              right: (yAxisLabel ? 5 : 8) as unknown as number,
               top: 5,
             }}
           >
@@ -724,7 +724,8 @@ const AreaChart: React.ForwardRefExoticComponent<
             </defs>
             {showGridLines ? (
               <CartesianGrid
-                className={cx("stroke-gray-200 stroke-1")}
+                className={cx("stroke-gray-100")}
+                strokeDasharray="3 3"
                 horizontal={true}
                 vertical={false}
               />
@@ -734,7 +735,10 @@ const AreaChart: React.ForwardRefExoticComponent<
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{ transform: "translate(0, 6)" }}
+              tick={{
+                transform: "translate(0, 8)",
+                fontWeight: 500,
+              }}
               ticks={
                 startEndOnly
                   ? ([
@@ -748,7 +752,7 @@ const AreaChart: React.ForwardRefExoticComponent<
               }
               fill=""
               stroke=""
-              className={cx("text-xs", "fill-gray-500")}
+              className={cx("text-xs tabular-nums", "fill-gray-600")}
               tickLine={false}
               axisLine={false}
               minTickGap={tickGap}
@@ -770,10 +774,13 @@ const AreaChart: React.ForwardRefExoticComponent<
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
-              tick={{ transform: "translate(-3, 0)" }}
+              tick={{
+                transform: "translate(-4, 0)",
+                fontWeight: 500,
+              }}
               fill=""
               stroke=""
-              className={cx("text-xs", "fill-gray-500")}
+              className={cx("text-xs tabular-nums", "fill-gray-600")}
               tickFormatter={valueFormatter}
               allowDecimals={allowDecimals}
             >

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -794,9 +794,9 @@ const BarChart: React.ForwardRefExoticComponent<
                 }
               : {})}
             margin={{
-              bottom: xAxisLabel ? 30 : 0,
+              bottom: xAxisLabel ? 30 : 8,
               left: yAxisLabel ? 20 : 0,
-              right: yAxisLabel ? 5 : 0,
+              right: yAxisLabel ? 5 : 8,
               top: 5,
             }}
             stackOffset={type === "percent" ? "expand" : "none"}
@@ -805,7 +805,8 @@ const BarChart: React.ForwardRefExoticComponent<
           >
             {showGridLines ? (
               <CartesianGrid
-                className={cx("stroke-gray-200 stroke-1")}
+                className={cx("stroke-gray-100")}
+                strokeDasharray="3 3"
                 horizontal={layout !== "vertical"}
                 vertical={layout === "vertical"}
               />
@@ -814,15 +815,16 @@ const BarChart: React.ForwardRefExoticComponent<
               hide={!showXAxis}
               tick={{
                 transform:
-                  layout !== "vertical" ? "translate(0, 6)" : undefined,
+                  layout !== "vertical" ? "translate(0, 8)" : undefined,
+                fontWeight: 500,
               }}
               fill=""
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "text-xs tabular-nums",
                 // text fill
-                "fill-gray-500",
+                "fill-gray-600",
                 { "mt-4": layout !== "vertical" },
               )}
               tickLine={false}
@@ -872,15 +874,16 @@ const BarChart: React.ForwardRefExoticComponent<
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "text-xs tabular-nums",
                 // text fill
-                "fill-gray-500",
+                "fill-gray-600",
               )}
               tick={{
                 transform:
                   layout !== "vertical"
-                    ? "translate(-3, 0)"
+                    ? "translate(-4, 0)"
                     : "translate(0, 0)",
+                fontWeight: 500,
               }}
               {...(layout !== "vertical"
                 ? {

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -710,15 +710,16 @@ const LineChart: React.ForwardRefExoticComponent<
                 : () => {} // do nothing
             }
             margin={{
-              bottom: (xAxisLabel ? 30 : undefined) as unknown as number,
-              left: (yAxisLabel ? 20 : undefined) as unknown as number,
-              right: (yAxisLabel ? 5 : undefined) as unknown as number,
+              bottom: (xAxisLabel ? 30 : 8) as unknown as number,
+              left: (yAxisLabel ? 20 : 0) as unknown as number,
+              right: (yAxisLabel ? 5 : 8) as unknown as number,
               top: 5,
             }}
           >
             {showGridLines ? (
               <CartesianGrid
-                className={cx("stroke-gray-200 stroke-1")}
+                className={cx("stroke-gray-100")}
+                strokeDasharray="3 3"
                 horizontal={true}
                 vertical={false}
               />
@@ -728,7 +729,10 @@ const LineChart: React.ForwardRefExoticComponent<
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{ transform: "translate(0, 6)" }}
+              tick={{
+                transform: "translate(0, 8)",
+                fontWeight: 500,
+              }}
               ticks={
                 startEndOnly
                   ? ([
@@ -741,9 +745,9 @@ const LineChart: React.ForwardRefExoticComponent<
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "text-xs tabular-nums",
                 // text fill
-                "fill-gray-500",
+                "fill-gray-600",
               )}
               tickLine={false}
               axisLine={false}
@@ -766,14 +770,17 @@ const LineChart: React.ForwardRefExoticComponent<
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
-              tick={{ transform: "translate(-3, 0)" }}
+              tick={{
+                transform: "translate(-4, 0)",
+                fontWeight: 500,
+              }}
               fill=""
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "text-xs tabular-nums",
                 // text fill
-                "fill-gray-500",
+                "fill-gray-600",
               )}
               tickFormatter={valueFormatter}
               allowDecimals={allowDecimals}

package/UI/Components/Charts/Line/LineChart.tsx

@@ -114,7 +114,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         connectNulls={true}
         curve={props.curve}
         syncid={props.sync ? props.syncid : undefined}
-        yAxisWidth={60}
+        yAxisWidth={64}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
         formattedExemplarPoints={

package/UI/Components/ExpandableText/ExpandableText.tsx

@@ -17,23 +17,45 @@ const ExpandableText: FunctionComponent<ComponentProps> = (
   }
 
   const isLong: boolean = props.text.length > maxLength;
+  const baseTextClass: string = props.className || "text-sm text-gray-900";
 
   if (!isLong) {
-    return (
-      <span className={props.className || "text-gray-600"}>{props.text}</span>
-    );
+    return <span className={baseTextClass}>{props.text}</span>;
   }
 
+  const truncated: string =
+    props.text.substring(0, maxLength).replace(/\s+$/u, "") + "…";
+
   return (
-    <span className={props.className || "text-gray-600"}>
-      {isExpanded ? props.text : props.text.substring(0, maxLength) + "..."}
+    <span className="inline align-baseline">
+      <span className={`${baseTextClass} break-words align-baseline`}>
+        {isExpanded ? props.text : truncated}
+      </span>
       <button
+        type="button"
         onClick={() => {
           setIsExpanded(!isExpanded);
         }}
-        className="ml-1.5 text-xs text-indigo-600 hover:text-indigo-800 font-medium"
+        aria-expanded={isExpanded}
+        className="ml-2 inline-flex items-center gap-1 align-baseline rounded text-xs font-medium text-indigo-600 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors"
       >
-        {isExpanded ? "Less" : "More"}
+        <span>{isExpanded ? "Show less" : "Show more"}</span>
+        <svg
+          className={`w-3 h-3 transition-transform duration-200 ${
+            isExpanded ? "rotate-180" : ""
+          }`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.25}
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
       </button>
     </span>
   );

package/UI/Components/JSONTable/JSONTable.tsx

@@ -1,11 +1,19 @@
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
 import CopyableButton from "../CopyableButton/CopyableButton";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 import JSONFunctions from "../../../Types/JSONFunctions";
 
 export interface JSONTableProps {
   json: { [key: string]: any } | null | undefined;
   title?: string | undefined;
   className?: string | undefined;
+  /*
+   * Optional. When provided, each row gets a "filter by" button that calls
+   * this with the flat dot-notation key and the (possibly normalised) value.
+   * Wired by callers to add the pair as a search filter on the parent listing.
+   */
+  onFilterByAttribute?: ((key: string, value: string) => void) | undefined;
   // Always flattened (dot notation) for consistency.
 }
 
@@ -144,6 +152,9 @@ const JSONTable: FunctionComponent<JSONTableProps> = (
           </thead>
           <tbody className="divide-y divide-gray-100">
             {flatItems.map((item: FlatItem) => {
+              const canFilter: boolean = Boolean(
+                props.onFilterByAttribute && item.value && item.value !== "-",
+              );
               return (
                 <tr key={item.key} className="group hover:bg-gray-50 text-sm">
                   <td className="font-mono px-3 py-2 align-top text-gray-700 break-all whitespace-pre-wrap">
@@ -165,7 +176,22 @@ const JSONTable: FunctionComponent<JSONTableProps> = (
                           <span>{item.value}</span>
                         )}
                       </div>
-                      <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-150">
+                        {canFilter && (
+                          <button
+                            type="button"
+                            className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
+                            title={`Filter by ${item.key}: ${item.value}`}
+                            onClick={() => {
+                              props.onFilterByAttribute!(item.key, item.value);
+                            }}
+                          >
+                            <Icon
+                              icon={IconProp.Filter}
+                              className="h-3.5 w-3.5"
+                            />
+                          </button>
+                        )}
                         <CopyableButton textToBeCopied={item.value} />
                       </div>
                     </div>

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -993,6 +993,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                       getSpanRoute={props.getSpanRoute}
                       variant="embedded"
                       projectId={props.projectId}
+                      onFilterByAttribute={
+                        handleFieldValueSelectWithServiceResolve
+                      }
                     />
                   );
                 }}

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

@@ -16,7 +16,6 @@ import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Link from "../../Link/Link";
 import OneUptimeDate from "../../../../Types/Date";
-import JSONFunctions from "../../../../Types/JSONFunctions";
 import SeverityBadge from "./SeverityBadge";
 import { JSONObject } from "../../../../Types/JSON";
 import API from "../../../Utils/API/API";
@@ -40,6 +39,18 @@ export interface LogDetailsPanelProps {
     | undefined;
   variant?: "floating" | "embedded";
   projectId?: ObjectID | undefined;
+  /*
+   * Called when the user clicks "filter by" on an attribute row. The key is
+   * the flat attribute key as stored in the data (e.g. `requestId`,
+   * `oneuptime.service.id`); the value is the raw value. Wires into the
+   * same path as picking a value from the search bar autocomplete.
+   */
+  onFilterByAttribute?: ((key: string, value: string) => void) | undefined;
+}
+
+interface AttributeEntry {
+  key: string;
+  value: string;
 }
 
 interface PreparedBody {
@@ -120,20 +131,42 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
     return prepareBody(props.log.body?.toString());
   }, [props.log.body]);
 
-  const prettyAttributes: string | null = useMemo(() => {
-    if (!props.log.attributes) {
-      return null;
+  const attributeEntries: Array<AttributeEntry> = useMemo(() => {
+    const raw: Record<string, unknown> | undefined = props.log.attributes as
+      | Record<string, unknown>
+      | undefined;
+
+    if (!raw) {
+      return [];
     }
 
-    try {
-      const normalized: Record<string, unknown> = JSONFunctions.unflattenObject(
-        props.log.attributes || {},
-      );
-      return JSON.stringify(normalized, null, 2);
-    } catch {
+    return Object.keys(raw)
+      .sort((left: string, right: string): number => {
+        return left.localeCompare(right);
+      })
+      .map((key: string): AttributeEntry => {
+        const rawValue: unknown = raw[key];
+        const value: string =
+          rawValue === null || rawValue === undefined
+            ? ""
+            : typeof rawValue === "string"
+              ? rawValue
+              : JSON.stringify(rawValue);
+        return { key, value };
+      });
+  }, [props.log.attributes]);
+
+  const attributesAsJson: string | null = useMemo(() => {
+    if (attributeEntries.length === 0) {
       return null;
     }
-  }, [props.log.attributes]);
+
+    const flat: Record<string, string> = {};
+    for (const entry of attributeEntries) {
+      flat[entry.key] = entry.value;
+    }
+    return JSON.stringify(flat, null, 2);
+  }, [attributeEntries]);
 
   const traceId: string = props.log.traceId?.toString() || "";
   const spanId: string = props.log.spanId?.toString() || "";
@@ -486,22 +519,75 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
             </section>
           )}
 
-          {prettyAttributes && (
+          {attributeEntries.length > 0 && (
             <section className="space-y-3">
               <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
                 <span>Attributes</span>
-                <CopyTextButton
-                  textToBeCopied={prettyAttributes}
-                  size="xs"
-                  variant="ghost"
-                  iconOnly={false}
-                  title="Copy attributes"
-                />
+                {attributesAsJson && (
+                  <CopyTextButton
+                    textToBeCopied={attributesAsJson}
+                    size="xs"
+                    variant="ghost"
+                    iconOnly={false}
+                    title="Copy attributes as JSON"
+                  />
+                )}
               </header>
-              <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
-                <pre className="max-h-72 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-gray-800">
-                  {prettyAttributes}
-                </pre>
+              <div
+                className={`max-h-80 overflow-auto rounded-lg border ${surfaceCardClass}`}
+              >
+                <ul className="divide-y divide-gray-200">
+                  {attributeEntries.map((entry: AttributeEntry) => {
+                    return (
+                      <li
+                        key={entry.key}
+                        className="group flex items-start gap-3 px-3 py-2 hover:bg-white"
+                      >
+                        <span
+                          className="w-56 flex-none truncate font-mono text-[12px] text-gray-500"
+                          title={entry.key}
+                        >
+                          {entry.key}
+                        </span>
+                        <span
+                          className="min-w-0 flex-1 break-all font-mono text-[12px] text-gray-800"
+                          title={entry.value}
+                        >
+                          {entry.value || (
+                            <span className="italic text-gray-400">empty</span>
+                          )}
+                        </span>
+                        <div className="flex flex-none items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+                          {props.onFilterByAttribute && entry.value && (
+                            <button
+                              type="button"
+                              className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
+                              title={`Filter by ${entry.key}: ${entry.value}`}
+                              onClick={() => {
+                                props.onFilterByAttribute!(
+                                  entry.key,
+                                  entry.value,
+                                );
+                              }}
+                            >
+                              <Icon
+                                icon={IconProp.Filter}
+                                className="h-3.5 w-3.5"
+                              />
+                            </button>
+                          )}
+                          <CopyTextButton
+                            textToBeCopied={entry.value}
+                            size="xs"
+                            variant="ghost"
+                            iconOnly={true}
+                            title={`Copy ${entry.key}`}
+                          />
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
               </div>
             </section>
           )}