Merge pull request #349 from zenml-io/dev

Dev to UAT

Author: Cahllagerfeld

.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

.env

@@ -1,3 +1,3 @@
-REACT_APP_BASE_API_URL="https://appserver.zenml.io/api/v1"
-REACT_APP_HUB_API_URL="https://hubapi.zenml.io"
+# REACT_APP_BASE_API_URL= https://felix.develaws.zenml.io/api/v1
+REACT_APP_BASE_API_URL= https://appserver.zenml.io/api/v1
 REACT_APP_VERSION=$npm_package_version

.gitignore

@@ -110,4 +110,6 @@ build/
 # TernJS port file
 .tern-port
 
-!.env
+!.env
+
+build

global.d.ts

@@ -32,6 +32,14 @@ interface TAction {
   payload: any;
 }
 
+interface TServerInfo {
+  id: string;
+  version: string;
+  deploymentType: string;
+  databaseType: string;
+  secretsStoreType: string;
+}
+
 type TClickEvent = (arg1: React.MouseEvent) => void;
 
 interface TUser {
@@ -47,6 +55,27 @@ interface TUser {
   created: any;
 }
 
+interface TRepository {
+  id: TId;
+  created: string;
+  updated: string;
+  user: TUser;
+  workspace: TWorkspace;
+  name: string;
+  logo_url: string;
+  description: string;
+  config: {
+    owner: string;
+    repository: string;
+    token: string;
+  };
+  source: {
+    module: string;
+    attribute: string;
+    type: string;
+  };
+}
+
 interface THubUser {
   id: string;
   email: string;

package.json

@@ -16,6 +16,7 @@
     "@types/dagre": "^0.7.48",
     "@types/jest": "^26.0.8",
     "@types/node": "^14.0.27",
+    "@types/papaparse": "^5.3.7",
     "@types/react": "^16.9.44",
     "@types/react-datepicker": "^4.4.2",
     "@types/react-dom": "^16.9.8",
@@ -45,6 +46,7 @@
     "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "node-sass": "^4.14.1",
+    "papaparse": "^5.4.1",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",

src/App.css

@@ -54,3 +54,57 @@ html {
   padding-left: 0;
   padding-right: 0;
 }
+
+/* reactflow */
+.react-flow__edge-path {
+  stroke: #443E99;
+}
+
+.react-flow__controls {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  filter: none;
+  box-shadow: none;
+  /* bottom: 10%; */
+  /* left: 40px; */
+}
+
+.react-flow__controls button :first-child {
+  border: none;
+  height: 55px;
+  width: 55px;
+}
+
+.react-flow__controls :nth-child(n) {
+  border-radius: 100%;
+  background-color: #fffffd;
+  height: 35px;
+  width: 35px;
+  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.08));
+  margin: 5px;
+}
+
+.react-flow__controls :nth-child(n) :first-child {
+  border-radius: 0%;
+  height: 35px;
+  width: 35px;
+}
+
+
+.react-flow__zoom-in {
+  background-color: #443E99;
+  height: 100px;
+  width: 100px;
+}
+a[class*='MenuItem'][class*='active'] .sidebar-fill path {
+  stroke: transparent !important;
+  fill: #e8a562 !important;
+}
+
+a[class*='MenuItem']:hover .sidebar-fill path {
+  stroke: transparent !important;
+  fill: #e8a562 !important;
+}

src/api/endpoints.ts

@@ -4,6 +4,7 @@ export const endpoints = {
   userEmail: (userId: string): string => `/users/${userId}/email-opt-in`,
   forgot: '/login/email/resetpassword',
   version: '/version',
+  serverInfo: '/info',
   users: {
     me: '/current-user',
     get: (id: TId): string => `/users/${id}`,
@@ -37,6 +38,10 @@ export const endpoints = {
     my: `/secrets`,
     get: (secretId: TId): string => `/secrets/${secretId}`,
   },
+  repositories: {
+    getAll: (workspace: string) => `/workspaces/${workspace}/code_repositories`,
+    getByID: (repositoryID: string) => `/code_repositories/${repositoryID}`,
+  },
   StackComponents: {
     types: '/component-types',
     my: (type: string, workspace: string): string =>
@@ -52,6 +57,10 @@ export const endpoints = {
     pipeline: {
       get: (pipelineId: TId): string => `/runs?pipeline_id=${pipelineId}`,
     },
+    repository: {
+      get: (repositoryId: TId): string =>
+        `/runs?code_repository_id=${repositoryId}`,
+    },
     stack: {
       get: (stackId: TId): string => `/runs?stack_id=${stackId}`,
     },
@@ -62,6 +71,15 @@ export const endpoints = {
     graphById: {
       get: (runId: TId): string => `/runs/${runId}/graph`,
     },
+    artifact: {
+      get: (exe_id: TId): string => `/artifacts/${exe_id}`,
+    },
+    artifactVisualization: {
+      get: (id: TId): string => `/artifacts/${id}/visualize`,
+    },
+    step: {
+      get: (exe_id: TId): string => `/steps/${exe_id}`,
+    },
     all: (workspace: string): string => `/workspaces/${workspace}/runs`,
     get: (runId: TId): string => `/runs/${runId}`,
   },

src/api/fetchApi/index.ts

@@ -45,7 +45,6 @@ export const fetchApiWithAuthRequest = ({
   headers?: any;
 }): Promise<any> => {
   const CancelToken = axios.CancelToken;
-
   return axios({
     method: method || httpMethods.get,
     url,

src/api/info/getInfo.ts

@@ -0,0 +1,11 @@
+import { apiUrl } from '../apiUrl';
+import { httpMethods } from '../constants';
+import { endpoints } from '../endpoints';
+import { fetchApi } from '../fetchApi';
+
+export default function getServerInfo() {
+  return fetchApi({
+    url: apiUrl(endpoints.serverInfo),
+    method: httpMethods.get,
+  });
+}

src/api/repositories/getAllRepositories.ts

@@ -0,0 +1,45 @@
+import { fetchApiWithAuthRequest } from '../fetchApi';
+import { endpoints } from '../endpoints';
+import { httpMethods } from '../constants';
+import { apiUrl } from '../apiUrl';
+
+const getRepositories = ({
+  component_id,
+  workspace,
+  sort_by,
+  logical_operator,
+  page,
+  size,
+  name,
+  filtersParam,
+  // id,
+  authenticationToken,
+}: {
+  component_id?: any;
+  workspace: string;
+  sort_by: string;
+  logical_operator: string;
+  page: number;
+  size: number;
+  name?: string;
+  filtersParam?: object;
+  // id?: any;
+  authenticationToken: string;
+}): Promise<TStack> =>
+  fetchApiWithAuthRequest({
+    url: apiUrl(endpoints.repositories.getAll(workspace)),
+    params: {
+      component_id,
+      sort_by,
+      logical_operator,
+      page,
+      size,
+      name,
+      ...filtersParam,
+      // id,
+    },
+    method: httpMethods.get,
+    authenticationToken,
+  });
+
+export default getRepositories;