predefined workflow refactor (#2407)

Signed-off-by: oumkale <oum.kale@mayadata.io> Co-authored-by: Raj Babu Das <mail.rajdas@gmail.com>
2021-03-03 21:24:47 +05:30 · 2021-03-03 21:24:47 +05:30 · 2b05193f63
parent f644c01ed9
commit 2b05193f63
6 changed files with 48 additions and 92 deletions
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/litmus-portal/frontend/public/locales/en/translation.yaml
@ -49,6 +49,8 @@ quickActionCard:

 customWorkflowCard:
  customWorkflow: Create your own workflow
+  infraChaos: Infra-Chaos
+  

 workflowStepper:
  continueError: To continue, please check the error in code.
--- a/litmus-portal/frontend/src/components/PredifinedWorkflows/data.ts
+++ b/litmus-portal/frontend/src/components/PredifinedWorkflows/data.ts
@ -2,6 +2,7 @@ export default [
  {
    workflowID: 0,
    title: 'sock-shop-resiliency-check',
+    chaosinfra: false,
    urlToIcon:
      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/pod-delete.png',
    chaosWkfCRDLink:
@ -29,6 +30,7 @@ export default [
  {
    workflowID: 1,
    title: 'node-cpu-hog',
+    chaosinfra: true,
    urlToIcon:
      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/node-cpu-hog.png',
    chaosWkfCRDLink:
@ -55,6 +57,7 @@ export default [
  {
    workflowID: 2,
    title: 'node-memory-hog',
+    chaosinfra: true,
    urlToIcon:
      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/node-memory-hog.png',
    chaosWkfCRDLink:
@ -83,83 +86,8 @@ export default [
  },
  {
    workflowID: 3,
-    title: 'pod-cpu-hog',
-    urlToIcon:
-      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/pod-cpu-hog.png',
-    chaosWkfCRDLink:
-      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/pod-cpu-hog/workflow.yaml',
-    chaosWkfCRDLink_Recur:
-      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/pod-cpu-hog/workflow_cron.yaml',
-    gitLink:
-      'https://github.com/litmuschaos/chaos-charts/blob/master/workflows/pod-cpu-hog',
-    provider: 'MayaData',
-    description: 'Injects a CPU spike on a pod',
-    totalRuns: 5000,
-    isCustom: false,
-    details:
-      'This experiment consumes the CPU resources on the application container (upward of 80%) ' +
-      'on specified number of cores It simulates conditions where app pods experience CPU spikes ' +
-      'either due to expected/undesired processes thereby testing how the overall application ' +
-      'stack behaves when this occurs.',
-    recommendation:
-      'Check whether the application stack is resilient to CPU spikes on the app replica, once the experiment (job) is completed.',
-    experimentinfo:
-      'Use this sample RBAC manifest to create a chaosServiceAccount in the desired (app) namespace. ' +
-      'This example consists of the minimum necessary role permissions to execute the experiment.',
-  },
-  {
-    workflowID: 4,
-    title: 'pod-memory-hog',
-    urlToIcon:
-      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/pod-memory-hog.png',
-    chaosWkfCRDLink:
-      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/pod-memory-hog/workflow.yaml',
-    chaosWkfCRDLink_Recur:
-      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/pod-memory-hog/workflow_cron.yaml',
-    gitLink:
-      'https://github.com/litmuschaos/chaos-charts/blob/master/workflows/pod-memory-hog',
-    provider: 'MayaData',
-    description: 'Injects a memory spike on a pod',
-    totalRuns: 3005,
-    isCustom: false,
-    details:
-      'This experiment consumes the Memory resources on the application container on specified memory in' +
-      'megabytes. It simulates conditions where app pods experience Memory spikes either due to ' +
-      'expected/undesired processes thereby testing how the overall application stack behaves when this occurs.',
-    recommendation:
-      'Check whether the application stack is resilient to Memory spikes on the app replica, once the experiment (job) is completed.',
-    experimentinfo:
-      'Pod Memory can be effected using the chaos library: litmus',
-  },
-  {
-    workflowID: 5,
-    title: 'pod-delete',
-    urlToIcon:
-      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/pod-delete.png',
-    chaosWkfCRDLink:
-      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/pod-delete/workflow.yaml',
-    chaosWkfCRDLink_Recur:
-      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/pod-delete/workflow_cron.yaml',
-    gitLink:
-      'https://github.com/litmuschaos/chaos-charts/blob/master/workflows/pod-delete',
-    provider: 'MayaData',
-    description: 'Deletes a pod',
-    totalRuns: 6700,
-    isCustom: false,
-    details:
-      'Causes (forced/graceful) pod failure of specific/random replicas of an application resources ' +
-      'Tests deployment sanity (replica availability & uninterrupted service) and recovery workflow ' +
-      'of the application The pod delete by Powerfulseal is only supporting single pod ' +
-      'failure (kill_count = 1).',
-    recommendation:
-      'Check whether the application is resilient to the pod failure, once the experiment (job) is completed.',
-    experimentinfo:
-      'Provide the application info in spec.appinfo Override the experiment tunables if desired ' +
-      'in experiments.spec.components.env ',
-  },
-  {
-    workflowID: 6,
    title: 'kube-proxy-chaos',
+    chaosinfra: false,
    urlToIcon: 'https://hub.litmuschaos.io/api/icon/1.8.0/generic/generic.png',
    chaosWkfCRDLink:
      'https://raw.githubusercontent.com/litmuschaos/chaos-charts/master/workflows/kube-proxy-all/workflow.yaml',
@ -182,8 +110,9 @@ export default [
      'in experiments.spec.components.env ',
  },
  {
-    workflowID: 7,
+    workflowID: 4,
    title: 'namespaced-scope-chaos',
+    chaosinfra: false,
    urlToIcon:
      'https://hub.litmuschaos.io/api/icon/1.7.0/generic/pod-delete.png',
    chaosWkfCRDLink:
--- a/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
+++ b/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
@ -29,6 +29,7 @@ const PredifinedWorkflows: React.FC<PredifinedWorkflowsProps> = ({
              key={w.workflowID}
              title={w.title}
              urlToIcon={w.urlToIcon}
+              chaosinfra={w.chaosinfra}
              provider={w.provider}
              chaosWkfCRDLink={w.chaosWkfCRDLink}
              selectedID={w.workflowID}
--- a/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
+++ b/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
@ -3,6 +3,9 @@
 import { Tooltip, Zoom } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
 import { preDefinedWorkflowData } from '../../models/predefinedWorkflow';
 import { RootState } from '../../redux/reducers';
 import trimString from '../../utils/trim';
@ -17,10 +20,12 @@ const CardContent: React.FC<preDefinedWorkflowData> = ({
  handleClick,
  description,
  chaosWkfCRDLink,
+  chaosinfra,
 }) => {
  const selectedTemplateID = useSelector(
    (state: RootState) => state.selectTemplate.selectedTemplateID
  );
+  const { t } = useTranslation();

  const isSelected: boolean =
    workflowID !== undefined && workflowID === selectedTemplateID;
@ -74,19 +79,23 @@ const CardContent: React.FC<preDefinedWorkflowData> = ({
        onClick={handleClick}
      >
        <div className={classes.cardAnalytics}>
-          {/* {totalRuns ? (
-            <span
-              className={
-                selectedID === workflowID
-                  ? classes.totalRunsSelected
-                  : classes.totalRuns
-              }
+          {chaosinfra === true ? (
+            <span>
+              <Tooltip
+                title="Uses kube-proxy for identification of pod"
+                interactive
              >
-              {formatCount(totalRuns)}+
+                <div className={classes.infrachaos}>
+                  <InfoOutlinedIcon />
+                  <Typography className={classes.infraChaosMain}>
+                    {t('customWorkflowCard.infraChaos')}
+                  </Typography>
+                </div>
+              </Tooltip>
            </span>
          ) : (
            <span />
-          )} */}
+          )}
          <span className={classes.expCount}>
            {exptCount} {exptCount > 1 ? 'Experiments' : 'Experiment'}
          </span>
--- a/litmus-portal/frontend/src/components/WorkflowCard/styles.ts
+++ b/litmus-portal/frontend/src/components/WorkflowCard/styles.ts
@ -7,7 +7,7 @@ const useStyles = makeStyles((theme) => ({
    background: theme.palette.cards.background,
    height: '16rem',
    width: '11.875rem',
-    borderRadius: 3,
+    borderRadius: '3rem',
    fontSize: '0.875rem',
    textAlign: 'center',
    cursor: 'pointer',
@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
  // CardContent

  card: {
-    width: theme.spacing(23),
+    width: '11.8rem',
    background: theme.palette.background.paper,
    borderRadius: 3,
    height: '16rem',
@ -117,7 +117,8 @@ const useStyles = makeStyles((theme) => ({

  cardAnalytics: {
    display: 'flex',
-    justifyContent: 'flex-end',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1),
    marginLeft: theme.spacing(1.5),
@ -157,8 +158,8 @@ const useStyles = makeStyles((theme) => ({
    backgroundColor: theme.palette.secondary.dark,
    color: theme.palette.secondary.contrastText,
    borderRadius: 3,
-    paddingTop: theme.spacing(0.375),
-    paddingBottom: theme.spacing(0.375),
+    paddingTop: theme.spacing(0.275),
+    paddingBottom: theme.spacing(0.275),
    paddingLeft: theme.spacing(0.75),
    paddingRight: theme.spacing(0.75),
    fontSize: '0.625rem',
@ -185,6 +186,19 @@ const useStyles = makeStyles((theme) => ({
    fontSize: '0.75rem',
    lineHeight: '130%',
  },
+  infrachaos: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: theme.spacing(0.275, 0.75, 0.275, 0.75),
+    backgroundColor: theme.palette.secondary.light,
+    color: theme.palette.secondary.contrastText,
+    borderRadius: 3,
+  },
+  infraChaosMain: {
+    fontSize: '0.625rem',
+    fontWeight: 500,
+  },
 }));

 export default useStyles;
--- a/litmus-portal/frontend/src/models/predefinedWorkflow.ts
+++ b/litmus-portal/frontend/src/models/predefinedWorkflow.ts
@ -17,6 +17,7 @@ export interface preDefinedWorkflowData {
  details?: string;
  recommendation?: string;
  experimentinfo?: string;
+  chaosinfra?: boolean;
 }

 export interface workflowDetails {