type(ux): Updated exp runs in usage section and refactored the target application code (#2945)
* Fixed label selection and workflow settings Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Updated subject, context and fixed the experiment runs in usage section Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Get pre-defined workflow manifest of selected hub Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
This commit is contained in:
Amit Kumar Das
GitHub
parent
fd9a3aeb6f
commit
eca531afdd
|
|
@ -39,21 +39,8 @@ const General: React.FC<GeneralProps> = ({ gotoStep, isCustom }) => {
|
|||
) {
|
||||
return engineYAML.metadata.labels.context;
|
||||
}
|
||||
/**
|
||||
* Split the experiments according to - in their names
|
||||
* For index 0 to n-1 concat the experiment words with _
|
||||
* For final index do not concat the _
|
||||
* Adding Namespace to the front of the concatenated Exp Name
|
||||
* to form the context
|
||||
* */
|
||||
|
||||
experimentName.split('-').map((name, i) => {
|
||||
if (i < experimentName.split('-').length - 1)
|
||||
context = `${context + name}_`;
|
||||
else context += name;
|
||||
return null;
|
||||
});
|
||||
context = `${namespace}_${context}`;
|
||||
context = `${experimentName}_${namespace}`;
|
||||
return context;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import {
|
|||
} from '../../../../models/graphql/createWorkflowData';
|
||||
import { KUBE_OBJ } from '../../../../graphql';
|
||||
import { constants } from '../../../../constants';
|
||||
import { gvrData } from './data';
|
||||
|
||||
interface AppInfoData {
|
||||
namespace: string;
|
||||
|
|
@ -103,34 +104,6 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
|
|||
});
|
||||
const [appLabel, setAppLabel] = useState<string[]>([]);
|
||||
|
||||
/**
|
||||
*
|
||||
* Variable required for Menu List
|
||||
*/
|
||||
const applicationKind: string[] = [
|
||||
constants.deployment,
|
||||
constants.statefulset,
|
||||
constants.daemonset,
|
||||
constants.deploymentconfig,
|
||||
constants.rollout,
|
||||
];
|
||||
/**
|
||||
* Function to filter the lables according to the namespace provided
|
||||
*/
|
||||
const handleLabelChange = () => {
|
||||
const applabel: string[] = [];
|
||||
if (appinfoData !== undefined) {
|
||||
appinfoData.forEach((appinfo) => {
|
||||
if (appinfo.namespace === targetApp.appns) {
|
||||
appinfo.appLabel.forEach((label) => applabel.push(label));
|
||||
}
|
||||
});
|
||||
}
|
||||
return applabel.length > 0
|
||||
? setAppLabel(applabel)
|
||||
: setAppLabel(['No resource available']);
|
||||
};
|
||||
|
||||
/**
|
||||
* Function for handling AnnotationCheck toggle button
|
||||
*/
|
||||
|
|
@ -203,35 +176,41 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
|
|||
},
|
||||
},
|
||||
},
|
||||
onSubscriptionComplete: () => {
|
||||
handleLabelChange();
|
||||
},
|
||||
fetchPolicy: 'network-only',
|
||||
});
|
||||
|
||||
/**
|
||||
* This useEffect is used to populate the namespace and
|
||||
* all the labels present in that particular namespace.
|
||||
* UseEffect to filter the labels according to the namespace provided
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (data !== undefined) {
|
||||
const appinfo: AppInfoData[] = [];
|
||||
try {
|
||||
/**
|
||||
* Parse the kubeObject data
|
||||
*/
|
||||
const kubeData: KubeObjData[] = JSON.parse(data.getKubeObject.kube_obj);
|
||||
kubeData.forEach((obj: KubeObjData) => {
|
||||
const applabel: string[] = [];
|
||||
const applabels: string[] = [];
|
||||
if (obj.data != null) {
|
||||
obj.data.forEach((objData: KubeObjResource) => {
|
||||
if (objData.labels != null) {
|
||||
/**
|
||||
* Get the labels from the key value pairs
|
||||
* example - app=mongo
|
||||
*/
|
||||
Object.entries(objData.labels).map(([key, value]) =>
|
||||
applabel.push(`${key}=${value}`)
|
||||
applabels.push(`${key}=${value}`)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Push these labels corresponding to their namespaces
|
||||
*/
|
||||
appinfo.push({
|
||||
namespace: obj.namespace,
|
||||
appLabel: applabel,
|
||||
appLabel: applabels,
|
||||
});
|
||||
});
|
||||
} catch (err) {
|
||||
|
|
@ -242,51 +221,38 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
|
|||
});
|
||||
}
|
||||
setAppInfoData(appinfo);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
/**
|
||||
* Filter the labels according to their namespace
|
||||
*/
|
||||
if (appinfoData !== undefined) {
|
||||
const filteredAppLabel: string[] = [];
|
||||
appinfo.forEach((appinfos) => {
|
||||
if (appinfos.namespace === targetApp.appns) {
|
||||
appinfos.appLabel.forEach((label) => filteredAppLabel.push(label));
|
||||
}
|
||||
});
|
||||
if (filteredAppLabel.length > 0) {
|
||||
setAppLabel(filteredAppLabel);
|
||||
} else {
|
||||
setAppLabel(['No resource available']);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [data, targetApp.appns]);
|
||||
/**
|
||||
* This useEffect is called on the first render to fetch the
|
||||
* kubeObj data and populate it in the AutoComplete textfields
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (targetApp.appkind === constants.deployment) {
|
||||
setGVRObj({
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.deployments,
|
||||
});
|
||||
} else if (targetApp.appkind === constants.statefulset) {
|
||||
setGVRObj({
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.statefulsets,
|
||||
});
|
||||
} else if (targetApp.appkind === constants.daemonset) {
|
||||
setGVRObj({
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.daemonsets,
|
||||
});
|
||||
} else if (targetApp.appkind === constants.deploymentconfig) {
|
||||
setGVRObj({
|
||||
group: constants.openshift,
|
||||
version: constants.v1,
|
||||
resource: constants.deploymentconfigs,
|
||||
});
|
||||
} else if (targetApp.appkind === constants.rollout) {
|
||||
setGVRObj({
|
||||
group: constants.argoproj,
|
||||
version: constants.v1alpha1,
|
||||
resource: constants.rollouts,
|
||||
});
|
||||
} else {
|
||||
setGVRObj({
|
||||
group: '',
|
||||
version: '',
|
||||
resource: '',
|
||||
});
|
||||
}
|
||||
gvrData.forEach((gvr) => {
|
||||
if (gvr.resource === targetApp.appkind)
|
||||
setGVRObj({
|
||||
group: gvr.group,
|
||||
version: gvr.version,
|
||||
resource: `${gvr.resource}s`,
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -373,7 +339,6 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
|
|||
...targetApp,
|
||||
appns: v,
|
||||
});
|
||||
handleLabelChange();
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<InputField
|
||||
|
|
@ -420,54 +385,23 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
|
|||
...targetApp,
|
||||
appkind: event.target.value as string,
|
||||
});
|
||||
handleLabelChange();
|
||||
if (event.target.value === constants.deployment) {
|
||||
setGVRObj({
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.deployments,
|
||||
});
|
||||
} else if (event.target.value === constants.statefulset) {
|
||||
setGVRObj({
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.statefulsets,
|
||||
});
|
||||
} else if (event.target.value === constants.daemonset) {
|
||||
setGVRObj({
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.daemonsets,
|
||||
});
|
||||
} else if (
|
||||
event.target.value === constants.deploymentconfig
|
||||
) {
|
||||
setGVRObj({
|
||||
group: constants.openshift,
|
||||
version: constants.v1,
|
||||
resource: constants.deploymentconfigs,
|
||||
});
|
||||
} else if (event.target.value === constants.rollout) {
|
||||
setGVRObj({
|
||||
group: constants.argoproj,
|
||||
version: constants.v1alpha1,
|
||||
resource: constants.rollouts,
|
||||
});
|
||||
} else {
|
||||
setGVRObj({
|
||||
group: '',
|
||||
version: '',
|
||||
resource: '',
|
||||
});
|
||||
}
|
||||
gvrData.forEach((gvr) => {
|
||||
if (gvr.resource === (event.target.value as string)) {
|
||||
setGVRObj({
|
||||
group: gvr.group,
|
||||
version: gvr.version,
|
||||
resource: `${gvr.resource}s`,
|
||||
});
|
||||
}
|
||||
});
|
||||
}}
|
||||
label={constants.appKind}
|
||||
>
|
||||
<MenuItem aria-label="None" value="" />
|
||||
{applicationKind.map((kind) => {
|
||||
{gvrData.map((gvr) => {
|
||||
return (
|
||||
<MenuItem key={kind} value={kind}>
|
||||
{kind}
|
||||
<MenuItem key={gvr.resource} value={gvr.resource}>
|
||||
{gvr.resource}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import { constants } from '../../../../constants';
|
||||
|
||||
export const gvrData = [
|
||||
{
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.deployment,
|
||||
},
|
||||
{
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.statefulset,
|
||||
},
|
||||
{
|
||||
group: constants.apps,
|
||||
version: constants.v1,
|
||||
resource: constants.daemonset,
|
||||
},
|
||||
{
|
||||
group: constants.openshift,
|
||||
version: constants.v1,
|
||||
resource: constants.deploymentconfig,
|
||||
},
|
||||
{
|
||||
group: constants.argoproj,
|
||||
version: constants.v1alpha1,
|
||||
resource: constants.rollout,
|
||||
},
|
||||
];
|
||||
|
|
@ -18,7 +18,6 @@ import { useSelector } from 'react-redux';
|
|||
import { v4 as uuidv4 } from 'uuid';
|
||||
import YAML from 'yaml';
|
||||
import YamlEditor from '../../../components/YamlEditor/Editor';
|
||||
import { constants } from '../../../constants';
|
||||
import Row from '../../../containers/layouts/Row';
|
||||
import Width from '../../../containers/layouts/Width';
|
||||
import {
|
||||
|
|
@ -278,16 +277,16 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
* Index DB Fetching for extracting selected Button and Workflow Details
|
||||
*/
|
||||
const getSelectedWorkflowDetails = () => {
|
||||
localforage.getItem('workflow').then((workflow) => {
|
||||
if (workflow) {
|
||||
setWorkflow({
|
||||
name: (workflow as WorkflowDetailsProps).name,
|
||||
crd: (workflow as WorkflowDetailsProps).CRDLink,
|
||||
description: (workflow as WorkflowDetailsProps).description,
|
||||
});
|
||||
}
|
||||
});
|
||||
localforage.getItem('selectedScheduleOption').then((value) => {
|
||||
localforage.getItem('workflow').then((wfDetails) => {
|
||||
if (wfDetails) {
|
||||
setWorkflow({
|
||||
name: (wfDetails as WorkflowDetailsProps).name,
|
||||
crd: (wfDetails as WorkflowDetailsProps).CRDLink,
|
||||
description: (wfDetails as WorkflowDetailsProps).description,
|
||||
});
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Setting default data when MyHub is selected
|
||||
*/
|
||||
|
|
@ -298,16 +297,21 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
(value as WorkflowDetailsProps).CRDLink !== '' &&
|
||||
manifest === ''
|
||||
)
|
||||
getPredefinedExperimentYaml({
|
||||
variables: {
|
||||
experimentInput: {
|
||||
ProjectID: selectedProjectID,
|
||||
ChartName: '',
|
||||
ExperimentName: (value as WorkflowDetailsProps).CRDLink,
|
||||
HubName: constants.chaosHub,
|
||||
FileType: '',
|
||||
/**
|
||||
* Get Pre-defined experiment YAML of the selected hub
|
||||
*/
|
||||
localforage.getItem('selectedHub').then((hub) => {
|
||||
getPredefinedExperimentYaml({
|
||||
variables: {
|
||||
experimentInput: {
|
||||
ProjectID: selectedProjectID,
|
||||
ChartName: '',
|
||||
ExperimentName: (value as WorkflowDetailsProps).CRDLink,
|
||||
HubName: hub as string,
|
||||
FileType: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,14 +105,14 @@ const VerifyCommit = forwardRef(
|
|||
crd: (workflow as WorkflowDetailsProps).CRDLink,
|
||||
});
|
||||
setSubject(
|
||||
`${(workflow as WorkflowDetailsProps).name}-${
|
||||
`${(workflow as WorkflowDetailsProps).name}_${
|
||||
workflowData.namespace
|
||||
}`
|
||||
);
|
||||
const parsedManifest = YAML.parse(manifest);
|
||||
delete parsedManifest.metadata.generateName;
|
||||
parsedManifest.metadata['labels'] = {
|
||||
subject: `${(workflow as WorkflowDetailsProps).name}-${
|
||||
subject: `${(workflow as WorkflowDetailsProps).name}_${
|
||||
workflowData.namespace
|
||||
}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -375,7 +375,7 @@ const UsageTable = () => {
|
|||
{project.Workflows.Runs}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{project.Workflows.Runs}
|
||||
{project.Workflows.ExpRuns}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{project.Members.Total}
|
||||
|
|
|
|||
Loading…
Reference in New Issue