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:
parent
23294ff237
commit
03a68c9a3f
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -113,17 +113,20 @@ const DashboardPanel: React.FC<GraphPanelProps> = ({
|
|||
disableBackdropClick
|
||||
disableEscapeKeyDown
|
||||
modalActions={
|
||||
<ButtonOutlined onClick={() => setPopOut(false)}>
|
||||
<ButtonOutlined
|
||||
className={classes.closeButton}
|
||||
onClick={() => setPopOut(false)}
|
||||
>
|
||||
✕
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -396,6 +396,12 @@ const DashboardMetadataForm: React.FC<DashboardMetadataFormProps> = ({
|
|||
return options;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (configure && !selectedNamespaceList.length) {
|
||||
setSelectedNamespaceList(getSelectedAppNamespaces());
|
||||
}
|
||||
}, [dashboardDetails.applicationMetadataMap]);
|
||||
|
||||
useEffect(() => {
|
||||
if (configure) {
|
||||
setDashboardDetails({
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue