[UI] Failed to import a Meshery Design as type Docker Compose

[weilirs]

Current Behavior

Failed to import a Meshery Design as type Docker Compose, the Docker Compose file I used is from the existing design.(More details below)

Desired Behavior

I should be able to import this Docker Compose file.

Screenshots/Logs

This is the place I imported the Docker Compose file

The Docker Compose file I used(downloaded from the existing design)

version: "3.8"
services:
  anythink-backend:
    build: ./backend
    container_name: anythink-backend
    command: sh -c "cd backend && yarn install && /wait-for-it.sh mongodb:27017 -q -t 60 && yarn dev"

    environment:
      - NODE_ENV=development
      - PORT=3000
      - MONGODB_URI=mongodb://mongodb:27017
    working_dir: /usr/src
    volumes:
      - ./:/usr/src/
      - /usr/src/backend/node_modules
    ports:
      - "3000:3000"
    depends_on:
      - "mongodb"

  anythink-frontend:
    build: ./frontend
    container_name: anythink-frontend
    command: sh -c "cd frontend && yarn install && yarn start"
    environment:
      - NODE_ENV=development
      - PORT=3001
    working_dir: /usr/src
    volumes:
      - ./:/usr/src/
      - /usr/src/frontend/node_modules
    ports:
      - "3001:3001"

  mongodb:
    container_name: mongodb
    restart: always
    image: mongo
    logging:
      driver: none
    volumes:
      - ~/mongo/data:/data/db
    ports:
      - '27017:27017'

The error I got

so I modified the first line to version: "1.0", the Docker Compose file becomes

version: "1.0"
services:
  anythink-backend:
    build: ./backend
    container_name: anythink-backend
    command: sh -c "cd backend && yarn install && /wait-for-it.sh mongodb:27017 -q -t 60 && yarn dev"

    environment:
      - NODE_ENV=development
      - PORT=3000
      - MONGODB_URI=mongodb://mongodb:27017
    working_dir: /usr/src
    volumes:
      - ./:/usr/src/
      - /usr/src/backend/node_modules
    ports:
      - "3000:3000"
    depends_on:
      - "mongodb"

  anythink-frontend:
    build: ./frontend
    container_name: anythink-frontend
    command: sh -c "cd frontend && yarn install && yarn start"
    environment:
      - NODE_ENV=development
      - PORT=3001
    working_dir: /usr/src
    volumes:
      - ./:/usr/src/
      - /usr/src/frontend/node_modules
    ports:
      - "3001:3001"

  mongodb:
    container_name: mongodb
    restart: always
    image: mongo
    logging:
      driver: none
    volumes:
      - ~/mongo/data:/data/db
    ports:
      - '27017:27017'

Now I got this error

Environment

• Browser: Arc
• Host OS: Mac
• Meshery Server Version: v0.7.128
• Platform: Docker

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[github-actions]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[leecalcote]

The level of detail included here, @weilirs is sublime. Excellent work, sir.

[weilirs]

Use the command docker-compose config to check if the file has any errors. Also try to import only a simple service, such as mongodb, to see if it works. If it works, gradually add other services. If it still doesn't work, There are too many compatibility issues between docker and mac. You can use Servbay instead of docker to deploy the environment. Servbay is more professional on mac. And Servbay supports one-click deployment of MongoDB

I ran docker-compose config and it shows no errors. I also removed all other services but MongoDB and validated it using docker-compose config and tried to import this but still failed to import it.

[shanukun]

It’s not an meshery UI bug, but a meshkit bug.
The docker-compose file must first be converted to a K8s manifest before it can be imported, meshery/meshkit methods are used for this.

meshery/meshery uses kompose v.1.26.2, which supports docker-compose v3.8. So the issue with incompatible versions can be resolved.

Also, the way kompose generates output has changed since kubernetes/kompose#1541, but the output no longer needs to be formatted, as meshery/meshkit do. So methods for formatting in meshery/meshkit are no longer required, thus they can be removed.

However, since kubernetes/kompose#1593, kompose now supports clients, therefore most functions in meshery/meshkit that rely on kompose's internal function can be refactored.
Because kompose is only used in one location in meshery/meshery, it can be easily updated.

I tested my changes, I was able to successfully import first docker-compose file (Same result on web UI):