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>
This commit is contained in:
OUM NIVRATHI KALE
GitHub
parent
cf90de59ba
commit
ccca965c57
|
|
@ -171,7 +171,7 @@ settings:
|
|||
############ Targets ###########
|
||||
######################################
|
||||
|
||||
Targets:
|
||||
targets:
|
||||
connectHome:
|
||||
head : Targets
|
||||
connectText: Connect the Target
|
||||
|
|
@ -186,7 +186,9 @@ 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
|
||||
|
|
@ -194,17 +196,40 @@ ConnectTargets:
|
|||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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}
|
||||
onChange={handleChange}
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
className={classes.formControl}
|
||||
color="secondary"
|
||||
>
|
||||
<FormControlLabel
|
||||
value="d"
|
||||
control={<Radio />}
|
||||
label={
|
||||
<Typography>
|
||||
Ignite-cluster(where this Litmus portal is install and
|
||||
running)
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
</RadioGroup>
|
||||
<InputLabel className={classes.selectText}>
|
||||
{t('workflowCluster.header.selectCluster')}
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={name}
|
||||
onChange={handleChange}
|
||||
input={<Input />}
|
||||
MenuProps={MenuProps}
|
||||
className={classes.selectText}
|
||||
>
|
||||
{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}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue