@oneuptime/common 10.0.94 → 10.0.97

package/Tests/Server/Utils/AnalyticsDatabase/StatementGenerator.test.ts

@@ -13,6 +13,13 @@ import AnalyticsTableEngine from "../../../../Types/AnalyticsDatabase/AnalyticsT
 import AnalyticsTableColumn from "../../../../Types/AnalyticsDatabase/TableColumn";
 import TableColumnType from "../../../../Types/AnalyticsDatabase/TableColumnType";
 import OneUptimeDate from "../../../../Types/Date";
+import EqualTo from "../../../../Types/BaseDatabase/EqualTo";
+import NotEqual from "../../../../Types/BaseDatabase/NotEqual";
+import IsNull from "../../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../../Types/BaseDatabase/NotNull";
+import GreaterThan from "../../../../Types/BaseDatabase/GreaterThan";
+import Search from "../../../../Types/BaseDatabase/Search";
+import StartsWith from "../../../../Types/BaseDatabase/StartsWith";
 
 function expectStatement(actual: Statement, expected: Statement): void {
   expect(actual.query).toBe(expected.query);
@@ -179,6 +186,144 @@ describe("StatementGenerator", () => {
         p3: OneUptimeDate.toClickhouseDateTime(date),
       });
     });
+
+    describe("MapStringString columns", () => {
+      class MapModel extends AnalyticsBaseModel {
+        public constructor() {
+          super({
+            tableName: "<map-table>",
+            singularName: "<singular>",
+            pluralName: "<plural>",
+            tableColumns: [
+              new AnalyticsTableColumn({
+                key: "_id",
+                title: "<title>",
+                description: "<description>",
+                required: true,
+                type: TableColumnType.ObjectID,
+              }),
+              new AnalyticsTableColumn({
+                key: "attributes",
+                title: "<title>",
+                description: "<description>",
+                required: true,
+                defaultValue: {},
+                type: TableColumnType.MapStringString,
+              }),
+            ],
+            crudApiPath: new Route("route"),
+            primaryKeys: ["_id"],
+            sortKeys: ["_id"],
+            partitionKey: "_id",
+            tableEngine: AnalyticsTableEngine.MergeTree,
+          });
+        }
+      }
+
+      let mapGenerator: StatementGenerator<MapModel>;
+      beforeEach(() => {
+        mapGenerator = new StatementGenerator<MapModel>({
+          modelType: MapModel,
+          database: ClickhouseAppInstance,
+        });
+      });
+
+      test("uses direct map subscript for bare-value equality", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: "uuid-123" },
+        } as any);
+        /*
+         * Programmatic callers pass canonical keys, so bare-value
+         * equality compiles to `attributes['k'] = v` — an O(1) Map
+         * subscript that the planner can push into PREWHERE. The
+         * slower case-insensitive arrayExists form is reserved for
+         * the user-typed Search/StartsWith/EndsWith/NotContains
+         * operators below.
+         */
+        expect(statement.query).toBe(
+          "AND {p0:Identifier}[{p1:String}] = {p2:String}",
+        );
+        expect(statement.query_params).toStrictEqual({
+          p0: "attributes",
+          p1: "requestId",
+          p2: "uuid-123",
+        });
+      });
+
+      test("uses direct map subscript for EqualTo wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new EqualTo("uuid-123") },
+        } as any);
+        expect(statement.query).toBe(
+          "AND {p0:Identifier}[{p1:String}] = {p2:String}",
+        );
+        expect(statement.query_params).toStrictEqual({
+          p0: "attributes",
+          p1: "requestId",
+          p2: "uuid-123",
+        });
+      });
+
+      test("uses direct map subscript for NotEqual wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new NotEqual("uuid-123") },
+        } as any);
+        expect(statement.query).toBe(
+          "AND {p0:Identifier}[{p1:String}] != {p2:String}",
+        );
+      });
+
+      test("uses mapContains+subscript for IsNull wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new IsNull() },
+        } as any);
+        expect(statement.query).toBe(
+          "AND ((NOT mapContains({p0:Identifier}, {p1:String})) OR {p2:Identifier}[{p3:String}] = '')",
+        );
+      });
+
+      test("uses mapContains+subscript for NotNull wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new NotNull() },
+        } as any);
+        expect(statement.query).toBe(
+          "AND mapContains({p0:Identifier}, {p1:String}) AND {p2:Identifier}[{p3:String}] != ''",
+        );
+      });
+
+      test("uses direct map subscript for numeric GreaterThan wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { httpStatus: new GreaterThan(500) },
+        } as any);
+        expect(statement.query).toBe(
+          "AND toFloat64OrNull({p0:Identifier}[{p1:String}]) > {p2:Int32}",
+        );
+      });
+
+      test("keeps case-insensitive arrayExists for Search wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new Search("uuid") },
+        } as any);
+        /*
+         * Search comes from the user-typed search bar — keep the
+         * case-insensitive ILIKE form so the user doesn't have to
+         * remember whether the stored key is `requestId` or
+         * `requestid`.
+         */
+        expect(statement.query).toContain("arrayExists");
+        expect(statement.query).toContain("lowerUTF8");
+        expect(statement.query).toContain("ILIKE");
+      });
+
+      test("keeps case-insensitive arrayExists for StartsWith wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new StartsWith("uuid") },
+        } as any);
+        expect(statement.query).toContain("arrayExists");
+        expect(statement.query).toContain("lowerUTF8");
+        expect(statement.query).toContain("ILIKE");
+      });
+    });
   });
 
   describe("toSelectStatement", () => {

package/Types/Metrics/MetricQueryConfigData.ts

@@ -20,4 +20,13 @@ export default interface MetricQueryConfigData {
   yAxisValueFormatter?: ((value: number) => string) | undefined;
   warningThreshold?: number | undefined;
   criticalThreshold?: number | undefined;
+  /*
+   * When true, the post-aggregation series points are transformed into
+   * a per-second rate of change: `(value - previousValue) / Δt`. This is
+   * the right view for OTel cumulative counters (e.g. `system.disk.io`,
+   * `system.network.io`) — without it, the chart plots monotonically
+   * growing bytes-since-process-start. Negative deltas (counter resets
+   * on agent restart) are clamped to 0.
+   */
+  transformAsRate?: boolean | undefined;
 }

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
+                      }
                     />
                   );
                 }}