@oneuptime/common 10.8.2 → 11.0.1

package/UI/Components/ImportExport/ImportModelsModal.tsx

@@ -0,0 +1,239 @@
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import CodeType from "../../../Types/Code/CodeType";
+import { JSONObject } from "../../../Types/JSON";
+import API from "../../Utils/API/API";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import ModelImportExportUtil, {
+  ImportFailure,
+  ImportResult,
+} from "../../Utils/ModelImportExport";
+import Alert, { AlertType } from "../Alerts/Alert";
+import { ButtonStyleType } from "../Button/Button";
+import CodeEditor from "../CodeEditor/CodeEditor";
+import Modal, { ModalWidth } from "../Modal/Modal";
+import ProgressBar from "../ProgressBar/ProgressBar";
+import React, { ReactElement, useState } from "react";
+
+export interface ComponentProps<TBaseModel extends BaseModel> {
+  modelType: { new (): TBaseModel };
+  onClose: () => void;
+  onImportComplete: (result: ImportResult) => void;
+  modelAPI?: typeof ModelAPI | undefined;
+}
+
+enum ImportPhase {
+  Edit = "Edit",
+  Importing = "Importing",
+  Done = "Done",
+}
+
+const ImportModelsModal: <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+) => ReactElement = <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+): ReactElement => {
+  const model: TBaseModel = new props.modelType();
+  const singularName: string = model.singularName || "Resource";
+  const pluralName: string = model.pluralName || "Resources";
+
+  const [phase, setPhase] = useState<ImportPhase>(ImportPhase.Edit);
+  const [fileText, setFileText] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [completedCount, setCompletedCount] = useState<number>(0);
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [result, setResult] = useState<ImportResult | null>(null);
+
+  type OnFileSelectedFunction = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
+
+  const onFileSelected: OnFileSelectedFunction = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const file: File | undefined = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    const reader: FileReader = new FileReader();
+
+    reader.onload = (): void => {
+      setFileText((reader.result as string) || "");
+      setError("");
+    };
+
+    reader.onerror = (): void => {
+      setError("Could not read the selected file. Please try again.");
+    };
+
+    reader.readAsText(file);
+
+    // allow re-selecting the same file after editing.
+    event.target.value = "";
+  };
+
+  type StartImportFunction = () => Promise<void>;
+
+  const startImport: StartImportFunction = async (): Promise<void> => {
+    setError("");
+
+    let itemJsons: Array<JSONObject> = [];
+
+    try {
+      itemJsons = ModelImportExportUtil.parseImportFileText({
+        modelType: props.modelType,
+        fileText: fileText,
+      });
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+      return;
+    }
+
+    setPhase(ImportPhase.Importing);
+    setCompletedCount(0);
+    setTotalCount(itemJsons.length);
+
+    try {
+      const importResult: ImportResult =
+        await ModelImportExportUtil.importItems({
+          modelType: props.modelType,
+          itemJsons: itemJsons,
+          modelAPI: props.modelAPI,
+          onProgress: (completed: number, total: number) => {
+            setCompletedCount(completed);
+            setTotalCount(total);
+          },
+        });
+
+      setResult(importResult);
+      setPhase(ImportPhase.Done);
+      props.onImportComplete(importResult);
+    } catch (err) {
+      // never trap the user in the importing phase - return to the editor.
+      setError(API.getFriendlyMessage(err));
+      setPhase(ImportPhase.Edit);
+    }
+  };
+
+  if (phase === ImportPhase.Importing) {
+    return (
+      <Modal
+        title={`Importing ${pluralName}`}
+        description={`Please wait while your ${pluralName.toLowerCase()} are being imported.`}
+        isBodyLoading={false}
+        onSubmit={() => {}}
+        disableSubmitButton={true}
+        submitButtonText={"Importing..."}
+      >
+        <div className="mt-5 mb-5">
+          <ProgressBar
+            count={completedCount}
+            totalCount={totalCount}
+            suffix={pluralName}
+          />
+        </div>
+      </Modal>
+    );
+  }
+
+  if (phase === ImportPhase.Done && result) {
+    return (
+      <Modal
+        title={`Import Complete`}
+        onSubmit={() => {
+          props.onClose();
+        }}
+        submitButtonText={"Close"}
+        submitButtonStyleType={ButtonStyleType.NORMAL}
+      >
+        <div className="mt-5 mb-5 space-y-3">
+          {result.successCount > 0 ? (
+            <Alert
+              type={AlertType.SUCCESS}
+              strongTitle={`${result.successCount} ${
+                result.successCount === 1 ? singularName : pluralName
+              } imported successfully.`}
+            />
+          ) : (
+            <></>
+          )}
+
+          {result.failures.length > 0 ? (
+            <div>
+              <Alert
+                type={AlertType.DANGER}
+                strongTitle={`${result.failures.length} ${
+                  result.failures.length === 1 ? singularName : pluralName
+                } could not be imported.`}
+              />
+              <ul className="mt-3 list-disc pl-5 text-sm text-gray-600">
+                {result.failures.map(
+                  (failure: ImportFailure, index: number) => {
+                    return (
+                      <li key={index} className="mt-1">
+                        <span className="font-medium">{failure.itemName}</span>:{" "}
+                        {failure.errorMessage}
+                      </li>
+                    );
+                  },
+                )}
+              </ul>
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      title={`Import ${pluralName}`}
+      description={`Upload a ${singularName.toLowerCase()} JSON export file, or paste its contents below. New ${pluralName.toLowerCase()} will be created in this project. Related resources (like owners, labels, or other linked resources) are not part of export files, and references to resources from another project may need to be re-selected after import.`}
+      modalWidth={ModalWidth.Large}
+      onClose={props.onClose}
+      onSubmit={async () => {
+        await startImport();
+      }}
+      disableSubmitButton={!fileText.trim()}
+      submitButtonText={`Import`}
+      error={error || undefined}
+    >
+      <div className="mt-5 mb-5">
+        <label
+          htmlFor="import-file-input"
+          className="block text-sm font-medium text-gray-700"
+        >
+          Select export file
+        </label>
+        <input
+          id="import-file-input"
+          data-testid="import-file-input"
+          type="file"
+          accept=".json,application/json"
+          onChange={onFileSelected}
+          className="mt-2 block w-full text-sm text-gray-600 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:py-2 file:px-4 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
+        />
+
+        <div className="mt-4">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Or paste the export JSON
+          </label>
+          <CodeEditor
+            type={CodeType.JSON}
+            value={fileText}
+            onChange={(value: string) => {
+              setFileText(value);
+              setError("");
+            }}
+            placeholder={`Paste your ${singularName.toLowerCase()} export JSON here.`}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ImportModelsModal;

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -466,7 +466,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
          * Logs without a service.name are tagged with the projectId
          * (ServiceType.Unknown) and have no Service row. Register a
          * synthetic "Unknown Service" keyed by the projectId so the
-         * serviceId -> name resolution and the serviceId facet render
+         * primaryEntityId -> name resolution and the service facet render
          * "Unknown Service" instead of a raw id. Harmless when no logs
          * are unattributed — nothing resolves against it.
          */
@@ -631,17 +631,17 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
 
     // Resolve human-readable service name to UUID if needed
     if (
-      queryFilter["serviceId"] &&
-      typeof queryFilter["serviceId"] === "string"
+      queryFilter["primaryEntityId"] &&
+      typeof queryFilter["primaryEntityId"] === "string"
     ) {
-      const serviceName: string = queryFilter["serviceId"] as string;
+      const serviceName: string = queryFilter["primaryEntityId"] as string;
       const resolvedId: string | undefined = resolveServiceNameToId(
         serviceName,
         serviceMap,
       );
 
       if (resolvedId) {
-        queryFilter["serviceId"] = resolvedId;
+        queryFilter["primaryEntityId"] = resolvedId;
       }
     }
 
@@ -824,7 +824,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
 
     return props.activeFilters.map((filter: ActiveFilter): ActiveFilter => {
-      if (filter.facetKey === "serviceId" && serviceMap[filter.value]) {
+      if (filter.facetKey === "primaryEntityId" && serviceMap[filter.value]) {
         const service: Service | undefined = serviceMap[filter.value];
         return {
           ...filter,
@@ -870,7 +870,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   ]);
 
   /*
-   * Replace serviceId UUIDs with human-readable names in value suggestions,
+   * Replace primaryEntityId UUIDs with human-readable names in value suggestions,
    * and merge in the lazily-fetched attribute value suggestions.
    * Must be before early returns to maintain consistent hook call order.
    */
@@ -889,8 +889,11 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         ...attributeValueSuggestions,
       };
 
-      if (suggestions["serviceId"] && Object.keys(serviceMap).length > 0) {
-        suggestions["serviceId"] = suggestions["serviceId"].map(
+      if (
+        suggestions["primaryEntityId"] &&
+        Object.keys(serviceMap).length > 0
+      ) {
+        suggestions["primaryEntityId"] = suggestions["primaryEntityId"].map(
           (id: string) => {
             const service: Service | undefined = serviceMap[id];
             return service?.name || id;

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

@@ -65,7 +65,7 @@ interface ContextLog {
   time: string;
   severity: string;
   body: string;
-  serviceId: string;
+  primaryEntityId: string;
 }
 
 const prepareBody: (body: string | undefined) => PreparedBody = (
@@ -106,7 +106,7 @@ function parseContextRow(row: JSONObject): ContextLog {
     time: String(row["time"] || ""),
     severity: String(row["severityText"] || "Unspecified"),
     body: String(row["body"] || ""),
-    serviceId: String(row["serviceId"] || ""),
+    primaryEntityId: String(row["primaryEntityId"] || ""),
   };
 }
 
@@ -121,9 +121,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
   const [contextLoaded, setContextLoaded] = useState<boolean>(false);
 
   const variant: "floating" | "embedded" = props.variant || "floating";
-  const serviceId: string = props.log.serviceId?.toString() || "";
-  const service: Service | undefined = props.serviceMap[serviceId];
-  const serviceName: string = service?.name || serviceId || "Unknown service";
+  const primaryEntityId: string = props.log.primaryEntityId?.toString() || "";
+  const service: Service | undefined = props.serviceMap[primaryEntityId];
+  const serviceName: string =
+    service?.name || primaryEntityId || "Unknown service";
   const serviceColor: string =
     (service?.serviceColor && service?.serviceColor.toString()) || "#64748b";
 
@@ -214,7 +215,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
   const loadContext: () => Promise<void> =
     useCallback(async (): Promise<void> => {
-      if (!props.projectId || !serviceId || !props.log.time) {
+      if (!props.projectId || !primaryEntityId || !props.log.time) {
         setContextError("Missing project or service information for context.");
         return;
       }
@@ -230,7 +231,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
             ),
             data: {
               logId: props.log.getColumnValue("_id")?.toString() || "",
-              serviceId: serviceId,
+              primaryEntityId: primaryEntityId,
               time: props.log.time
                 ? OneUptimeDate.toString(props.log.time)
                 : "",
@@ -260,7 +261,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
       } finally {
         setContextLoading(false);
       }
-    }, [props.projectId, serviceId, props.log]);
+    }, [props.projectId, primaryEntityId, props.log]);
 
   useEffect(() => {
     if (activeTab === "context" && !contextLoaded && !contextLoading) {
@@ -622,7 +623,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   time: props.log.time ? props.log.time.toString() : "",
                   severity: props.log.severityText?.toString() || "Unspecified",
                   body: props.log.body || "",
-                  serviceId: serviceId,
+                  primaryEntityId: primaryEntityId,
                 },
                 true,
               )}

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

@@ -398,7 +398,7 @@ function extractCurrentWord(value: string): string {
 const FIELD_ALIAS_MAP: Record<string, string> = {
   severity: "severityText",
   level: "severityText",
-  service: "serviceId",
+  service: "primaryEntityId",
   trace: "traceId",
   span: "spanId",
 };

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

@@ -85,7 +85,7 @@ const CHART_COLORS_MUTED: Array<string> = [
 
 const DIMENSION_OPTIONS: Array<{ value: string; label: string }> = [
   { value: "severityText", label: "Severity" },
-  { value: "serviceId", label: "Service" },
+  { value: "primaryEntityId", label: "Service" },
   { value: "traceId", label: "Trace ID" },
   { value: "spanId", label: "Span ID" },
 ];
@@ -372,7 +372,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
         }
 
         const serviceFilterValues: Set<string> | undefined =
-          props.appliedFacetFilters.get("serviceId");
+          props.appliedFacetFilters.get("primaryEntityId");
 
         if (serviceFilterValues && serviceFilterValues.size > 0) {
           (requestData as Record<string, unknown>)["serviceIds"] =

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

@@ -39,7 +39,7 @@ export interface LogsFacetSidebarProps {
 }
 
 const RESOURCE_FACET_KEYS: ReadonlySet<string> = new Set([
-  "serviceId",
+  "primaryEntityId",
   "hostId",
   "dockerHostId",
   "kubernetesClusterId",
@@ -146,7 +146,7 @@ function buildClusterDisplayMap(
 function getFacetTitle(key: string): string {
   const titleMap: Record<string, string> = {
     severityText: "Severity",
-    serviceId: "Service",
+    primaryEntityId: "Service",
     hostId: "Host",
     dockerHostId: "Docker Host",
     kubernetesClusterId: "Kubernetes Cluster",
@@ -187,7 +187,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   const facetKeys: Array<string> = useMemo(() => {
     const priorityKeys: Array<string> = [
       "severityText",
-      "serviceId",
+      "primaryEntityId",
       "hostId",
       "dockerHostId",
       "kubernetesClusterId",
@@ -280,7 +280,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
           let valueDisplayMap: Record<string, string> | undefined;
           let valueColorMap: Record<string, string> | undefined;
 
-          if (key === "serviceId") {
+          if (key === "primaryEntityId") {
             valueDisplayMap = serviceDisplayMap;
             valueColorMap = serviceColorMap;
           } else if (key === "hostId") {

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

@@ -233,10 +233,12 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
           <tbody className="divide-y divide-gray-100">
             {props.logs.map((log: Log, index: number) => {
               const rowId: string = resolveLogIdentifier(log, index);
-              const serviceId: string = log.serviceId?.toString() || "";
-              const service: Service | undefined = props.serviceMap[serviceId];
+              const primaryEntityId: string =
+                log.primaryEntityId?.toString() || "";
+              const service: Service | undefined =
+                props.serviceMap[primaryEntityId];
               const serviceName: string =
-                service?.name || serviceId || "Unknown";
+                service?.name || primaryEntityId || "Unknown";
               const serviceColor: string =
                 (service?.serviceColor && service?.serviceColor.toString()) ||
                 "#94a3b8";