Merge pull request #4280 from systeminit/jobelenus/wip-pinia-obs

Replace auto-instrumentation with custom instrumentation

app/auth-portal/src/store/feature_flags.store.ts

@@ -5,6 +5,8 @@ import posthog from "posthog-js";
 
 export const useFeatureFlagsStore = () => {
   return addStoreHooks(
+    undefined,
+    undefined,
     defineStore("feature-flags", {
       state: () => ({
         OSS_RELEASE: true, // todo: cleanup consumption of this flag

app/auth-portal/src/store/onboarding.store.ts

@@ -9,6 +9,8 @@ const REFRESH_FEATURE_FLAG_FREQUENCY = 10000;
 
 export const useOnboardingStore = () => {
   return addStoreHooks(
+    undefined,
+    undefined,
     defineStore("onboarding", {
       state: () => {
         const authStore = useAuthStore();

app/web/src/main.ts

@@ -1,7 +1,6 @@
 // Example filename: tracing.js
 import { Buffer } from "buffer";
 import { HoneycombWebSDK } from "@honeycombio/opentelemetry-web";
-import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
 import { DocumentLoadInstrumentation } from "@opentelemetry/instrumentation-document-load";
 import { UserInteractionInstrumentation } from "@opentelemetry/instrumentation-user-interaction";
 import { LongTaskInstrumentation } from "@opentelemetry/instrumentation-long-task";
@@ -26,33 +25,15 @@ import store from "./store";
 
 const { envVariables } = getProjectEnvVariables();
 
-const backendHosts = import.meta.env.VITE_BACKEND_HOSTS
-  ? JSON.parse(import.meta.env.VITE_BACKEND_HOSTS).map(
-      (r: string) => new RegExp(r),
-    )
-  : [];
-
 const otelEndpoint =
   envVariables.VITE_OTEL_EXPORTER_OTLP_ENDPOINT ??
   import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT;
 const sdk = new HoneycombWebSDK({
-  endpoint: `${otelEndpoint}/v1/traces`,
+  endpoint: `${otelEndpoint}:4318/v1/traces`,
   serviceName: "si-vue",
   skipOptionsValidation: true,
   instrumentations: [
-    getWebAutoInstrumentations({
-      // load custom configuration for xml-http-request instrumentation
-      "@opentelemetry/instrumentation-xml-http-request": {
-        propagateTraceHeaderCorsUrls: backendHosts,
-        ignoreNetworkEvents: true,
-        ignoreUrls: [/^https:\/\/e\.systeminit\.com/],
-      },
-      "@opentelemetry/instrumentation-fetch": {
-        propagateTraceHeaderCorsUrls: backendHosts,
-        ignoreNetworkEvents: true,
-        ignoreUrls: [/^https:\/\/e\.systeminit\.com/],
-      },
-    }), // add automatic instrumentation
+    // we're not auto-instrumenting XMLHttpRequest, we're instrumenting that in pinia_tools.APIRequest
     new DocumentLoadInstrumentation(),
     new UserInteractionInstrumentation({
       shouldPreventSpanCreation: (eventType, element, span) => {

app/web/src/store/actions.store.ts

@@ -119,6 +119,8 @@ export const useActionsStore = () => {
   const changeSetId = changeSetsStore.selectedChangeSetId;
 
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/actions`,
       {

app/web/src/store/asset.store.ts

@@ -94,9 +94,18 @@ export const useAssetStore = () => {
 
   let assetSaveDebouncer: ReturnType<typeof keyedDebouncer> | undefined;
 
-  const API_PREFIX = `v2/workspaces/${workspaceId}/change-sets/${selectedChangeSetId}/schema-variants`;
+  const API_PREFIX = [
+    "v2",
+    "workspaces",
+    { workspaceId },
+    "change-sets",
+    { selectedChangeSetId },
+    "schema-variants",
+  ];
 
   return addStoreHooks(
+    workspaceId,
+    selectedChangeSetId,
     defineStore(`ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/asset`, {
       state: () => ({
         variantList: [] as SchemaVariant[],
@@ -437,7 +446,7 @@ export const useAssetStore = () => {
 
         async LOAD_SCHEMA_VARIANT_LIST() {
           return new ApiRequest<SchemaVariant[], Visibility>({
-            url: `${API_PREFIX}`,
+            url: API_PREFIX,
             params: { ...visibility },
             onSuccess: (response) => {
               this.variantList = response;
@@ -455,7 +464,7 @@ export const useAssetStore = () => {
 
           return new ApiRequest<SchemaVariant>({
             method: "post",
-            url: `${API_PREFIX}/${id}`,
+            url: API_PREFIX.concat([id]),
             keyRequestStatusBy: id,
             onSuccess: (variant) => {
               const savedAssetIdx = this.variantList.findIndex(
@@ -475,7 +484,7 @@ export const useAssetStore = () => {
 
           return new ApiRequest<SchemaVariant>({
             method: "delete",
-            url: `${API_PREFIX}/${id}`,
+            url: API_PREFIX.concat([id]),
             keyRequestStatusBy: id,
             params: {
               // ...visibility,

app/web/src/store/auth.store.ts

@@ -101,14 +101,14 @@ export const useAuthStore = defineStore("auth", {
 
     async CHECK_FIRST_MODAL(userPk: string) {
       return new AuthApiRequest<boolean>({
-        url: `/users/${userPk}/firstTimeModal`,
+        url: ["users", { userPk }, "firstTimeModal"],
       });
     },
 
     async DISMISS_FIRST_TIME_MODAL(userPk: string) {
       return new AuthApiRequest<boolean>({
         method: "post",
-        url: `/users/${userPk}/dismissFirstTimeModal`,
+        url: ["users", { userPk }, "dismissFirstTimeModal"],
       });
     },
 

app/web/src/store/change_sets.store.ts

@@ -37,6 +37,8 @@ export function useChangeSetsStore() {
   const workspacePk = workspacesStore.selectedWorkspacePk;
 
   return addStoreHooks(
+    workspacePk,
+    undefined,
     defineStore(`w${workspacePk || "NONE"}/change-sets`, {
       state: () => ({
         headChangeSetId: null as ChangeSetId | null,

app/web/src/store/component_attributes.store.ts

@@ -87,6 +87,8 @@ export const useComponentAttributesStore = (componentId: ComponentId) => {
   const workspaceId = workspacesStore.selectedWorkspacePk;
 
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${
         workspaceId || "NONE"

app/web/src/store/components.store.ts

@@ -242,6 +242,8 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
   };
 
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/components`,
       {
@@ -784,7 +786,14 @@ export const useComponentsStore = (forceChangeSetId?: ChangeSetId) => {
 
           async FETCH_AVAILABLE_SCHEMAS() {
             return new ApiRequest<Array<SchemaVariant>>({
-              url: `v2/workspaces/${workspaceId}/change-sets/${changeSetId}/schema-variants`,
+              url: [
+                "v2",
+                "workspaces",
+                { workspaceId },
+                "change-sets",
+                { changeSetId },
+                "schema-variants",
+              ],
               params: {
                 ...visibilityParams,
               },

app/web/src/store/counter.store.ts

@@ -5,6 +5,8 @@ import { watch } from "vue";
 import { addStoreHooks } from "@si/vue-lib/pinia";
 
 export const useCounterStore = addStoreHooks(
+  "",
+  undefined,
   defineStore("counter", {
     state: () => ({
       counter: 20,
@@ -42,6 +44,8 @@ export const useCounterStore = addStoreHooks(
 );
 
 export const useCounterStore2 = addStoreHooks(
+  "",
+  undefined,
   defineStore("indirect-counter", {
     state: () => ({
       foo: 1,

app/web/src/store/feature_flags.store.ts

@@ -19,6 +19,8 @@ const PH_TO_STORE_FLAG_LOOKUP = _.invert(FLAG_MAPPING) as Record<
 
 export function useFeatureFlagsStore() {
   return addStoreHooks(
+    undefined,
+    undefined,
     defineStore("feature-flags", {
       // all flags default to false
       state: () => _.mapValues(FLAG_MAPPING, () => false),

app/web/src/store/func/funcs.store.ts

@@ -56,7 +56,8 @@ export interface DeleteFuncResponse {
 export const useFuncStore = () => {
   const componentsStore = useComponentsStore();
   const changeSetsStore = useChangeSetsStore();
-  const selectedChangeSetId = changeSetsStore.selectedChangeSet?.id;
+  const selectedChangeSetId: string | undefined =
+    changeSetsStore.selectedChangeSet?.id;
 
   // TODO(nick): we need to allow for empty visibility here. Temporarily send down "nil" to mean that we want the
   // query to find the default change set.
@@ -108,9 +109,18 @@ export const useFuncStore = () => {
     };
   };
 
-  const API_PREFIX = `v2/workspaces/${workspaceId}/change-sets/${selectedChangeSetId}/funcs`;
+  const API_PREFIX = [
+    "v2",
+    "workspaces",
+    { workspaceId },
+    "change-sets",
+    { selectedChangeSetId },
+    "funcs",
+  ];
 
   return addStoreHooks(
+    workspaceId,
+    selectedChangeSetId,
     defineStore(`ws${workspaceId || "NONE"}/cs${selectedChangeSetId}/funcs`, {
       state: () => ({
         // this powers the list

app/web/src/store/func_runs.store.ts

@@ -137,6 +137,8 @@ export const useFuncRunsStore = () => {
   const API_PREFIX = `v2/workspaces/${workspaceId}/change-sets/${changeSetId}/funcs/runs`;
 
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(`ws${workspaceId || "NONE"}/func_runs`, {
       state: () => ({
         funcRuns: {} as Record<FuncRunId, FuncRun>,

app/web/src/store/module.store.ts

@@ -126,7 +126,18 @@ export const useModuleStore = () => {
   const workspacesStore = useWorkspacesStore();
   const workspaceId = workspacesStore.selectedWorkspacePk;
 
+  const API_PREFIX = [
+    "v2",
+    "workspaces",
+    { workspaceId },
+    "change-sets",
+    { changeSetId },
+    "modules",
+  ];
+
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/modules`,
       {
@@ -216,7 +227,7 @@ export const useModuleStore = () => {
               },
               Visibility
             >({
-              url: `v2/workspaces/${workspaceId}/change-sets/${changeSetId}/modules/sync`,
+              url: API_PREFIX.concat(["sync"]),
               params: { ...visibility },
               onSuccess: (response) => {
                 this.upgradeableModules = response.upgradeable;
@@ -231,7 +242,7 @@ export const useModuleStore = () => {
           async CONTRIBUTE(request: ModuleContributeRequest) {
             return new ApiRequest({
               method: "post",
-              url: `v2/workspaces/${workspaceId}/change-sets/${changeSetId}/modules/contribute`,
+              url: API_PREFIX.concat(["contribute"]),
               params: {
                 name: request.name,
                 version: request.version,

app/web/src/store/presence.store.ts

@@ -50,6 +50,8 @@ export const usePresenceStore = () => {
   const changeSetsStore = useChangeSetsStore();
 
   return addStoreHooks(
+    workspaceId,
+    undefined,
     defineStore(`ws${workspaceId}/presence`, {
       state: () => ({
         x: null as number | null,

app/web/src/store/qualifications.store.ts

@@ -27,6 +27,8 @@ export const useQualificationsStore = () => {
   const workspacesStore = useWorkspacesStore();
   const workspaceId = workspacesStore.selectedWorkspacePk;
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/qualifications`,
       {

app/web/src/store/secrets.store.ts

@@ -119,6 +119,8 @@ export function useSecretsStore() {
   };
 
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/secrets`,
       {

app/web/src/store/status.store.ts

@@ -112,6 +112,8 @@ export const useStatusStore = (forceChangeSetId?: ChangeSetId) => {
   const toast = useToast();
 
   return addStoreHooks(
+    workspaceId,
+    changeSetId,
     defineStore(
       `ws${workspaceId || "NONE"}/cs${changeSetId || "NONE"}/status`,
       {

app/web/src/store/viz.store.ts

@@ -48,6 +48,8 @@ export interface VizResponse {
 }
 
 export const useVizStore = addStoreHooks(
+  undefined,
+  undefined,
   // TODO look into whether this ID on the store needs to be more dynamic
   defineStore(`ws/viz`, () => {
     const changeSetStore = useChangeSetsStore();

app/web/src/store/workspaces.store.ts

@@ -47,6 +47,8 @@ const LOCAL_STORAGE_LAST_WORKSPACE_PK = "si-last-workspace-pk";
 // in a different store.
 export const useWorkspacesStore = () => {
   return addStoreHooks(
+    undefined,
+    undefined,
     defineStore("workspaces", {
       state: () => ({
         workspacesByPk: {} as Record<WorkspacePk, AuthApiWorkspace>,

dev/docker-compose.platform.yml

@@ -149,7 +149,7 @@ services:
     image: systeminit/otelcol:stable
     # If you'd like to ship to honeycomb from your local machine, you need these two variables in the otelcol
     #environment:
-    #  - "SI_OTEL_COL__HONEYCOMB_API_KEY=<insert key>"
+    #  - "SI_OTEL_COL__HONEYCOMB_API_KEY=SOE2nLJba2Fe1xU0pR3zMG"
     #  - "SI_OTEL_COL__CONFIG_PATH=/etc/otelcol/honeycomb-config.yaml"
     ports:
       - "4317:4317"