From 245f333448ba32fc31fe2f3e83db4d886f7d5fae Mon Sep 17 00:00:00 2001 From: Amit Kumar Das <40661238+amityt@users.noreply.github.com> Date: Mon, 14 Jun 2021 10:01:00 +0530 Subject: [PATCH] type(ux): Removed templates tab and minor change in jobCleanUpPolicy (#2886) * Updated MyHub UI and minor change in jobCleanUpPolicy and removed templates tab * Removed files related to templates * Minor styles fix Signed-off-by: Amit Kumar Das --- .../components/PredifinedWorkflows/data.ts | 54 ----- .../components/PredifinedWorkflows/index.tsx | 72 ------ .../components/PredifinedWorkflows/styles.ts | 15 -- .../frontend/src/containers/app/App.tsx | 8 - .../frontend/src/pages/Workflows/index.tsx | 8 - .../BrowseTemplate/ExperimentDetails.tsx | 45 ---- .../ChaosWorkflows/BrowseTemplate/Head.tsx | 28 --- .../BrowseTemplate/Recommendation.tsx | 30 --- .../ChaosWorkflows/BrowseTemplate/index.tsx | 107 --------- .../ChaosWorkflows/BrowseTemplate/styles.ts | 77 ------- .../views/ChaosWorkflows/Templates/index.tsx | 72 ------ .../views/ChaosWorkflows/Templates/styles.ts | 53 ----- .../TuneWorkflowSteps/TargetApplication.tsx | 2 +- .../src/views/MyHub/MyHubCharts/index.tsx | 218 ++++++++---------- .../src/views/MyHub/MyHubCharts/styles.ts | 13 +- 15 files changed, 108 insertions(+), 694 deletions(-) delete mode 100644 litmus-portal/frontend/src/components/PredifinedWorkflows/data.ts delete mode 100644 litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx delete mode 100644 litmus-portal/frontend/src/components/PredifinedWorkflows/styles.ts delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Recommendation.tsx delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx delete mode 100644 litmus-portal/frontend/src/views/ChaosWorkflows/Templates/styles.ts diff --git a/litmus-portal/frontend/src/components/PredifinedWorkflows/data.ts b/litmus-portal/frontend/src/components/PredifinedWorkflows/data.ts deleted file mode 100644 index a96535400..000000000 --- a/litmus-portal/frontend/src/components/PredifinedWorkflows/data.ts +++ /dev/null @@ -1,54 +0,0 @@ -export default [ - { - workflowID: 0, - title: 'sock-shop-chaos', - chaosinfra: false, - urlToIcon: '/icons/sock-shop.png', - chaosWkfCRDLink: `https://raw.githubusercontent.com/litmuschaos/chaos-charts/${process.env.REACT_APP_HUB_BRANCH_NAME}/workflows/sock-shop-demo/usingCmdProbe/workflow.yaml`, - chaosWkfCRDLink_Recur: `https://raw.githubusercontent.com/litmuschaos/chaos-charts/${process.env.REACT_APP_HUB_BRANCH_NAME}/workflows/sock-shop-demo/usingCmdProbe/workflow_cron.yaml`, - gitLink: `https://github.com/litmuschaos/chaos-charts/${process.env.REACT_APP_HUB_BRANCH_NAME}/workflows/sock-shop-demo`, - experimentPath: 'sock-shop-demo/usingCmdProbe', - provider: 'ChaosNative', - description: 'Induces chaos on Sock-Shop application', - totalRuns: 1000, - isCustom: false, - details: - 'This workflow installs and executes chaos on the popular demo application sock-shop, ' + - 'that simulates an e-commerce website selling socks. It injects a transient fault on an upstream microservice ' + - 'pod (socks catalogue) while continuously checking the availability of the website. This workflow allows execution ' + - 'of the same chaos experiment against two versions of the sock-shop deployment: weak and resilient. ' + - 'The weak is expected to result in a failed workflow while the resilient succeeds, ' + - 'essentially highlighting the need for deployment best-practices.', - recommendation: - 'Check whether the application is resilient to the pod failure, once the workflow is completed.', - experimentinfo: - 'Provide the application info in spec.appinfo Override the experiment tunables if desired in experiments.spec.components.env', - }, - { - workflowID: 1, - title: 'podtato-head-chaos', - chaosinfra: false, - urlToIcon: '/icons/podtato_head.png', - chaosWkfCRDLink: `https://raw.githubusercontent.com/litmuschaos/chaos-charts/${process.env.REACT_APP_HUB_BRANCH_NAME}/workflows/podtato-head/workflow.yaml`, - chaosWkfCRDLink_Recur: `https://raw.githubusercontent.com/litmuschaos/chaos-charts/${process.env.REACT_APP_HUB_BRANCH_NAME}/workflows/podtato-head/workflow_cron.yaml`, - gitLink: `https://github.com/litmuschaos/chaos-charts/tree/${process.env.REACT_APP_HUB_BRANCH_NAME}/workflows/podtato-head`, - experimentPath: 'podtato-head', - provider: 'ChaosNative', - description: 'Induces chaos on podtato-head application', - totalRuns: 300, - isCustom: false, - details: - 'This workflow installs and executes chaos on the popular demo application podtato-head, ' + - 'A demo project for showcasing cloud-native application delivery use cases using different tools for various use cases.' + - 'It injects a transient fault on an upstream microservice ' + - 'pod while continuously checking the availability of the website. This workflow allows execution ' + - 'of the same chaos experiment against two versions of the podtato-head deployment: weak and resilient. ' + - 'The weak is expected to result in a failed workflow while the resilient succeeds, ' + - 'essentially highlighting the need for deployment best-practices.', - recommendation: - 'Check whether the application is resilient to the pod failure, once the workflow is completed.', - experimentinfo: - 'Provide the application info in spec.appinfo Override the experiment tunables if desired ' + - 'in experiments.spec.components.env ', - }, -]; diff --git a/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx b/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx deleted file mode 100644 index 9abe32325..000000000 --- a/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { preDefinedWorkflowData } from '../../models/predefinedWorkflow'; -import useActions from '../../redux/actions'; -import * as WorkflowActions from '../../redux/actions/workflow'; -import { history } from '../../redux/configureStore'; -import { getProjectID, getProjectRole } from '../../utils/getSearchParams'; -import CustomCard from '../WorkflowCard'; -import CustomWorkflowCard from '../WorkflowCard/CustomWorkflow'; -import useStyles from './styles'; - -interface PredifinedWorkflowsProps { - workflows: preDefinedWorkflowData[]; - callbackOnSelectWorkflow: (index: number) => void; - isCustomWorkflowVisible: boolean; -} - -const PredifinedWorkflows: React.FC = ({ - workflows, - callbackOnSelectWorkflow, - isCustomWorkflowVisible, -}) => { - const workflowAction = useActions(WorkflowActions); - const projectID = getProjectID(); - const userRole = getProjectRole(); - const classes = useStyles(); - return ( -
- {workflows && - workflows.map((w: preDefinedWorkflowData, index: number) => ( -
- callbackOnSelectWorkflow(index)} - description={w.description} - totalRuns={w.totalRuns} - gitLink={w.gitLink} - workflowID={w.workflowID} - /> -
- ))} - {isCustomWorkflowVisible && ( -
- { - workflowAction.setWorkflowDetails({ - name: `custom-chaos-workflow-${Math.round( - new Date().getTime() / 1000 - )}`, - description: 'Custom Chaos Workflow', - isCustomWorkflow: true, - namespace: 'litmus', - customWorkflows: [], - }); - history.push({ - pathname: '/create-workflow/custom', - search: `?projectID=${projectID}&projectRole=${userRole}`, - }); - }} - /> -
- )} -
- ); -}; - -export default PredifinedWorkflows; diff --git a/litmus-portal/frontend/src/components/PredifinedWorkflows/styles.ts b/litmus-portal/frontend/src/components/PredifinedWorkflows/styles.ts deleted file mode 100644 index 747ad6fb3..000000000 --- a/litmus-portal/frontend/src/components/PredifinedWorkflows/styles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles(() => ({ - root: { - display: 'flex', - boxSizing: 'border-box', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'center', - alignItems: 'center', - gap: 0, - }, -})); - -export default useStyles; diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx index e2ddef77f..9431cd44e 100644 --- a/litmus-portal/frontend/src/containers/app/App.tsx +++ b/litmus-portal/frontend/src/containers/app/App.tsx @@ -17,9 +17,6 @@ const CreateWorkflow = lazy(() => import('../../pages/CreateWorkflow')); const LoginPage = lazy(() => import('../../pages/LoginPage')); const GetStarted = lazy(() => import('../../pages/GetStartedPage')); const WorkflowDetails = lazy(() => import('../../pages/WorkflowDetails')); -const BrowseTemplate = lazy( - () => import('../../views/ChaosWorkflows/BrowseTemplate') -); const HomePage = lazy(() => import('../../pages/HomePage')); const Community = lazy(() => import('../../pages/Community')); const Settings = lazy(() => import('../../pages/Settings')); @@ -201,11 +198,6 @@ const Routes: React.FC = () => { path="/workflows/schedule/:scheduleProjectID/:workflowName/set" component={SetNewSchedule} /> - { @@ -80,10 +79,6 @@ const Workflows = () => { label={`${t('workflows.schedules')}`} data-cy="browseSchedule" /> - @@ -92,9 +87,6 @@ const Workflows = () => { - - - ); }; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx deleted file mode 100644 index 0a56f3c69..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/ExperimentDetails.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Typography } from '@material-ui/core'; -import React from 'react'; -import AdjustedWeight from '../../../components/AdjustedWeights'; -import useStyles from './styles'; - -interface ExperimentDetailsProps { - testNames: string[]; - testWeights: number[]; - experimentinfo?: string | undefined; -} - -const ExperimentDetails: React.FC = ({ - testNames, - testWeights, - experimentinfo, -}) => { - const classes = useStyles(); - - return ( -
- - Experiment details: - -
- {testNames && - testNames.map((test, i) => { - // Mapping all the experiments from a selected workflow - return ( -
- - {experimentinfo} -
- ); - })} -
-
- ); -}; - -export default ExperimentDetails; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx deleted file mode 100644 index 1679a862a..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Typography } from '@material-ui/core'; -import React from 'react'; -import capitalize from '../../../utils/capitalize'; -import useStyles from './styles'; - -interface HeadProps { - image?: string; - title?: string; - details?: string; -} - -const Head: React.FC = ({ image, title, details }) => { - const classes = useStyles(); - return ( -
- workflowIcon -
- - {/* Converting 'some-experiment' to 'Some Experiment' using capitalize utility */} - {title?.split('-').map((text) => `${capitalize(text)} `)} - - {details} -
-
- ); -}; - -export default Head; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Recommendation.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Recommendation.tsx deleted file mode 100644 index 9ae1bc506..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Recommendation.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { Typography } from '@material-ui/core'; -import useStyles from './styles'; - -interface RecommendationProps { - recommendation?: string; -} - -const Recommendation: React.FC = ({ recommendation }) => { - const classes = useStyles(); - - return ( -
-
- - Recommendation - - -
- - {recommendation} - -
-
- Like -
- ); -}; - -export default Recommendation; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx deleted file mode 100644 index e4b4a2f53..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Divider, Typography } from '@material-ui/core'; -import { ButtonFilled, ButtonOutlined } from 'litmus-ui'; -import localforage from 'localforage'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import BackButton from '../../../components/Button/BackButton'; -import data from '../../../components/PredifinedWorkflows/data'; -import Scaffold from '../../../containers/layouts/Scaffold'; -import { ChooseWorkflowRadio } from '../../../models/localforage/radioButton'; -import { preDefinedWorkflowData } from '../../../models/predefinedWorkflow'; -import { LocationState } from '../../../models/routerModel'; -import useActions from '../../../redux/actions'; -import * as WorkflowActions from '../../../redux/actions/workflow'; -import { history } from '../../../redux/configureStore'; -import { getProjectID, getProjectRole } from '../../../utils/getSearchParams'; -import ExperimentDetails from './ExperimentDetails'; -import Head from './Head'; -import Recommendation from './Recommendation'; -import useStyles from './styles'; - -interface LocationObjectProps { - workflowData: preDefinedWorkflowData; - testNames: string[]; - testWeights: number[]; -} - -interface BrowseTemplateProps { - location: LocationState; -} - -const BrowseAWorkflow: React.FC = ({ location }) => { - const { t } = useTranslation(); - const classes = useStyles(); - const projectID = getProjectID(); - const userRole = getProjectRole(); - const workflowAction = useActions(WorkflowActions); - const { workflowData, testNames, testWeights } = location.state; - - const preSelectWorkflow = () => { - data.map((w) => { - if (w.title === workflowData.title) { - const selection: ChooseWorkflowRadio = { - selected: 'A', - id: w.workflowID.toString(), - }; - localforage.setItem('selectedScheduleOption', selection); - } - return null; - }); - workflowAction.setWorkflowDetails({ - isCustomWorkflow: false, - }); - history.push({ - pathname: '/create-workflow', - search: `?projectID=${projectID}&projectRole=${userRole}`, - }); - }; - - return ( - -
- -
-
- - {t('browseTemplate.browseAWorkflow')} - - - {t('browseTemplate.seeDetails')} - -
- {/* Header */} - - - - {/* Experiment Details */} - - - - {/* Recommendation */} - - - - {/* Buttons */} -
- history.goBack()}> - {t('browseTemplate.back')} - - preSelectWorkflow()}> - {t('browseTemplate.scheduleThisTemplate')} - -
-
-
- - ); -}; - -export default BrowseAWorkflow; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts deleted file mode 100644 index c844a9421..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { makeStyles, Theme } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme: Theme) => ({ - root: { - background: theme.palette.background.paper, - width: '90%', - margin: '0 auto', - padding: theme.spacing(2), - }, - back: { - width: '90%', - margin: '0 auto', - padding: theme.spacing(1, 0), - }, - contentWrapper: { - background: theme.palette.cards.background, - padding: theme.spacing(1), - }, - headerTitle: { - fontSize: '2rem', - }, - bodytext: { - marginTop: theme.spacing(3.25), - marginBottom: theme.spacing(3), - fontSize: '1.0625rem', - }, - m2: { - margin: '2rem 0', - }, - spaceBetween: { - display: 'flex', - justifyContent: 'space-between', - }, - - // Head - - flexRow: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-even', - }, - headerText: { - marginTop: theme.spacing(1.25), - fontSize: '1.5625rem', - fontWeight: 800, - }, - - body: { - width: '70%', - }, - bgIcon: { - width: '7rem', - height: '100%', - margin: '1rem 3rem', - }, - progress: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - marginLeft: theme.spacing(5), - width: theme.spacing(79.5), - }, - - // Experiment Details - - experimentWrapperDiv: { - display: 'grid', - margin: theme.spacing(2, 0), - gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))', - gridGap: '1.5rem', - }, - tests: { - width: '17rem', - margin: theme.spacing(0, 2, 2, 0), - }, -})); -export default useStyles; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx deleted file mode 100644 index 575d16dcd..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import PredifinedWorkflows from '../../../components/PredifinedWorkflows'; -import workflowData from '../../../components/PredifinedWorkflows/data'; -import useActions from '../../../redux/actions'; -import * as TemplateSelectionActions from '../../../redux/actions/template'; -import { history } from '../../../redux/configureStore'; -import { getProjectID, getProjectRole } from '../../../utils/getSearchParams'; -import parsed from '../../../utils/yamlUtils'; -import useStyles from './styles'; - -const Templates = () => { - const classes = useStyles(); - const projectID = getProjectID(); - const projectRole = getProjectRole(); - - const template = useActions(TemplateSelectionActions); - const testNames: string[] = []; - const testWeights: number[] = []; - - // Setting initial selected template ID to 0 - template.selectTemplate({ selectedTemplateID: -1, isDisable: true }); - - const selectWorkflow = (index: number) => { - // Updating template ID to the selected one - template.selectTemplate({ - selectedTemplateID: index, - isDisable: false, - }); - - fetch(workflowData[index].chaosWkfCRDLink) - .then((data) => { - data.text().then((yamlText) => { - const tests = parsed(yamlText); - tests.forEach((test) => { - // Pushing the individual test names of the selected workflow - testNames.push(test); - - // The default weight of the all the experiments in the workflow is 10 - testWeights.push(10); - }); - history.push({ - pathname: `/workflows/template/${workflowData[index].title}`, - search: `?projectID=${projectID}&projectRole=${projectRole}`, - state: { - workflowData: workflowData[index], - testNames, - testWeights, - }, - }); - }); - }) - .catch((err) => { - console.error(err); - }); - }; - - return ( -
-
- { - selectWorkflow(index); - }} - workflows={workflowData} - isCustomWorkflowVisible={false} - /> -
-
- ); -}; - -export default Templates; diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/styles.ts deleted file mode 100644 index 25d0d74ad..000000000 --- a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/styles.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles((theme) => ({ - root: { - width: '90%', - margin: '0 auto', - marginTop: theme.spacing(2.5), - marginBottom: theme.spacing(2.5), - }, - predefinedCards: { - display: 'inline-block', - }, - header: { - padding: '1rem 0.5rem', - display: 'flex', - justifyContent: 'space-between', - }, - headerSize: { - fontSize: theme.spacing(2), - }, -})); - -// CSS For sort div as well as the icon - -/* - sort: { - display: 'flex', - cursor: 'pointer', - }, - sortIcon: { - width: theme.spacing(4), - marginRight: theme.spacing(1), - position: 'relative', - }, - line: { - height: theme.spacing(0.3), - width: '100%', - margin: '0.3em 0', - background: theme.palette.primary.contrastText, - borderRadius: '0.5rem', - }, - first: { - width: '90%', - }, - second: { - width: '60%', - }, - third: { - width: '30%', - }, -*/ - -export default useStyles; diff --git a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx index 4ec524830..c05087758 100644 --- a/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx +++ b/litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/TuneWorkflowSteps/TargetApplication.tsx @@ -89,7 +89,7 @@ const TargetApplication: React.FC = ({ typeof engineManifest.spec.annotationCheck === 'boolean' ? engineManifest.spec.annotationCheck : engineManifest.spec.annotationCheck === 'true', - jobCleanUpPolicy: engineManifest.spec.jobCleanUpPolicy, + jobCleanUpPolicy: engineManifest.spec.jobCleanUpPolicy ?? 'retain', }); const [addNodeSelector, setAddNodeSelector] = useState( !!engineManifest.spec.experiments[0].spec.components['nodeSelectors'] diff --git a/litmus-portal/frontend/src/views/MyHub/MyHubCharts/index.tsx b/litmus-portal/frontend/src/views/MyHub/MyHubCharts/index.tsx index ecf8aacda..916904747 100644 --- a/litmus-portal/frontend/src/views/MyHub/MyHubCharts/index.tsx +++ b/litmus-portal/frontend/src/views/MyHub/MyHubCharts/index.tsx @@ -1,16 +1,13 @@ import { useQuery } from '@apollo/client'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Backdrop, - Typography, -} from '@material-ui/core'; +import { AppBar, Backdrop, Typography } from '@material-ui/core'; +import Tabs from '@material-ui/core/Tabs'; import moment from 'moment'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; + +import useTheme from '@material-ui/core/styles/useTheme'; +import { StyledTab, TabPanel } from '../../../components/Tabs'; import Loader from '../../../components/Loader'; import Center from '../../../containers/layouts/Center'; import Scaffold from '../../../containers/layouts/Scaffold'; @@ -44,6 +41,8 @@ const MyHub: React.FC = () => { variables: { data: projectID }, fetchPolicy: 'cache-and-network', }); + const theme = useTheme(); + const [tabValue, setTabValue] = useState(1); // Filter the selected MyHub const UserHub = hubDetails?.getHubStatus.filter((myHub) => { @@ -99,12 +98,9 @@ const MyHub: React.FC = () => { return 'Date not available'; }; - const [expanded, setExpanded] = React.useState('panel2'); - - const handleChange = - (panel: string) => (event: React.ChangeEvent<{}>, newExpanded: boolean) => { - setExpanded(newExpanded ? panel : false); - }; + const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => { + setTabValue(newValue); + }; useEffect(() => { if (data !== undefined) { @@ -165,117 +161,99 @@ const MyHub: React.FC = () => { {/* */} - - } - aria-controls="panel1d-content" - id="panel1d-header" + + - - {t('myhub.myhubChart.preDefined')} - - - -
- -
- {filteredWorkflow?.length > 0 ? ( - filteredWorkflow.map((expName: string) => { - return ( - - ); - }) - ) : ( - <> - no experiment + + + + +
+ +
+ {filteredWorkflow?.length > 0 ? ( + filteredWorkflow.map((expName: string) => { + return ( + - - {t('myhub.myhubChart.noPredefinedExp')} - - - )} -
+ ); + }) + ) : ( + <> + no experiment + + {t('myhub.myhubChart.noPredefinedExp')} + + + )}
- - - - } - aria-controls="panel2d-content" - id="panel2d-header" - > - - {t('myhub.myhubChart.chaosCharts')} - - - -
- -
- {filteredExperiment?.length > 0 ? ( - filteredExperiment.map((expName: ChartName) => { - return ( - - ); - }) - ) : ( - <> - no experiment + + +
+ +
+ {filteredExperiment?.length > 0 ? ( + filteredExperiment.map((expName: ChartName) => { + return ( + - - {t('myhub.myhubChart.noExp')} - - - )} -
+ ); + }) + ) : ( + <> + no experiment + + {t('myhub.myhubChart.noExp')} + + + )}
- - +
+ ); }; diff --git a/litmus-portal/frontend/src/views/MyHub/MyHubCharts/styles.ts b/litmus-portal/frontend/src/views/MyHub/MyHubCharts/styles.ts index 65f3310c3..11a66e98c 100644 --- a/litmus-portal/frontend/src/views/MyHub/MyHubCharts/styles.ts +++ b/litmus-portal/frontend/src/views/MyHub/MyHubCharts/styles.ts @@ -35,8 +35,6 @@ const useStyles = makeStyles((theme) => ({ alignContent: 'center', alignItems: 'center', justifyContent: 'center', - border: '0.0625rem solid', - borderColor: theme.palette.border.main, backgroundColor: theme.palette.common.white, }, search: { @@ -58,12 +56,10 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', - border: '0.0625rem solid', marginTop: theme.spacing(3), paddingTop: theme.spacing(2), justifyContent: 'center', alignItems: 'center', - borderColor: theme.palette.border.main, backgroundColor: theme.palette.common.white, }, cardDiv: { @@ -112,6 +108,15 @@ const useStyles = makeStyles((theme) => ({ chartAccordion: { marginTop: theme.spacing(2.5), }, + appBar: { + background: 'transparent', + boxShadow: 'none', + marginBottom: theme.spacing(1), + }, + noExpImage: { + width: '5rem', + height: '5rem', + }, })); export default useStyles;