Merge branch 'dev' of https://github.com/zenml-io/zenml-dashboard into ahsan/feat/auth-screens

Author: AhsanKhan7

.github/workflows/release.yml

@@ -1,51 +1,61 @@
-name: Release-pipeline
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 14.20.0
-      - name: Install yarn
-        run: npm install --global yarn
-      - name: Build
-        run: |
-          yarn install
-          yarn build
-        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\//}
-
-      - name: Generate Changelog
-        uses: heinrichreimer/[email protected]
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          pullRequests: "false"
-          onlyLastTag: "true"
-          stripGeneratorNotice: "true"
-          issuesWoLabels: "true"
-          stripHeaders: "true"
-      - name: Release to GitHub
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./build/*
-          body_path: ./CHANGELOG.md
-          prerelease: "true"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+name: Release-pipeline
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 14.20.0
+      - name: Install yarn
+        run: npm install --global yarn
+      - name: Build
+        run: |
+          yarn install
+          yarn build
+        env:
+          REACT_APP_BASE_API_URL: "/api/v1"
+          REACT_APP_MOCKAPI_RESPONSE: false
+          REACT_APP_VERSION: ${{ github.ref }}
+
+      - name: Get the version from the github tag ref
+        id: get_version
+        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\//}
+
+      - name: Generate Changelog
+        uses: heinrichreimer/[email protected]
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          pullRequests: "false"
+          onlyLastTag: "true"
+          stripGeneratorNotice: "true"
+          issuesWoLabels: "true"
+          stripHeaders: "true"
+      - name: Create release archive
+        uses: a7ul/[email protected]
+        id: compress
+        with:
+          command: c
+          cwd: ./build
+          files: |
+            *
+          outPath: zenml-dashboard.tar.gz
+      - name: Release to GitHub
+        uses: softprops/action-gh-release@v1
+        with:
+          files: zenml-dashboard.tar.gz
+          body_path: ./CHANGELOG.md
+          prerelease: "true"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

global.d.ts

@@ -113,13 +113,15 @@ interface TStack {
   isShared?: Boolean;
 }
 type TRunStatus =
-  | 'Finished'
+  | 'finished'
   | 'In Progress'
   | 'completed'
-  | 'Running'
-  | 'Failed';
+  | 'running'
+  | 'failed'
+  | 'cached';
 
 interface TRun {
+  pipelineConfiguration?: any;
   id: TId;
   status: TRunStatus;
   kubeflowStartTime: Date;
@@ -137,7 +139,7 @@ interface TRun {
   userName?: any;
   user?: any;
   creationDate?: any;
-  status?: string;
+  // status?: string;
   created: Date;
   name?: string;
 }

public/_redirects

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

public/index.html

@@ -24,12 +24,12 @@
 
     <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.

src/constants/runs.ts

@@ -1,5 +1,6 @@
 export const runStatus: { [key: string]: TRunStatus } = {
-  completed: 'completed',
-  Running: 'Running',
-  Failed: 'Failed',
+  FAILED: 'failed',
+  COMPLETED: 'completed',
+  RUNNING: 'running',
+  CACHED: 'cached',
 };

src/ui/components/Filters/index.tsx

@@ -210,12 +210,12 @@ export const getInitialFilterStateForRuns = () => {
           type: 'string',
         },
         {
-          value: 'name',
+          value: 'pipelineName',
           label: 'Pipeline Name',
           type: 'string',
         },
         {
-          value: 'name',
+          value: 'stackName',
           label: 'Stack Name',
           type: 'string',
         },

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx

@@ -33,13 +33,13 @@ export const AuthenticatedHeader: React.FC<{
 
   if (!user || !organization) return null;
 
-  const userFullName = user.fullName || DEFAULT_FULL_NAME;
+  const userFullName = user.fullName || user.name || DEFAULT_FULL_NAME;
   const userInitials = getInitials(userFullName);
 
   const logout = () => {
     dispatch(sessionActions.logout());
   };
-
+  // debugger;
   return (
     <FlexBox
       paddingHorizontal="lg"

src/ui/layouts/pipelines/PipelineDetail/Configuration/index.tsx

@@ -18,16 +18,16 @@ export const Configuration: React.FC<{ pipelineId: TId }> = ({
 }) => {
   const { downloadYamlFile, pipelineConfig } = useService({ pipelineId });
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
   const handleCopy = () => {
-    navigator.clipboard.writeText(pipelineConfig)
+    navigator.clipboard.writeText(pipelineConfig);
     dispatch(
       showToasterAction({
         description: 'Config copied to clipboard',
         type: toasterTypes.success,
       }),
     );
-  }
+  };
 
   return (
     <FlexBox.Column fullWidth>
@@ -38,11 +38,14 @@ export const Configuration: React.FC<{ pipelineId: TId }> = ({
       >
         <H4 bold>{translate('configuration.title.text')}</H4>
         <Box>
-          <GhostButton style={{ marginRight: '10px' }} onClick={downloadYamlFile}>
+          <GhostButton
+            style={{ marginRight: '10px' }}
+            onClick={downloadYamlFile}
+          >
             {translate('configuration.button.text')}
           </GhostButton>
           <GhostButton onClick={handleCopy}>
-            <icons.copy color={iconColors.black} size={iconSizes.sm} />     
+            <icons.copy color={iconColors.black} size={iconSizes.sm} />
           </GhostButton>
         </Box>
       </FlexBox>
@@ -54,7 +57,7 @@ export const Configuration: React.FC<{ pipelineId: TId }> = ({
           style={okaidia}
         >
           {pipelineConfig}
-        </SyntaxHighlighter> 
+        </SyntaxHighlighter>
       </FlexBox>
     </FlexBox.Column>
   );

src/ui/layouts/pipelines/PipelineDetail/Configuration/useService.ts

@@ -1,5 +1,8 @@
 import { useSelector } from 'react-redux';
-import { pipelineSelectors } from '../../../../../redux/selectors';
+import {
+  pipelineSelectors,
+  // runSelectors,
+} from '../../../../../redux/selectors';
 
 import YAML from 'json2yaml';
 

src/ui/layouts/pipelines/PipelineDetail/Runs/index.tsx

@@ -3,14 +3,18 @@ import { translate } from '../translate';
 import { RunsTable } from '../../RunsTable';
 import { useService } from './useService';
 
-export const Runs: React.FC<{ pipelineId: TId }> = ({ pipelineId }) => {
+export const Runs: React.FC<{ pipelineId: TId; filter: any }> = ({
+  pipelineId,
+  filter,
+}) => {
   const { fetching, runIds } = useService({ pipelineId });
 
   return (
     <RunsTable
       fetching={fetching}
       emptyStateText={translate('emptyState.text')}
       runIds={runIds}
+      filter={filter}
     />
   );
 };