Merge pull request #129 from zenml-io/UAT

Release 0.3.0

Author: fa9r

.gitignore

@@ -87,7 +87,7 @@ dist
 
 # Gatsby files
 .cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# Comment in the public line in if your workspace uses Gatsby and *not* Next.js
 # https://nextjs.org/blog/next-9-1#public-directory-support
 # public
 

CONTRIBUTING.md

@@ -13,11 +13,11 @@ you finalize your pull requests.
 
 ## ⚡️ Quicklinks
 
-* [Code of Conduct](#code-of-conduct)
-* [Getting Started](#getting-started)
-    * [Issues](#issues)
-    * [Pull Requests](#pull-requests)
-* [Getting Help](#getting-help)
+- [Code of Conduct](#code-of-conduct)
+- [Getting Started](#getting-started)
+  - [Issues](#issues)
+  - [Pull Requests](#pull-requests)
+- [Getting Help](#getting-help)
 
 ## 🧑‍⚖️ Code of Conduct
 
@@ -35,8 +35,8 @@ general guidelines that cover both:
   at [[email protected]](mailto:[email protected]), monitored by
   our security team.
 - Search for existing Issues and PRs before creating your own.
-- Search on the [public Crowd Dev](https://open.crowd.dev/zenml) page to see 
-if the issue has been addressed  before.
+- Search on the [public Crowd Dev](https://open.crowd.dev/zenml) page to see
+  if the issue has been addressed before.
 - We work hard to make sure issues are handled on time, but it could take a
   while to investigate the root cause depending on the impact.
 
@@ -125,9 +125,8 @@ risk! It's better to discuss privately and give us a chance to find a solution
 first, to limit the potential impact
 as much as possible.
 
-
 ## 🆘 Getting Help
 
-Join us in the [ZenML Slack Community](https://zenml.io/slack-invite/) to 
-interact directly with the core team and community at large. This is a good 
-place to ideate, discuss concepts or ask for help.
+Join us in the [ZenML Slack Community](https://zenml.io/slack-invite/) to
+interact directly with the core team and community at large. This is a good
+place to ideate, discuss concepts or ask for help.

README.md

@@ -71,14 +71,13 @@
 
 <br />
 
-
 # ⚡ Getting Started
 
 ## 🔋 Installation
 
 The installation is as follows:
 
-First, there is a pre-requisite to use [`node`](https://www.npmjs.com/) version 14.20.0 exactly. One can do this by installing the [`nvm`](https://github.com/nvm-sh/nvm) utility and then doing 
+First, there is a pre-requisite to use [`node`](https://www.npmjs.com/) version 14.20.0 exactly. One can do this by installing the [`nvm`](https://github.com/nvm-sh/nvm) utility and then doing
 
 ```
 nvm install 14.20.0
@@ -118,11 +117,11 @@ Which will serve the dashboard with the server at `http://localhost:8080`, with
 
 ## 👨‍👦 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). 
+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).
 
 > **Note** - The ZenML Dashboard is meant to be used with the ZenML Server as a backend and cannot be used standalone.
 
-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.
+The dashboard build files come bundled into the [ZenML PyPi package](https://pypi.org/workspace/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](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.
 
@@ -138,7 +137,7 @@ Which creates a local daemon that serves the files in a [FastAPI](https://github
 
 ## 🪐 Deploying the dashboard
 
-You can deploy this dashboard on supported cloud providers with ZenML python package by using the command: 
+You can deploy this dashboard on supported cloud providers with ZenML python package by using the command:
 
 ```
 zenml deploy
@@ -157,44 +156,44 @@ Just don't forget to the set the `REACT_APP_BASE_API_URL` environment variable!
 ![img](./assets/screenshot-login.png)
 
 ## 🏠 Home Page
+
 ![img](./assets/screenshot-home.png)
 
 ## 🗂 Pipelines, Stacks and Components
-![img](./assets/dashboard.gif)
 
+![img](./assets/dashboard.gif)
 
 # 🙌 Contributing
 
 We would love to develop ZenML together with our community! Best way to get
 started is to select any issue from the [`good-first-issue`
-label](https://github.com/zenml-io/zenml-dashboard/labels/good%20first%20issue). 
+label](https://github.com/zenml-io/zenml-dashboard/labels/good%20first%20issue).
 
 If you would like to contribute, please review our [Contributing
 Guide](CONTRIBUTING.md) for all relevant details.
 
-
 # 👩‍👩‍👧‍👦 Meet the Team
 
 ![Meet the Team](./assets/community_meetup.png)
 
-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. 
+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.
 
 [Register now](https://zenml.io/meet) for the ZenML Meet the Community session. It's free and open to everyone.
 
-Or subscribe to our [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
+
 By far the easiest and fastest way to get a response is to:
 
 1. Ask your questions in [our Slack group](https://zenml.io/slack-invite/).
 2. [Open an issue](https://github.com/zenml-io/zenml-dashboard/issues/new/choose) on our GitHub repo.
 
-
 # 📜 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
+this repository. Any contribution made to this workspace will be licensed under
 the Apache License Version 2.0.

global.d.ts

@@ -90,7 +90,7 @@ interface TWorkspace {
   name: string;
   createdAt: Date;
 }
-interface Projects {
+interface Workspaces {
   id: TId;
   created: Date;
   updated: Date;
@@ -102,7 +102,7 @@ interface TPipeline {
   name: string;
   created: Date;
   creationDate: Date;
-  projectName: string;
+  workspaceName: string;
   components: any;
   owner: string;
   pipelineConfig: any;
@@ -121,7 +121,7 @@ interface TStack {
   name: string;
   creationDate: Date;
   created: Date;
-  projectName: string;
+  workspaceName: string;
   components: any;
   userName: string;
   pipelineConfig: any;
@@ -130,7 +130,7 @@ interface TStack {
   type?: string;
   flavor?: string;
   configuration?: any;
-  project?: string;
+  workspace?: string;
   user?: any;
   isShared?: Boolean;
 }

src/api/constants.ts

@@ -6,4 +6,7 @@ export const httpMethods = {
   delete: 'DELETE',
 };
 
-export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL;
+export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL;
+
+// https://appserver.zenml.io/api/v1
+// http://localhost:8080/api/v1

src/api/endpoints.ts

@@ -20,23 +20,23 @@ export const endpoints = {
     deleteInvite: (id: string): string => `/users/${id}`,
   },
 
-  projects: {
-    my: '/projects',
-    stats: (project: string) => `/projects/${project}/statistics`,
+  workspaces: {
+    my: '/workspaces',
+    stats: (workspace: string) => `/workspaces/${workspace}/statistics`,
   },
 
   pipelines: {
-    my: (project: string): string => `/projects/${project}/pipelines`,
+    my: (workspace: string): string => `/workspaces/${workspace}/pipelines`,
     get: (pipelineId: TId): string => `/pipelines/${pipelineId}`,
   },
   Stacks: {
-    my: (project: string): string => `/projects/${project}/stacks`,
+    my: (workspace: string): string => `/workspaces/${workspace}/stacks`,
     get: (stackId: TId): string => `/stacks/${stackId}`,
   },
   StackComponents: {
     types: '/component-types',
-    my: (type: string, project: string): string =>
-      `/projects/${project}/components?scope_type=${type}`,
+    my: (type: string, workspace: string): string =>
+      `/workspaces/${workspace}/components?scope_type=${type}`,
     get: (stackComponentId: TId): string => `/components/${stackComponentId}`,
   },
   runs: {
@@ -53,7 +53,7 @@ export const endpoints = {
     graphById: {
       get: (runId: TId): string => `/runs/${runId}/graph`,
     },
-    all: (project: string): string => `/projects/${project}/runs`,
+    all: (workspace: string): string => `/workspaces/${workspace}/runs`,
     get: (runId: TId): string => `/runs/${runId}`,
   },
   roles: {

src/api/pipelines/getMyPipelinesApi.ts

@@ -5,7 +5,7 @@ import { apiUrl } from '../apiUrl';
 
 const getMyPipelinesApi = ({
   authenticationToken,
-  project,
+  workspace,
   sort_by,
   logical_operator,
   page,
@@ -18,11 +18,11 @@ const getMyPipelinesApi = ({
   size: number;
   name?: string;
   authenticationToken: string;
-  project: string;
+  workspace: string;
   filtersParam?: object;
 }): Promise<TPipeline> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.pipelines.my(project)),
+    url: apiUrl(endpoints.pipelines.my(workspace)),
     params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,

src/api/runs/getAllRunsApi.ts

@@ -4,7 +4,7 @@ import { httpMethods } from '../constants';
 import { apiUrl } from '../apiUrl';
 
 const getAllRunsApi = ({
-  project,
+  workspace,
   sort_by,
   logical_operator,
   page,
@@ -17,11 +17,11 @@ const getAllRunsApi = ({
   page: number;
   size: number;
   authenticationToken: string;
-  project: string;
+  workspace: string;
   filtersParam?: object;
 }): Promise<TOrganization> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.runs.all(project)),
+    url: apiUrl(endpoints.runs.all(workspace)),
     params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,

src/api/stackComponents/getStackComponentListApi.ts

@@ -11,9 +11,9 @@ const getMyStackComponentsApi = ({
   size,
   type,
   filtersParam,
-  project,
+  workspace,
 }: {
-  project: string;
+  workspace: string;
   authenticationToken: string;
   sort_by: string;
   logical_operator: string;
@@ -23,7 +23,7 @@ const getMyStackComponentsApi = ({
   size: number;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.StackComponents.my(type, project)),
+    url: apiUrl(endpoints.StackComponents.my(type, workspace)),
     params: { sort_by, logical_operator, page, size, ...filtersParam },
     method: httpMethods.get,
     authenticationToken,

src/api/stacks/getMyStacksApi.ts

@@ -4,15 +4,17 @@ import { httpMethods } from '../constants';
 import { apiUrl } from '../apiUrl';
 
 const getMyStacksApi = ({
-  project,
+  component_id,
+  workspace,
   sort_by,
   logical_operator,
   page,
   size,
   filtersParam,
   authenticationToken,
 }: {
-  project: string;
+  component_id?: any;
+  workspace: string;
   sort_by: string;
   logical_operator: string;
   page: number;
@@ -21,8 +23,15 @@ const getMyStacksApi = ({
   authenticationToken: string;
 }): Promise<TStack> =>
   fetchApiWithAuthRequest({
-    url: apiUrl(endpoints.Stacks.my(project)),
-    params: { sort_by, logical_operator, page, size, ...filtersParam },
+    url: apiUrl(endpoints.Stacks.my(workspace)),
+    params: {
+      component_id,
+      sort_by,
+      logical_operator,
+      page,
+      size,
+      ...filtersParam,
+    },
     method: httpMethods.get,
     authenticationToken,
   });