Graphql modal, queries and mutation setup | Workflow Cluster | Translation (#2212)

- Graphql modal, queries and mutation setup | Workflow Cluster | Translation (#2212)

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

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

@@ -171,9 +171,9 @@ settings:
 ############    Targets    ###########
 ######################################
 
-Targets:
+targets:
   connectHome:
-    head: Targets
+    head : Targets
     connectText: Connect the Target 
   copy:
     copy: Copy
@@ -186,25 +186,50 @@ Targets:
     head3: 3.Paste it into the cluster console
     head4: 4.Click on the button
     head5: Connect the target
-ConnectTargets:
+    conformation: Kuberenetes Agent is confirming, Please wait...
+
+connectTargets:
   title: A new Target,
-  head: is successfully created!
-  info: Congratulations on connecting a new target! Now information about it
-  mainLine: will be displayed on "Targets".
+  head : is successfully created!
+  info:  Congratulations on connecting a new target! Now information about it 
+  mainLine:  will be displayed on "Targets".
   button:
     buttonBack: Back to Targets
     buttonSchedule: Schedule a workflow
-WorkflowCluster:
+workflowCluster:
   header:
     status: Current Status
     target: Target Cluster
+    chooseAgent: Choose the target Kubernetes Agent
+    creatingNew: You are creating a
+    creatingNewBold: new chaos workflow.
+    selectAgent: Select a target Kubernetes Agent to run this workflow.
+    selectCluster: Choose Active Cluster
+    select: Select and Continue
+    snackbar: No Cluster Registered With Your Project ID, Please Wait...
     formControl:
+      # For Header
       menu: All
-      menu1: Failed
-      menu2: Running
-      menu3: Succeeded
+      menu1: Active
+      menu2: Not active
       menu4: Internal
       menu5: External
+      menu6: pending
+      # For Table
+      tableStatus: Status
+      tableCluster: cluster
+      name: Name
+      time: Time
+      run: Last Run
+      connectionDate: Connection Date
+      noWorkflows: Nom of workflows
+      noSchedules: Nom of schedules
+      fetchingError: Unable to fetch data
+      recordAvailable: No records available
+      delete: Delete
+      clusterInfo: Cluster information
+      about: About Litmus Cluster
+      back: Back
 
 workflows:
   browseWorkflows: Browse workflows

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

@@ -11,6 +11,7 @@ export const CREATE_WORKFLOW = gql`
     }
   }
 `;
+
 export const CREATE_USER = gql`
   mutation CreateUser($user: CreateUserInput!) {
     createUser(user: $user) {
@@ -63,3 +64,13 @@ export const UPDATE_DETAILS = gql`
     updateUser(user: $user)
   }
 `;
+
+export const USER_CLUSTER_REG = gql`
+  mutation userCluster($ClusterInput: ClusterInput!) {
+    userClusterReg(clusterInput: $ClusterInput) {
+      token
+      cluster_id
+      cluster_name
+    }
+  }
+`;

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

@@ -71,10 +71,23 @@ export const GET_USER = gql`
 `;
 
 export const GET_CLUSTER = gql`
-  query getCluster($project_id: String!, $cluster_type: String) {
+  query getClusters($project_id: String!, $cluster_type: String) {
     getCluster(project_id: $project_id, cluster_type: $cluster_type) {
       cluster_id
       is_active
+      project_id
+      cluster_name
+      description
+      platform_name
+      access_key
+      is_registered
+      is_cluster_confirmed
+      updated_at
+      created_at
+      cluster_type
+      no_of_schedules
+      no_of_workflows
+      token
     }
   }
 `;

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

@@ -0,0 +1,45 @@
+export interface Cluster {
+  cluster_id: string;
+  project_id: string;
+  cluster_name: string;
+  description: String;
+  platform_name: string;
+  access_key: string;
+  is_registered: boolean;
+  is_cluster_confirmed: boolean;
+  is_active: boolean;
+  updated_at: string;
+  created_at: string;
+  cluster_type: string;
+  no_of_workflows: number;
+  no_of_schedules: number;
+  token: string;
+}
+
+export interface Clusters {
+  getCluster: Cluster[];
+}
+
+export interface CreateClusterInput {
+  ClusterInput: {
+    cluster_name: string;
+    description: string;
+    platform_name: string;
+    project_id: string;
+    cluster_type: string;
+  };
+}
+
+export interface clusterRegResponse {
+  token: string;
+  cluster_id: string;
+  cluster_name: string;
+}
+
+export interface CreateClusterInputResponse {
+  userClusterReg: clusterRegResponse;
+}
+
+export interface ClusterVars {
+  project_id: string;
+}

litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/index.tsx

@@ -1,78 +1,77 @@
 import { useLazyQuery } from '@apollo/client';
 import {
   FormControl,
-  FormControlLabel,
-  RadioGroup,
   Snackbar,
   Typography,
+  MenuItem,
+  Select,
+  InputLabel,
+  Input,
 } from '@material-ui/core';
-import Radio from '@material-ui/core/Radio';
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import ButtonFilled from '../../../components/Button/ButtonFilled';
-import ButtonOutLine from '../../../components/Button/ButtonOutline';
 import { GET_CLUSTER } from '../../../graphql';
 import useActions from '../../../redux/actions';
 import * as WorkflowActions from '../../../redux/actions/workflow';
 import { RootState } from '../../../redux/reducers';
 import useStyles from './styles';
-import { history } from '../../../redux/configureStore';
 
-/*
-  Check is image which is used as
-  a sign on cluster page
-*/
-function Check() {
-  const classes = useStyles();
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 4;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+    },
+  },
+};
 
-  return <img src="icons/check.png" className={classes.check} alt="Check" />;
+interface Cluster {
+  cluster_id: string;
+  is_active: boolean;
 }
 
-/*
-  This screen is starting page of workflow
-*/
-
 interface WorkflowClusterProps {
   gotoStep: (page: number) => void;
 }
 
 const WorkflowCluster: React.FC<WorkflowClusterProps> = ({ gotoStep }) => {
   const classes = useStyles();
-  const [value, setValue] = React.useState('Experiment');
   const workflow = useActions(WorkflowActions);
   const [isTragetSelected, setTarget] = React.useState(true);
   const [isOpenSnackBar, setOpenSnackBar] = React.useState(false);
   const selectedProjectID = useSelector(
     (state: RootState) => state.userData.selectedProjectID
   );
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue((event.target as HTMLInputElement).value);
+
+  const [name, setName] = React.useState('');
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    const str: string = event.target.value as string;
+    workflow.setWorkflowDetails({
+      clusterid: str,
+      project_id: selectedProjectID,
+    });
+    setName(str);
+    setTarget(false);
   };
 
+  const [clusterData, setclusterData] = useState<Cluster[]>([]);
+
   const [getCluster] = useLazyQuery(GET_CLUSTER, {
     onCompleted: (data) => {
-      if (
-        data &&
-        data.getCluster.length !== 0 &&
-        data.getCluster[0].is_active !== false
-      ) {
-        workflow.setWorkflowDetails({
-          clusterid: data.getCluster[0].cluster_id,
-          project_id: selectedProjectID,
-          cronSyntax: '',
-          scheduleType: {
-            scheduleOnce: 'now',
-            recurringSchedule: '',
-          },
-          scheduleInput: {
-            hour_interval: 0,
-            day: 1,
-            weekday: 'Monday',
-            time: new Date(Date.now()),
-            date: new Date(Date.now()),
-          },
+      const clusters: Cluster[] = [];
+      if (data && data.getCluster.length !== 0) {
+        data.getCluster.forEach((e: Cluster) => {
+          if (e.is_active === true) {
+            clusters.push({
+              cluster_id: e.cluster_id,
+              is_active: e.is_active,
+            });
+          }
         });
-        gotoStep(1);
+        setclusterData(clusters);
       } else {
         setOpenSnackBar(true);
       }
@@ -80,53 +79,55 @@ const WorkflowCluster: React.FC<WorkflowClusterProps> = ({ gotoStep }) => {
     fetchPolicy: 'cache-and-network',
   });
 
+  useEffect(() => {
+    getCluster({ variables: { project_id: selectedProjectID } });
+  }, []);
+
   const handleClick = () => {
-    getCluster({
-      variables: {
-        project_id: selectedProjectID,
-        cluster_type: 'internal',
-      },
-    });
+    gotoStep(1);
   };
+  const { t } = useTranslation();
 
   return (
     <div className={classes.rootcontainer}>
       {/* Arrow mark */}
       <div>
-        <Check />
+        <img src="icons/check.png" className={classes.check} alt="Check" />
       </div>
       <div>
         <Typography className={classes.heading}>
-          <strong> Choose the target Kubernetes cluster</strong>
+          <strong> {t('workflowCluster.header.chooseAgent')}</strong>
         </Typography>
         <Typography className={classes.headchaos}>
-          You are creating a <strong> new chaos workflow.</strong>
+          {t('workflowCluster.header.creatingNew')}
+          <strong>{t('workflowCluster.header.creatingNewBold')} </strong>
         </Typography>
         <Typography className={classes.headcluster}>
-          Select a target Kubernetes cluster to run this workflow.
+          {t('workflowCluster.header.selectAgent')}
         </Typography>
 
         <div className={classes.radiobutton}>
-          <FormControl component="fieldset">
-            <RadioGroup
-              data-cy="selectRadio"
-              onClick={() => setTarget(false)}
-              aria-label="D"
-              name="radio-button-demo"
-              value={value}
+          <FormControl
+            variant="outlined"
+            className={classes.formControl}
+            color="secondary"
+          >
+            <InputLabel className={classes.selectText}>
+              {t('workflowCluster.header.selectCluster')}
+            </InputLabel>
+            <Select
+              value={name}
               onChange={handleChange}
+              input={<Input />}
+              MenuProps={MenuProps}
+              className={classes.selectText}
             >
-              <FormControlLabel
-                value="d"
-                control={<Radio />}
-                label={
-                  <Typography>
-                    Ignite-cluster(where this Litmus portal is install and
-                    running)
-                  </Typography>
-                }
-              />
-            </RadioGroup>
+              {clusterData.map((name: Cluster) => (
+                <MenuItem key={name.cluster_id} value={name.cluster_id}>
+                  {name.cluster_id}
+                </MenuItem>
+              ))}
+            </Select>
           </FormControl>
         </div>
       </div>
@@ -144,32 +145,15 @@ const WorkflowCluster: React.FC<WorkflowClusterProps> = ({ gotoStep }) => {
             isDisabled={isTragetSelected}
             handleClick={() => handleClick()}
           >
-            <div>Select and Continue</div>
+            <div>{t('workflowCluster.header.select')}</div>
           </ButtonFilled>
         </div>
-
-        <div className={classes.or}>or</div>
-        <div data-cy="External">
-          <ButtonOutLine
-            isDisabled={false}
-            data-cy="selectLitmusKubernetes"
-            handleClick={() => {
-              history.push('/targets');
-            }}
-          >
-            <Typography>
-              Install Litmus agents to other Kubernetes cluster
-            </Typography>
-          </ButtonOutLine>
-        </div>
       </div>
       <Snackbar
         open={isOpenSnackBar}
         action={
           <Typography>
-            <strong>
-              No Cluster Registered With Your Project ID, Please Wait...
-            </strong>
+            <strong>{t('workflowCluster.header.snackbar')}</strong>
           </Typography>
         }
         autoHideDuration={6000}

litmus-portal/frontend/src/views/CreateWorkflow/WorkflowCluster/styles.ts

@@ -18,6 +18,17 @@ const useStyles = makeStyles((theme: Theme) => ({
       shadow: theme.palette.secondary.dark,
     },
   },
+  // External agent styles
+  selectText: {
+    height: '2.9rem',
+    paddingLeft: theme.spacing(1),
+  },
+  formControl: {
+    marginRight: theme.spacing(2.5),
+    height: '2.5rem',
+    minWidth: '14rem',
+  },
+
   heading: {
     marginLeft: theme.spacing(20),
     marginTop: theme.spacing(5),
@@ -49,11 +60,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   buttonDiv: {
     marginTop: theme.spacing(6),
     display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
     flexDirection: 'row',
   },
-  or: {
-    marginTop: theme.spacing(1.5),
-  },
   marginTemporary: {
     marginTop: theme.spacing(1.5),
   },