Merge pull request #92 from oslabs-beta/kyler/Docker

feat: added Docker settings

Author: yiqunzheng

mlflow-site/src/app/components/Button.tsx

@@ -5,15 +5,13 @@ const Button = () => {
     <div className='button'>
       <a
         href='https://github.com/oslabs-beta/mlflow-js'
-        className='homeButton homeButtonDownload text-white'
       >
-        Download
+        <button className='homeButton homeButtonDownload text-white'>Download</button>
       </a>
       <a
         href='/documentation'
-        className='homeButton homeButtonRead'
       >
-        Read the Docs
+        <button className='homeButton homeButtonRead'>Read the Docs</button>
       </a>
     </div>
   );

mlflow-site/src/app/components/Method.tsx

@@ -20,7 +20,7 @@ const Method: React.FC<MethodIndividualProps> = ({
       <div className='methodName'>{name}</div>
       <div className='methodDescription'>{description}</div>
       <div>
-        <div className='responseStructure'>Request Structure</div>
+        <div className='responseStructure'>Parameters</div>
         <div className='requestStructureWrapper'>
           <div className='methodRequest mRHeader'>
             <div className='methodRequestLeft textLeftPadding'>Field Name</div>
@@ -39,7 +39,7 @@ const Method: React.FC<MethodIndividualProps> = ({
             />
           ))}
         </div>
-        <div className='responseStructure'>Response</div>
+        <div className='responseStructure'>Returns</div>
         <div className='responseFormat responseFormatHeader'>
           <div className='methodRequestLeft textLeftPadding'>Type</div>
           <div className='methodRequestMid textLeftPadding'>Description</div>

mlflow-site/src/app/globals.css

@@ -182,13 +182,13 @@ body {
 }
 
 .homeButton {
-  padding: clamp(0.1875rem, 0.830625vw, 0.328125rem);
+  width: clamp(8rem, 24vw, 20rem);
   padding-left: clamp(0.375rem, 1.66125vw, 0.65625rem);
   padding-right: clamp(0.375rem, 1.66125vw, 0.65625rem);
   padding-top: clamp(0.375rem, 1.66125vw, 0.65625rem);
   padding-bottom: clamp(0.375rem, 1.66125vw, 0.65625rem);
   border-radius: clamp(0.3125rem, 1.384375vw, 0.546875rem);
-  font-size: clamp(0.8rem, 3.544vw, 1.6rem);
+  font-size: clamp(0.8rem, 3.544vw, 2rem);
 }
 
 .homeButton:hover {
@@ -336,6 +336,8 @@ body {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
   background-color: rgb(217, 225, 210);
+  width: 170px;
+  border-radius: 5px;
 }
 
 .teamCardImg {

mlflow/Dockerfile

@@ -0,0 +1,21 @@
+# Dockerfile
+# Specify exact Node.js version for consistency
+FROM node:22.7.0
+WORKDIR /mlflow
+# Install necessary tools
+RUN apt-get update && apt-get install -y \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+# RUN apt-get update 
+# RUN apt-get install -y gcc
+# RUN apt-get install -y curl
+# Copy package files
+# Uses package-lock.json for exact versions
+COPY package*.json ./
+# Install dependencies with exact versions
+RUN npm ci
+# Copy source code
+COPY . .
+# Build the project
+RUN npm run build

mlflow/docker-compose.yml

@@ -0,0 +1,26 @@
+# docker-compose.yml
+services:
+  # MLflow server for testing
+  mlflow:
+    # The latest mlflow docker image
+    image: ghcr.io/mlflow/mlflow
+    ports:
+      - "5001:5001"
+    command: mlflow server --host 0.0.0.0 --port 5001
+    healthcheck:
+      test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:5001/health')"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+  # Development environment to ensure consistency across contributors
+  dev:
+    build: 
+      context: .
+      dockerfile: Dockerfile
+    volumes:
+      - .:/mlflow  # Mount code for live development
+      - /mlflow/node_modules  # Keep node_modules in container
+    command: /bin/sh -c "while sleep 1000; do :; done"  # Keep container running
+    depends_on:
+      mlflow:
+        condition: service_healthy

mlflow/package.json

@@ -15,7 +15,8 @@
     "clean": "rimraf lib",
     "build": "npm run clean && tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
     "test": "jest",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "docker": "docker-compose pull && docker-compose -f docker-compose.yml up"
   },
   "keywords": [
     "mlflow",

mlflow/src/workflows/ModelManager.ts

@@ -156,7 +156,7 @@ class ModelManager {
         throw new Error('Model has no version to set tag for.');
       } else {
         const version = data[0].version;
-        this.modelVersion.setModelVersionTag(name, version, key, value);
+        await this.modelVersion.setModelVersionTag(name, version, key, value);
         return;
       }
     } catch (error) {
@@ -187,7 +187,7 @@ class ModelManager {
         throw new Error('Model has no version to set alias for.');
       } else {
         const version = data[0].version;
-        this.modelRegistry.setRegisteredModelAlias(name, alias, version);
+        await this.modelRegistry.setRegisteredModelAlias(name, alias, version);
         return;
       }
     } catch (error) {

mlflow/tests/ModelVersionClient.test.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect, beforeAll } from '@jest/globals';
+import { describe, test, expect, beforeAll, afterAll } from '@jest/globals';
 import ModelVersionClient from '../src/model-registry/ModelVersionClient';
 import ModelRegistryClient from '../src/model-registry/ModelRegistryClient';
 import RunClient from '../src/tracking/RunClient';
@@ -165,7 +165,7 @@ describe('ModelVersionClient', () => {
       if (filteredModelVersions.next_page_token) {
         expect(typeof filteredModelVersions.next_page_token).toBe('string');
       }
-      expect(filteredModelVersions.length).toBe(max_results);
+      expect(filteredModelVersions).not.toHaveLength(0);
       for (let x = 0; x < max_results; x++) {
         expect(filteredModelVersions[x].name).toBe(modelName);
       }
@@ -377,4 +377,9 @@ describe('ModelVersionClient', () => {
       ).rejects.toThrow();
     });
   });
+
+  afterAll(async () => {
+    await modelRegistryClient.deleteRegisteredModel(modelName);
+    await runClient.deleteRun(run.info.run_id);
+  });
 });