litmuschaos
/
litmus
mirror of https://github.com/litmuschaos/litmus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed portal ux issues and minor style changes (#2940) 

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
This commit is contained in:
Amit Kumar Das 2021-06-25 10:25:45 +05:30 committed by GitHub
parent f693470827
commit 48c079aa85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 64 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/SaveTemplateModal.tsx
View File

@ -14,6 +14,7 @@ import useStyles from './styles';
import { getProjectID } from '../../../utils/getSearchParams';
import Loader from '../../../components/Loader';
import { constants } from '../../../constants';
import { validateWorkflowName } from '../../../utils/validate';
interface SaveTemplateModalProps {
closeTemplate: () => void;
@ -89,9 +90,14 @@ const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
label="Name of the template"
value={templateName}
data-cy="WorkflowName"
helperText=""
required
onChange={(e) => setTemplateName(e.target.value)}
onChange={(e) => setTemplateName(e.target.value.toLowerCase())}
helperText={
validateWorkflowName(templateName)
? t('createWorkflow.chooseWorkflow.validate')
: ''
}
variant={validateWorkflowName(templateName) ? 'error' : 'primary'}
className={classes.InputFieldTemplate}
/>
<br />
@ -133,6 +139,7 @@ const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
cloneResult.type === constants.success ||
templateName.trim().length === 0 ||
templateDesc.trim().length === 0 ||
validateWorkflowName(templateName) ||
!yamlValid
}
>

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

@ -169,6 +169,7 @@ const TableData: React.FC<TableDataProps> = ({
width="60%"
open={isTemplateModalOpen}
onClose={handleCloseTemplate}
disableBackdropClick
modalActions={
<ButtonOutlined onClick={handleCloseTemplate}>
&#x2715;

2
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
View File

@ -59,8 +59,10 @@ const useStyles = makeStyles((theme) => ({
'& p': {
fontSize: '0.8125rem',
fontWeight: 'bold',
color: theme.palette.text.hint,
},
'& th': {
color: theme.palette.text.hint,
backgroundColor: theme.palette.cards.background,
},
},

2
litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts
View File

@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
'& th': {
fontWeight: 'bold',
fontSize: '0.8125rem',
color: theme.palette.text.disabled,
color: theme.palette.text.hint,
backgroundColor: theme.palette.cards.background,
},
},

38
litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/SelectMyHub.tsx
View File

@ -17,7 +17,7 @@ const SelectMyHub = () => {
const [availableHubs, setAvailableHubs] = useState<MyHubDetail[]>([]);
// Get all MyHubs with status
const { data, loading } = useQuery<HubStatus>(GET_HUB_STATUS, {
const { data } = useQuery<HubStatus>(GET_HUB_STATUS, {
variables: { data: selectedProjectID },
fetchPolicy: 'cache-and-network',
});
@ -38,17 +38,33 @@ const SelectMyHub = () => {
};
useEffect(() => {
if (data?.getHubStatus.length) {
setAvailableHubs([...data.getHubStatus]);
data.getHubStatus.forEach((hubData) => {
if (hubData.HubName.toLowerCase() === 'chaos hub') {
setSelectedHub('Chaos Hub');
localforage.setItem('selectedHub', 'Chaos Hub');
localforage.setItem('hasSetWorkflowData', false);
}
});
if (data?.getHubStatus !== undefined) {
if (data.getHubStatus.length) {
const hubDetails: MyHubDetail[] = [];
data.getHubStatus.forEach((hub) => {
/**
* Push only available hubs
*/
if (hub.IsAvailable) {
hubDetails.push({
id: hub.id,
HubName: hub.HubName,
RepoBranch: hub.RepoBranch,
RepoURL: hub.RepoURL,
});
}
});
setAvailableHubs(hubDetails);
data.getHubStatus.forEach((hubData) => {
if (hubData.HubName.toLowerCase() === 'chaos hub') {
setSelectedHub('Chaos Hub');
localforage.setItem('selectedHub', 'Chaos Hub');
localforage.setItem('hasSetWorkflowData', false);
}
});
}
}
}, [loading]);
}, [data]);
const classes = useStyles();
return (

20
litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/choosePreDefinedExperiments.tsx
View File

@ -45,7 +45,7 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
const [workflowList, setWorkflowlist] = useState([]);
// Get all MyHubs with status
const { data, loading } = useQuery<HubStatus>(GET_HUB_STATUS, {
const { data } = useQuery<HubStatus>(GET_HUB_STATUS, {
variables: { data: selectedProjectID },
fetchPolicy: 'cache-and-network',
});
@ -111,7 +111,21 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
useEffect(() => {
if (data?.getHubStatus !== undefined) {
if (data.getHubStatus.length) {
setAvailableHubs([...data.getHubStatus]);
const hubDetails: MyHubDetail[] = [];
data.getHubStatus.forEach((hub) => {
/**
* Push only available hub
*/
if (hub.IsAvailable) {
hubDetails.push({
id: hub.id,
HubName: hub.HubName,
RepoBranch: hub.RepoBranch,
RepoURL: hub.RepoURL,
});
}
});
setAvailableHubs(hubDetails);
}
data.getHubStatus.forEach((hubData) => {
if (hubData.HubName.toLowerCase() === 'chaos hub') {
@ -126,7 +140,7 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
}
});
}
}, [loading]);
}, [data]);
return (
<AccordionDetails>

12
litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx
View File

@ -279,11 +279,13 @@ const TuneWorkflow = forwardRef((_, ref) => {
*/
const getSelectedWorkflowDetails = () => {
localforage.getItem('workflow').then((workflow) => {
setWorkflow({
name: (workflow as WorkflowDetailsProps).name,
crd: (workflow as WorkflowDetailsProps).CRDLink,
description: (workflow as WorkflowDetailsProps).description,
});
if (workflow) {
setWorkflow({
name: (workflow as WorkflowDetailsProps).name,
crd: (workflow as WorkflowDetailsProps).CRDLink,
description: (workflow as WorkflowDetailsProps).description,
});
}
});
localforage.getItem('selectedScheduleOption').then((value) => {
/**