Updated graphql schema and added filter in browse workflow section (#2062)

- Updated graphql schema with cluster_name and cluster_type in frontend
- Added filter functionality in the browse workflow section

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

litmus-portal/frontend/src/graphql/quries.ts

@@ -10,6 +10,7 @@ export const WORKFLOW_DETAILS = gql`
       project_id
       cluster_name
       last_updated
+      cluster_type
     }
   }
 `;
@@ -31,6 +32,8 @@ export const SCHEDULE_DETAILS = gql`
       created_at
       project_id
       cluster_id
+      cluster_type
+      cluster_name
     }
   }
 `;

litmus-portal/frontend/src/models/graphql/scheduleData.ts

@@ -15,6 +15,8 @@ export interface ScheduleWorkflow {
   workflow_id: string;
   workflow_manifest: string;
   workflow_name: string;
+  cluster_name: string;
+  cluster_type: string;
 }
 
 export interface Schedules {

litmus-portal/frontend/src/models/graphql/workflowData.ts

@@ -46,6 +46,7 @@ export interface WorkflowRun {
   workflow_id: string;
   workflow_name: string;
   workflow_run_id: string;
+  cluster_type: string;
 }
 
 export interface Workflow {

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx

@@ -48,8 +48,8 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
   };
 
   // Function to convert UNIX time in format of DD MMM YYY
-  const formatDate = (date: any) => {
-    const updated = new Date(date * 1000).toString();
+  const formatDate = (date: string) => {
+    const updated = new Date(parseInt(date, 10) * 1000).toString();
     const resDate = moment(updated).format('DD MMM YYYY');
     if (date) return resDate;
     return 'Date not available';
@@ -76,7 +76,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
         </div>
       </TableCell>
       <TableCell>
-        <Typography>Internal</Typography>
+        <Typography>{data.cluster_name}</Typography>
       </TableCell>
       <TableCell>
         <Button onClick={handlePopOverClick} style={{ textTransform: 'none' }}>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx

@@ -96,11 +96,13 @@ const BrowseSchedule = () => {
     .filter((dataRow) =>
       dataRow.workflow_name.toLowerCase().includes(filter.search.toLowerCase())
     )
-    // .filter((dataRow) =>
-    //   filter.cluster === 'All'
-    //     ? true
-    //     : dataRow.cluster_name.toLowerCase().includes(filter.cluster)
-    // )
+    .filter((dataRow) =>
+      filter.cluster === 'All'
+        ? true
+        : dataRow.cluster_type
+            .toLowerCase()
+            .includes(filter.cluster.toLowerCase())
+    )
     .sort((a: ScheduleWorkflow, b: ScheduleWorkflow) => {
       // Sorting based on unique fields
       if (sortData.name.sort) {

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx

@@ -35,6 +35,13 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+  // Function to capitalize the first letter of the word
+  // eg: internal to Internal
+  const nameCapitalized = (clusterType: string) => {
+    if (clusterType)
+      return clusterType.charAt(0).toUpperCase() + clusterType.slice(1);
+    return 'Not Available';
+  };
 
   return (
     <>
@@ -48,7 +55,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
       </TableCell>
       <TableCell>
         <Typography className={classes.clusterName}>
-          {data.cluster_name}
+          {nameCapitalized(data.cluster_type)}
         </Typography>
       </TableCell>
       <TableCell>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx

@@ -157,7 +157,9 @@ const BrowseWorkflow = () => {
     .filter((dataRow) =>
       filters.cluster === 'All'
         ? true
-        : dataRow.cluster_name.includes(filters.cluster)
+        : dataRow.cluster_type
+            .toLowerCase()
+            .includes(filters.cluster.toLowerCase())
     )
     .filter((dataRow) => {
       return dateRange.fromDate && dateRange.toDate === undefined

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts

@@ -95,7 +95,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.customColors.black(0.4),
   },
   clusterName: {
-    marginLeft: theme.spacing(3.75),
+    marginLeft: theme.spacing(4),
   },
   reliabiltyData: {
     width: '8.125rem',