Merge pull request #35 from mindsdb/feature/improved_ui

Improved UI Component for the Extension

CHANGELOG.md

@@ -0,0 +1,30 @@
+# 1.0.2 (2024-05-30)
+
+- Improved the build process of the Docker image by incorporating a multi-stage build
+- Moved the loading screen and the function for checking if the server is ready to the App component
+- Removed the script for building CSS with Tailwind separately and added it to the main build process
+- Exposed the MonngoDB port 47336 of the MindsDB service
+- Cleaned up the code by removing unnecessary files and dependencies
+- Updated the README and the labels in the Dockerfile with the correct information
+
+# 1.0.1 (2024-04-11)
+
+- Developed a CI/CD pipeline for the extension via GitHub Actions
+- Set an `always` `pull_policy` for the MindsDB service
+- Updated the name of the MindsDB service to `mindsdb_service` and exposed the correct ports
+- Added a VERSION file to manage the version of the extension
+- Removed the hard-coded TAG parameter from the Makefile, so the version is now managed by the VERSION file
+- Removed unused files, updated screenshots, moved images to the /assets folder and updated the relevant references in the README and Dockerfile
+
+# 1.0.0 (2024-03-1)
+
+- Updated the README with the commands to build the CSS and other relevant information
+- Updated the screenshots and the labels in the Dockerfile
+- Removed committed node_modules
+- Added `make` command to validate the extension
+- Removed the `/backend` directory as it is not in use
+- Added a function to check if the server is ready
+- Updated the Dockerfile to install dependencies and build the CSS
+- Added a loading screen to be displayed while the MindsDB service is starting
+- Configured Tailwind CSS for styling
+- Forked repository from `collabnix/mindsdb-docker-extension`

Dockerfile

@@ -1,21 +1,29 @@
-FROM node:18-alpine
+FROM --platform=$BUILDPLATFORM node:21.6-alpine3.18 AS client-builder
+WORKDIR /ui
+# cache packages in layer
+COPY ui/package.json /ui/package.json
+COPY ui/package-lock.json /ui/package-lock.json
+RUN --mount=type=cache,target=/usr/src/app/.npm \
+    npm set cache /usr/src/app/.npm && \
+    npm ci
+# install
+COPY ui /ui
+RUN npm run build
+
+FROM alpine
 LABEL org.opencontainers.image.title="MindsDB" \
-    org.opencontainers.image.description="Streamline AI development with MindsDB in your Docker environment. Deploy, manage, and scale your AI models seamlessly." \
+    org.opencontainers.image.description="MindsDB is the platform for customizing AI from enterprise data. You can create, serve, and fine-tune models in real-time from your database, vector store, and application data." \
     org.opencontainers.image.vendor="MindsDB" \
     com.docker.desktop.extension.api.version="0.3.0" \
     com.docker.extension.screenshots='[{"alt": "Screenshot of MindsDB Docker Extension", "url": "https://raw.githubusercontent.com/mindsdb/mindsdb-docker-extension/main/assets/mindsdb_screenshot.png"}]' \ 
-    com.docker.extension.categories="Databases" \
+    com.docker.extension.categories="Database" \
     com.docker.desktop.extension.icon="https://raw.githubusercontent.com/mindsdb/mindsdb-docker-extension/main/assets/mindsdb.svg" \
-    com.docker.extension.detailed-description="MindsDB abstracts LLMs, time series, regression, and classification models as virtual tables (AI-Tables). Since SQL is an effective declarative language for data manipulation, it’s also an ideal foundation for constructing data-centric AI." \
+    com.docker.extension.detailed-description="MindsDB integrates with numerous data sources, including databases, vector stores, and applications, and popular AI/ML frameworks, including AutoML and LLMs. MindsDB connects data sources with AI/ML frameworks and automates routine workflows between them. By doing so, we bring data and AI together, enabling the intuitive implementation of customized AI systems." \
     com.docker.extension.publisher-url="https://github.com/mindsdb/mindsdb-docker-extension" \
     com.docker.extension.additional-urls='[{"title":"Documentation","url":"https://docs.mindsdb.com/what-is-mindsdb/"}, {"title":"Support","url":"https://github.com/mindsdb/mindsdb/discussions"}, {"title":"Terms of Service","url":"https://mindsdb.com/terms"}, {"title":"Privacy policy","url":"https://mindsdb.com/privacy-policy/"}]' \
     com.docker.extension.changelog="https://raw.githubusercontent.com/mindsdb/mindsdb-docker-extension/main/CHANGELOG.md"
 
 COPY docker-compose.yaml .
 COPY metadata.json .
 COPY assets/mindsdb.svg .
-COPY ui ui
-
-WORKDIR /ui
-RUN npm install
-RUN npm run build:css
+COPY --from=client-builder /ui/build ui

README.md

@@ -6,7 +6,7 @@ This is the Docker Desktop Extension for MindsDB. It allows you to use MindsDB w
 
 ## Local Development
 
-The extension is built using the Docker Desktop Extension SDK. To build and install the extension locally, you need to have Docker Desktop installed. 
+The extension is built using the Docker Desktop Extension SDK. To build and install the extension locally, you need to have Docker Desktop installed.
 
 The following commands can be used to get the extension running locally.
 
@@ -35,7 +35,6 @@ To start the development server, run the following commands:
 ```shell
   cd ui
   npm install
-  npm run build:css
   npm run dev
 ```
 

VERSION

@@ -1 +1 @@
-1.0.1
+1.0.2

docker-compose.yaml

@@ -4,6 +4,7 @@ services:
     ports:
       - "47334:47334"
       - "47335:47335"
+      - "47336:47336"
     volumes:
       - data:/opt/mindsdb/data
       - config:/opt/mindsdb/config

ui/index.html

@@ -1,21 +1,12 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html lang="en">
   <head>
-    <title>MindsDB </title>
-    <link rel="stylesheet" href="output.css" />
+    <meta charset="UTF-8" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
-    <div id="root">
-      <div class="relative flex w-full content-center min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 items-center">
-        <svg class="animate-pulse"  width="94" height="52" viewBox="0 0 94 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M66.5602 26.2729C67.6357 34.7128 68.6338 42.6369 69.67 50.5525C69.7928 51.5007 69.5963 51.8353 68.5344 51.8885C62.1391 52.2061 62.1428 52.2315 59.831 46.4081C58.8685 43.9849 57.9305 41.5521 56.9053 39.1532C56.6797 38.7589 56.5965 38.301 56.6691 37.8542C56.7418 37.4074 56.9661 36.998 57.3056 36.6926C60.3307 33.3877 63.2772 29.9934 66.5602 26.2729Z" fill="#00A587"/>
-          <path d="M28.9698 33.3467C29.8857 37.9924 30.7893 42.3591 31.5848 46.7451C31.8304 48.1028 32.9354 49.8278 31.99 50.7458C31.1748 51.5346 29.3651 50.4185 27.9741 50.4692C24.2787 50.6069 22.5586 48.8989 21.9583 45.3125C21.6059 43.2071 21.45 41.7491 23.2142 40.1184C25.2736 37.9807 27.1959 35.7191 28.9698 33.3467V33.3467Z" fill="#00A587"/>
-          <path d="M39.406 41.8205C39.406 39.2114 39.3655 36.6022 39.4256 33.9943C39.4489 32.97 39.1592 32.6245 38.053 32.5883C30.5066 32.3426 22.9618 32.0447 15.4187 31.6944C14.2339 31.64 13.7662 31.971 13.5145 33.1234C12.3506 38.46 11.0295 43.7653 9.89267 49.108C9.57347 50.6083 8.99154 51.1615 7.39672 50.9912C5.62717 50.8107 3.84572 50.7703 2.06959 50.8704C0.731372 50.9368 0.473554 50.3872 0.493197 49.2409C0.608604 41.2274 0.779265 33.214 0.700691 25.2029C0.686197 22.7378 1.52296 20.3408 3.0739 18.4046C7.24817 12.6971 11.269 6.88697 15.3131 1.09128C15.5312 0.694426 15.8745 0.378042 16.2913 0.189807C16.708 0.00157144 17.1756 -0.0483383 17.6237 0.0476067C32.7026 1.63484 47.7873 3.17254 62.8777 4.66072C63.8215 4.77204 64.7227 5.11105 65.5013 5.64761C74.4809 11.3889 83.4445 17.1508 92.4695 22.8221C93.82 23.6676 93.8569 24.1508 92.5592 24.9154C92.2797 25.0639 92.0301 25.2612 91.8225 25.4976C89.2234 28.8014 86.175 28.6528 82.4918 27.1888C78.0401 25.424 73.3452 24.2535 68.7805 22.7532C68.3461 22.58 67.8751 22.5143 67.4088 22.5621C66.9425 22.61 66.4953 22.7697 66.1066 23.0274C61.9077 25.5931 57.6897 28.1273 53.4524 30.6302C53.0707 30.8313 52.7448 31.1211 52.5028 31.4743C52.2608 31.8275 52.1101 32.2335 52.0638 32.6571C51.1344 38.1653 50.0712 43.6493 49.2167 49.172C48.9712 50.7544 48.3979 51.2557 46.7994 51.1458C44.7693 51.0276 42.7341 51.0244 40.7037 51.1361C39.4993 51.1893 39.1911 50.7737 39.2304 49.6443C39.309 47.0364 39.255 44.4248 39.255 41.8157L39.406 41.8205Z" fill="#00A587"/>
-        </svg>
-        <p class="mt-6 text-zinc-800">Hang tight! MindsDB is starting..</p>
-        <p class="mt-4 text-zinc-600 font-light">Connect a new database or app, or add a model.</p>
-      </div>
-    </div>
-    <script src="index.js"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>