Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
/* eslint-disable camelcase */
import {
global_Color_dark_100,
global_Color_dark_200,
global_Color_light_100,
global_success_color_100,
global_success_color_200,
global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';
// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_200.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_light_100.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;
// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles
// Layout
const LAYOUT_PROPS = {
width: 451, // Todo: want to ensure the value is coming from theme
height: 301,
global_Color_dark_100,
global_Color_dark_200,
global_Color_light_100,
global_success_color_100,
global_success_color_200,
global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';
// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_200.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_light_100.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;
// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles
// Layout
const LAYOUT_PROPS = {
width: 451, // Todo: want to ensure the value is coming from theme
height: 301,
padding: 8,
colorScale: COLOR_SCALE
global_Color_dark_100,
global_Color_dark_200,
global_Color_light_100,
global_success_color_100,
global_success_color_200,
global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';
// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;
// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles
// Layout
const LAYOUT_PROPS = {
width: 451, // Todo: want to ensure the value is coming from theme
height: 301,
padding: 8,
colorScale: COLOR_SCALE
/* eslint-disable camelcase */
import {
global_Color_dark_100,
global_Color_dark_200,
global_Color_light_100,
global_success_color_100,
global_success_color_200,
global_FontFamily_sans_serif
} from '@patternfly/react-tokens';
import Theme from './theme-common';
// Colors
const COLOR_AXIS_FILL = 'transparent';
const COLOR_AXIS_STROKE = global_Color_dark_100.value;
const COLOR_FILL = global_success_color_200.value;
const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
const COLOR_STACK_STROKE = global_Color_dark_200.value;
const COLOR_STROKE = global_success_color_100.value;
const COLOR_TOOLTIP_FILL = global_Color_light_100.value;
const COLOR_TOOLTIP_STROKE = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_FILL = global_Color_dark_100.value;
const COLOR_TOOLTIP_FLYOUT_STROKE = global_Color_dark_100.value;
// Typography
const TYPOGRAPHY_FONT_FAMILY = global_FontFamily_sans_serif.value;
const TYPOGRAPHY_LETTER_SPACING = 'normal';
const TYPOGRAPHY_FONT_SIZE = 14; // Value must be in pixles
// Layout
const LAYOUT_PROPS = {
width: 451, // Todo: want to ensure the value is coming from theme
height: 301,
const StatusIcon = ({ status }) => {
switch (status) {
case "running":
return (
);
case "completed":
return (
);
case "failed":
return (
);
default:
return (
const Status = ({ status, children }) => {
const colors = {
ok: global_success_color_100.value,
failed: global_danger_color_100.value,
skipped: global_active_color_100.value,
unreachable: global_warning_color_100.value,
changed: global_active_color_100.value,
ignored: global_warning_color_100.value,
unknown: global_warning_color_100.value
};
return (
<span style="{{">
{children}
</span>
);
};
function getBackground(status, backgroundColor = global_Color_light_100.value) {
switch (status) {
case "running":
return `linear-gradient(to right,${global_active_color_100.value} 0,${
global_active_color_100.value
} 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
case "completed":
return `linear-gradient(to right,${global_success_color_100.value} 0,${
global_success_color_100.value
} 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
case "failed":
return `linear-gradient(to right,${global_danger_color_100.value} 0,${
global_danger_color_100.value
} 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
default:
return `linear-gradient(to right,${global_warning_color_100.value} 0,${
global_warning_color_100.value
} 5px,${backgroundColor} 5px,${backgroundColor} 100%) no-repeat`;
}
}