Added endpoint for yaml fetch and refactoring of targets (#2232)

Signed-off-by: Oum Nivrathi Kale <oum.kale@mayadata.io>

litmus-portal/frontend/public/locales/en/translation.yaml

@@ -226,7 +226,7 @@ workflowCluster:
       menu2: Not active
       menu4: Internal
       menu5: External
-      menu6: pending
+      menu6: Pending
       # For Table
       tableStatus: Status
       tableCluster: Target agent
@@ -234,8 +234,8 @@ workflowCluster:
       time: Time
       run: Last Run
       connectionDate: Connection Date
-      noWorkflows: Nom of workflows
-      noSchedules: Nom of schedules
+      noWorkflows: No. of workflows
+      noSchedules: No. of schedules
       fetchingError: Unable to fetch data
       recordAvailable: No records available
       delete: Delete

litmus-portal/frontend/src/components/Targets/ClusterInfo/index.tsx

@@ -54,13 +54,23 @@ const ClusterInfo: React.FC<ClusterVarsProps> = ({ location }) => {
                 </div>
                 <div>
                   {data.is_active ? (
-                    <div className={classes.active}>
+                    <Typography
+                      className={`${classes.check} ${classes.active}`}
+                    >
                       {t('workflowCluster.header.formControl.menu1')}
-                    </div>
+                    </Typography>
+                  ) : data.is_cluster_confirmed === false ? (
+                    <Typography
+                      className={`${classes.check} ${classes.pending}`}
+                    >
+                      {t('workflowCluster.header.formControl.menu6')}
+                    </Typography>
                   ) : (
-                    <div className={classes.notactive}>
+                    <Typography
+                      className={`${classes.check} ${classes.notactive}`}
+                    >
                       {t('workflowCluster.header.formControl.menu2')}
-                    </div>
+                    </Typography>
                   )}
                 </div>
               </div>

litmus-portal/frontend/src/components/Targets/ClusterInfo/styles.ts

@@ -26,15 +26,6 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(5),
     marginTop: theme.spacing(5),
   },
-  active: {
-    width: '5.9125rem',
-    textAlign: 'center',
-    borderRadius: 3,
-    paddingTop: theme.spacing(0.375),
-    paddingBottom: theme.spacing(0.375),
-    color: theme.palette.primary.dark,
-    background: theme.palette.customColors.menuOption.active,
-  },
   firstCol: {
     display: 'flex',
     alignItems: 'center',
@@ -51,15 +42,6 @@ const useStyles = makeStyles((theme) => ({
   version: {
     marginTop: theme.spacing(2),
   },
-  notactive: {
-    width: '5.9125rem',
-    textAlign: 'center',
-    borderRadius: 3,
-    paddingTop: theme.spacing(0.375),
-    paddingBottom: theme.spacing(0.375),
-    color: theme.palette.error.dark,
-    backgroundColor: theme.palette.error.light,
-  },
   aboutDiv: {
     display: 'flex',
     flexDirection: 'column',
@@ -100,6 +82,26 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     flexGrow: 1,
   },
+  check: {
+    width: '5.9125rem',
+    textAlign: 'center',
+    borderRadius: 3,
+    paddingTop: theme.spacing(0.375),
+    paddingBottom: theme.spacing(0.375),
+    color: theme.palette.primary.dark,
+  },
+  active: {
+    color: theme.palette.primary.dark,
+    background: theme.palette.customColors.menuOption.active,
+  },
+  notactive: {
+    color: theme.palette.error.dark,
+    backgroundColor: theme.palette.error.light,
+  },
+  pending: {
+    background: theme.palette.customColors.menuOption.pending,
+    color: theme.palette.warning.main,
+  },
 }));
 
 export default useStyles;

litmus-portal/frontend/src/components/Targets/TargetCopy/index.tsx

@@ -23,9 +23,13 @@ const TargetCopy: React.FC<InstallProps> = ({ yamlLink }) => {
       .writeText(text)
       .catch((err) => console.error('Async: Could not copy text: ', err));
 
-    setTimeout(() => setCopying(false), 3000);
+    setTimeout(() => setCopying(false), 6000);
   }
-  const engineUrl: string = `kubectl apply -f http://localhost:8080/file/${yamlLink}.yaml`;
+
+  const x = window.location.hostname;
+  const y = window.location.port;
+
+  const engineUrl: string = `kubectl apply -f http://${x}:${y}/file/${yamlLink}.yaml`;
 
   const { t } = useTranslation();
 

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

@@ -24,7 +24,11 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
   return (
     <>
       <TableCell className={classes.tableDataStatus}>
-        {data.is_active ? (
+        {data.is_cluster_confirmed === false ? (
+          <Typography className={`${classes.check} ${classes.pending}`}>
+            {t('workflowCluster.header.formControl.menu6')}
+          </Typography>
+        ) : data.is_cluster_confirmed === true && data.is_active ? (
           <Typography className={`${classes.check} ${classes.active}`}>
             {t('workflowCluster.header.formControl.menu1')}
           </Typography>
@@ -45,10 +49,8 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
           <Typography>{data.cluster_name}</Typography>
         </IconButton>
       </TableCell>
-      <TableCell>
-        <Typography className={classes.clusterName}>
-          {formatDate(data.created_at)}
-        </Typography>
+      <TableCell className={classes.stepsData}>
+        {formatDate(data.updated_at)}
       </TableCell>
       <TableCell>
         <Typography className={classes.stepsData}>
@@ -59,23 +61,6 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
         <Typography>{data.no_of_schedules}</Typography>
       </TableCell>
       <TableCell>{formatDate(data.updated_at)}</TableCell>
-      <TableCell>
-        <Typography>{/* reconnect */}</Typography>
-      </TableCell>
-      <TableCell>
-        <div className={classes.deleteCluster}>
-          <div>
-            <IconButton>
-              <img alt="delete" src="/icons/bin-red.svg" />
-            </IconButton>
-          </div>
-          <div>
-            <Typography>
-              {t('workflowCluster.header.formControl.delete')}
-            </Typography>
-          </div>
-        </div>
-      </TableCell>
     </>
   );
 };

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

@@ -105,15 +105,10 @@ const BrowseCluster = () => {
         const p = 'pending';
         return p.includes(filters.status.toLowerCase());
       }
-      if ((dataRow.is_active as boolean).toString().toLowerCase() === 'false') {
-        const p = 'false';
-        return p.includes(filters.status.toLowerCase());
-      }
-      if ((dataRow.is_active as boolean).toString().toLowerCase() === 'true') {
-        const p = 'true';
-        return p.includes(filters.status.toLowerCase());
-      }
-      return true;
+      return (dataRow.is_active as boolean)
+        .toString()
+        .toLowerCase()
+        .includes(filters.status.toLowerCase());
     })
     .filter((dataRow) =>
       filters.cluster === 'All'
@@ -242,7 +237,7 @@ const BrowseCluster = () => {
                       {t('workflowCluster.header.formControl.tableStatus')}
                     </Typography>
                     <IconButton
-                      aria-label="sort last run descending"
+                      aria-label="sort in descending order"
                       size="small"
                       onClick={() =>
                         setSortData({
@@ -267,7 +262,7 @@ const BrowseCluster = () => {
                       {t('workflowCluster.header.formControl.tableCluster')}
                     </Typography>
                     <IconButton
-                      aria-label="sort last run descending"
+                      aria-label="sort in descending"
                       size="small"
                       onClick={() =>
                         setSortData({
@@ -314,11 +309,6 @@ const BrowseCluster = () => {
                     </Typography>
                   </div>
                 </TableCell>
-
-                {/* Re-connect */}
-                <TableCell />
-                <TableCell />
-                <TableCell />
               </TableRow>
             </TableHead>
 
@@ -326,13 +316,13 @@ const BrowseCluster = () => {
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={8}>
+                  <TableCell colSpan={6}>
                     <Loader />
                   </TableCell>
                 </TableRow>
               ) : error ? (
                 <TableRow>
-                  <TableCell data-cy="browseScheduleError" colSpan={8}>
+                  <TableCell data-cy="browseClusterError" colSpan={6}>
                     <Typography align="center">
                       {t('workflowCluster.header.formControl.fetchingError')}
                     </Typography>
@@ -346,16 +336,13 @@ const BrowseCluster = () => {
                       paginationData.rowsPerPage
                   )
                   .map((data: Cluster) => (
-                    <TableRow
-                      data-cy="browseScheduleData"
-                      key={data.cluster_id}
-                    >
+                    <TableRow data-cy="browseClusterData" key={data.cluster_id}>
                       <TableData data={data} />
                     </TableRow>
                   ))
               ) : (
                 <TableRow>
-                  <TableCell data-cy="browseScheduleNoData" colSpan={0}>
+                  <TableCell data-cy="browseClusterNoData" colSpan={0}>
                     <Typography align="center">
                       {t('workflowCluster.header.formControl.recordAvailable')}
                     </Typography>

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

@@ -23,7 +23,6 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: `1px solid ${theme.palette.customColors.black(0.1)}`,
     marginLeft: theme.spacing(6.25),
   },
-
   // Form Select Properties
   formControl: {
     margin: theme.spacing(0.5),
@@ -31,12 +30,10 @@ const useStyles = makeStyles((theme) => ({
     height: '2.5rem',
     minWidth: '9rem',
   },
-
   selectText: {
     height: '2.5rem',
     padding: theme.spacing(0.5),
   },
-
   selectDate: {
     display: 'flex',
     flexDirection: 'row',
@@ -52,7 +49,6 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(1),
     width: '100%',
   },
-
   // Table and Table Data Properties
   tableMain: {
     marginTop: theme.spacing(4.25),
@@ -73,7 +69,6 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.customColors.black(0.4),
   },
   sortDiv: {
-    paddingTop: theme.spacing(0.5),
     paddingLeft: theme.spacing(1.5),
   },
   headData: {
@@ -161,10 +156,13 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.error.dark,
     backgroundColor: theme.palette.error.light,
   },
+  pending: {
+    background: theme.palette.customColors.menuOption.pending,
+    color: theme.palette.warning.main,
+  },
   statusFont: {
     fontSize: '0.725rem',
   },
-
   // Delete Cluster Modal
   body: {
     display: 'flex',

litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/styles.ts

@@ -51,11 +51,11 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   text1: {
     width: '27.5rem',
-    height: '1.6875rem',
     marginBottom: theme.spacing(3.75),
   },
   typo1: {
     fontSize: '1rem',
+    marginBottom: theme.spacing(2),
   },
   buttonModal: {
     marginTop: theme.spacing(3.75),