Merge pull request #33 from zenml-io/talha/feedback-fixes

Talha/feedback fixes

Author: danialraza03

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}
     />
   );
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Box, Paragraph, icons } from '../../../components';
 import { iconColors, iconSizes } from '../../../../constants';
@@ -9,7 +9,43 @@ import { Configuration } from './Configuration';
 import { Runs } from './Runs';
 import { BasePage } from '../BasePage';
 import { useService } from './useService';
+import FilterComponent, {
+  getInitialFilterStateForRuns,
+} from '../../../components/Filters';
+import { useLocationPath } from '../../../hooks';
 
+interface Props {
+  pipelineId: TId;
+}
+const FilterWrapperForRun = () => {
+  const locationPath = useLocationPath();
+  // debugger;
+
+  // TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
+  const [filters, setFilter] = useState([getInitialFilterStateForRuns()]);
+  function getFilter(values: any) {
+    const filterValuesMap = values.map((v: any) => {
+      return {
+        column: v.column.selectedValue,
+        type: v.contains.selectedValue,
+        value: v.filterValue,
+      };
+    });
+    return filterValuesMap;
+  }
+  return (
+    <FilterComponent
+      getInitials={getInitialFilterStateForRuns}
+      filters={filters}
+      setFilter={setFilter}
+    >
+      <Runs
+        filter={getFilter(filters)}
+        pipelineId={locationPath.split('/')[2]}
+      />
+    </FilterComponent>
+  );
+};
 const getTabPages = (pipelineId: TId): TabPage[] => {
   return [
     {
@@ -19,7 +55,8 @@ const getTabPages = (pipelineId: TId): TabPage[] => {
     },
     {
       text: translate('tabs.runs.text'),
-      Component: () => <Runs pipelineId={pipelineId} />,
+      Component: FilterWrapperForRun,
+
       path: routePaths.pipeline.runs(pipelineId),
     },
   ];
@@ -121,7 +158,6 @@ export const PipelineDetail: React.FC = () => {
           </Paragraph>
         </Box>
       </Box>
-
     </BasePage>
   );
 };