type(ux): Added error texts and fixed the probes table (#2904)

* Added error texts and error handling * Minor refactoring Signed-off-by: Amit Kumar Das <amit@chaosnative.com>
2021-06-17 15:04:53 +05:30 · 2021-06-17 15:04:53 +05:30 · a0143c38cf
parent 94fd8b0643
commit a0143c38cf
6 changed files with 166 additions and 63 deletions
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/litmus-portal/frontend/public/locales/en/translation.yaml
@ -895,6 +895,7 @@ createWorkflow:
    selectHub: Select a hub and continue with a pre-defined workflow
    noPredefined: No Pre-defined experiments present
    addPredefined: Add a pre-defined workflow to continue scheduling.
+    searchTerm: Enter a correct search term
  reliabilityScore:
    header: Adjust the weights of the experiments in the workflow
    info: You have selected
@ -1153,6 +1154,9 @@ workflowAgent:
    selectAgent: Select a target Kubernetes cluster to run this workflow
  search:
    placeholder: Search
+  connectAgent: Connect an agent to start scheduling workflows
+  noAgents: You have not connected any agents yet
+  noAgentSearch: No agents found

 workflows:
  browseWorkflows: Browse workflows
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/index.tsx
@ -1,6 +1,12 @@
 import { useLazyQuery, useQuery } from '@apollo/client';
 import { RadioGroup, Typography, useTheme } from '@material-ui/core';
-import { LitmusCard, RadioButton, Search } from 'litmus-ui';
+import {
+  ButtonOutlined,
+  LitmusCard,
+  Modal,
+  RadioButton,
+  Search,
+} from 'litmus-ui';
 import React, {
  forwardRef,
  useEffect,
@ -9,6 +15,8 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
+import { AgentDeployModal } from '../../../components/AgentDeployModal';
 import { constants } from '../../../constants';
 import {
  GET_CLUSTER,
@ -49,6 +57,12 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
  const [currentlySelectedAgent, setCurrentlySelectedAgent] =
    useState<string>('');

+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  const toggleModel = () => {
+    setModalOpen(!modalOpen);
+  };
+
  const [getRegistryData] = useLazyQuery(GET_IMAGE_REGISTRY, {
    fetchPolicy: 'network-only',
    onCompleted: (data) => {
@ -214,38 +228,82 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
        />

        {/* Cluster Data */}
-        <RadioGroup
-          name="Agent Selection"
-          value={currentlySelectedAgent}
-          onChange={(e) => handleChange(e)}
-        >
-          <div className={classes.agentWrapperDiv} data-cy="AgentsRadioGroup">
-            {filteredCluster.map((cluster) => (
-              <LitmusCard
-                key={cluster.cluster_id}
-                glow={currentlySelectedAgent === cluster.cluster_id}
-                width="40%"
-                height="4rem"
-                className={classes.litmusCard}
-                borderColor={
-                  currentlySelectedAgent === cluster.cluster_id
-                    ? palette.primary.main
-                    : palette.border.main
+        {clusterData.length === 0 ? (
+          <div className={classes.noAgents}>
+            <Typography className={classes.noAgentsText}>
+              <strong>{t('workflowAgent.noAgents')}</strong>
+            </Typography>
+            <Typography className={classes.connectAgent}>
+              {t('workflowAgent.connectAgent')}
+            </Typography>
+            <div className={classes.connectBtn}>
+              <ButtonOutlined
+                onClick={toggleModel}
+                className={classes.infoContainerButton}
+              >
+                <Typography>
+                  <ArrowUpwardIcon />
+                  {t('homeViews.agentConfiguredHome.agentInfoContainer.deploy')}
+                </Typography>
+              </ButtonOutlined>
+
+              <Modal
+                height="50%"
+                width="50%"
+                open={modalOpen}
+                onClose={toggleModel}
+                modalActions={
+                  <ButtonOutlined onClick={toggleModel}>
+                    &#x2715;
+                  </ButtonOutlined>
                }
              >
-                <RadioButton
-                  value={cluster.cluster_id}
-                  className={classes.agentRadioButton}
-                >
-                  <div>
-                    <Typography>{cluster.cluster_name}</Typography>
-                    <Typography>{cluster.cluster_id}</Typography>
-                  </div>
-                </RadioButton>
-              </LitmusCard>
-            ))}
+                <AgentDeployModal handleClose={toggleModel} />
+              </Modal>
+            </div>
          </div>
-        </RadioGroup>
+        ) : (
+          <RadioGroup
+            name="Agent Selection"
+            value={currentlySelectedAgent}
+            onChange={(e) => handleChange(e)}
+          >
+            <div className={classes.agentWrapperDiv} data-cy="AgentsRadioGroup">
+              {filteredCluster?.length > 0 ? (
+                filteredCluster.map((cluster) => (
+                  <LitmusCard
+                    key={cluster.cluster_id}
+                    glow={currentlySelectedAgent === cluster.cluster_id}
+                    width="40%"
+                    height="4rem"
+                    className={classes.litmusCard}
+                    borderColor={
+                      currentlySelectedAgent === cluster.cluster_id
+                        ? palette.primary.main
+                        : palette.border.main
+                    }
+                  >
+                    <RadioButton
+                      value={cluster.cluster_id}
+                      className={classes.agentRadioButton}
+                    >
+                      <div>
+                        <Typography>{cluster.cluster_name}</Typography>
+                        <Typography>{cluster.cluster_id}</Typography>
+                      </div>
+                    </RadioButton>
+                  </LitmusCard>
+                ))
+              ) : (
+                <div className={classes.noAgentsText}>
+                  <Typography>
+                    <strong>{t('workflowAgent.noAgentSearch')}</strong>
+                  </Typography>
+                </div>
+              )}
+            </div>
+          </RadioGroup>
+        )}
      </div>
    </div>
  );
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/styles.ts
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseAWorkflowAgent/styles.ts
@ -55,6 +55,28 @@ const useStyles = makeStyles((theme: Theme) => ({
    marginTop: theme.spacing(1),
    marginLeft: '5%',
  },
+  infoContainerButton: {
+    '& svg': {
+      margin: theme.spacing(0, 1, -0.625, 0),
+    },
+    '& p': {
+      fontWeight: 500,
+    },
+  },
+  noAgents: {
+    marginTop: theme.spacing(3.5),
+    margin: 'auto',
+    textAlign: 'center',
+  },
+  noAgentsText: {
+    fontSize: '1.25rem',
+  },
+  connectAgent: {
+    fontSize: '1rem',
+  },
+  connectBtn: {
+    marginTop: theme.spacing(2.5),
+  },
 }));

 export default useStyles;
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/SelectMyHub.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/SelectMyHub.tsx
@ -40,6 +40,12 @@ 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');
+        }
+      });
    }
  }, [loading]);

--- a/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/choosePreDefinedExperiments.tsx
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/choosePreDefinedExperiments.tsx
@ -144,7 +144,7 @@ const ChoosePreDefinedExperiments = () => {
                {t('createWorkflow.chooseWorkflow.selectMyHub')}
              </InputLabel>
              <Select
-                data-cy="myHubDropDown"
+                data-cy="selectPreDefinedMyHub"
                value={selectedHub}
                onChange={(e) => {
                  handleMyHubChange(e);
@ -153,12 +153,10 @@ const ChoosePreDefinedExperiments = () => {
                MenuProps={MenuProps}
              >
                {availableHubs.map((hubs) => (
-                  <MenuItem
-                    key={hubs.HubName}
-                    data-cy="hubOption"
-                    value={hubs.HubName}
-                  >
-                    {hubs.HubName}
+                  <MenuItem key={hubs.HubName} value={hubs.HubName}>
+                    <Typography data-cy="PreDefinedHubOption">
+                      {hubs.HubName}
+                    </Typography>
                  </MenuItem>
                ))}
              </Select>
@ -206,32 +204,47 @@ const ChoosePreDefinedExperiments = () => {
              data-cy="PredefinedWorkflowsRadioGroup"
              onChange={handleChange}
            >
-              {filteredPreDefinedWorkflows?.map((wfData) => (
-                <LitmusCard
-                  width="100%"
-                  height="5rem"
-                  key={wfData}
-                  borderColor={palette.border.main}
-                  className={classes.predefinedWorkflowCard}
-                >
-                  <RadioButton value={wfData}>
-                    {/* Wrap the entire body with 100% width to divide into 40-60 */}
-                    <div id="body">
-                      {/* Left Div => Icon + Name of Workflow */}
-                      <div id="left-div">
-                        <img
-                          className={classes.experimentIcon}
-                          src={`${config.grahqlEndpoint}/icon/${selectedProjectID}/${selectedHub}/predefined/${wfData}.png`}
-                          alt="Experiment Icon"
-                        />
-                        <Typography className={classes.predefinedWorkflowName}>
-                          {wfData}
-                        </Typography>
+              {filteredPreDefinedWorkflows?.length > 0 ? (
+                filteredPreDefinedWorkflows?.map((wfData) => (
+                  <LitmusCard
+                    width="100%"
+                    height="5rem"
+                    key={wfData}
+                    borderColor={palette.border.main}
+                    className={classes.predefinedWorkflowCard}
+                  >
+                    <RadioButton value={wfData}>
+                      {/* Wrap the entire body with 100% width to divide into 40-60 */}
+                      <div id="body">
+                        {/* Left Div => Icon + Name of Workflow */}
+                        <div id="left-div">
+                          <img
+                            className={classes.experimentIcon}
+                            src={`${config.grahqlEndpoint}/icon/${selectedProjectID}/${selectedHub}/predefined/${wfData}.png`}
+                            alt="Experiment Icon"
+                          />
+                          <Typography
+                            className={classes.predefinedWorkflowName}
+                          >
+                            {wfData}
+                          </Typography>
+                        </div>
                      </div>
-                    </div>
-                  </RadioButton>
-                </LitmusCard>
-              ))}
+                    </RadioButton>
+                  </LitmusCard>
+                ))
+              ) : (
+                <div className={classes.noTemplatesDiv}>
+                  <Typography className={classes.noTemplatesText}>
+                    <strong>
+                      {t('createWorkflow.chooseWorkflow.noPredefined')}
+                    </strong>
+                  </Typography>
+                  <Typography className={classes.noTemplatesDesc}>
+                    {t('createWorkflow.chooseWorkflow.searchTerm')}
+                  </Typography>
+                </div>
+              )}
            </RadioGroup>
          )}
        </div>
--- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/styles.ts
+++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/styles.ts
@ -55,7 +55,7 @@ const useStyles = makeStyles((theme: Theme) => ({

  // Probes Table
  table: {
-    minWidth: '40.625rem',
+    marginTop: theme.spacing(2.5),
    minHeight: '9rem',
  },