Merge branch 'main' of https://github.com/zenml-io/zenml-ui into main

Author: htahir1

.github/workflows/release.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     tags:
-      - "v*"
+      - "*"
 
 jobs:
   release:
@@ -13,8 +13,9 @@ jobs:
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
+      - name: Get the version from the github tag ref
+        id: get_version
+        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
       - uses: actions/setup-node@v3
         with:
           node-version: 14.20.0
@@ -27,11 +28,7 @@ jobs:
         env:
           REACT_APP_BASE_API_URL: "/api/v1"
           REACT_APP_MOCKAPI_RESPONSE: false
-
-      - name: Get the version from the github tag ref
-        id: get_version
-        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
-
+          REACT_APP_VERSION: ${{ steps.get_version.outputs.VERSION }}
       - name: Generate Changelog
         uses: heinrichreimer/[email protected]
         with:
@@ -42,17 +39,15 @@ jobs:
           issuesWoLabels: "true"
           stripHeaders: "true"
       - name: Create release archive
-        uses: a7ul/[email protected]
-        id: compress
-        with:
-          command: c
-          files: |
-            ./build
-          outPath: zenml-dashboard.tar.gz
+        run: |
+          tar -zcf zenml-dashboard.tar.gz -C build --transform="s#\.\/##" .
+          sha256sum -b zenml-dashboard.tar.gz > zenml-dashboard.tar.gz.sha256
       - name: Release to GitHub
         uses: softprops/action-gh-release@v1
         with:
-          files: zenml-dashboard.tar.gz
+          files: |
+            zenml-dashboard.tar.gz
+            zenml-dashboard.tar.gz.sha256
           body_path: ./CHANGELOG.md
           prerelease: "true"
         env:

.prettierrc.js

@@ -1,6 +1,7 @@
-module.exports =  {
-  semi:  true,
-  trailingComma:  'all',
-  singleQuote:  true,
-  tabWidth:  2,
-};
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  tabWidth: 2,
+  endOfLine: 'auto',
+};

README.md

@@ -9,7 +9,6 @@
    <a href="https://github.com/zenml-io/zenml">ZenML</a>.
   </h3>
 
-
   <p align="center">
     Manage and visualize your ML pipelines, stacks and artifacts in one place.
     <br />
@@ -33,7 +32,7 @@
     ·
     <a href="#-meet-the-team">Meet the Team</a>
     <br />
-    🎉 Version 0.0.1 is out. Check out the release notes
+    🎉 Version 0.1.0 is out. Check out the release notes
     <a href="https://github.com/zenml-io/zenml-dashboard/releases">here</a>.
     <br />
     <br />
@@ -46,9 +45,39 @@
   </p>
 </div>
 
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>🏁 Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#-getting-started">⚡ Getting Started</a>
+      <ul>
+        <li><a href="#-installation">🔋 Installation</a></li>
+        <li><a href="#-relationship-with-zenml">👨‍👦 Relationship with ZenML</a></li>
+        <li><a href="#-deploying-the-dashboard">🪐 Deploying the dashboard</a></li>
+      </ul>
+    </li>
+    <li>
+    <a href="#-user-experience">🏄 User Experience</a>
+    <ul>
+        <li><a href="#-log-in">🔐 Log In</a></li>
+        <li><a href="#-home-page">🏠 Home Page</a></li>
+        <li><a href="#-pipelines-stacks-and-components">🗂 Pipelines, Stacks, and Components</a></li>
+      </ul>
+    </li>
+    <li><a href="#-contributing">🙌 Contributing</a></li>
+    <li><a href="#-meet-the-team">👩‍👩‍👧‍👦 Meet the Team</a></li>
+    <li><a href="#-getting-help">🆘 Getting Help</a></li>
+    <li><a href="#-license">📜 License</a></li>
+  </ol>
+</details>
+
+<br />
+
+
 # ⚡ Getting Started
 
-## Installation
+## 🔋 Installation
 
 The installation is as follows:
 
@@ -59,7 +88,7 @@ nvm install 14.20.0
 nvm use 14.20.0
 ```
 
-Users also need to have yarn installed.
+Users also need to have [`yarn`](https://yarnpkg.com/) installed.
 
 Then you can run it by doing:
 
@@ -80,39 +109,60 @@ The app takes the following env variables:
 REACT_APP_BASE_API_URL="<YOUR_ZENML_SERVER_DEPOLOYMENT_URL>/api/v1"
 ```
 
+To learn how to get the `YOUR_ZENML_SERVER_DEPOLOYMENT_URL`, read the [deployment guide](https://docs.zenml.io/getting-started/deploying-zenml/deployment).
+
+Lastly, if you would like to use Docker, then the ZenML team provides [DockerHub] images to serve the ZenML Server and Dashboard in one image:
+
+```shell
+docker run -it -d -p 8080:80 zenmldocker/zenml-server
+```
+
+Which will serve the dashboard with the server at `http://localhost:8080`, with username `default` and an empty password.
 
+## 👨‍👦 Relationship with ZenML
 
+The ZenML Dashboard is a Javascript React-based application that lives inside this repository, which is a sister repository of the main [ZenML Python package repo](https://github.com/zenml-io/zenml). 
 
-## Deployment
+> **Note** - The ZenML Dashboard is meant to be used with the ZenML Server as a backend and cannot be used standalone.
 
-We should add a section here as to how its linked to the main ZenML repository
+The dashboard build files come bundled into the [ZenML PyPi package](https://pypi.org/project/zenml/) and can be [served locally](https://docs.zenml.io/getting-started/deploying-zenml/using-cli.md) and/or [deployed on the cloud](https://docs.zenml.io/getting-started/deploying-zenml/deployment.md) through the main ZenML python package.
 
-Basically, each ZenML python package comes with the build files (generated by `yarn build`) of a certain version of this dashboard (all build files of the dashboard can be seen in the releases section of this github). Therefore, each ZenML pypi package has bundled in it a corresponding version of this dashboard.
+Basically, each ZenML `Python` package comes with the build files (generated by `yarn build`) of a certain version of this dashboard (all build files of the dashboard can be seen in the [releases](https://github.com/zenml-io/zenml-dashboard/releases) section of this GitHub repo). Therefore, each ZenML PyPi package has bundled in it a corresponding version of this dashboard.
 
-With the python package, you can then serve these static build files by doing:
+With the `Python` package, you can then serve these static build files by doing:
 
 ```
 zenml up
 ```
 
-Which creates a local daemon that serves the files in a FastAPI server!
+![img](./assets/zenml-up.gif)
+
+Which creates a local daemon that serves the files in a [FastAPI](https://github.com/tiangolo/fastapi) server!
 
-You can also deploy this dashboard on supported cloud providers with ZenML python package by using the command: 
+## 🪐 Deploying the dashboard
+
+You can deploy this dashboard on supported cloud providers with ZenML python package by using the command: 
 
 ```
 zenml deploy
 ```
 
-# :bowtie: User Experience
+The above command deploys the dashboard in the [same process as the ZenML Server](https://docs.zenml.io/getting-started/deploying-zenml/deployment.md), and automates a lot of the nitty gritties for you.
+
+However, the option to deploy standalone is also available. `yarn build` creates a build directory with a production build of the dashboard. Set up your favorite HTTP server so that a visitor to your site is served index.html. Here are [8 ways to deploy a React app for free](https://blog.logrocket.com/8-ways-deploy-react-app-free/) as a starting point.
 
-## Log In
+Just don't forget to the set the `REACT_APP_BASE_API_URL` environment variable!
+
+# 🏄 User Experience
+
+## 🔐 Log In
 
 ![img](./assets/screenshot-login.png)
 
-## Home Page
+## 🏠 Home Page
 ![img](./assets/screenshot-home.png)
 
-## Pipelines, Stacks and Components
+## 🗂 Pipelines, Stacks and Components
 ![img](./assets/dashboard.gif)
 
 
@@ -130,20 +180,12 @@ Guide](CONTRIBUTING.md) for all relevant details.
 
 ![Meet the Team](./assets/community_meetup.png)
 
-Have a question that's too hard to express on our Slack? Is it just too much effort to say everything on a 
-long GitHub issue? Or are you just curious about what ZenML has been up to in the past week? 
-
-Well, register now for the ZenML Meet the Community session to get your answers!
-It's free and open to everyone.
-
 Every week, the ZenML [core team](https://zenml.io/company#CompanyTeam) will pop in for 30 minutes to interact directly with the community. 
 Sometimes we'll be presenting a feature, other times we'll take questions and have fun. 
 
-Join us if you are curious about ZenML, or just want to talk shop about MLOps.
+[Register now](https://zenml.io/meet) for the ZenML Meet the Community session. It's free and open to everyone.
 
-We will host the gathering every Wednesday 8:30AM PT (5:30PM CET). 
-Register now through [this link](https://www.eventbrite.com/e/zenml-meet-the-community-tickets-354426688767), 
-or subscribe to the [public events calendar](https://calendar.google.com/calendar/u/0/r?cid=Y19iaDJ0Zm44ZzdodXBlbnBzaWplY3UwMmNjZ0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t) to get notified 
+Or subscribe to our [public events calendar](https://calendar.google.com/calendar/u/0/r?cid=Y19iaDJ0Zm44ZzdodXBlbnBzaWplY3UwMmNjZ0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t) to get notified 
 before every community gathering.
 
 # 🆘 Getting Help
@@ -155,7 +197,7 @@ By far the easiest and fastest way to get a response is to:
 
 # 📜 License
 
-`zenml-dashboard` is distributed under the terms of the Apache License Version 2.0. 
+ZenML Dashboard is distributed under the terms of the Apache License Version 2.0. 
 A complete version of the license is available in the [LICENSE](LICENSE) file in
 this repository. Any contribution made to this project will be licensed under
 the Apache License Version 2.0.

assets/zenml-up.gif

@@ -39,6 +39,8 @@ interface TUser {
   email: string;
   organizationId: TId;
   userName: string;
+  email_opted_in: any;
+  emailOptedIn: any;
 }
 
 interface TOrganization {
@@ -113,14 +115,17 @@ interface TStack {
   isShared?: Boolean;
 }
 type TRunStatus =
-  | 'Finished'
+  | 'finished'
   | 'In Progress'
   | 'completed'
-  | 'Running'
-  | 'Failed';
+  | 'running'
+  | 'failed'
+  | 'cached';
 
 interface TRun {
+  pipelineConfiguration?: any;
   id: TId;
+  stackComponentId: TId;
   status: TRunStatus;
   kubeflowStartTime: Date;
   kubeflowEndTime: Date;
@@ -137,7 +142,8 @@ interface TRun {
   userName?: any;
   user?: any;
   creationDate?: any;
-  status?: string;
+  // status?: string;
+  graph?: any;
   created: Date;
   name?: string;
 }

global.d.ts

@@ -2,7 +2,6 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
-  "proxy": "https://testing.ce-dev.cloud.maiot.io/api/v1",
   "dependencies": {
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.9.0",
@@ -12,6 +11,7 @@
     "@testing-library/user-event": "^12.1.0",
     "@types/classnames": "^2.2.10",
     "@types/country-list": "^2.1.0",
+    "@types/dagre": "^0.7.48",
     "@types/jest": "^26.0.8",
     "@types/lodash": "^4.14.158",
     "@types/node": "^14.0.27",
@@ -29,6 +29,7 @@
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "country-list": "^2.2.0",
+    "dagre": "^0.8.5",
     "date-fns": "^2.15.0",
     "eslint-import-resolver-babel-module": "^5.1.2",
     "eslint-plugin-react-hooks": "^4.0.8",
@@ -42,6 +43,7 @@
     "react-bootstrap": "^1.3.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^16.13.1",
+    "react-flow-renderer": "^10.3.16",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
@@ -82,12 +84,14 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
+    "autoprefixer": "^10.4.8",
     "babel-plugin-inline-react-svg": "^1.1.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-redux-saga": "^1.1.3",
+    "postcss": "^8.4.16",
     "prettier": "^2.0.5",
     "react-hooks-testing-library": "^0.6.0",
     "react-test-renderer": "^16.13.1"

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -0,0 +1 @@
+/*  /index.html  200

public/_redirects

@@ -13,23 +13,23 @@
     <meta property="og:url" content="https://app.zenml.io">
     <meta property="og:title" content="ZenML - Dashboard">
     <meta property="og:description" content="Create reproducible, production-ready Machine Learning pipelines with ZenML - for free!">
-    <meta property="og:image" content="https://maiot.io/assets/illustrations/showcase.png">
+    <meta property="og:image" content="https://zenml.io/_next/image?url=https%3A%2F%2Fzenml-strapi-media.s3.eu-central-1.amazonaws.com%2FZen_ML_Cloud_Mockup_1_1_bb6a25fc34.png&w=3840&q=75">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="https://app.zenml.io">
     <meta property="twitter:title" content="ZenML - Dashboard">
     <meta property="twitter:description" content="Create reproducible, production-ready Machine Learning pipelines with ZenML - for free!">
-    <meta property="twitter:image" content="https://maiot.io/assets/illustrations/showcase.png">
+    <meta property="twitter:image" content="https://zenml.io/_next/image?url=https%3A%2F%2Fzenml-strapi-media.s3.eu-central-1.amazonaws.com%2FZen_ML_Cloud_Mockup_1_1_bb6a25fc34.png&w=3840&q=75">
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/index.html

@@ -1,6 +1,6 @@
 {
-  "short_name": "maiot",
-  "name": "Maiot",
+  "short_name": "zenml",
+  "name": "ZenML",
   "icons": [
     {
       "src": "favicon.ico",