type(bugfix): Fixed Loader to Center + Added alert on Editor not being saved and trying to proceed 🐛 (#2872)
* Fixed Loader to Center + Added alert on Editor not being saved and trying to proceed * Updating status colors and package lock * Formatted Code * Fetched latest and formatted Signed-off-by: Sayan Mondal <sayan@chaosnative.com>
This commit is contained in:
Sayan Mondal
GitHub
parent
c0d001df3f
commit
555e651c89
File diff suppressed because it is too large
Load Diff
|
|
@ -9,10 +9,8 @@ interface TimePopOverProps {
|
|||
|
||||
const TimePopOver: React.FC<TimePopOverProps> = ({ unixTime }) => {
|
||||
const classes = useStyles();
|
||||
const [
|
||||
lastUpdatedAnchorEl,
|
||||
setLastUpdatedAnchorEl,
|
||||
] = React.useState<HTMLElement | null>(null);
|
||||
const [lastUpdatedAnchorEl, setLastUpdatedAnchorEl] =
|
||||
React.useState<HTMLElement | null>(null);
|
||||
|
||||
const handleLastUpdatedOpen = (
|
||||
event: React.MouseEvent<HTMLElement, MouseEvent>
|
||||
|
|
|
|||
|
|
@ -84,16 +84,17 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
|
|||
};
|
||||
if (stateObject.annotations.length > 0) {
|
||||
setIsValid(false);
|
||||
const nodeStyleError = (document.getElementsByClassName(
|
||||
'ace_gutter-cell'
|
||||
)[stateObject.annotations[0].row - 1] as any).style;
|
||||
const nodeStyleError = (
|
||||
document.getElementsByClassName('ace_gutter-cell')[
|
||||
stateObject.annotations[0].row - 1
|
||||
] as any
|
||||
).style;
|
||||
nodeStyleError.background = 'red';
|
||||
nodeStyleError.color = palette.secondary.contrastText;
|
||||
} else {
|
||||
setIsValid(true);
|
||||
const nodeStyleErrorList = document.getElementsByClassName(
|
||||
'ace_gutter-cell'
|
||||
);
|
||||
const nodeStyleErrorList =
|
||||
document.getElementsByClassName('ace_gutter-cell');
|
||||
for (let i = 0; i < nodeStyleErrorList.length; i += 1) {
|
||||
(nodeStyleErrorList[i] as any).style.backgroundColor =
|
||||
palette.common.black;
|
||||
|
|
@ -382,9 +383,9 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
|
|||
editor.setShowInvisibles(false);
|
||||
editor.setFontSize('0.98rem');
|
||||
editor.container.style.lineHeight = '160%';
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'ace_gutter'
|
||||
)[0] as any).style;
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('ace_gutter')[0] as any
|
||||
).style;
|
||||
nodeStyle.color = palette.secondary.contrastText;
|
||||
nodeStyle.borderRight = 0;
|
||||
}}
|
||||
|
|
@ -394,9 +395,8 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
|
|||
tooltipFollowsMouse: true,
|
||||
});
|
||||
|
||||
const nodeStyleActiveList = document.getElementsByClassName(
|
||||
'ace_gutter-cell'
|
||||
);
|
||||
const nodeStyleActiveList =
|
||||
document.getElementsByClassName('ace_gutter-cell');
|
||||
for (let i = 0; i < nodeStyleActiveList.length; i += 1) {
|
||||
(nodeStyleActiveList[i] as any).style.backgroundColor =
|
||||
'#01313F';
|
||||
|
|
@ -409,9 +409,11 @@ const YamlEditor: React.FC<YamlEditorProps> = ({
|
|||
selection.cursor.row
|
||||
] as any
|
||||
) {
|
||||
const nodeStyleActive = (document.getElementsByClassName(
|
||||
'ace_gutter-cell'
|
||||
)[selection.cursor.row] as any).style;
|
||||
const nodeStyleActive = (
|
||||
document.getElementsByClassName('ace_gutter-cell')[
|
||||
selection.cursor.row
|
||||
] as any
|
||||
).style;
|
||||
nodeStyleActive.backgroundColor = palette.primary.main;
|
||||
nodeStyleActive.color = palette.secondary.contrastText;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import * as AnalyticsActions from '../../redux/actions/analytics';
|
|||
import { history } from '../../redux/configureStore';
|
||||
import { getToken, getUserId } from '../../utils/auth';
|
||||
import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
|
||||
import Center from '../layouts/Center';
|
||||
|
||||
const ErrorPage = lazy(() => import('../../pages/ErrorPage'));
|
||||
const Workflows = lazy(() => import('../../pages/Workflows'));
|
||||
|
|
@ -267,9 +266,9 @@ function App() {
|
|||
<LitmusThemeProvider>
|
||||
<Suspense
|
||||
fallback={
|
||||
<Center>
|
||||
<div style={{ height: '100vh' }}>
|
||||
<Loader />
|
||||
</Center>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Router history={history}>
|
||||
|
|
|
|||
|
|
@ -85,27 +85,24 @@ const DashboardPage: React.FC = () => {
|
|||
const selectedDataSource = useSelector(
|
||||
(state: RootState) => state.selectDataSource
|
||||
);
|
||||
const [
|
||||
selectedDashboardInformation,
|
||||
setSelectedDashboardInformation,
|
||||
] = React.useState<SelectedDashboardInformation>({
|
||||
id: selectedDashboard.selectedDashboardID ?? '',
|
||||
name: selectedDashboard.selectedDashboardName ?? '',
|
||||
type: selectedDashboard.selectedDashboardTemplateName ?? '',
|
||||
agentID: selectedDashboard.selectedAgentID ?? '',
|
||||
agentName: selectedDashboard.selectedAgentName ?? '',
|
||||
dashboardListForAgent: [],
|
||||
metaData: [],
|
||||
dashboardKey: 'Default',
|
||||
panelNameAndIDList: [],
|
||||
});
|
||||
const [selectedDashboardInformation, setSelectedDashboardInformation] =
|
||||
React.useState<SelectedDashboardInformation>({
|
||||
id: selectedDashboard.selectedDashboardID ?? '',
|
||||
name: selectedDashboard.selectedDashboardName ?? '',
|
||||
type: selectedDashboard.selectedDashboardTemplateName ?? '',
|
||||
agentID: selectedDashboard.selectedAgentID ?? '',
|
||||
agentName: selectedDashboard.selectedAgentName ?? '',
|
||||
dashboardListForAgent: [],
|
||||
metaData: [],
|
||||
dashboardKey: 'Default',
|
||||
panelNameAndIDList: [],
|
||||
});
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [refreshRate, setRefreshRate] = React.useState<number>(
|
||||
selectedDashboard.refreshRate ? selectedDashboard.refreshRate : 0
|
||||
);
|
||||
const [dataSourceStatus, setDataSourceStatus] = React.useState<string>(
|
||||
'ACTIVE'
|
||||
);
|
||||
const [dataSourceStatus, setDataSourceStatus] =
|
||||
React.useState<string>('ACTIVE');
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
|
|
@ -114,10 +111,8 @@ const DashboardPage: React.FC = () => {
|
|||
setAnchorEl(null);
|
||||
};
|
||||
const dateRangeSelectorRef = React.useRef<HTMLButtonElement>(null);
|
||||
const [
|
||||
isDateRangeSelectorPopoverOpen,
|
||||
setDateRangeSelectorPopoverOpen,
|
||||
] = React.useState(false);
|
||||
const [isDateRangeSelectorPopoverOpen, setDateRangeSelectorPopoverOpen] =
|
||||
React.useState(false);
|
||||
const [isInfoOpen, setIsInfoOpen] = React.useState<Boolean>(false);
|
||||
const [selectedPanels, setSelectedPanels] = React.useState<string[]>([]);
|
||||
|
||||
|
|
@ -194,16 +189,14 @@ const DashboardPage: React.FC = () => {
|
|||
selectedDashboardInformation.id !==
|
||||
selectedDashboardInformation.dashboardKey
|
||||
) {
|
||||
const availableDashboards: ListDashboardResponse[] = dashboards.ListDashboard.filter(
|
||||
(data) => {
|
||||
const availableDashboards: ListDashboardResponse[] =
|
||||
dashboards.ListDashboard.filter((data) => {
|
||||
return data.cluster_id === selectedDashboardInformation.agentID;
|
||||
}
|
||||
);
|
||||
const selectedDashboard: ListDashboardResponse = availableDashboards.filter(
|
||||
(data) => {
|
||||
});
|
||||
const selectedDashboard: ListDashboardResponse =
|
||||
availableDashboards.filter((data) => {
|
||||
return data.db_id === selectedDashboardInformation.id;
|
||||
}
|
||||
)[0];
|
||||
})[0];
|
||||
const selectedPanelNameAndIDList: PanelNameAndID[] = [];
|
||||
selectedDashboard.panel_groups.forEach(
|
||||
(panelGroup: PanelGroupResponse) => {
|
||||
|
|
@ -246,13 +239,12 @@ const DashboardPage: React.FC = () => {
|
|||
selectedDashboardInformation.metaData[0] &&
|
||||
dataSources.ListDataSource
|
||||
) {
|
||||
const selectedDataSource: ListDataSourceResponse = dataSources.ListDataSource.filter(
|
||||
(data) => {
|
||||
const selectedDataSource: ListDataSourceResponse =
|
||||
dataSources.ListDataSource.filter((data) => {
|
||||
return (
|
||||
data.ds_id === selectedDashboardInformation.metaData[0].ds_id
|
||||
);
|
||||
}
|
||||
)[0];
|
||||
})[0];
|
||||
if (selectedDataSource) {
|
||||
dataSource.selectDataSource({
|
||||
selectedDataSourceURL: selectedDataSource.ds_url,
|
||||
|
|
|
|||
|
|
@ -524,8 +524,9 @@ const ScheduleWorkflow = () => {
|
|||
setMinute(event.target.value as number);
|
||||
setCronValue({
|
||||
...cronValue,
|
||||
minute: (event.target
|
||||
.value as number).toString(),
|
||||
minute: (
|
||||
event.target.value as number
|
||||
).toString(),
|
||||
hour: '0-23',
|
||||
});
|
||||
workflowAction.setWorkflowDetails({
|
||||
|
|
@ -622,20 +623,18 @@ const ScheduleWorkflow = () => {
|
|||
setCronValue({
|
||||
...cronValue,
|
||||
month: '*',
|
||||
day_week: ((e.target
|
||||
.value as unknown) as string).slice(
|
||||
0,
|
||||
3
|
||||
),
|
||||
day_week: (
|
||||
e.target.value as unknown as string
|
||||
).slice(0, 3),
|
||||
});
|
||||
setDays(
|
||||
(e.target.value as unknown) as string
|
||||
e.target.value as unknown as string
|
||||
);
|
||||
workflowAction.setWorkflowDetails({
|
||||
scheduleInput: {
|
||||
...workflowData.scheduleInput,
|
||||
weekday: (e.target
|
||||
.value as unknown) as string,
|
||||
weekday: e.target
|
||||
.value as unknown as string,
|
||||
},
|
||||
});
|
||||
}}
|
||||
|
|
@ -698,8 +697,9 @@ const ScheduleWorkflow = () => {
|
|||
handleChange={(event) => {
|
||||
setCronValue({
|
||||
...cronValue,
|
||||
day_month: (event.target
|
||||
.value as number).toString(),
|
||||
day_month: (
|
||||
event.target.value as number
|
||||
).toString(),
|
||||
});
|
||||
setDates(event.target.value as number);
|
||||
workflowAction.setWorkflowDetails({
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Typography } from '@material-ui/core';
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Loader from '../../components/Loader';
|
||||
import Center from '../../containers/layouts/Center';
|
||||
import Scaffold from '../../containers/layouts/Scaffold';
|
||||
import { GET_CLUSTER_LENGTH } from '../../graphql';
|
||||
import { Clusters, ClusterVars } from '../../models/graphql/clusterData';
|
||||
|
|
@ -37,9 +36,9 @@ const HomePage: React.FC = () => {
|
|||
{t('home.heading')} {getUsername()}
|
||||
</Typography>
|
||||
{loading ? (
|
||||
<Center>
|
||||
<div style={{ height: '100vh' }}>
|
||||
<Loader />
|
||||
</Center>
|
||||
</div>
|
||||
) : agentList && agentCount > 0 ? (
|
||||
<AgentConfiguredHome agentCount={agentCount} />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -53,36 +53,29 @@ interface WorkFlowTests {
|
|||
const AnalyticsPage: React.FC = () => {
|
||||
const classes = useStyles();
|
||||
const [popoverOpen, setPopoverOpen] = React.useState<boolean>(false);
|
||||
const [workflowRunPresent, setWorkflowRunPresent] = React.useState<boolean>(
|
||||
true
|
||||
);
|
||||
const [workflowRunPresent, setWorkflowRunPresent] =
|
||||
React.useState<boolean>(true);
|
||||
const { pathname } = useLocation();
|
||||
// Getting the workflow nome from the pathname
|
||||
const workflowId = pathname.split('/')[3];
|
||||
const { t } = useTranslation();
|
||||
const [
|
||||
selectedWorkflowRunID,
|
||||
setSelectedWorkflowRunID,
|
||||
] = React.useState<string>('');
|
||||
const [
|
||||
selectedWorkflowRunDetails,
|
||||
setSelectedWorkflowRunDetails,
|
||||
] = React.useState<WorkFlowTests[]>();
|
||||
const [selectedWorkflowRunID, setSelectedWorkflowRunID] =
|
||||
React.useState<string>('');
|
||||
const [selectedWorkflowRunDetails, setSelectedWorkflowRunDetails] =
|
||||
React.useState<WorkFlowTests[]>();
|
||||
const [workflowRunDataForPlot, setWorkflowRunDataForPlot] = React.useState<
|
||||
WorkflowRunData[]
|
||||
>([]);
|
||||
const [
|
||||
selectedWorkflowRunData,
|
||||
setSelectedWorkflowRunData,
|
||||
] = React.useState<SelectedWorkflowRunData>({
|
||||
testsPassed: 0,
|
||||
testsFailed: 0,
|
||||
resilienceScore: 0,
|
||||
testDate: '',
|
||||
xLoc: 0,
|
||||
yLoc: 0,
|
||||
workflowRunID: '',
|
||||
});
|
||||
const [selectedWorkflowRunData, setSelectedWorkflowRunData] =
|
||||
React.useState<SelectedWorkflowRunData>({
|
||||
testsPassed: 0,
|
||||
testsFailed: 0,
|
||||
resilienceScore: 0,
|
||||
testDate: '',
|
||||
xLoc: 0,
|
||||
yLoc: 0,
|
||||
workflowRunID: '',
|
||||
});
|
||||
|
||||
// get ProjectID
|
||||
const projectID = getProjectID();
|
||||
|
|
|
|||
|
|
@ -50,10 +50,8 @@ const WorkflowDetails: React.FC = () => {
|
|||
const [isInfoToggled, setIsInfoToggled] = useState<boolean>(false);
|
||||
// State for Checking if workflow failed
|
||||
const [isWorkflowFailed, setWorkflowFailed] = useState<boolean>(false);
|
||||
const [
|
||||
workflowSchedulesDetails,
|
||||
setworkflowSchedulesDetails,
|
||||
] = useState<ScheduleWorkflow>();
|
||||
const [workflowSchedulesDetails, setworkflowSchedulesDetails] =
|
||||
useState<ScheduleWorkflow>();
|
||||
|
||||
const tabs = useActions(TabActions);
|
||||
const nodeSelection = useActions(NodeSelectionActions);
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ const formatCount = (count: number | undefined): string => {
|
|||
If count provided is greater than or equal to
|
||||
1000 then round it to the floor value and append
|
||||
a 'k' to the end
|
||||
*/ else if (
|
||||
count >= 1000
|
||||
)
|
||||
*/ else if (count >= 1000)
|
||||
return `${(Math.floor(count / 100) / 10).toFixed(1)}k`;
|
||||
else return `${count}`;
|
||||
return '0';
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ export const validateStartEmptySpacing = (value: string) => {
|
|||
};
|
||||
|
||||
export const validateEmail = (value: string) => {
|
||||
const emailValid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
const emailValid =
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
if (value?.length > 0) {
|
||||
if (value.match(emailValid)) return false;
|
||||
return true;
|
||||
|
|
@ -85,11 +86,15 @@ export const validateLength = (value: string) => {
|
|||
};
|
||||
|
||||
export const isValidWebUrl = (value: string) => {
|
||||
const regEx = /^(http|https):\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/gm;
|
||||
const regEx =
|
||||
/^(http|https):\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/gm;
|
||||
const regExLocal = /^http:\/\/localhost:([0-9]){1,4}$/g;
|
||||
const regExIpv4 = /^http:\/\/(([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]):([0-9]){1,4}$/g;
|
||||
const regExIpv6 = /^http:\/\/((([0-9a-fA-F]){1,4})\\:){7}([0-9a-fA-F]){1,4}:([0-9]){1,4}$/g;
|
||||
const sshRegEx = /^([A-Za-z0-9]+@|http(|s)\:\/\/)([-a-zA-Z0-9@:%._\+~#=]+(:\d+)?)(?::|\/)([\d\/\w.-]+?)(\.git)?$/i;
|
||||
const regExIpv4 =
|
||||
/^http:\/\/(([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]):([0-9]){1,4}$/g;
|
||||
const regExIpv6 =
|
||||
/^http:\/\/((([0-9a-fA-F]){1,4})\\:){7}([0-9a-fA-F]){1,4}:([0-9]){1,4}$/g;
|
||||
const sshRegEx =
|
||||
/^([A-Za-z0-9]+@|http(|s)\:\/\/)([-a-zA-Z0-9@:%._\+~#=]+(:\d+)?)(?::|\/)([\d\/\w.-]+?)(\.git)?$/i;
|
||||
if (
|
||||
value.match(regEx) ||
|
||||
value.match(regExLocal) ||
|
||||
|
|
|
|||
|
|
@ -230,9 +230,8 @@ export const updateNamespace = (manifest: string, namespace: string) => {
|
|||
updatedManifest.spec.workflowSpec.arguments.parameters.forEach(
|
||||
(parameter: any, index: number) => {
|
||||
if (parameter.name === constants.adminMode) {
|
||||
updatedManifest.spec.workflowSpec.arguments.parameters[
|
||||
index
|
||||
].value = namespace;
|
||||
updatedManifest.spec.workflowSpec.arguments.parameters[index].value =
|
||||
namespace;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -61,20 +61,18 @@ const PanelContent: React.FC<GraphPanelProps> = ({
|
|||
const areaGraph: string[] = palette.graph.area;
|
||||
const [popout, setPopout] = useState(false);
|
||||
const [viewEventMetric, setViewEventMetric] = useState(false);
|
||||
const [
|
||||
prometheusQueryData,
|
||||
setPrometheusQueryData,
|
||||
] = React.useState<PrometheusQueryDataInterface>({
|
||||
promInput: {
|
||||
ds_details: {
|
||||
url: '',
|
||||
start: '',
|
||||
end: '',
|
||||
const [prometheusQueryData, setPrometheusQueryData] =
|
||||
React.useState<PrometheusQueryDataInterface>({
|
||||
promInput: {
|
||||
ds_details: {
|
||||
url: '',
|
||||
start: '',
|
||||
end: '',
|
||||
},
|
||||
queries: [],
|
||||
},
|
||||
queries: [],
|
||||
},
|
||||
firstLoad: true,
|
||||
});
|
||||
firstLoad: true,
|
||||
});
|
||||
|
||||
const [graphData, setGraphData] = React.useState<ParsedPrometheusData>({
|
||||
seriesData: [],
|
||||
|
|
|
|||
|
|
@ -15,9 +15,8 @@ const TopNavButtons: React.FC<TopNavButtonsProps> = ({
|
|||
const classes = useStyles();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isInfoToggled, setIsInfoToggled] = React.useState<Boolean>(
|
||||
isInfoToggledState
|
||||
);
|
||||
const [isInfoToggled, setIsInfoToggled] =
|
||||
React.useState<Boolean>(isInfoToggledState);
|
||||
|
||||
return (
|
||||
<div className={classes.button}>
|
||||
|
|
|
|||
|
|
@ -38,12 +38,10 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
|
|||
const [confirm, setConfirm] = React.useState(false);
|
||||
const [success, setSuccess] = React.useState(false);
|
||||
const [openModal, setOpenModal] = React.useState(false);
|
||||
const [
|
||||
dashboardSelectedForDeleting,
|
||||
setDashboardSelectedForDeleting,
|
||||
] = React.useState<DeleteDashboardInput>({
|
||||
dbID: '',
|
||||
});
|
||||
const [dashboardSelectedForDeleting, setDashboardSelectedForDeleting] =
|
||||
React.useState<DeleteDashboardInput>({
|
||||
dbID: '',
|
||||
});
|
||||
|
||||
const [deleteDashboard] = useMutation<boolean, DeleteDashboardInput>(
|
||||
DELETE_DASHBOARD,
|
||||
|
|
|
|||
|
|
@ -84,10 +84,8 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
startDate: ' ',
|
||||
endDate: ' ',
|
||||
});
|
||||
const [
|
||||
isDateRangeSelectorPopoverOpen,
|
||||
setDateRangeSelectorPopoverOpen,
|
||||
] = useState(false);
|
||||
const [isDateRangeSelectorPopoverOpen, setDateRangeSelectorPopoverOpen] =
|
||||
useState(false);
|
||||
|
||||
const handleDataSourceTypeChange = (
|
||||
event: React.ChangeEvent<{ value: unknown }>
|
||||
|
|
|
|||
|
|
@ -35,18 +35,14 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
|
|||
const [mutate, setMutate] = React.useState(false);
|
||||
const [confirm, setConfirm] = React.useState(false);
|
||||
const [success, setSuccess] = React.useState(false);
|
||||
const [
|
||||
connectedDashboardsMessage,
|
||||
setConnectedDashboardsMessage,
|
||||
] = React.useState<string>('');
|
||||
const [connectedDashboardsMessage, setConnectedDashboardsMessage] =
|
||||
React.useState<string>('');
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [
|
||||
dataSourceSelectedForDeleting,
|
||||
setDataSourceSelectedForDeleting,
|
||||
] = React.useState<deleteDSInput>({
|
||||
ds_id: '',
|
||||
force_delete: false,
|
||||
});
|
||||
const [dataSourceSelectedForDeleting, setDataSourceSelectedForDeleting] =
|
||||
React.useState<deleteDSInput>({
|
||||
ds_id: '',
|
||||
force_delete: false,
|
||||
});
|
||||
// Function to convert UNIX time in format of dddd, DD MMM YYYY, HH:mm
|
||||
const formatDate = (date: string) => {
|
||||
const updated = new Date(parseInt(date, 10) * 1000).toString();
|
||||
|
|
|
|||
|
|
@ -75,10 +75,8 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
startDate: ' ',
|
||||
endDate: ' ',
|
||||
});
|
||||
const [
|
||||
isDateRangeSelectorPopoverOpen,
|
||||
setDateRangeSelectorPopoverOpen,
|
||||
] = useState(false);
|
||||
const [isDateRangeSelectorPopoverOpen, setDateRangeSelectorPopoverOpen] =
|
||||
useState(false);
|
||||
|
||||
const handleDataSourceTypeChange = (
|
||||
event: React.ChangeEvent<{ value: unknown }>
|
||||
|
|
|
|||
|
|
@ -39,406 +39,403 @@ interface AverageDateWiseResilienceScores {
|
|||
};
|
||||
}
|
||||
|
||||
const ResilienceScoreComparisonPlot: React.FC<ResilienceScoreComparisonPlotProps> = ({
|
||||
xData,
|
||||
yData,
|
||||
labels,
|
||||
colors,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
const { palette } = useTheme();
|
||||
const outlinedInputClasses = useOutlinedInputStyles();
|
||||
const [currentGranularity, setCurrentGranularity] = React.useState<{
|
||||
name: string;
|
||||
}>({
|
||||
name: 'Daily',
|
||||
});
|
||||
const ResilienceScoreComparisonPlot: React.FC<ResilienceScoreComparisonPlotProps> =
|
||||
({ xData, yData, labels, colors }) => {
|
||||
const classes = useStyles();
|
||||
const { palette } = useTheme();
|
||||
const outlinedInputClasses = useOutlinedInputStyles();
|
||||
const [currentGranularity, setCurrentGranularity] = React.useState<{
|
||||
name: string;
|
||||
}>({
|
||||
name: 'Daily',
|
||||
});
|
||||
|
||||
const handleChangeInGranularity = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>
|
||||
) => {
|
||||
const name = event.target.name as keyof typeof currentGranularity;
|
||||
if (name !== currentGranularity.name) {
|
||||
setCurrentGranularity({
|
||||
...currentGranularity,
|
||||
[name]: event.target.value as string,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const [plotData, setPlotData] = React.useState<any[]>([]);
|
||||
|
||||
const [edgeData, setEdgeData] = React.useState({
|
||||
highScore: 0,
|
||||
lowScore: 0,
|
||||
highColor: '',
|
||||
lowColor: '',
|
||||
highName: '',
|
||||
lowName: '',
|
||||
});
|
||||
|
||||
const [plotLayout, setPlotLayout] = React.useState<any>({});
|
||||
|
||||
// Function to convert UNIX time in format of DD MMM YYY
|
||||
const formatDate = (date: string, dateFormat: string) => {
|
||||
const updated = new Date(parseInt(date, 10) * 1000).toString();
|
||||
const resDate = moment(updated).format(dateFormat);
|
||||
return resDate;
|
||||
};
|
||||
|
||||
// Function to calculate average of resilience scores based on all dates with range as edge dates
|
||||
const avgWorkflowsAll = () => {
|
||||
const averageDateWiseResilienceScores: AverageDateWiseResilienceScores = {
|
||||
Hourly: {
|
||||
dates: [],
|
||||
avgResilienceScores: [],
|
||||
},
|
||||
Daily: {
|
||||
dates: [],
|
||||
avgResilienceScores: [],
|
||||
},
|
||||
Monthly: {
|
||||
dates: [],
|
||||
avgResilienceScores: [],
|
||||
},
|
||||
const handleChangeInGranularity = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>
|
||||
) => {
|
||||
const name = event.target.name as keyof typeof currentGranularity;
|
||||
if (name !== currentGranularity.name) {
|
||||
setCurrentGranularity({
|
||||
...currentGranularity,
|
||||
[name]: event.target.value as string,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
for (let i = 0; i < xData.Hourly.length; i += 1) {
|
||||
for (let j = 0; j < xData.Hourly[i].length; j += 1) {
|
||||
const date: string = xData.Hourly[i][j];
|
||||
let sum: number = 0;
|
||||
let count: number = 0;
|
||||
for (let k = 0; k < xData.Hourly.length; k += 1) {
|
||||
if (
|
||||
xData.Hourly[k].includes(date) &&
|
||||
!averageDateWiseResilienceScores.Hourly.dates.includes(date)
|
||||
) {
|
||||
sum += yData.Hourly[k][xData.Hourly[k].indexOf(date)];
|
||||
count += 1;
|
||||
const [plotData, setPlotData] = React.useState<any[]>([]);
|
||||
|
||||
const [edgeData, setEdgeData] = React.useState({
|
||||
highScore: 0,
|
||||
lowScore: 0,
|
||||
highColor: '',
|
||||
lowColor: '',
|
||||
highName: '',
|
||||
lowName: '',
|
||||
});
|
||||
|
||||
const [plotLayout, setPlotLayout] = React.useState<any>({});
|
||||
|
||||
// Function to convert UNIX time in format of DD MMM YYY
|
||||
const formatDate = (date: string, dateFormat: string) => {
|
||||
const updated = new Date(parseInt(date, 10) * 1000).toString();
|
||||
const resDate = moment(updated).format(dateFormat);
|
||||
return resDate;
|
||||
};
|
||||
|
||||
// Function to calculate average of resilience scores based on all dates with range as edge dates
|
||||
const avgWorkflowsAll = () => {
|
||||
const averageDateWiseResilienceScores: AverageDateWiseResilienceScores = {
|
||||
Hourly: {
|
||||
dates: [],
|
||||
avgResilienceScores: [],
|
||||
},
|
||||
Daily: {
|
||||
dates: [],
|
||||
avgResilienceScores: [],
|
||||
},
|
||||
Monthly: {
|
||||
dates: [],
|
||||
avgResilienceScores: [],
|
||||
},
|
||||
};
|
||||
|
||||
for (let i = 0; i < xData.Hourly.length; i += 1) {
|
||||
for (let j = 0; j < xData.Hourly[i].length; j += 1) {
|
||||
const date: string = xData.Hourly[i][j];
|
||||
let sum: number = 0;
|
||||
let count: number = 0;
|
||||
for (let k = 0; k < xData.Hourly.length; k += 1) {
|
||||
if (
|
||||
xData.Hourly[k].includes(date) &&
|
||||
!averageDateWiseResilienceScores.Hourly.dates.includes(date)
|
||||
) {
|
||||
sum += yData.Hourly[k][xData.Hourly[k].indexOf(date)];
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
if (count !== 0) {
|
||||
averageDateWiseResilienceScores.Hourly.dates.push(date);
|
||||
averageDateWiseResilienceScores.Hourly.avgResilienceScores.push(
|
||||
parseFloat((sum / count).toFixed(2))
|
||||
);
|
||||
}
|
||||
}
|
||||
if (count !== 0) {
|
||||
averageDateWiseResilienceScores.Hourly.dates.push(date);
|
||||
averageDateWiseResilienceScores.Hourly.avgResilienceScores.push(
|
||||
parseFloat((sum / count).toFixed(2))
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < xData.Daily.length; i += 1) {
|
||||
for (let j = 0; j < xData.Daily[i].length; j += 1) {
|
||||
const date: string = xData.Daily[i][j];
|
||||
let sum: number = 0;
|
||||
let count: number = 0;
|
||||
for (let k = 0; k < xData.Daily.length; k += 1) {
|
||||
if (
|
||||
xData.Daily[k].includes(date) &&
|
||||
!averageDateWiseResilienceScores.Daily.dates.includes(date)
|
||||
) {
|
||||
sum += yData.Daily[k][xData.Daily[k].indexOf(date)];
|
||||
count += 1;
|
||||
for (let i = 0; i < xData.Daily.length; i += 1) {
|
||||
for (let j = 0; j < xData.Daily[i].length; j += 1) {
|
||||
const date: string = xData.Daily[i][j];
|
||||
let sum: number = 0;
|
||||
let count: number = 0;
|
||||
for (let k = 0; k < xData.Daily.length; k += 1) {
|
||||
if (
|
||||
xData.Daily[k].includes(date) &&
|
||||
!averageDateWiseResilienceScores.Daily.dates.includes(date)
|
||||
) {
|
||||
sum += yData.Daily[k][xData.Daily[k].indexOf(date)];
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
if (count !== 0) {
|
||||
averageDateWiseResilienceScores.Daily.dates.push(date);
|
||||
averageDateWiseResilienceScores.Daily.avgResilienceScores.push(
|
||||
parseFloat((sum / count).toFixed(2))
|
||||
);
|
||||
}
|
||||
}
|
||||
if (count !== 0) {
|
||||
averageDateWiseResilienceScores.Daily.dates.push(date);
|
||||
averageDateWiseResilienceScores.Daily.avgResilienceScores.push(
|
||||
parseFloat((sum / count).toFixed(2))
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < xData.Monthly.length; i += 1) {
|
||||
for (let j = 0; j < xData.Monthly[i].length; j += 1) {
|
||||
const date: string = xData.Monthly[i][j];
|
||||
let sum: number = 0;
|
||||
let count: number = 0;
|
||||
for (let k = 0; k < xData.Monthly.length; k += 1) {
|
||||
if (
|
||||
xData.Monthly[k].includes(date) &&
|
||||
!averageDateWiseResilienceScores.Monthly.dates.includes(date)
|
||||
) {
|
||||
sum += yData.Monthly[k][xData.Monthly[k].indexOf(date)];
|
||||
count += 1;
|
||||
for (let i = 0; i < xData.Monthly.length; i += 1) {
|
||||
for (let j = 0; j < xData.Monthly[i].length; j += 1) {
|
||||
const date: string = xData.Monthly[i][j];
|
||||
let sum: number = 0;
|
||||
let count: number = 0;
|
||||
for (let k = 0; k < xData.Monthly.length; k += 1) {
|
||||
if (
|
||||
xData.Monthly[k].includes(date) &&
|
||||
!averageDateWiseResilienceScores.Monthly.dates.includes(date)
|
||||
) {
|
||||
sum += yData.Monthly[k][xData.Monthly[k].indexOf(date)];
|
||||
count += 1;
|
||||
}
|
||||
}
|
||||
if (count !== 0) {
|
||||
averageDateWiseResilienceScores.Monthly.dates.push(date);
|
||||
averageDateWiseResilienceScores.Monthly.avgResilienceScores.push(
|
||||
parseFloat((sum / count).toFixed(2))
|
||||
);
|
||||
}
|
||||
}
|
||||
if (count !== 0) {
|
||||
averageDateWiseResilienceScores.Monthly.dates.push(date);
|
||||
averageDateWiseResilienceScores.Monthly.avgResilienceScores.push(
|
||||
parseFloat((sum / count).toFixed(2))
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
return averageDateWiseResilienceScores;
|
||||
};
|
||||
return averageDateWiseResilienceScores;
|
||||
};
|
||||
|
||||
const argSort = (arr1: number[], arr2: number[]) =>
|
||||
arr1
|
||||
.map((item: any, index: number) => [arr2[index], item]) // add the args to sort by
|
||||
.sort(([arg1], [arg2]) => arg2 - arg1) // sort by the args
|
||||
.map(([, item]) => item); // extract the sorted items
|
||||
const argSort = (arr1: number[], arr2: number[]) =>
|
||||
arr1
|
||||
.map((item: any, index: number) => [arr2[index], item]) // add the args to sort by
|
||||
.sort(([arg1], [arg2]) => arg2 - arg1) // sort by the args
|
||||
.map(([, item]) => item); // extract the sorted items
|
||||
|
||||
const processData = () => {
|
||||
const calculatedAverageAll: AverageDateWiseResilienceScores = avgWorkflowsAll();
|
||||
let dataX = [['']];
|
||||
let dataY = [[0]];
|
||||
let xAvg: string[] = [];
|
||||
let yAvg: number[] = [];
|
||||
let avgDateFormat: string = '';
|
||||
if (currentGranularity.name === 'Hourly') {
|
||||
dataX = xData.Hourly;
|
||||
dataY = yData.Hourly;
|
||||
xAvg = calculatedAverageAll.Hourly.dates;
|
||||
yAvg = calculatedAverageAll.Hourly.avgResilienceScores;
|
||||
avgDateFormat = 'YYYY-MM-DD HH:mm:ss';
|
||||
}
|
||||
if (currentGranularity.name === 'Daily') {
|
||||
dataX = xData.Daily;
|
||||
dataY = yData.Daily;
|
||||
xAvg = calculatedAverageAll.Daily.dates;
|
||||
yAvg = calculatedAverageAll.Daily.avgResilienceScores;
|
||||
avgDateFormat = 'YYYY-MM-DD';
|
||||
}
|
||||
if (currentGranularity.name === 'Monthly') {
|
||||
dataX = xData.Monthly;
|
||||
dataY = yData.Monthly;
|
||||
xAvg = calculatedAverageAll.Monthly.dates;
|
||||
yAvg = calculatedAverageAll.Monthly.avgResilienceScores;
|
||||
avgDateFormat = 'YYYY-MM';
|
||||
}
|
||||
const lineSize: number[] = Array(labels?.length).fill(3);
|
||||
const data = [];
|
||||
const series: number[] = Array(labels?.length).fill(0);
|
||||
const lengths: number[] = Array(labels?.length).fill(0);
|
||||
const processData = () => {
|
||||
const calculatedAverageAll: AverageDateWiseResilienceScores =
|
||||
avgWorkflowsAll();
|
||||
let dataX = [['']];
|
||||
let dataY = [[0]];
|
||||
let xAvg: string[] = [];
|
||||
let yAvg: number[] = [];
|
||||
let avgDateFormat: string = '';
|
||||
if (currentGranularity.name === 'Hourly') {
|
||||
dataX = xData.Hourly;
|
||||
dataY = yData.Hourly;
|
||||
xAvg = calculatedAverageAll.Hourly.dates;
|
||||
yAvg = calculatedAverageAll.Hourly.avgResilienceScores;
|
||||
avgDateFormat = 'YYYY-MM-DD HH:mm:ss';
|
||||
}
|
||||
if (currentGranularity.name === 'Daily') {
|
||||
dataX = xData.Daily;
|
||||
dataY = yData.Daily;
|
||||
xAvg = calculatedAverageAll.Daily.dates;
|
||||
yAvg = calculatedAverageAll.Daily.avgResilienceScores;
|
||||
avgDateFormat = 'YYYY-MM-DD';
|
||||
}
|
||||
if (currentGranularity.name === 'Monthly') {
|
||||
dataX = xData.Monthly;
|
||||
dataY = yData.Monthly;
|
||||
xAvg = calculatedAverageAll.Monthly.dates;
|
||||
yAvg = calculatedAverageAll.Monthly.avgResilienceScores;
|
||||
avgDateFormat = 'YYYY-MM';
|
||||
}
|
||||
const lineSize: number[] = Array(labels?.length).fill(3);
|
||||
const data = [];
|
||||
const series: number[] = Array(labels?.length).fill(0);
|
||||
const lengths: number[] = Array(labels?.length).fill(0);
|
||||
|
||||
for (let i = 0; i < dataX.length; i += 1) {
|
||||
const result = {
|
||||
x: dataX[i],
|
||||
y: dataY[i],
|
||||
for (let i = 0; i < dataX.length; i += 1) {
|
||||
const result = {
|
||||
x: dataX[i],
|
||||
y: dataY[i],
|
||||
type: 'scatter',
|
||||
mode: 'lines + text',
|
||||
line: {
|
||||
shape: 'spline',
|
||||
color: colors[i],
|
||||
width: lineSize[i],
|
||||
},
|
||||
name: labels ? labels[i] : '',
|
||||
};
|
||||
data.push(result);
|
||||
for (let j = 0; j < dataY[i].length; j += 1) {
|
||||
series[i] += dataY[i][j];
|
||||
}
|
||||
lengths[i] = dataY[i].length;
|
||||
}
|
||||
|
||||
const unixTimeArray: number[] = [];
|
||||
xAvg.forEach((x) => {
|
||||
unixTimeArray.push(parseInt(moment(x).format('X'), 10));
|
||||
});
|
||||
const argSortResultY = argSort(yAvg, unixTimeArray).reverse();
|
||||
const sortedResultX = unixTimeArray.sort(function difference(a, b) {
|
||||
return a - b;
|
||||
});
|
||||
const datesX: string[] = [];
|
||||
sortedResultX.forEach((date) => {
|
||||
datesX.push(formatDate(date.toString(), avgDateFormat));
|
||||
});
|
||||
|
||||
const avgResult = {
|
||||
x: datesX,
|
||||
y: argSortResultY,
|
||||
type: 'scatter',
|
||||
mode: 'lines + text',
|
||||
mode: 'lines',
|
||||
line: {
|
||||
shape: 'spline',
|
||||
color: colors[i],
|
||||
width: lineSize[i],
|
||||
dash: 'dash',
|
||||
color: palette.primary.main,
|
||||
width: 3,
|
||||
},
|
||||
name: labels ? labels[i] : '',
|
||||
name: 'Average Workflows',
|
||||
};
|
||||
data.push(result);
|
||||
for (let j = 0; j < dataY[i].length; j += 1) {
|
||||
series[i] += dataY[i][j];
|
||||
data.push(avgResult);
|
||||
const normalized = Array(labels?.length).fill(0);
|
||||
for (let k = 0; k < lengths.length; k += 1) {
|
||||
normalized[k] = series[k] / lengths[k];
|
||||
}
|
||||
lengths[i] = dataY[i].length;
|
||||
}
|
||||
|
||||
const unixTimeArray: number[] = [];
|
||||
xAvg.forEach((x) => {
|
||||
unixTimeArray.push(parseInt(moment(x).format('X'), 10));
|
||||
});
|
||||
const argSortResultY = argSort(yAvg, unixTimeArray).reverse();
|
||||
const sortedResultX = unixTimeArray.sort(function difference(a, b) {
|
||||
return a - b;
|
||||
});
|
||||
const datesX: string[] = [];
|
||||
sortedResultX.forEach((date) => {
|
||||
datesX.push(formatDate(date.toString(), avgDateFormat));
|
||||
});
|
||||
|
||||
const avgResult = {
|
||||
x: datesX,
|
||||
y: argSortResultY,
|
||||
type: 'scatter',
|
||||
mode: 'lines',
|
||||
line: {
|
||||
shape: 'spline',
|
||||
dash: 'dash',
|
||||
color: palette.primary.main,
|
||||
width: 3,
|
||||
},
|
||||
name: 'Average Workflows',
|
||||
const max = Math.max(...normalized);
|
||||
const maxID = normalized.indexOf(max);
|
||||
const min = Math.min(...normalized);
|
||||
const minID = normalized.indexOf(min);
|
||||
setEdgeData({
|
||||
highScore: parseFloat(max.toFixed(2)),
|
||||
lowScore: parseFloat(min.toFixed(2)),
|
||||
highColor: colors[maxID],
|
||||
lowColor: colors[minID],
|
||||
highName: labels ? labels[maxID] : '',
|
||||
lowName: labels ? labels[minID] : '',
|
||||
});
|
||||
setPlotData(data);
|
||||
};
|
||||
data.push(avgResult);
|
||||
const normalized = Array(labels?.length).fill(0);
|
||||
for (let k = 0; k < lengths.length; k += 1) {
|
||||
normalized[k] = series[k] / lengths[k];
|
||||
}
|
||||
const max = Math.max(...normalized);
|
||||
const maxID = normalized.indexOf(max);
|
||||
const min = Math.min(...normalized);
|
||||
const minID = normalized.indexOf(min);
|
||||
setEdgeData({
|
||||
highScore: parseFloat(max.toFixed(2)),
|
||||
lowScore: parseFloat(min.toFixed(2)),
|
||||
highColor: colors[maxID],
|
||||
lowColor: colors[minID],
|
||||
highName: labels ? labels[maxID] : '',
|
||||
lowName: labels ? labels[minID] : '',
|
||||
});
|
||||
setPlotData(data);
|
||||
};
|
||||
|
||||
const processLayout = () => {
|
||||
const layout = {
|
||||
xaxis: {
|
||||
showgrid: true,
|
||||
gridcolor: palette.border.main,
|
||||
showline: false,
|
||||
showticklabels: true,
|
||||
linecolor: palette.border.main,
|
||||
linewidth: 0.5,
|
||||
ticks: 'outside',
|
||||
tickcolor: palette.border.main,
|
||||
tickwidth: 2,
|
||||
ticklen: 5,
|
||||
tickfont: {
|
||||
family: 'Ubuntu',
|
||||
const processLayout = () => {
|
||||
const layout = {
|
||||
xaxis: {
|
||||
showgrid: true,
|
||||
gridcolor: palette.border.main,
|
||||
showline: false,
|
||||
showticklabels: true,
|
||||
linecolor: palette.border.main,
|
||||
linewidth: 0.5,
|
||||
ticks: 'outside',
|
||||
tickcolor: palette.border.main,
|
||||
tickwidth: 2,
|
||||
ticklen: 5,
|
||||
tickfont: {
|
||||
family: 'Ubuntu',
|
||||
color: palette.text.hint,
|
||||
},
|
||||
mirror: true,
|
||||
rangeselector: selectorOptions as any,
|
||||
rangeslider: { visible: true },
|
||||
},
|
||||
yaxis: {
|
||||
showgrid: true,
|
||||
gridcolor: palette.border.main,
|
||||
zeroline: false,
|
||||
showline: false,
|
||||
showticklabels: true,
|
||||
linecolor: palette.border.main,
|
||||
linewidth: 0.5,
|
||||
ticks: 'outside',
|
||||
tickcolor: palette.border.main,
|
||||
tickwidth: 2,
|
||||
ticklen: 5,
|
||||
tickfont: {
|
||||
family: 'Ubuntu',
|
||||
color: palette.text.hint,
|
||||
},
|
||||
mirror: true,
|
||||
tickmode: 'array',
|
||||
tickvals: [0, 20, 40, 60, 80, 100],
|
||||
ticktext: ['0', '20', '40', '60', '80', '100'],
|
||||
range: [-10, 110],
|
||||
},
|
||||
cliponaxis: true,
|
||||
layer: 'below_traces',
|
||||
autosize: true,
|
||||
margin: {
|
||||
autoexpand: false,
|
||||
l: 60,
|
||||
r: 50,
|
||||
t: 30,
|
||||
b: 130,
|
||||
},
|
||||
font: {
|
||||
family: 'Ubuntu, monospace',
|
||||
color: palette.text.hint,
|
||||
},
|
||||
mirror: true,
|
||||
rangeselector: selectorOptions as any,
|
||||
rangeslider: { visible: true },
|
||||
},
|
||||
yaxis: {
|
||||
showgrid: true,
|
||||
gridcolor: palette.border.main,
|
||||
zeroline: false,
|
||||
showline: false,
|
||||
showticklabels: true,
|
||||
linecolor: palette.border.main,
|
||||
linewidth: 0.5,
|
||||
ticks: 'outside',
|
||||
tickcolor: palette.border.main,
|
||||
tickwidth: 2,
|
||||
ticklen: 5,
|
||||
tickfont: {
|
||||
family: 'Ubuntu',
|
||||
color: palette.text.hint,
|
||||
showlegend: true,
|
||||
legend: { orientation: 'h', y: -0.5 },
|
||||
modebar: {
|
||||
bgcolor: palette.background.paper,
|
||||
},
|
||||
mirror: true,
|
||||
tickmode: 'array',
|
||||
tickvals: [0, 20, 40, 60, 80, 100],
|
||||
ticktext: ['0', '20', '40', '60', '80', '100'],
|
||||
range: [-10, 110],
|
||||
},
|
||||
cliponaxis: true,
|
||||
layer: 'below_traces',
|
||||
autosize: true,
|
||||
margin: {
|
||||
autoexpand: false,
|
||||
l: 60,
|
||||
r: 50,
|
||||
t: 30,
|
||||
b: 130,
|
||||
},
|
||||
font: {
|
||||
family: 'Ubuntu, monospace',
|
||||
color: palette.text.hint,
|
||||
},
|
||||
showlegend: true,
|
||||
legend: { orientation: 'h', y: -0.5 },
|
||||
modebar: {
|
||||
bgcolor: palette.background.paper,
|
||||
},
|
||||
paper_bgcolor: palette.background.paper,
|
||||
plot_bgcolor: palette.background.paper,
|
||||
paper_bgcolor: palette.background.paper,
|
||||
plot_bgcolor: palette.background.paper,
|
||||
};
|
||||
setPlotLayout(layout);
|
||||
};
|
||||
setPlotLayout(layout);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
processData();
|
||||
processLayout();
|
||||
}, [currentGranularity]);
|
||||
useEffect(() => {
|
||||
processData();
|
||||
processLayout();
|
||||
}, [currentGranularity]);
|
||||
|
||||
return (
|
||||
<div style={{ alignContent: 'center', width: '100%' }}>
|
||||
<div className={classes.flexDisplay}>
|
||||
<div className={classes.adjust}>
|
||||
return (
|
||||
<div style={{ alignContent: 'center', width: '100%' }}>
|
||||
<div className={classes.flexDisplay}>
|
||||
<div className={classes.adjust}>
|
||||
<Score
|
||||
score={edgeData.highScore}
|
||||
high
|
||||
color={edgeData.highColor}
|
||||
name={edgeData.highName}
|
||||
/>
|
||||
</div>
|
||||
<Score
|
||||
score={edgeData.highScore}
|
||||
high
|
||||
color={edgeData.highColor}
|
||||
name={edgeData.highName}
|
||||
score={edgeData.lowScore}
|
||||
high={false}
|
||||
color={edgeData.lowColor}
|
||||
name={edgeData.lowName}
|
||||
/>
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
className={classes.formControl}
|
||||
color="primary"
|
||||
focused
|
||||
>
|
||||
<InputLabel
|
||||
htmlFor="outlined-selection-granularity"
|
||||
className={classes.selectText}
|
||||
>
|
||||
Granularity
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={currentGranularity.name}
|
||||
onChange={handleChangeInGranularity}
|
||||
label="Granularity"
|
||||
inputProps={{
|
||||
name: 'name',
|
||||
id: 'outlined-selection-granularity',
|
||||
}}
|
||||
className={classes.selectText}
|
||||
input={<OutlinedInput classes={outlinedInputClasses} />}
|
||||
>
|
||||
<MenuItem value="Hourly">Hourly</MenuItem>
|
||||
<MenuItem value="Daily">Daily</MenuItem>
|
||||
<MenuItem value="Monthly">Monthly</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className={classes.plot}>
|
||||
<Plot
|
||||
data={plotData}
|
||||
layout={plotLayout}
|
||||
useResizeHandler
|
||||
style={{
|
||||
width: '166.55%',
|
||||
height: 720,
|
||||
margin: 'auto',
|
||||
}}
|
||||
config={{
|
||||
displaylogo: false,
|
||||
autosizable: true,
|
||||
responsive: true,
|
||||
frameMargins: 0.2,
|
||||
showAxisDragHandles: true,
|
||||
showAxisRangeEntryBoxes: true,
|
||||
showTips: true,
|
||||
displayModeBar: true,
|
||||
toImageButtonOptions: {
|
||||
format: 'png',
|
||||
filename: 'ResilienceScores_Comparison',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
scale: 2,
|
||||
},
|
||||
}}
|
||||
onInitialized={() => {
|
||||
try {
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('modebar')[0] as HTMLElement
|
||||
).style;
|
||||
nodeStyle.left = '39%';
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Score
|
||||
score={edgeData.lowScore}
|
||||
high={false}
|
||||
color={edgeData.lowColor}
|
||||
name={edgeData.lowName}
|
||||
/>
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
className={classes.formControl}
|
||||
color="primary"
|
||||
focused
|
||||
>
|
||||
<InputLabel
|
||||
htmlFor="outlined-selection-granularity"
|
||||
className={classes.selectText}
|
||||
>
|
||||
Granularity
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={currentGranularity.name}
|
||||
onChange={handleChangeInGranularity}
|
||||
label="Granularity"
|
||||
inputProps={{
|
||||
name: 'name',
|
||||
id: 'outlined-selection-granularity',
|
||||
}}
|
||||
className={classes.selectText}
|
||||
input={<OutlinedInput classes={outlinedInputClasses} />}
|
||||
>
|
||||
<MenuItem value="Hourly">Hourly</MenuItem>
|
||||
<MenuItem value="Daily">Daily</MenuItem>
|
||||
<MenuItem value="Monthly">Monthly</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className={classes.plot}>
|
||||
<Plot
|
||||
data={plotData}
|
||||
layout={plotLayout}
|
||||
useResizeHandler
|
||||
style={{
|
||||
width: '166.55%',
|
||||
height: 720,
|
||||
margin: 'auto',
|
||||
}}
|
||||
config={{
|
||||
displaylogo: false,
|
||||
autosizable: true,
|
||||
responsive: true,
|
||||
frameMargins: 0.2,
|
||||
showAxisDragHandles: true,
|
||||
showAxisRangeEntryBoxes: true,
|
||||
showTips: true,
|
||||
displayModeBar: true,
|
||||
toImageButtonOptions: {
|
||||
format: 'png',
|
||||
filename: 'ResilienceScores_Comparison',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
scale: 2,
|
||||
},
|
||||
}}
|
||||
onInitialized={() => {
|
||||
try {
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'modebar'
|
||||
)[0] as HTMLElement).style;
|
||||
nodeStyle.left = '39%';
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
);
|
||||
};
|
||||
|
||||
export default ResilienceScoreComparisonPlot;
|
||||
|
|
|
|||
|
|
@ -81,10 +81,8 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
startDate: ' ',
|
||||
endDate: ' ',
|
||||
});
|
||||
const [
|
||||
isDateRangeSelectorPopoverOpen,
|
||||
setDateRangeSelectorPopoverOpen,
|
||||
] = useState(false);
|
||||
const [isDateRangeSelectorPopoverOpen, setDateRangeSelectorPopoverOpen] =
|
||||
useState(false);
|
||||
const dateRangeSelectorRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const handleClusterChange = (
|
||||
|
|
|
|||
|
|
@ -116,17 +116,13 @@ const WorkflowComparisonTable = () => {
|
|||
const [compare, setCompare] = React.useState<Boolean>(false);
|
||||
const [isDataAvailable, setIsDataAvailable] = React.useState<Boolean>(true);
|
||||
const [showAll, setShowAll] = React.useState<Boolean>(true);
|
||||
const [
|
||||
plotDataForComparison,
|
||||
setPlotDataForComparison,
|
||||
] = React.useState<ResilienceScoreComparisonPlotProps>();
|
||||
const [plotDataForComparison, setPlotDataForComparison] =
|
||||
React.useState<ResilienceScoreComparisonPlotProps>();
|
||||
const [totalValidWorkflowRuns, setTotalValidWorkflowRuns] = React.useState<
|
||||
WorkflowDataForExport[]
|
||||
>([]);
|
||||
const [
|
||||
totalValidWorkflowRunsCount,
|
||||
setTotalValidWorkflowRunsCount,
|
||||
] = React.useState<number>(0);
|
||||
const [totalValidWorkflowRunsCount, setTotalValidWorkflowRunsCount] =
|
||||
React.useState<number>(0);
|
||||
|
||||
const projectID = getProjectID();
|
||||
|
||||
|
|
@ -312,18 +308,19 @@ const WorkflowComparisonTable = () => {
|
|||
tests_failed:
|
||||
experimentTestResultsArrayPerWorkflowRun.length -
|
||||
totalExperimentsPassed,
|
||||
resilience_score: experimentTestResultsArrayPerWorkflowRun.length
|
||||
? parseFloat(
|
||||
(
|
||||
(experimentTestResultsArrayPerWorkflowRun.reduce(
|
||||
(a, b) => a + b,
|
||||
0
|
||||
) /
|
||||
weightsSum) *
|
||||
100
|
||||
).toFixed(2)
|
||||
)
|
||||
: 0,
|
||||
resilience_score:
|
||||
experimentTestResultsArrayPerWorkflowRun.length
|
||||
? parseFloat(
|
||||
(
|
||||
(experimentTestResultsArrayPerWorkflowRun.reduce(
|
||||
(a, b) => a + b,
|
||||
0
|
||||
) /
|
||||
weightsSum) *
|
||||
100
|
||||
).toFixed(2)
|
||||
)
|
||||
: 0,
|
||||
test_details: testDetails,
|
||||
});
|
||||
workflowTimeSeriesData.push({
|
||||
|
|
|
|||
|
|
@ -65,10 +65,8 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
|
|||
startDate: ' ',
|
||||
endDate: ' ',
|
||||
});
|
||||
const [
|
||||
isDateRangeSelectorPopoverOpen,
|
||||
setDateRangeSelectorPopoverOpen,
|
||||
] = useState(false);
|
||||
const [isDateRangeSelectorPopoverOpen, setDateRangeSelectorPopoverOpen] =
|
||||
useState(false);
|
||||
|
||||
const handleTestChange = (event: React.ChangeEvent<{ value: unknown }>) => {
|
||||
setTest(event.target.value as String);
|
||||
|
|
|
|||
|
|
@ -240,9 +240,9 @@ const WorkflowRunsBarChart: React.FC<WorkflowRunsBarChartProps> = ({
|
|||
processData();
|
||||
processLayout();
|
||||
try {
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'modebar'
|
||||
)[0] as HTMLElement).style;
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('modebar')[0] as HTMLElement
|
||||
).style;
|
||||
nodeStyle.left = '29%';
|
||||
nodeStyle.transform = 'translateY(110%)';
|
||||
} catch (err) {
|
||||
|
|
@ -254,9 +254,9 @@ const WorkflowRunsBarChart: React.FC<WorkflowRunsBarChartProps> = ({
|
|||
processData();
|
||||
processLayout();
|
||||
try {
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'modebar'
|
||||
)[0] as HTMLElement).style;
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('modebar')[0] as HTMLElement
|
||||
).style;
|
||||
nodeStyle.left = '29%';
|
||||
nodeStyle.transform = 'translateY(110%)';
|
||||
} catch (err) {
|
||||
|
|
@ -267,9 +267,9 @@ const WorkflowRunsBarChart: React.FC<WorkflowRunsBarChartProps> = ({
|
|||
useEffect(() => {
|
||||
processData();
|
||||
try {
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'modebar'
|
||||
)[0] as HTMLElement).style;
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('modebar')[0] as HTMLElement
|
||||
).style;
|
||||
nodeStyle.left = '29%';
|
||||
nodeStyle.transform = 'translateY(110%)';
|
||||
} catch (err) {
|
||||
|
|
@ -330,7 +330,7 @@ const WorkflowRunsBarChart: React.FC<WorkflowRunsBarChartProps> = ({
|
|||
}
|
||||
if (!recolour) {
|
||||
for (let i = 0; i < data.points.length; i++) {
|
||||
ind = (data.points[i].customdata as unknown) as number;
|
||||
ind = data.points[i].customdata as unknown as number;
|
||||
loc = {
|
||||
x: data.event.pageX,
|
||||
y: data.event.pageY - data.event.offsetY,
|
||||
|
|
@ -362,7 +362,7 @@ const WorkflowRunsBarChart: React.FC<WorkflowRunsBarChartProps> = ({
|
|||
const newFailedColours = [];
|
||||
let ind = 0;
|
||||
for (let i = 0; i < data.points.length; i++) {
|
||||
ind = (data.points[i].customdata as unknown) as number;
|
||||
ind = data.points[i].customdata as unknown as number;
|
||||
}
|
||||
for (let i = 0; i < colorsPassed.length; i++) {
|
||||
if (i !== ind) {
|
||||
|
|
|
|||
|
|
@ -59,9 +59,8 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
null
|
||||
);
|
||||
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
|
||||
const [isTemplateModalOpen, setIsTemplateModalOpen] = React.useState<boolean>(
|
||||
false
|
||||
);
|
||||
const [isTemplateModalOpen, setIsTemplateModalOpen] =
|
||||
React.useState<boolean>(false);
|
||||
|
||||
const tabs = useActions(TabActions);
|
||||
const open = Boolean(anchorEl);
|
||||
|
|
@ -85,10 +84,8 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
};
|
||||
|
||||
// States for PopOver to display schedule details
|
||||
const [
|
||||
popAnchorElSchedule,
|
||||
setPopAnchorElSchedule,
|
||||
] = React.useState<null | HTMLElement>(null);
|
||||
const [popAnchorElSchedule, setPopAnchorElSchedule] =
|
||||
React.useState<null | HTMLElement>(null);
|
||||
const isOpenSchedule = Boolean(popAnchorElSchedule);
|
||||
const idSchedule = isOpenSchedule ? 'simple-popover' : undefined;
|
||||
const handlePopOverCloseForSchedule = () => {
|
||||
|
|
@ -180,7 +177,7 @@ const TableData: React.FC<TableDataProps> = ({
|
|||
>
|
||||
<SaveTemplateModal
|
||||
closeTemplate={handleCloseTemplate}
|
||||
isCustomWorkflow={(data.isCustomWorkflow as unknown) as boolean}
|
||||
isCustomWorkflow={data.isCustomWorkflow as unknown as boolean}
|
||||
/>
|
||||
</Modal>
|
||||
<TableCell className={classes.workflowNameData}>
|
||||
|
|
|
|||
|
|
@ -124,13 +124,13 @@ const useStyles = makeStyles((theme) => ({
|
|||
|
||||
// Colors for Resilency score and Experiments passed
|
||||
less: {
|
||||
color: theme.palette.status.failed.text,
|
||||
color: theme.palette.status.failed,
|
||||
},
|
||||
medium: {
|
||||
color: theme.palette.status.pending.text,
|
||||
color: theme.palette.status.pending,
|
||||
},
|
||||
high: {
|
||||
color: theme.palette.status.completed.text,
|
||||
color: theme.palette.status.completed,
|
||||
},
|
||||
|
||||
// Menu option with icon
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ const useStyles = makeStyles((theme) => ({
|
|||
backgroundColor: theme.palette.warning.light,
|
||||
},
|
||||
failed: {
|
||||
color: theme.palette.status.failed.text,
|
||||
backgroundColor: theme.palette.status.failed.background,
|
||||
color: theme.palette.status.failed,
|
||||
backgroundColor: theme.palette.status.failed,
|
||||
},
|
||||
statusFont: {
|
||||
fontSize: '0.725rem',
|
||||
|
|
|
|||
|
|
@ -71,8 +71,10 @@ const CommunityAnalyticsPlot: React.FC = () => {
|
|||
};
|
||||
|
||||
const cumulativeSum = (timeSeriesCounts: any) => {
|
||||
const countSum = ((sum: any) => (value: any) =>
|
||||
(sum = parseInt(sum, 10) + parseInt(value, 10)))(0);
|
||||
const countSum = (
|
||||
(sum: any) => (value: any) =>
|
||||
(sum = parseInt(sum, 10) + parseInt(value, 10))
|
||||
)(0);
|
||||
const MappedCumulativeSum = timeSeriesCounts.map(countSum);
|
||||
return MappedCumulativeSum;
|
||||
};
|
||||
|
|
@ -186,9 +188,9 @@ const CommunityAnalyticsPlot: React.FC = () => {
|
|||
useEffect(() => {
|
||||
processData();
|
||||
try {
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'modebar'
|
||||
)[0] as HTMLElement).style;
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('modebar')[0] as HTMLElement
|
||||
).style;
|
||||
nodeStyle.left = '29%';
|
||||
nodeStyle.width = 'fit-content';
|
||||
nodeStyle.backgroundColor = palette.background.paper;
|
||||
|
|
@ -331,9 +333,9 @@ const CommunityAnalyticsPlot: React.FC = () => {
|
|||
}}
|
||||
onInitialized={() => {
|
||||
try {
|
||||
const nodeStyle = (document.getElementsByClassName(
|
||||
'modebar'
|
||||
)[0] as HTMLElement).style;
|
||||
const nodeStyle = (
|
||||
document.getElementsByClassName('modebar')[0] as HTMLElement
|
||||
).style;
|
||||
nodeStyle.left = '29%';
|
||||
nodeStyle.width = 'fit-content';
|
||||
nodeStyle.backgroundColor = palette.background.paper;
|
||||
|
|
|
|||
|
|
@ -10101,24 +10101,8 @@
|
|||
"arcs": [
|
||||
[
|
||||
[
|
||||
-4,
|
||||
166,
|
||||
167,
|
||||
168,
|
||||
169,
|
||||
170,
|
||||
171,
|
||||
172,
|
||||
173,
|
||||
174,
|
||||
175,
|
||||
176,
|
||||
177,
|
||||
-117,
|
||||
178,
|
||||
179,
|
||||
180,
|
||||
181
|
||||
-4, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177,
|
||||
-117, 178, 179, 180, 181
|
||||
]
|
||||
],
|
||||
[[182]]
|
||||
|
|
@ -12251,23 +12235,8 @@
|
|||
"arcs": [
|
||||
[
|
||||
[
|
||||
-56,
|
||||
-289,
|
||||
511,
|
||||
512,
|
||||
-95,
|
||||
-425,
|
||||
-260,
|
||||
513,
|
||||
-269,
|
||||
-472,
|
||||
514,
|
||||
-502,
|
||||
-172,
|
||||
-442,
|
||||
-170,
|
||||
-387,
|
||||
515
|
||||
-56, -289, 511, 512, -95, -425, -260, 513, -269, -472, 514,
|
||||
-502, -172, -442, -170, -387, 515
|
||||
]
|
||||
],
|
||||
[[-421, -500, 516]],
|
||||
|
|
|
|||
|
|
@ -46,9 +46,8 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
|
|||
|
||||
const [clusterData, setClusterData] = useState<Cluster[]>([]);
|
||||
const [search, setSearch] = useState<string | null>(null);
|
||||
const [currentlySelectedAgent, setCurrentlySelectedAgent] = useState<string>(
|
||||
''
|
||||
);
|
||||
const [currentlySelectedAgent, setCurrentlySelectedAgent] =
|
||||
useState<string>('');
|
||||
|
||||
const [getRegistryData] = useLazyQuery(GET_IMAGE_REGISTRY, {
|
||||
fetchPolicy: 'network-only',
|
||||
|
|
|
|||
|
|
@ -502,8 +502,9 @@ const ScheduleWorkflow = forwardRef((_, ref) => {
|
|||
setMinute(event.target.value as number);
|
||||
setCronValue({
|
||||
...cronValue,
|
||||
minute: (event.target
|
||||
.value as number).toString(),
|
||||
minute: (
|
||||
event.target.value as number
|
||||
).toString(),
|
||||
hour: '0-23',
|
||||
});
|
||||
workflow.setWorkflowDetails({
|
||||
|
|
@ -598,20 +599,18 @@ const ScheduleWorkflow = forwardRef((_, ref) => {
|
|||
setCronValue({
|
||||
...cronValue,
|
||||
month: '*',
|
||||
day_week: ((e.target
|
||||
.value as unknown) as string).slice(
|
||||
0,
|
||||
3
|
||||
),
|
||||
day_week: (
|
||||
e.target.value as unknown as string
|
||||
).slice(0, 3),
|
||||
});
|
||||
setDays(
|
||||
(e.target.value as unknown) as string
|
||||
e.target.value as unknown as string
|
||||
);
|
||||
workflow.setWorkflowDetails({
|
||||
scheduleInput: {
|
||||
...workflowData.scheduleInput,
|
||||
weekday: (e.target
|
||||
.value as unknown) as string,
|
||||
weekday: e.target
|
||||
.value as unknown as string,
|
||||
},
|
||||
});
|
||||
}}
|
||||
|
|
@ -674,8 +673,9 @@ const ScheduleWorkflow = forwardRef((_, ref) => {
|
|||
handleChange={(event) => {
|
||||
setCronValue({
|
||||
...cronValue,
|
||||
day_month: (event.target
|
||||
.value as number).toString(),
|
||||
day_month: (
|
||||
event.target.value as number
|
||||
).toString(),
|
||||
});
|
||||
setDates(event.target.value as number);
|
||||
workflow.setWorkflowDetails({
|
||||
|
|
|
|||
|
|
@ -59,9 +59,8 @@ const SteadyState: React.FC<SteadyStateProps> = ({
|
|||
// with the changes in individual Chaos Engines
|
||||
const handleMainYAMLChange = () => {
|
||||
const mainManifest = YAML.parse(manifest.manifest);
|
||||
mainManifest.spec.templates[
|
||||
engineIndex
|
||||
].inputs.artifacts[0].raw.data = YAML.stringify(chaosEngine);
|
||||
mainManifest.spec.templates[engineIndex].inputs.artifacts[0].raw.data =
|
||||
YAML.stringify(chaosEngine);
|
||||
workflow.setWorkflowManifest({
|
||||
manifest: YAML.stringify(mainManifest),
|
||||
engineYAML: YAML.stringify(chaosEngine),
|
||||
|
|
@ -76,10 +75,8 @@ const SteadyState: React.FC<SteadyStateProps> = ({
|
|||
const [popAnchorEl, setPopAnchorEl] = React.useState<null | HTMLElement>(
|
||||
null
|
||||
);
|
||||
const [
|
||||
propertyAnchorEl,
|
||||
setPropertyPopAnchorEl,
|
||||
] = React.useState<null | HTMLElement>(null);
|
||||
const [propertyAnchorEl, setPropertyPopAnchorEl] =
|
||||
React.useState<null | HTMLElement>(null);
|
||||
const isOpen = Boolean(popAnchorEl);
|
||||
const isPropertyOpen = Boolean(propertyAnchorEl);
|
||||
const id = isOpen ? 'simple-popover' : undefined;
|
||||
|
|
|
|||
|
|
@ -180,9 +180,8 @@ const TargetApplication: React.FC<TargetApplicationProp> = ({
|
|||
}
|
||||
engineManifest.spec.jobCleanUpPolicy = targetApp.jobCleanUpPolicy;
|
||||
const mainManifest = YAML.parse(manifest.manifest);
|
||||
mainManifest.spec.templates[
|
||||
engineIndex
|
||||
].inputs.artifacts[0].raw.data = YAML.stringify(engineManifest);
|
||||
mainManifest.spec.templates[engineIndex].inputs.artifacts[0].raw.data =
|
||||
YAML.stringify(engineManifest);
|
||||
workflow.setWorkflowManifest({
|
||||
engineYAML: YAML.stringify(engineManifest),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,13 +7,11 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
case 'pending': {
|
||||
// Pending Icon
|
||||
const path1 = getNode('path', {
|
||||
d:
|
||||
'M5 0.570801C2.24305 0.570801 0 2.81385 0 5.5708C0 8.32775 2.24305 10.5708 5 10.5708C7.75695 10.5708 10 8.32775 10 5.5708C10 2.81385 7.75695 0.570801 5 0.570801ZM5 9.9458C2.58758 9.9458 0.625003 7.98322 0.625003 5.5708C0.625003 3.15838 2.58758 1.1958 5 1.1958C7.41242 1.1958 9.375 3.15838 9.375 5.5708C9.375 7.98322 7.41242 9.9458 5 9.9458Z',
|
||||
d: 'M5 0.570801C2.24305 0.570801 0 2.81385 0 5.5708C0 8.32775 2.24305 10.5708 5 10.5708C7.75695 10.5708 10 8.32775 10 5.5708C10 2.81385 7.75695 0.570801 5 0.570801ZM5 9.9458C2.58758 9.9458 0.625003 7.98322 0.625003 5.5708C0.625003 3.15838 2.58758 1.1958 5 1.1958C7.41242 1.1958 9.375 3.15838 9.375 5.5708C9.375 7.98322 7.41242 9.9458 5 9.9458Z',
|
||||
class: 'pendingIcon',
|
||||
});
|
||||
const path2 = getNode('path', {
|
||||
d:
|
||||
'M5.3125 2.4458H4.6875V5.70019L6.65405 7.66674L7.09594 7.22484L5.3125 5.4414V2.4458Z',
|
||||
d: 'M5.3125 2.4458H4.6875V5.70019L6.65405 7.66674L7.09594 7.22484L5.3125 5.4414V2.4458Z',
|
||||
class: 'pendingIcon',
|
||||
});
|
||||
icon.appendChild(path1);
|
||||
|
|
@ -22,8 +20,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'running': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M6.00059 12.5708C5.19074 12.5708 4.40434 12.4126 3.66481 12.0997C2.9499 11.7974 2.30882 11.3638 1.75798 10.813C1.20715 10.2622 0.773513 9.62119 0.47114 8.90635C0.158219 8.16689 0 7.38057 0 6.5708C0 6.3376 0.18869 6.14893 0.421916 6.14893C0.655142 6.14893 0.843832 6.3376 0.843832 6.5708C0.843832 7.26689 0.979783 7.94189 1.24934 8.57822C1.50952 9.19228 1.88104 9.74424 2.35453 10.2177C2.82801 10.6911 3.38002 11.0638 3.99414 11.3228C4.62936 11.5911 5.30442 11.7271 6.00059 11.7271C6.69675 11.7271 7.37181 11.5911 8.0082 11.3216C8.62233 11.0614 9.17433 10.6899 9.64782 10.2165C10.1213 9.74307 10.494 9.19111 10.753 8.57705C11.0214 7.9419 11.1573 7.26689 11.1573 6.5708C11.1573 5.87471 11.0214 5.19971 10.7518 4.56338C10.4925 3.95079 10.1173 3.3941 9.64664 2.92393C9.17695 2.45273 8.62007 2.0774 8.00703 1.81885C7.37181 1.55049 6.69675 1.41455 6.00059 1.41455C5.76736 1.41455 5.57867 1.22588 5.57867 0.992676C5.57867 0.759473 5.76736 0.570801 6.00059 0.570801C6.81043 0.570801 7.59684 0.729004 8.33636 1.04189C9.05127 1.34424 9.69235 1.77783 10.2432 2.32861C10.794 2.87939 11.2265 3.52158 11.5289 4.23525C11.8418 4.97471 12 5.76103 12 6.5708C12 7.38057 11.8418 8.16689 11.5289 8.90635C11.2277 9.62119 10.794 10.2622 10.2432 10.813C9.69235 11.3638 9.0501 11.7962 8.33636 12.0985C7.59684 12.4126 6.81043 12.5708 6.00059 12.5708Z',
|
||||
d: 'M6.00059 12.5708C5.19074 12.5708 4.40434 12.4126 3.66481 12.0997C2.9499 11.7974 2.30882 11.3638 1.75798 10.813C1.20715 10.2622 0.773513 9.62119 0.47114 8.90635C0.158219 8.16689 0 7.38057 0 6.5708C0 6.3376 0.18869 6.14893 0.421916 6.14893C0.655142 6.14893 0.843832 6.3376 0.843832 6.5708C0.843832 7.26689 0.979783 7.94189 1.24934 8.57822C1.50952 9.19228 1.88104 9.74424 2.35453 10.2177C2.82801 10.6911 3.38002 11.0638 3.99414 11.3228C4.62936 11.5911 5.30442 11.7271 6.00059 11.7271C6.69675 11.7271 7.37181 11.5911 8.0082 11.3216C8.62233 11.0614 9.17433 10.6899 9.64782 10.2165C10.1213 9.74307 10.494 9.19111 10.753 8.57705C11.0214 7.9419 11.1573 7.26689 11.1573 6.5708C11.1573 5.87471 11.0214 5.19971 10.7518 4.56338C10.4925 3.95079 10.1173 3.3941 9.64664 2.92393C9.17695 2.45273 8.62007 2.0774 8.00703 1.81885C7.37181 1.55049 6.69675 1.41455 6.00059 1.41455C5.76736 1.41455 5.57867 1.22588 5.57867 0.992676C5.57867 0.759473 5.76736 0.570801 6.00059 0.570801C6.81043 0.570801 7.59684 0.729004 8.33636 1.04189C9.05127 1.34424 9.69235 1.77783 10.2432 2.32861C10.794 2.87939 11.2265 3.52158 11.5289 4.23525C11.8418 4.97471 12 5.76103 12 6.5708C12 7.38057 11.8418 8.16689 11.5289 8.90635C11.2277 9.62119 10.794 10.2622 10.2432 10.813C9.69235 11.3638 9.0501 11.7962 8.33636 12.0985C7.59684 12.4126 6.81043 12.5708 6.00059 12.5708Z',
|
||||
class: 'runningIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
@ -31,8 +28,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'succeeded': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M3.82918 7.64456C3.73372 7.74058 3.60349 7.79415 3.46821 7.79415C3.33292 7.79415 3.20269 7.74058 3.10723 7.64456L0.224382 4.76124C-0.0747942 4.46207 -0.0747942 3.97693 0.224382 3.67832L0.585358 3.31725C0.884628 3.01807 1.3692 3.01807 1.66838 3.31725L3.46821 5.11717L8.3316 0.253679C8.63087 -0.0454973 9.11591 -0.0454973 9.41462 0.253679L9.7756 0.614748C10.0748 0.913925 10.0748 1.39897 9.7756 1.69767L3.82918 7.64456Z',
|
||||
d: 'M3.82918 7.64456C3.73372 7.74058 3.60349 7.79415 3.46821 7.79415C3.33292 7.79415 3.20269 7.74058 3.10723 7.64456L0.224382 4.76124C-0.0747942 4.46207 -0.0747942 3.97693 0.224382 3.67832L0.585358 3.31725C0.884628 3.01807 1.3692 3.01807 1.66838 3.31725L3.46821 5.11717L8.3316 0.253679C8.63087 -0.0454973 9.11591 -0.0454973 9.41462 0.253679L9.7756 0.614748C10.0748 0.913925 10.0748 1.39897 9.7756 1.69767L3.82918 7.64456Z',
|
||||
class: 'succeededIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
@ -40,8 +36,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'failed': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M6.64999 5.57111L9.74362 2.47748C10.0854 2.13567 10.0854 1.5815 9.74362 1.24022L9.3312 0.827802C8.98928 0.485881 8.43511 0.485881 8.09383 0.827802L5.00031 3.92133L1.90668 0.827161C1.56487 0.485347 1.0107 0.485347 0.669421 0.827161L0.25636 1.23958C-0.0854535 1.5815 -0.0854535 2.13567 0.25636 2.47695L3.35052 5.57111L0.257001 8.66463C-0.0849194 9.00656 -0.0849194 9.56072 0.257001 9.902L0.669421 10.3144C1.01124 10.6562 1.5654 10.6562 1.90668 10.3144L5.00031 7.22079L8.09383 10.3144C8.43575 10.6562 8.98992 10.6562 9.3312 10.3144L9.74362 9.902C10.0854 9.56008 10.0854 9.00591 9.74362 8.66463L6.64999 5.57111Z',
|
||||
d: 'M6.64999 5.57111L9.74362 2.47748C10.0854 2.13567 10.0854 1.5815 9.74362 1.24022L9.3312 0.827802C8.98928 0.485881 8.43511 0.485881 8.09383 0.827802L5.00031 3.92133L1.90668 0.827161C1.56487 0.485347 1.0107 0.485347 0.669421 0.827161L0.25636 1.23958C-0.0854535 1.5815 -0.0854535 2.13567 0.25636 2.47695L3.35052 5.57111L0.257001 8.66463C-0.0849194 9.00656 -0.0849194 9.56072 0.257001 9.902L0.669421 10.3144C1.01124 10.6562 1.5654 10.6562 1.90668 10.3144L5.00031 7.22079L8.09383 10.3144C8.43575 10.6562 8.98992 10.6562 9.3312 10.3144L9.74362 9.902C10.0854 9.56008 10.0854 9.00591 9.74362 8.66463L6.64999 5.57111Z',
|
||||
class: 'failedIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
cursor: 'pointer',
|
||||
fill: 'none',
|
||||
'& circle': {
|
||||
fill: theme.palette.status.completed.text,
|
||||
fill: theme.palette.status.completed,
|
||||
},
|
||||
'& g.label g': {
|
||||
transform: (props: StyleProps) =>
|
||||
|
|
@ -36,15 +36,15 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
`scale(1.8) translate(-5px, ${props.horizontal ? -3.6 : -1}px)`,
|
||||
},
|
||||
'& g.StepGroup.Succeeded': {
|
||||
fill: theme.palette.status.completed.text,
|
||||
fill: theme.palette.status.completed,
|
||||
},
|
||||
},
|
||||
|
||||
// Styles for edges
|
||||
'& g g.edgePaths': {
|
||||
'& g.succeeded': {
|
||||
fill: theme.palette.status.completed.text,
|
||||
stroke: theme.palette.status.completed.text,
|
||||
fill: theme.palette.status.completed,
|
||||
stroke: theme.palette.status.completed,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -240,9 +240,8 @@ const WorkflowTable = forwardRef(
|
|||
*/
|
||||
const selectedEngine =
|
||||
wfManifest.spec.templates[experimentIndex].inputs.artifacts[0];
|
||||
const { instance_id } = YAML.parse(
|
||||
selectedEngine.raw.data
|
||||
).metadata.labels;
|
||||
const { instance_id } = YAML.parse(selectedEngine.raw.data).metadata
|
||||
.labels;
|
||||
|
||||
/**
|
||||
* if the template is a revert-chaos template
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import { Alert } from '@material-ui/lab';
|
|||
import { ButtonFilled, ButtonOutlined, Modal } from 'litmus-ui';
|
||||
import localforage from 'localforage';
|
||||
import React, {
|
||||
Dispatch,
|
||||
forwardRef,
|
||||
SetStateAction,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useLayoutEffect,
|
||||
|
|
@ -82,6 +84,12 @@ interface WorkflowExperiment {
|
|||
Experiment: string;
|
||||
}
|
||||
|
||||
interface AlertBoxProps {
|
||||
message: string;
|
||||
isOpen: boolean;
|
||||
setOpen: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const TuneWorkflow = forwardRef((_, ref) => {
|
||||
const classes = useStyles();
|
||||
const childRef = useRef<ChildRef>();
|
||||
|
|
@ -98,6 +106,7 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
const [editManifest, setEditManifest] = useState('');
|
||||
const [confirmEdit, setConfirmEdit] = useState(false);
|
||||
const [isAlertOpen, setIsAlertOpen] = useState(false);
|
||||
const [isEditorSaveAlertOpen, setIsEditorSaveAlertOpen] = useState(false);
|
||||
const [yamlValid, setYamlValid] = useState(true);
|
||||
const [editSequence, setEditSequence] = useState(false);
|
||||
const [steps, setSteps] = useState<StepType>({});
|
||||
|
|
@ -327,12 +336,10 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
/**
|
||||
* Graphql Query for fetching Engine YAML
|
||||
*/
|
||||
const [
|
||||
getEngineYaml,
|
||||
{ data: engineData, loading: engineDataLoading },
|
||||
] = useLazyQuery(GET_ENGINE_YAML, {
|
||||
fetchPolicy: 'network-only',
|
||||
});
|
||||
const [getEngineYaml, { data: engineData, loading: engineDataLoading }] =
|
||||
useLazyQuery(GET_ENGINE_YAML, {
|
||||
fetchPolicy: 'network-only',
|
||||
});
|
||||
|
||||
/**
|
||||
* Graphql Query for fetching Experiment YAML
|
||||
|
|
@ -376,14 +383,14 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
setAddExpModal(false);
|
||||
};
|
||||
|
||||
const AlertBox: React.FC = () => (
|
||||
const AlertBox: React.FC<AlertBoxProps> = ({ message, isOpen, setOpen }) => (
|
||||
<Snackbar
|
||||
open={isAlertOpen}
|
||||
open={isOpen}
|
||||
autoHideDuration={6000}
|
||||
onClose={() => setIsAlertOpen(false)}
|
||||
onClose={() => setOpen(false)}
|
||||
>
|
||||
<Alert onClose={() => setIsAlertOpen(false)} severity="error">
|
||||
The YAML contains errors, resolve them first to proceed
|
||||
<Alert onClose={() => setOpen(false)} severity="error">
|
||||
{message}
|
||||
</Alert>
|
||||
</Snackbar>
|
||||
);
|
||||
|
|
@ -589,6 +596,10 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
}, [engineDataLoading, experimentDataLoading]);
|
||||
|
||||
function onNext() {
|
||||
if (YAMLModal) {
|
||||
setIsEditorSaveAlertOpen(true);
|
||||
return false;
|
||||
}
|
||||
if (childRef.current) {
|
||||
if ((childRef.current.onNext() as unknown) === false) {
|
||||
alert.changeAlertState(true); // Custom Workflow has no experiments
|
||||
|
|
@ -621,7 +632,16 @@ const TuneWorkflow = forwardRef((_, ref) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<AlertBox />
|
||||
<AlertBox
|
||||
isOpen={isEditorSaveAlertOpen}
|
||||
setOpen={setIsEditorSaveAlertOpen}
|
||||
message="Please Save the changes in the editor to proceed forward"
|
||||
/>
|
||||
<AlertBox
|
||||
isOpen={isAlertOpen}
|
||||
setOpen={setIsAlertOpen}
|
||||
message="The YAML contains errors, resolve them first to proceed"
|
||||
/>
|
||||
{YAMLModal ? (
|
||||
<>
|
||||
<Modal
|
||||
|
|
|
|||
|
|
@ -225,20 +225,18 @@ const VerifyCommit = forwardRef(
|
|||
}, [modified]);
|
||||
|
||||
// Create Workflow Mutation
|
||||
const [
|
||||
createChaosWorkFlow,
|
||||
{ loading, error: workflowError },
|
||||
] = useMutation<CreateWorkflowResponse, CreateWorkFlowInput>(
|
||||
CREATE_WORKFLOW,
|
||||
{
|
||||
onError: () => {
|
||||
setErrorModal(true);
|
||||
},
|
||||
onCompleted: () => {
|
||||
setFinishModalOpen(true);
|
||||
},
|
||||
}
|
||||
);
|
||||
const [createChaosWorkFlow, { loading, error: workflowError }] =
|
||||
useMutation<CreateWorkflowResponse, CreateWorkFlowInput>(
|
||||
CREATE_WORKFLOW,
|
||||
{
|
||||
onError: () => {
|
||||
setErrorModal(true);
|
||||
},
|
||||
onCompleted: () => {
|
||||
setFinishModalOpen(true);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
isLoading(loading);
|
||||
|
||||
|
|
|
|||
|
|
@ -101,12 +101,10 @@ const MyHub: React.FC = () => {
|
|||
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel2');
|
||||
|
||||
const handleChange = (panel: string) => (
|
||||
event: React.ChangeEvent<{}>,
|
||||
newExpanded: boolean
|
||||
) => {
|
||||
setExpanded(newExpanded ? panel : false);
|
||||
};
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.ChangeEvent<{}>, newExpanded: boolean) => {
|
||||
setExpanded(newExpanded ? panel : false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data !== undefined) {
|
||||
|
|
|
|||
|
|
@ -41,34 +41,31 @@ const AccountSettings: React.FC = () => {
|
|||
});
|
||||
|
||||
// handleCurrPassword handles password for first password field
|
||||
const handleCurrPassword = (prop: keyof Password) => (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setPassword({
|
||||
...password,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
const handleCurrPassword =
|
||||
(prop: keyof Password) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPassword({
|
||||
...password,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
// handleNewPassword handles password for second password field
|
||||
const handleNewPassword = (prop: keyof Password) => (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setPassword({
|
||||
...password,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
const handleNewPassword =
|
||||
(prop: keyof Password) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPassword({
|
||||
...password,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
// handleConfPassword handles password for third password field
|
||||
const handleConfPassword = (prop: keyof Password) => (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setPassword({
|
||||
...password,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
const handleConfPassword =
|
||||
(prop: keyof Password) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setPassword({
|
||||
...password,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
if (
|
||||
password.confNewPassword.length > 0 &&
|
||||
|
|
|
|||
|
|
@ -110,17 +110,15 @@ const Invite: React.FC<InviteProps> = ({ handleModal }) => {
|
|||
});
|
||||
|
||||
// mutation to send invitation to selected users
|
||||
const [
|
||||
SendInvite,
|
||||
{ error: errorB, loading: loadingB },
|
||||
] = useMutation<MemberInviteNew>(SEND_INVITE, {
|
||||
refetchQueries: [
|
||||
{
|
||||
query: GET_PROJECT,
|
||||
variables: { projectID },
|
||||
},
|
||||
],
|
||||
});
|
||||
const [SendInvite, { error: errorB, loading: loadingB }] =
|
||||
useMutation<MemberInviteNew>(SEND_INVITE, {
|
||||
refetchQueries: [
|
||||
{
|
||||
query: GET_PROJECT,
|
||||
variables: { projectID },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Checks if the user the already selected or not
|
||||
const isSelected = (user: UserInvite) => {
|
||||
|
|
|
|||
|
|
@ -34,14 +34,13 @@ const CreateUser: React.FC<CreateUserProps> = ({ handleDiv }) => {
|
|||
});
|
||||
|
||||
// handles password field
|
||||
const handleCreatePassword = (prop: keyof Password) => (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setCreatePassword({
|
||||
...createPassword,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
const handleCreatePassword =
|
||||
(prop: keyof Password) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setCreatePassword({
|
||||
...createPassword,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
// for personal details fields
|
||||
const [personalData, setPersonalData] = React.useState<personalData>({
|
||||
|
|
|
|||
|
|
@ -38,14 +38,13 @@ const EditUser: React.FC<EditUserProps> = ({
|
|||
});
|
||||
|
||||
// handles password field
|
||||
const handleCreatePassword = (prop: keyof Password) => (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setCreatePassword({
|
||||
...createPassword,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
const handleCreatePassword =
|
||||
(prop: keyof Password) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setCreatePassword({
|
||||
...createPassword,
|
||||
[prop]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.headDiv}>
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ const useStyles = makeStyles((theme) => ({
|
|||
color: theme.palette.primary.dark,
|
||||
},
|
||||
active: {
|
||||
color: theme.palette.status.completed.text,
|
||||
color: theme.palette.status.completed,
|
||||
background: theme.palette.success.light,
|
||||
},
|
||||
notactive: {
|
||||
|
|
|
|||
|
|
@ -7,13 +7,11 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
case 'pending': {
|
||||
// Pending Icon
|
||||
const path1 = getNode('path', {
|
||||
d:
|
||||
'M5 0.570801C2.24305 0.570801 0 2.81385 0 5.5708C0 8.32775 2.24305 10.5708 5 10.5708C7.75695 10.5708 10 8.32775 10 5.5708C10 2.81385 7.75695 0.570801 5 0.570801ZM5 9.9458C2.58758 9.9458 0.625003 7.98322 0.625003 5.5708C0.625003 3.15838 2.58758 1.1958 5 1.1958C7.41242 1.1958 9.375 3.15838 9.375 5.5708C9.375 7.98322 7.41242 9.9458 5 9.9458Z',
|
||||
d: 'M5 0.570801C2.24305 0.570801 0 2.81385 0 5.5708C0 8.32775 2.24305 10.5708 5 10.5708C7.75695 10.5708 10 8.32775 10 5.5708C10 2.81385 7.75695 0.570801 5 0.570801ZM5 9.9458C2.58758 9.9458 0.625003 7.98322 0.625003 5.5708C0.625003 3.15838 2.58758 1.1958 5 1.1958C7.41242 1.1958 9.375 3.15838 9.375 5.5708C9.375 7.98322 7.41242 9.9458 5 9.9458Z',
|
||||
class: 'pendingIcon',
|
||||
});
|
||||
const path2 = getNode('path', {
|
||||
d:
|
||||
'M5.3125 2.4458H4.6875V5.70019L6.65405 7.66674L7.09594 7.22484L5.3125 5.4414V2.4458Z',
|
||||
d: 'M5.3125 2.4458H4.6875V5.70019L6.65405 7.66674L7.09594 7.22484L5.3125 5.4414V2.4458Z',
|
||||
class: 'pendingIcon',
|
||||
});
|
||||
icon.appendChild(path1);
|
||||
|
|
@ -22,8 +20,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'running': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M6.00059 12.5708C5.19074 12.5708 4.40434 12.4126 3.66481 12.0997C2.9499 11.7974 2.30882 11.3638 1.75798 10.813C1.20715 10.2622 0.773513 9.62119 0.47114 8.90635C0.158219 8.16689 0 7.38057 0 6.5708C0 6.3376 0.18869 6.14893 0.421916 6.14893C0.655142 6.14893 0.843832 6.3376 0.843832 6.5708C0.843832 7.26689 0.979783 7.94189 1.24934 8.57822C1.50952 9.19228 1.88104 9.74424 2.35453 10.2177C2.82801 10.6911 3.38002 11.0638 3.99414 11.3228C4.62936 11.5911 5.30442 11.7271 6.00059 11.7271C6.69675 11.7271 7.37181 11.5911 8.0082 11.3216C8.62233 11.0614 9.17433 10.6899 9.64782 10.2165C10.1213 9.74307 10.494 9.19111 10.753 8.57705C11.0214 7.9419 11.1573 7.26689 11.1573 6.5708C11.1573 5.87471 11.0214 5.19971 10.7518 4.56338C10.4925 3.95079 10.1173 3.3941 9.64664 2.92393C9.17695 2.45273 8.62007 2.0774 8.00703 1.81885C7.37181 1.55049 6.69675 1.41455 6.00059 1.41455C5.76736 1.41455 5.57867 1.22588 5.57867 0.992676C5.57867 0.759473 5.76736 0.570801 6.00059 0.570801C6.81043 0.570801 7.59684 0.729004 8.33636 1.04189C9.05127 1.34424 9.69235 1.77783 10.2432 2.32861C10.794 2.87939 11.2265 3.52158 11.5289 4.23525C11.8418 4.97471 12 5.76103 12 6.5708C12 7.38057 11.8418 8.16689 11.5289 8.90635C11.2277 9.62119 10.794 10.2622 10.2432 10.813C9.69235 11.3638 9.0501 11.7962 8.33636 12.0985C7.59684 12.4126 6.81043 12.5708 6.00059 12.5708Z',
|
||||
d: 'M6.00059 12.5708C5.19074 12.5708 4.40434 12.4126 3.66481 12.0997C2.9499 11.7974 2.30882 11.3638 1.75798 10.813C1.20715 10.2622 0.773513 9.62119 0.47114 8.90635C0.158219 8.16689 0 7.38057 0 6.5708C0 6.3376 0.18869 6.14893 0.421916 6.14893C0.655142 6.14893 0.843832 6.3376 0.843832 6.5708C0.843832 7.26689 0.979783 7.94189 1.24934 8.57822C1.50952 9.19228 1.88104 9.74424 2.35453 10.2177C2.82801 10.6911 3.38002 11.0638 3.99414 11.3228C4.62936 11.5911 5.30442 11.7271 6.00059 11.7271C6.69675 11.7271 7.37181 11.5911 8.0082 11.3216C8.62233 11.0614 9.17433 10.6899 9.64782 10.2165C10.1213 9.74307 10.494 9.19111 10.753 8.57705C11.0214 7.9419 11.1573 7.26689 11.1573 6.5708C11.1573 5.87471 11.0214 5.19971 10.7518 4.56338C10.4925 3.95079 10.1173 3.3941 9.64664 2.92393C9.17695 2.45273 8.62007 2.0774 8.00703 1.81885C7.37181 1.55049 6.69675 1.41455 6.00059 1.41455C5.76736 1.41455 5.57867 1.22588 5.57867 0.992676C5.57867 0.759473 5.76736 0.570801 6.00059 0.570801C6.81043 0.570801 7.59684 0.729004 8.33636 1.04189C9.05127 1.34424 9.69235 1.77783 10.2432 2.32861C10.794 2.87939 11.2265 3.52158 11.5289 4.23525C11.8418 4.97471 12 5.76103 12 6.5708C12 7.38057 11.8418 8.16689 11.5289 8.90635C11.2277 9.62119 10.794 10.2622 10.2432 10.813C9.69235 11.3638 9.0501 11.7962 8.33636 12.0985C7.59684 12.4126 6.81043 12.5708 6.00059 12.5708Z',
|
||||
class: 'runningIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
@ -31,8 +28,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'succeeded': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M3.82918 7.64456C3.73372 7.74058 3.60349 7.79415 3.46821 7.79415C3.33292 7.79415 3.20269 7.74058 3.10723 7.64456L0.224382 4.76124C-0.0747942 4.46207 -0.0747942 3.97693 0.224382 3.67832L0.585358 3.31725C0.884628 3.01807 1.3692 3.01807 1.66838 3.31725L3.46821 5.11717L8.3316 0.253679C8.63087 -0.0454973 9.11591 -0.0454973 9.41462 0.253679L9.7756 0.614748C10.0748 0.913925 10.0748 1.39897 9.7756 1.69767L3.82918 7.64456Z',
|
||||
d: 'M3.82918 7.64456C3.73372 7.74058 3.60349 7.79415 3.46821 7.79415C3.33292 7.79415 3.20269 7.74058 3.10723 7.64456L0.224382 4.76124C-0.0747942 4.46207 -0.0747942 3.97693 0.224382 3.67832L0.585358 3.31725C0.884628 3.01807 1.3692 3.01807 1.66838 3.31725L3.46821 5.11717L8.3316 0.253679C8.63087 -0.0454973 9.11591 -0.0454973 9.41462 0.253679L9.7756 0.614748C10.0748 0.913925 10.0748 1.39897 9.7756 1.69767L3.82918 7.64456Z',
|
||||
class: 'succeededIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
@ -40,8 +36,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'failed': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M6.64999 5.57111L9.74362 2.47748C10.0854 2.13567 10.0854 1.5815 9.74362 1.24022L9.3312 0.827802C8.98928 0.485881 8.43511 0.485881 8.09383 0.827802L5.00031 3.92133L1.90668 0.827161C1.56487 0.485347 1.0107 0.485347 0.669421 0.827161L0.25636 1.23958C-0.0854535 1.5815 -0.0854535 2.13567 0.25636 2.47695L3.35052 5.57111L0.257001 8.66463C-0.0849194 9.00656 -0.0849194 9.56072 0.257001 9.902L0.669421 10.3144C1.01124 10.6562 1.5654 10.6562 1.90668 10.3144L5.00031 7.22079L8.09383 10.3144C8.43575 10.6562 8.98992 10.6562 9.3312 10.3144L9.74362 9.902C10.0854 9.56008 10.0854 9.00591 9.74362 8.66463L6.64999 5.57111Z',
|
||||
d: 'M6.64999 5.57111L9.74362 2.47748C10.0854 2.13567 10.0854 1.5815 9.74362 1.24022L9.3312 0.827802C8.98928 0.485881 8.43511 0.485881 8.09383 0.827802L5.00031 3.92133L1.90668 0.827161C1.56487 0.485347 1.0107 0.485347 0.669421 0.827161L0.25636 1.23958C-0.0854535 1.5815 -0.0854535 2.13567 0.25636 2.47695L3.35052 5.57111L0.257001 8.66463C-0.0849194 9.00656 -0.0849194 9.56072 0.257001 9.902L0.669421 10.3144C1.01124 10.6562 1.5654 10.6562 1.90668 10.3144L5.00031 7.22079L8.09383 10.3144C8.43575 10.6562 8.98992 10.6562 9.3312 10.3144L9.74362 9.902C10.0854 9.56008 10.0854 9.00591 9.74362 8.66463L6.64999 5.57111Z',
|
||||
class: 'failedIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
@ -62,8 +57,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'omitted': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M7.06452 12.5384V12.5412V12.5377C7.06406 12.3973 7.0079 12.2629 6.90839 12.1639C6.80888 12.0649 6.67415 12.0094 6.53377 12.0096C6.3934 12.0098 6.25885 12.0658 6.15967 12.1651C6.06049 12.2645 6.00478 12.3991 6.00478 12.5395C6.00478 12.6799 6.06049 12.8145 6.15967 12.9138C6.25885 13.0132 6.3934 13.0691 6.53377 13.0694C6.67415 13.0696 6.80888 13.0141 6.90839 12.9151C7.0079 12.8161 7.06406 12.6816 7.06452 12.5412V12.5384ZM7.38245 11.1961C7.6868 11.388 7.91705 11.6774 8.03556 12.0171C8.15408 12.3568 8.15385 12.7267 8.03491 13.0663C7.91597 13.4058 7.68535 13.695 7.38076 13.8865C7.07617 14.078 6.71563 14.1605 6.35807 14.1205C6.0005 14.0806 5.66708 13.9205 5.4123 13.6664C5.15752 13.4124 4.99645 13.0794 4.95543 12.722C4.91441 12.3646 4.99586 12.0038 5.18648 11.6986C5.37708 11.3935 5.66558 11.162 6.00478 11.0421V7.32874C5.65105 7.20376 5.3529 6.95769 5.16303 6.63412C4.97316 6.31055 4.90381 5.93024 4.96722 5.56046C5.03063 5.19075 5.22273 4.85524 5.50956 4.61348C5.79639 4.37165 6.15949 4.23897 6.53465 4.23897C6.90982 4.23897 7.27291 4.37165 7.55974 4.61348C7.84658 4.85524 8.03867 5.19075 8.10209 5.56046C8.1655 5.93024 8.09614 6.31055 7.90627 6.63412C7.7164 6.95769 7.41826 7.20376 7.06452 7.32874V9.805C7.44481 9.38674 7.90841 9.05267 8.42552 8.82429C8.94264 8.59591 9.50182 8.47826 10.0671 8.47891H11.0407C11.1656 8.12518 11.4117 7.82703 11.7353 7.63713C12.0589 7.44729 12.4392 7.37792 12.8089 7.44136C13.1787 7.50473 13.5142 7.6969 13.7559 7.98369C13.9978 8.27053 14.1304 8.63362 14.1304 9.00878C14.1304 9.38395 13.9978 9.74705 13.7559 10.0339C13.5142 10.3207 13.1787 10.5128 12.8089 10.5762C12.4392 10.6396 12.0589 10.5703 11.7353 10.3804C11.4117 10.1905 11.1656 9.89239 11.0407 9.53865H10.0671C9.50991 9.53861 8.96367 9.69362 8.48953 9.98633C8.01541 10.279 7.63208 10.6979 7.38245 11.1961ZM12.5398 8.47891C12.6804 8.47891 12.8152 8.53474 12.9145 8.63411C13.0139 8.73348 13.0697 8.86826 13.0697 9.00878C13.0697 9.14931 13.0139 9.28409 12.9145 9.38346C12.8152 9.48283 12.6804 9.53865 12.5398 9.53865C12.3993 9.53865 12.2645 9.48283 12.1652 9.38346C12.0658 9.28409 12.01 9.14931 12.01 9.00878C12.01 8.86826 12.0658 8.73348 12.1652 8.63411C12.2645 8.53474 12.3993 8.47891 12.5398 8.47891ZM6.53465 5.2997C6.67518 5.2997 6.80996 5.35551 6.90933 5.45491C7.0087 5.55425 7.06452 5.68904 7.06452 5.82957C7.06452 5.97009 7.0087 6.10489 6.90933 6.20422C6.80996 6.30362 6.67518 6.35944 6.53465 6.35944C6.39413 6.35944 6.25935 6.30362 6.15998 6.20422C6.06061 6.10489 6.00478 5.97009 6.00478 5.82957C6.00478 5.68904 6.06061 5.55425 6.15998 5.45491C6.25935 5.35551 6.39413 5.2997 6.53465 5.2997Z',
|
||||
d: 'M7.06452 12.5384V12.5412V12.5377C7.06406 12.3973 7.0079 12.2629 6.90839 12.1639C6.80888 12.0649 6.67415 12.0094 6.53377 12.0096C6.3934 12.0098 6.25885 12.0658 6.15967 12.1651C6.06049 12.2645 6.00478 12.3991 6.00478 12.5395C6.00478 12.6799 6.06049 12.8145 6.15967 12.9138C6.25885 13.0132 6.3934 13.0691 6.53377 13.0694C6.67415 13.0696 6.80888 13.0141 6.90839 12.9151C7.0079 12.8161 7.06406 12.6816 7.06452 12.5412V12.5384ZM7.38245 11.1961C7.6868 11.388 7.91705 11.6774 8.03556 12.0171C8.15408 12.3568 8.15385 12.7267 8.03491 13.0663C7.91597 13.4058 7.68535 13.695 7.38076 13.8865C7.07617 14.078 6.71563 14.1605 6.35807 14.1205C6.0005 14.0806 5.66708 13.9205 5.4123 13.6664C5.15752 13.4124 4.99645 13.0794 4.95543 12.722C4.91441 12.3646 4.99586 12.0038 5.18648 11.6986C5.37708 11.3935 5.66558 11.162 6.00478 11.0421V7.32874C5.65105 7.20376 5.3529 6.95769 5.16303 6.63412C4.97316 6.31055 4.90381 5.93024 4.96722 5.56046C5.03063 5.19075 5.22273 4.85524 5.50956 4.61348C5.79639 4.37165 6.15949 4.23897 6.53465 4.23897C6.90982 4.23897 7.27291 4.37165 7.55974 4.61348C7.84658 4.85524 8.03867 5.19075 8.10209 5.56046C8.1655 5.93024 8.09614 6.31055 7.90627 6.63412C7.7164 6.95769 7.41826 7.20376 7.06452 7.32874V9.805C7.44481 9.38674 7.90841 9.05267 8.42552 8.82429C8.94264 8.59591 9.50182 8.47826 10.0671 8.47891H11.0407C11.1656 8.12518 11.4117 7.82703 11.7353 7.63713C12.0589 7.44729 12.4392 7.37792 12.8089 7.44136C13.1787 7.50473 13.5142 7.6969 13.7559 7.98369C13.9978 8.27053 14.1304 8.63362 14.1304 9.00878C14.1304 9.38395 13.9978 9.74705 13.7559 10.0339C13.5142 10.3207 13.1787 10.5128 12.8089 10.5762C12.4392 10.6396 12.0589 10.5703 11.7353 10.3804C11.4117 10.1905 11.1656 9.89239 11.0407 9.53865H10.0671C9.50991 9.53861 8.96367 9.69362 8.48953 9.98633C8.01541 10.279 7.63208 10.6979 7.38245 11.1961ZM12.5398 8.47891C12.6804 8.47891 12.8152 8.53474 12.9145 8.63411C13.0139 8.73348 13.0697 8.86826 13.0697 9.00878C13.0697 9.14931 13.0139 9.28409 12.9145 9.38346C12.8152 9.48283 12.6804 9.53865 12.5398 9.53865C12.3993 9.53865 12.2645 9.48283 12.1652 9.38346C12.0658 9.28409 12.01 9.14931 12.01 9.00878C12.01 8.86826 12.0658 8.73348 12.1652 8.63411C12.2645 8.53474 12.3993 8.47891 12.5398 8.47891ZM6.53465 5.2997C6.67518 5.2997 6.80996 5.35551 6.90933 5.45491C7.0087 5.55425 7.06452 5.68904 7.06452 5.82957C7.06452 5.97009 7.0087 6.10489 6.90933 6.20422C6.80996 6.30362 6.67518 6.35944 6.53465 6.35944C6.39413 6.35944 6.25935 6.30362 6.15998 6.20422C6.06061 6.10489 6.00478 5.97009 6.00478 5.82957C6.00478 5.68904 6.06061 5.55425 6.15998 5.45491C6.25935 5.35551 6.39413 5.2997 6.53465 5.2997Z',
|
||||
class: 'omittedIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
@ -71,8 +65,7 @@ const getIcon = (iconType: string): SVGElement => {
|
|||
}
|
||||
case 'error': {
|
||||
const path = getNode('path', {
|
||||
d:
|
||||
'M12.7054 10.5948L8.89909 4.01788C8.80777 3.86037 8.67667 3.72962 8.51892 3.63873C8.36117 3.54784 8.1823 3.5 8.00023 3.5C7.81817 3.5 7.6393 3.54784 7.48155 3.63873C7.3238 3.72962 7.1927 3.86037 7.10138 4.01788V4.01822L3.29504 10.5948C3.20366 10.7526 3.15545 10.9317 3.15527 11.1141C3.1551 11.2965 3.20296 11.4757 3.29404 11.6337C3.38512 11.7917 3.51621 11.9229 3.67412 12.0142C3.83202 12.1054 4.01118 12.1535 4.19356 12.1535H11.8069C11.9893 12.1535 12.1684 12.1054 12.3264 12.0142C12.4843 11.9229 12.6153 11.7917 12.7064 11.6337C12.7975 11.4757 12.8454 11.2965 12.8452 11.1141C12.845 10.9317 12.7968 10.7526 12.7054 10.5948V10.5948ZM7.65374 6.96154C7.65374 6.86973 7.69021 6.78169 7.75513 6.71677C7.82005 6.65185 7.90809 6.61538 7.9999 6.61538C8.0917 6.61538 8.17975 6.65185 8.24466 6.71677C8.30958 6.78169 8.34605 6.86973 8.34605 6.96154V8.69231C8.34605 8.78411 8.30958 8.87216 8.24466 8.93708C8.17975 9.00199 8.0917 9.03846 7.9999 9.03846C7.90809 9.03846 7.82005 9.00199 7.75513 8.93708C7.69021 8.87216 7.65374 8.78411 7.65374 8.69231V6.96154ZM8.00015 10.7694C7.89746 10.7694 7.79707 10.7389 7.71168 10.6818C7.62629 10.6248 7.55974 10.5437 7.52044 10.4488C7.48114 10.3539 7.47086 10.2495 7.4909 10.1488C7.51093 10.0481 7.56038 9.95559 7.633 9.88297C7.70561 9.81036 7.79813 9.76091 7.89885 9.74087C7.99957 9.72084 8.10397 9.73112 8.19885 9.77042C8.29373 9.80972 8.37482 9.87627 8.43187 9.96166C8.48893 10.047 8.51938 10.1474 8.51938 10.2501C8.51937 10.3878 8.46467 10.5199 8.36729 10.6173C8.26992 10.7146 8.13786 10.7693 8.00015 10.7694V10.7694Z',
|
||||
d: 'M12.7054 10.5948L8.89909 4.01788C8.80777 3.86037 8.67667 3.72962 8.51892 3.63873C8.36117 3.54784 8.1823 3.5 8.00023 3.5C7.81817 3.5 7.6393 3.54784 7.48155 3.63873C7.3238 3.72962 7.1927 3.86037 7.10138 4.01788V4.01822L3.29504 10.5948C3.20366 10.7526 3.15545 10.9317 3.15527 11.1141C3.1551 11.2965 3.20296 11.4757 3.29404 11.6337C3.38512 11.7917 3.51621 11.9229 3.67412 12.0142C3.83202 12.1054 4.01118 12.1535 4.19356 12.1535H11.8069C11.9893 12.1535 12.1684 12.1054 12.3264 12.0142C12.4843 11.9229 12.6153 11.7917 12.7064 11.6337C12.7975 11.4757 12.8454 11.2965 12.8452 11.1141C12.845 10.9317 12.7968 10.7526 12.7054 10.5948V10.5948ZM7.65374 6.96154C7.65374 6.86973 7.69021 6.78169 7.75513 6.71677C7.82005 6.65185 7.90809 6.61538 7.9999 6.61538C8.0917 6.61538 8.17975 6.65185 8.24466 6.71677C8.30958 6.78169 8.34605 6.86973 8.34605 6.96154V8.69231C8.34605 8.78411 8.30958 8.87216 8.24466 8.93708C8.17975 9.00199 8.0917 9.03846 7.9999 9.03846C7.90809 9.03846 7.82005 9.00199 7.75513 8.93708C7.69021 8.87216 7.65374 8.78411 7.65374 8.69231V6.96154ZM8.00015 10.7694C7.89746 10.7694 7.79707 10.7389 7.71168 10.6818C7.62629 10.6248 7.55974 10.5437 7.52044 10.4488C7.48114 10.3539 7.47086 10.2495 7.4909 10.1488C7.51093 10.0481 7.56038 9.95559 7.633 9.88297C7.70561 9.81036 7.79813 9.76091 7.89885 9.74087C7.99957 9.72084 8.10397 9.73112 8.19885 9.77042C8.29373 9.80972 8.37482 9.87627 8.43187 9.96166C8.48893 10.047 8.51938 10.1474 8.51938 10.2501C8.51937 10.3878 8.46467 10.5199 8.36729 10.6173C8.26992 10.7146 8.13786 10.7693 8.00015 10.7694V10.7694Z',
|
||||
class: 'errorIcon',
|
||||
});
|
||||
icon.appendChild(path);
|
||||
|
|
|
|||
|
|
@ -107,11 +107,11 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
},
|
||||
'& g.Failed': {
|
||||
'& circle': {
|
||||
fill: theme.palette.status.failed.text,
|
||||
fill: theme.palette.status.failed,
|
||||
},
|
||||
'& circle.selected': {
|
||||
strokeDasharray: '5,2',
|
||||
stroke: theme.palette.status.failed.text,
|
||||
stroke: theme.palette.status.failed,
|
||||
fill: 'none',
|
||||
strokeWidth: '1.5',
|
||||
},
|
||||
|
|
@ -150,7 +150,7 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
},
|
||||
},
|
||||
'& g.StepGroup': {
|
||||
fill: theme.palette.status.completed.text,
|
||||
fill: theme.palette.status.completed,
|
||||
cursor: 'default',
|
||||
'& rect': {
|
||||
x: '-1.5px',
|
||||
|
|
@ -166,8 +166,8 @@ const useStyles = makeStyles((theme: Theme) => ({
|
|||
// Styles for edges
|
||||
'& g g.edgePaths': {
|
||||
'& g.link': {
|
||||
fill: theme.palette.status.completed.text,
|
||||
stroke: theme.palette.status.completed.text,
|
||||
fill: theme.palette.status.completed,
|
||||
stroke: theme.palette.status.completed,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@ import { makeStyles } from '@material-ui/core';
|
|||
const useStyles = makeStyles((theme) => ({
|
||||
// Status Text Colors
|
||||
running: {
|
||||
color: theme.palette.status.running.text,
|
||||
color: theme.palette.status.running,
|
||||
},
|
||||
|
||||
failed: {
|
||||
color: theme.palette.status.failed.text,
|
||||
color: theme.palette.status.failed,
|
||||
},
|
||||
|
||||
succeeded: {
|
||||
color: theme.palette.status.completed.text,
|
||||
color: theme.palette.status.completed,
|
||||
},
|
||||
|
||||
pending: {
|
||||
color: theme.palette.status.completed.text,
|
||||
color: theme.palette.status.completed,
|
||||
},
|
||||
|
||||
error: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue