Bug fixes for analytics and translations for 2.0 (#3085)

* fixes for autocomplete and graph

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* minor community page fix

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* fixing auto select chip input integration bugs and disabling resolution.

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* deep scan fix

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* condition fix

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>

* quote fix

Signed-off-by: ishangupta-ds <ishan@chaosnative.com>
This commit is contained in:
Ishan Gupta 2021-08-04 16:24:35 +05:30 committed by GitHub
parent 23294ff237
commit 03a68c9a3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 293 additions and 144 deletions

View File

@ -149,7 +149,7 @@ community:
heading: 'Litmus Insights'
headingDesc: 'Stats for the Litmus community'
analyticDesc: 'Periodic growth of Litmus'
statsHeading: 'Litmus users around the world:'
statsHeading: 'Litmus users around the world'
litmusChaos: Litmuschaos
follow: Follow
feedback:
@ -172,13 +172,13 @@ analytics:
lowestScore: 'Lowest Score:'
exportPDF: Export PDF
compareWorkflows: Compare workflows
targetCluster: Target cluster
targetCluster: Target agent
workflowSelected: workflow selected
workflowsSelected: workflows selected
tableHead1: Workflow Name
tableHead2: Starting Date
tableHead3: Regularity
tableHead4: Cluster
tableHead4: Agent
workflowRunDetailsTable:
tableHead0: Test Name
tableHead1: Experiment Name
@ -275,7 +275,7 @@ analyticsDashboard:
tab3: Monthly
tab4: Yearly
worflowSchedulesTitle: Workflow Schedules
clusterCountTitle: Clusters
clusterCountTitle: Agents
timeSelectionMessage: Overview of latest
timeSelection0: Hour
timeSelection1: Day
@ -890,14 +890,14 @@ workflowDetailsView:
header: Overall Workflow Description
resilienceScore: Resilience Score
Completed: Completed
status: Workflow Status
status: Workflow Status
runTime:
runTimeHeader: Run Time
startTime: 'Start Time :'
endTime: 'End Time :'
targets:
targetsHeader: Target
cluster: 'Cluster :'
cluster: 'Agent :'
namespace: 'Workflow Namespace :'
workflowNodeInfo:
name: Name
@ -1163,9 +1163,9 @@ createWorkflow:
disabled: Currently Disabled
schedulingNow: Scheduling now
adjustedWeights: Adjusted Weights
clustername: Cluster Name
clustername: Agent Name
workflowCluster:
activeCluster: Choose an active cluster
activeCluster: Choose an active agent
none: None
######################################
@ -1210,9 +1210,9 @@ workflowCluster:
creatingNew: You are creating a
creatingNewBold: new chaos workflow.
selectAgent: Select a target Kubernetes Agent to run this workflow.
selectCluster: Choose Active Cluster
selectCluster: Choose Active Agent
select: Select and Continue
snackbar: No Cluster Registered With Your Project ID, Please Wait...
snackbar: No Agent Registered With Your Project ID, Please Wait...
formControl:
# For Header
menu: All
@ -1234,8 +1234,8 @@ workflowCluster:
fetchingError: Unable to fetch data
recordAvailable: No records available
disconnect: Disconnect
clusterInfo: Cluster information
about: About Litmus Cluster
clusterInfo: Agent information
about: About Litmus Agent
back: Back
workflowAgent:
header:

View File

@ -264,8 +264,10 @@ const DashboardPage: React.FC = () => {
dashboardListForAgent: dashboards.ListDashboard,
metaData: selectedDashboard,
closedAreaQueryIDs: (selectedDashboard.panel_groups ?? [])
.flatMap((panelGroup) => panelGroup.panels)
.flatMap((panel) => panel.prom_queries)
.flatMap((panelGroup) =>
panelGroup ? panelGroup.panels ?? [] : []
)
.flatMap((panel) => (panel ? panel.prom_queries ?? [] : []))
.filter((query) => query.close_area)
.map((query) => query.queryid),
dashboardKey: selectedDashboardInformation.id,
@ -274,7 +276,11 @@ const DashboardPage: React.FC = () => {
typeName: selectedDashboard.db_type_name,
typeID: selectedDashboard.db_type_id,
agentName: selectedDashboard.cluster_name,
urlToIcon: `./icons/${selectedDashboard.db_type_id}_dashboard.svg`,
urlToIcon: `./icons/${
selectedDashboard.db_type_id.includes('custom')
? 'custom'
: selectedDashboard.db_type_id
}_dashboard.svg`,
information: selectedDashboard.db_information,
chaosEventQueryTemplate:
selectedDashboard.chaos_event_query_template,
@ -854,7 +860,7 @@ const DashboardPage: React.FC = () => {
}}
panel_group_id={panelGroup.panel_group_id}
panel_group_name={panelGroup.panel_group_name}
panels={panelGroup.panels}
panels={panelGroup.panels ?? []}
selectedPanels={selectedPanels}
metricDataForGroup={
promData.panelGroupQueryMap[index]

View File

@ -147,8 +147,8 @@ export const generatePromQueries = (
: DEFAULT_RELATIVE_TIME_RANGE;
const promQueries: promQueryInput[] = getPromQueryInput(
dashboardMetaPanelGroups
.flatMap((panelGroup) => panelGroup.panels)
.flatMap((panel) => panel.prom_queries),
.flatMap((panelGroup) => (panelGroup ? panelGroup.panels ?? [] : []))
.flatMap((panel) => (panel ? panel.prom_queries ?? [] : [])),
timeRangeDiff,
true,
chaosEventQueryTemplate,

View File

@ -122,10 +122,12 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
return options;
};
const getSelectedValuesForLabel = (label: string) => {
const labelValuesList: QueryLabelValue[] = getLabelsAndValues(
localQuery.prom_query_name
);
const getSelectedValuesForLabel = (
label: string,
queryString: string,
setValue: boolean
) => {
const labelValuesList: QueryLabelValue[] = getLabelsAndValues(queryString);
const options: Array<Option> = [];
labelValuesList.forEach((labelValue) => {
if (labelValue.label === label) {
@ -134,7 +136,18 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
});
}
});
setSelectedValuesForLabel(options);
const filteredOptions = options.filter((opt) => opt.name !== '');
const newOptionsSet = Array.from(
new Set(filteredOptions.map((opt) => opt.name))
);
const newOptions: Array<Option> = newOptionsSet.map((optionName) => {
return { name: optionName };
});
if (setValue) {
setSelectedValuesForLabel(newOptions);
return null;
}
return newOptions;
};
useEffect(() => {
@ -239,7 +252,44 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
value={selectedLabel}
onChange={(event: any) => {
setSelectedLabel(event.target.value as string);
getSelectedValuesForLabel(event.target.value as string);
const selectedValues: Array<Option> =
getSelectedValuesForLabel(
event.target.value as string,
localQuery.prom_query_name,
false
) ?? [];
const existingLabelValuesList: QueryLabelValue[] =
localQuery.labels_and_values_list ?? [];
let updateStatus = false;
existingLabelValuesList.forEach((labelValue, index) => {
if (labelValue.label === (event.target.value as string)) {
existingLabelValuesList[index].value =
selectedValues.map((option) => option.name);
updateStatus = true;
}
});
if (!updateStatus) {
existingLabelValuesList.push({
label: event.target.value as string,
value: selectedValues.map((option) => option.name),
});
}
const newPromQueryName = setLabelsAndValues(
localQuery.base_query ?? '',
localQuery.prom_query_name ?? '',
existingLabelValuesList
);
setLocalQuery({
...localQuery,
prom_query_name: newPromQueryName,
labels_and_values_list: existingLabelValuesList,
});
getSelectedValuesForLabel(
event.target.value as string,
localQuery.prom_query_name,
true
);
setUpdate(true);
}}
label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.selectKey'
@ -271,6 +321,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<AutocompleteChipInput
value={selectedValuesForLabel}
freeSolo
onChange={(event, value) => {
const selectedValues: Array<Option> = value as Array<Option>;
const existingLabelValuesList: QueryLabelValue[] =
@ -290,16 +341,21 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
value: selectedValues.map((option) => option.name),
});
}
const newPromQueryName = setLabelsAndValues(
localQuery.base_query ?? '',
localQuery.prom_query_name ?? '',
existingLabelValuesList
);
setLocalQuery({
...localQuery,
prom_query_name: setLabelsAndValues(
localQuery.base_query ?? '',
localQuery.prom_query_name ?? '',
existingLabelValuesList
),
prom_query_name: newPromQueryName,
labels_and_values_list: existingLabelValuesList,
});
getSelectedValuesForLabel(selectedLabel ?? '');
getSelectedValuesForLabel(
selectedLabel ?? '',
newPromQueryName,
true
);
setUpdate(true);
}}
getOptionSelected={(option) =>
@ -368,14 +424,17 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
labels_and_values_list: getLabelsAndValues(updatedQuery),
prom_query_name: updatedQuery,
});
if (
existingBaseQuery !== newBaseQuery &&
localQuery.base_query !== '' &&
dsURL !== '' &&
open
) {
setSelectedValuesForLabel([]);
refetch();
if (localQuery.base_query !== '' && dsURL !== '' && open) {
if (existingBaseQuery !== newBaseQuery) {
setSelectedValuesForLabel([]);
refetch();
} else if (existingBaseQuery === newBaseQuery) {
getSelectedValuesForLabel(
selectedLabel ?? '',
updatedQuery,
true
);
}
}
setUpdate(true);
}}

View File

@ -97,7 +97,11 @@ const InfoDropdown: React.FC<InfoDropdownProps> = ({
</Typography>
<div className={classes.iconWithTextDiv}>
<img
src={`./icons/${dashboardConfigurationDetails.typeID}_dashboard.svg`}
src={`./icons/${
dashboardConfigurationDetails.typeID.includes('custom')
? 'custom'
: dashboardConfigurationDetails.typeID
}_dashboard.svg`}
alt="dashboard Icon"
className={classes.inlineIcon}
/>

View File

@ -113,17 +113,20 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
disableBackdropClick
disableEscapeKeyDown
modalActions={
<ButtonOutlined onClick={() => setPopOut(false)}>
<ButtonOutlined
className={classes.closeButton}
onClick={() => setPopOut(false)}
>
&#x2715;
</ButtonOutlined>
}
height="95% !important"
height="95%"
width="95%"
>
<div className={classes.popOutModal}>
<Typography className={classes.title}>{panel_name}</Typography>
<LineAreaGraph
legendTableHeight={120}
legendTableHeight={150}
openSeries={metricDataForPanel?.seriesData}
closedSeries={metricDataForPanel?.closedAreaData}
eventSeries={chaosData}
@ -137,7 +140,7 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
unit={unit}
yLabel={y_axis_left}
yLabelOffset={55}
margin={{ left: 75, right: 20, top: 20, bottom: 30 }}
margin={{ left: 75, right: 20, top: 20, bottom: 40 }}
/>
</div>
</Modal>

View File

@ -66,26 +66,29 @@ const DashboardPanelGroup: React.FC<GraphPanelGroupProps> = ({
(panel) =>
selectedPanels && selectedPanels.includes(panel.panel_id)
)
.map((panel: PanelResponse) => (
<DashboardPanel
key={panel.panel_id}
data-cy="dashboardPanel"
panel_id={panel.panel_id}
centralAllowGraphUpdate={centralAllowGraphUpdate}
centralBrushPosition={centralBrushPosition}
handleCentralBrushPosition={handleCentralBrushPosition}
created_at={panel.created_at}
panel_name={panel.panel_name}
panel_options={panel.panel_options}
y_axis_left={panel.y_axis_left}
y_axis_right={panel.y_axis_right}
x_axis_down={panel.x_axis_down}
unit={panel.unit}
prom_queries={panel.prom_queries}
metricDataForPanel={getPanelMetricsData(panel.panel_id)}
chaosData={chaosData}
/>
))}
.map(
(panel: PanelResponse) =>
panel && (
<DashboardPanel
key={panel.panel_id}
data-cy="dashboardPanel"
panel_id={panel.panel_id}
centralAllowGraphUpdate={centralAllowGraphUpdate}
centralBrushPosition={centralBrushPosition}
handleCentralBrushPosition={handleCentralBrushPosition}
created_at={panel.created_at}
panel_name={panel.panel_name}
panel_options={panel.panel_options}
y_axis_left={panel.y_axis_left}
y_axis_right={panel.y_axis_right}
x_axis_down={panel.x_axis_down}
unit={panel.unit}
prom_queries={panel.prom_queries}
metricDataForPanel={getPanelMetricsData(panel.panel_id)}
chaosData={chaosData}
/>
)
)}
</AccordionDetails>
</Accordion>
</div>

View File

@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
},
popOutModal: {
width: '85%',
width: '92.5%',
height: '95%',
padding: theme.spacing(4),
},
@ -90,6 +90,13 @@ const useStyles = makeStyles((theme) => ({
display: 'flex',
padding: theme.spacing(0.5, 0.5, 0, 0.5),
},
closeButton: {
borderColor: theme.palette.border.main,
color: theme.palette.border.main,
padding: theme.spacing(0.25, 2),
minWidth: 0,
},
}));
export default useStyles;

View File

@ -124,7 +124,8 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
});
const exportedDashboard: DashboardExport = {
dashboardID: dashboardTypeID,
dashboardID:
dashboardTypeID !== 'custom' ? dashboardTypeID : 'custom-downloaded',
name: dashboardData.name,
information: dashboardData.information,
chaosEventQueryTemplate: dashboardData.chaosEventQueryTemplate,

View File

@ -396,6 +396,12 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
return options;
};
useEffect(() => {
if (configure && !selectedNamespaceList.length) {
setSelectedNamespaceList(getSelectedAppNamespaces());
}
}, [dashboardDetails.applicationMetadataMap]);
useEffect(() => {
if (configure) {
setDashboardDetails({

View File

@ -144,13 +144,15 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
return options;
};
const getSelectedValuesForLabel = (label: string) => {
const getSelectedValuesForLabel = (
label: string,
queryString: string,
setValue: boolean
) => {
const allOptions: string[] = getAvailableValues(label).map(
(option) => option.name
);
const labelValuesList: QueryLabelValue[] = getLabelsAndValues(
localQuery.prom_query_name
);
const labelValuesList: QueryLabelValue[] = getLabelsAndValues(queryString);
const options: Array<Option> = [];
labelValuesList.forEach((labelValue) => {
if (labelValue.label === label) {
@ -166,23 +168,37 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
label.toLowerCase().includes(appRes.kind.toLowerCase())
) {
appRes.names.forEach((name) => {
if (allOptions.includes(name)) {
if (allOptions.includes(name) && !options.includes({ name })) {
options.push({ name });
}
});
}
if (label === 'job') {
appRes.names.forEach((name) => {
if (allOptions.includes(name)) {
if (allOptions.includes(name) && !options.includes({ name })) {
options.push({ name });
} else if (allOptions.includes(`${app.namespace}/${name}`)) {
} else if (
allOptions.includes(`${app.namespace}/${name}`) &&
!options.includes({ name: `${app.namespace}/${name}` })
) {
options.push({ name: `${app.namespace}/${name}` });
}
});
}
});
});
setSelectedValuesForLabel(options);
const filteredOptions = options.filter((opt) => opt.name !== '');
const newOptionsSet = Array.from(
new Set(filteredOptions.map((opt) => opt.name))
);
const newOptions: Array<Option> = newOptionsSet.map((optionName) => {
return { name: optionName };
});
if (setValue) {
setSelectedValuesForLabel(newOptions);
return null;
}
return newOptions;
};
useEffect(() => {
@ -361,7 +377,44 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
value={selectedLabel}
onChange={(event: any) => {
setSelectedLabel(event.target.value as string);
getSelectedValuesForLabel(event.target.value as string);
const selectedValues: Array<Option> =
getSelectedValuesForLabel(
event.target.value as string,
localQuery.prom_query_name,
false
) ?? [];
const existingLabelValuesList: QueryLabelValue[] =
localQuery.labels_and_values_list ?? [];
let updateStatus = false;
existingLabelValuesList.forEach((labelValue, index) => {
if (labelValue.label === (event.target.value as string)) {
existingLabelValuesList[index].value =
selectedValues.map((option) => option.name);
updateStatus = true;
}
});
if (!updateStatus) {
existingLabelValuesList.push({
label: event.target.value as string,
value: selectedValues.map((option) => option.name),
});
}
const newPromQueryName = setLabelsAndValues(
localQuery.base_query ?? '',
localQuery.prom_query_name ?? '',
existingLabelValuesList
);
setLocalQuery({
...localQuery,
prom_query_name: newPromQueryName,
labels_and_values_list: existingLabelValuesList,
});
getSelectedValuesForLabel(
event.target.value as string,
localQuery.prom_query_name,
true
);
setUpdate(true);
}}
label={t(
'analyticsDashboard.applicationDashboards.tuneTheQueries.selectKey'
@ -384,6 +437,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
<AutocompleteChipInput
value={selectedValuesForLabel}
freeSolo
onChange={(event, value) => {
const selectedValues: Array<Option> = value as Array<Option>;
const existingLabelValuesList: QueryLabelValue[] =
@ -403,16 +457,21 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
value: selectedValues.map((option) => option.name),
});
}
const newPromQueryName = setLabelsAndValues(
localQuery.base_query ?? '',
localQuery.prom_query_name ?? '',
existingLabelValuesList
);
setLocalQuery({
...localQuery,
prom_query_name: setLabelsAndValues(
localQuery.base_query ?? '',
localQuery.prom_query_name ?? '',
existingLabelValuesList
),
prom_query_name: newPromQueryName,
labels_and_values_list: existingLabelValuesList,
});
getSelectedValuesForLabel(selectedLabel ?? '');
getSelectedValuesForLabel(
selectedLabel ?? '',
newPromQueryName,
true
);
setUpdate(true);
}}
getOptionSelected={(option) =>
@ -481,14 +540,17 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
labels_and_values_list: getLabelsAndValues(updatedQuery),
prom_query_name: updatedQuery,
});
if (
existingBaseQuery !== newBaseQuery &&
localQuery.base_query !== '' &&
dsURL !== '' &&
open
) {
setSelectedValuesForLabel([]);
refetch();
if (localQuery.base_query !== '' && dsURL !== '' && open) {
if (existingBaseQuery !== newBaseQuery) {
setSelectedValuesForLabel([]);
refetch();
} else if (existingBaseQuery === newBaseQuery) {
getSelectedValuesForLabel(
selectedLabel ?? '',
updatedQuery,
true
);
}
}
setUpdate(true);
}}
@ -650,6 +712,7 @@ const QueryEditor: React.FC<QueryEditorProps> = ({
className={classes.formControl}
style={{ width: '8.5rem' }}
color="primary"
disabled
>
<InputLabel className={classes.selectTextLabel}>
{t(

View File

@ -148,7 +148,8 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
}
const exportedDashboard: DashboardExport = {
dashboardID: data.db_type_id,
dashboardID:
data.db_type_id !== 'custom' ? data.db_type_id : 'custom-downloaded',
name: data.db_name,
information: data.db_information,
chaosEventQueryTemplate: data.chaos_event_query_template,
@ -214,7 +215,9 @@ const TableData: React.FC<TableDataProps> = ({ data, alertStateHandler }) => {
style={{ maxWidth: '7rem' }}
>
<img
src={`./icons/${data.db_type_id}_dashboard.svg`}
src={`./icons/${
data.db_type_id.includes('custom') ? 'custom' : data.db_type_id
}_dashboard.svg`}
alt={data.db_type_name}
className={classes.inlineTypeIcon}
/>

View File

@ -111,7 +111,8 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
}
const exportedDashboard: DashboardExport = {
dashboardID: data.db_type_id,
dashboardID:
data.db_type_id !== 'custom' ? data.db_type_id : 'custom-downloaded',
name: data.db_name,
information: data.db_information,
chaosEventQueryTemplate: data.chaos_event_query_template,
@ -143,7 +144,11 @@ const ApplicationDashboardCard: React.FC<ApplicationDashboardCardProps> = ({
<div>
<div className={classes.statusDiv}>
<img
src={`./icons/${data.db_type_id}_dashboard.svg`}
src={`./icons/${
data.db_type_id.includes('custom')
? 'custom'
: data.db_type_id
}_dashboard.svg`}
alt="k8s"
title={data.db_type}
/>

View File

@ -286,7 +286,7 @@ const WorkflowComparisonTable = () => {
console.error(error);
}
});
if (isWorkflowValid) {
if (isWorkflowValid && selectedRuns.length) {
plotData.labels.push(selectedRuns[0]?.workflow_name ?? '');
plotData.colors.push(`#${randomColor()}`);
timeSeriesArray.push(workflowTimeSeriesData);
@ -427,6 +427,7 @@ const WorkflowComparisonTable = () => {
};
const CallbackForComparing = (compareWorkflows: boolean) => {
setIsDataAvailable(true);
getWorkflowRun();
setCompare(compareWorkflows);
const payload: ScheduledWorkflow[] = [];
@ -444,7 +445,7 @@ const WorkflowComparisonTable = () => {
if (document.getElementById('analytics')) {
const heads = [
{
cluster_name: 'Cluster Name',
cluster_name: 'Agent Name',
workflow_name: 'Workflow Name',
run_date: 'Date-Time',
tests_passed: '#Expts. Passed',
@ -486,7 +487,7 @@ const WorkflowComparisonTable = () => {
doc.setFontSize(10);
doc.setTextColor(0, 0, 0);
doc.setDrawColor(0, 0, 0);
doc.text(`Litmus Portal Report Version: ${version}`, 10, 10);
doc.text(`Chaos Center Report Version: ${version}`, 10, 10);
doc.text('Time of Generation:', 10, 15);
doc.text(new Date().toString(), 42, 15);
doc.text(
@ -562,7 +563,7 @@ const WorkflowComparisonTable = () => {
imgWidth,
imgHeight
);
doc.save('litmus-portal-analytics.pdf'); // Generated PDF
doc.save('chaos-center-analytics.pdf'); // Generated PDF
});
}
};
@ -832,7 +833,7 @@ const WorkflowComparisonTable = () => {
<strong>
{` ${t(
'chaosWorkflows.browseAnalytics.workFlowComparisonTable.showSelectedWorkflows'
)} ${selectedWorkflows.length} `}
)} ${selectedWorkflows.length}`}
</strong>
</Typography>
</Paper>
@ -841,45 +842,41 @@ const WorkflowComparisonTable = () => {
</section>
</div>
</div>
{isDataAvailable === true ? (
<div>
{compare === true ? (
<Paper variant="outlined" className={classes.backgroundFix}>
<div className={classes.comparisonHeadingFix}>
<Typography className={classes.heading}>
<strong>
{t(
'chaosWorkflows.browseAnalytics.workFlowComparisonTable.resilienceScoreComparison'
)}
</strong>
</Typography>
<Typography className={classes.description}>
{t(
'chaosWorkflows.browseAnalytics.workFlowComparisonTable.comparativeResults'
)}
</Typography>
{plotDataForComparison ? (
<ResilienceScoreComparisonPlot
xData={plotDataForComparison.xData}
yData={plotDataForComparison.yData}
labels={plotDataForComparison.labels}
colors={plotDataForComparison.colors}
/>
) : (
<div />
{compare === true && isDataAvailable === true ? (
<Paper variant="outlined" className={classes.backgroundFix}>
<div className={classes.comparisonHeadingFix}>
<Typography className={classes.heading}>
<strong>
{t(
'chaosWorkflows.browseAnalytics.workFlowComparisonTable.resilienceScoreComparison'
)}
</div>
</Paper>
) : (
<div />
)}
</div>
) : (
<Paper variant="outlined" className={classes.noData}>
<Typography variant="h5" align="center" className={classes.error}>
{t('chaosWorkflows.browseAnalytics.workFlowComparisonTable.noRuns')}
</Typography>{' '}
</strong>
</Typography>
<Typography className={classes.description}>
{t(
'chaosWorkflows.browseAnalytics.workFlowComparisonTable.comparativeResults'
)}
</Typography>
{plotDataForComparison && (
<ResilienceScoreComparisonPlot
xData={plotDataForComparison.xData}
yData={plotDataForComparison.yData}
labels={plotDataForComparison.labels}
colors={plotDataForComparison.colors}
/>
)}
</div>
</Paper>
) : (
compare === true && (
<Paper variant="outlined" className={classes.noData}>
<Typography variant="h5" align="center" className={classes.error}>
{t(
'chaosWorkflows.browseAnalytics.workFlowComparisonTable.noRuns'
)}
</Typography>
</Paper>
)
)}
</div>
);

View File

@ -72,16 +72,8 @@ const CommunityCards: React.FC = () => {
role="button"
tabIndex={0}
className={`${classes.communityEvents} ${classes.joinCard}`}
onClick={() =>
window.open(
'https://www.meetup.com/Kubernetes-Chaos-Engineering-Meetup-Group'
)
}
onKeyDown={() =>
window.open(
'https://www.meetup.com/Kubernetes-Chaos-Engineering-Meetup-Group'
)
}
onClick={() => window.open('https://litmuschaos.io/community')}
onKeyDown={() => window.open('https://litmuschaos.io/community')}
>
<div className={classes.textImageWrapper}>
<img