MLflow UI sync (mlflow#18945)

Signed-off-by: daniel-seong_data <[email protected]>
Signed-off-by: Daniel Seong <[email protected]>
Co-authored-by: MLflow App <mlflow-app[bot]@users.noreply.github.com>
Co-authored-by: Daniel Seong <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 4 people

mlflow/server/js/src/common/utils/FeatureUtils.ts

@@ -42,6 +42,20 @@ export const shouldEnableGraphQLSampledMetrics = () => false;
 export const shouldEnableGraphQLModelVersionsForRunDetails = () => false;
 export const shouldRerunExperimentUISeeding = () => false;
 
+/**
+ * Feature flag to enable Scorers UI tab in experiment page
+ */
+export const enableScorersUI = () => {
+  return false;
+};
+
+/**
+ * Determines if running scorers feature is enabled (ability to run LLM scorers on sample traces)
+ */
+export const isRunningScorersEnabled = () => {
+  return false;
+};
+
 /**
  * Determines if experiment kind inference is enabled.
  */

mlflow/server/js/src/common/utils/FetchUtils.ts

@@ -8,9 +8,10 @@
 import cookie from 'cookie';
 import JsonBigInt from 'json-bigint';
 import yaml from 'js-yaml';
-import { pickBy } from 'lodash';
+import { isNil, pickBy } from 'lodash';
 import { ErrorWrapper } from './ErrorWrapper';
 import { matchPredefinedError } from '@databricks/web-shared/errors';
+import { matchPredefinedErrorFromResponse } from '@databricks/web-shared/errors';
 
 export const HTTPMethods = {
   GET: 'GET',
@@ -452,11 +453,18 @@ function serializeRequestBody(payload: any | FormData | Blob) {
     : JSON.stringify(payload);
 }
 
+// Helper method to make a request to the backend.
 export const fetchAPI = async (url: string, method: 'POST' | 'GET' | 'PATCH' | 'DELETE' = 'GET', body?: any) => {
-  const response = await fetch(url, {
+  // eslint-disable-next-line no-restricted-globals
+  const fetchFn = fetch;
+  const headers = {
+    ...(body ? { 'Content-Type': 'application/json' } : {}),
+    ...getDefaultHeaders(document.cookie),
+  };
+  const response = await fetchFn(url, {
     method,
     body: serializeRequestBody(body),
-    headers: body ? { 'Content-Type': 'application/json' } : {},
+    headers,
   });
   if (!response.ok) {
     const predefinedError = matchPredefinedError(response);
@@ -473,3 +481,21 @@ export const fetchAPI = async (url: string, method: 'POST' | 'GET' | 'PATCH' | '
   }
   return response.json();
 };
+/**
+ * Wrapper around fetch that throws on non-OK responses
+ * Returns the Response object for further processing (.json(), .text(), etc.)
+ *
+ * @param input - URL or Request object
+ * @param options - Fetch options
+ * @returns Response object if successful
+ * @throws PredefinedError (NotFoundError, PermissionError, etc.) if response is not OK
+ */
+export async function fetchOrFail(input: RequestInfo | URL, options?: RequestInit): Promise<Response> {
+  // eslint-disable-next-line no-restricted-globals -- See go/spog-fetch
+  const response = await fetch(input, options);
+  if (!response.ok) {
+    const error = matchPredefinedErrorFromResponse(response);
+    throw error;
+  }
+  return response;
+}

mlflow/server/js/src/experiment-tracking/components/MetricsPlotPanel.tsx

@@ -26,13 +26,10 @@ import {
 } from '../utils/MetricsUtils';
 import type { Location, NavigateFunction } from '../../common/utils/RoutingUtils';
 import { RunsChartsCard } from './runs-charts/components/cards/RunsChartsCard';
-import {
-  RunsChartsCardConfig,
-  RunsChartsLineCardConfig,
-  RunsChartsLineChartYAxisType,
-  RunsChartType,
-} from './runs-charts/runs-charts.types';
-import { RunsChartsRunData, RunsChartsLineChartXAxisType } from './runs-charts/components/RunsCharts.common';
+import type { RunsChartsLineCardConfig } from './runs-charts/runs-charts.types';
+import { RunsChartsCardConfig, RunsChartsLineChartYAxisType, RunsChartType } from './runs-charts/runs-charts.types';
+import type { RunsChartsRunData } from './runs-charts/components/RunsCharts.common';
+import { RunsChartsLineChartXAxisType } from './runs-charts/components/RunsCharts.common';
 import { RunsChartsTooltipWrapper } from './runs-charts/hooks/useRunsChartsTooltip';
 import { RunsChartsTooltipBody } from './runs-charts/components/RunsChartsTooltipBody';
 import { RunsChartsFullScreenModal } from './runs-charts/components/RunsChartsFullScreenModal';