Absolute URLs in Font Awesome CSS [BUG]

[danilopeixoto]

Willingness to contribute

Yes. I would be willing to contribute a fix for this bug with guidance from the MLflow community.

MLflow version

1.28.0

System information

• OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Ubuntu 20.04.4 LTS
• Python version: 3.8.0
• yarn version, if running the dev UI: No, installed by pip.

Describe the problem

Should the Font Awesome CSS use relative URLs?

CSS from Python package /js/build/:

Tracking information

No response

Code to reproduce issue

MLflow behind proxy with base_url different from /.

Stack trace

Other info / logs

No response

What component(s) does this bug affect?

• [ ] area/artifacts: Artifact stores and artifact logging
• [ ] area/build: Build and test infrastructure for MLflow
• [ ] area/docs: MLflow documentation pages
• [ ] area/examples: Example code
• [ ] area/model-registry: Model Registry service, APIs, and the fluent client calls for Model Registry
• [ ] area/models: MLmodel format, model serialization/deserialization, flavors
• [ ] area/pipelines: Pipelines, Pipeline APIs, Pipeline configs, Pipeline Templates
• [ ] area/projects: MLproject format, project running backends
• [ ] area/scoring: MLflow Model server, model deployment tools, Spark UDFs
• [ ] area/server-infra: MLflow Tracking server backend
• [ ] area/tracking: Tracking Service, tracking client APIs, autologging

What interface(s) does this bug affect?

• [X] area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev server
• [ ] area/docker: Docker use across MLflow's components, such as MLflow Projects and MLflow Models
• [ ] area/sqlalchemy: Use of SQLAlchemy in the Tracking Service or Model Registry
• [ ] area/windows: Windows support

What language(s) does this bug affect?

• [ ] language/r: R APIs and clients
• [ ] language/java: Java APIs and clients
• [ ] language/new: Proposals for new client languages

What integration(s) does this bug affect?

• [ ] integrations/azure: Azure and Azure ML integrations
• [ ] integrations/sagemaker: SageMaker integrations
• [ ] integrations/databricks: Databricks integrations

[harupy]

@danilopeixoto Thanks for reporting the issue. Could you provide code/repository/Dockerfile/docker-compose.yml that can reproduce the problem?

[danilopeixoto]

Hi @harupy,

Dockerfile

FROM python:3.8

RUN python3 -m pip install mlflow==1.28.0
RUN STATIC_DIR=$(python3 -c 'from mlflow.server import STATIC_DIR;print(STATIC_DIR)') && \
    echo $(cat ${STATIC_DIR}/static/css/main.*.css | tr ' ' '\n' | grep '/static')

Output

Step 3/3 : RUN STATIC_DIR=$(python3 -c 'from mlflow.server import STATIC_DIR;print(STATIC_DIR)') &&     echo $(cat ${STATIC_DIR}/static/css/main.*.css | tr ' ' '\n' | grep '/stati')
 ---> Running in 70f6580920a9
*/@font-face{font-family:FontAwesome;font-style:normal;font-weight:400;src:url(/static-files/static/media/fontawesome-webfont.8b43027f47b20503057d.eot);src:url(/static-files/static/media/fontawesome-webfont.8b43027f47b20503057d.eot?#iefix&v=4.7.0) format("embedded-opentype"),url(/static-files/static/media/fontawesome-webfont.20fd1704ea223900efa9.woff2) format("woff2"),url(/static-files/static/media/fontawesome-webfont.f691f37e57f04c152e23.woff) format("woff"),url(/static-files/static/media/fontawesome-webfont.1e59d2330b4c6deb84b3.ttf) format("truetype"),url(/static-files/static/media/fontawesome-webfont.c1e38fd9e0e74ba58f7a.svg#fontawesomeregular)

Are drawbacks on setting /static-files/static/media/ to ../media/?

[harupy]

@danilopeixoto I meant the Dockerfile/repository that can reproduce the error in this screenshot:

[danilopeixoto]

@harupy, this one:

Dockerfile

FROM python:3.8

RUN python3 -m pip install mlflow==1.28.0
EXPOSE 5000
CMD ["mlflow", "server", "--host", "0.0.0.0", "--static-prefix", "/test"]

Go to http://127.0.0.1:5000/test.

[harupy]

@danilopeixoto Thanks! I'll try to reproduce the issue.

[harupy]

@danilopeixoto I was able to reproduce the issue.

[danilopeixoto]

Thanks @harupy!

[harupy]

I investigated how we can solve this issue:

Option 1: Use relative URLs (proposed by @danilopeixoto):

diff --git a/mlflow/server/js/craco.config.js b/mlflow/server/js/craco.config.js
index 38e717c1c..cf5764863 100644
--- a/mlflow/server/js/craco.config.js
+++ b/mlflow/server/js/craco.config.js
@@ -73,7 +73,7 @@ function configureIframeCSSPublicPaths(config, env) {
           cssRule.use
             ?.filter((loaderConfig) => loaderConfig?.loader.match(/\/mini-css-extract-plugin\//))
             .forEach((loaderConfig) => {
-              let publicPath = '/static-files/';
+              let publicPath = '../../';
               // eslint-disable-next-line no-param-reassign
               loaderConfig.options = { publicPath };

• This might not be compatible with MLflow UI on Databricks. Needs investigation.

Option 2: Add a handler for /static-files/

diff --git a/mlflow/server/__init__.py b/mlflow/server/__init__.py
index 4718492a3..eaabc2fdd 100644
--- a/mlflow/server/__init__.py
+++ b/mlflow/server/__init__.py
@@ -67,6 +67,11 @@ def serve_static_file(path):
     return send_from_directory(STATIC_DIR, path)
 
 
[email protected]("/static-files/<path:path>")
+def serve_static_file_root(path):
+    return send_from_directory(STATIC_DIR, path)
+
+
 # Serve the index.html for the React App for all other routes.
 @app.route(_add_static_prefix("/"))
 def serve():

[mlflow-automation]

@danilopeixoto Any updates here? If you're working on a PR, please link it to this issue.

[danilopeixoto]

Hi @harupy,

I would proceed with Option 1:

• This would help other issues like #597 and #111.
• The other assets are already using relative URL. Font Awesome looks like an exception.

At same time, I don't have mechanism to debug it in the Databricks platform.

[ruial]

Is there any update on this issue? We are currently monkey patching our MLflow Docker image to get the icons back.

[simonlsk]

@harupy are there any news regarding the Databricks compatibility? @danilopeixoto are you opening a PR following Option 1?

[browser-bug]

Is there any update on this issue? We are currently monkey patching our MLflow Docker image to get the icons back.

@ruial Could you post or link a reference to the monkey patch you're applying to fix this issue? It could be something very similar to what we need. Thanks in advance.

[mauvilsa]

@ruial please do share the patch that you are doing. Or someone else please share a workaround.

[danilopeixoto]

Temporary patch applied to custom Dockerfile for MLflow >2.4.0:

RUN STATIC_DIR=$(python3 -c 'from mlflow.server import app;print(app.static_folder)') && \
    CSS_FILENAME=$(ls ${STATIC_DIR}/static/css/main.*.css) && \
    sed -i 's|/static-files/static|..|g' ${CSS_FILENAME}