\r\n \r\n {dataset.res ? (\r\n <>\r\n \r\n {typeChart[chart]}\r\n \r\n \r\n ) : (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ServiceNow","import React from \"react\"\r\nimport PropTypes from \"prop-types\"\r\nimport { withStyles } from \"@material-ui/core/styles\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\n\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport { color } from '@amcharts/amcharts4/.internal/core/utils/Color';\r\n\r\nimport { PieChart3D } from '@amcharts/amcharts4/.internal/charts/types/PieChart3D';\r\nimport { Legend } from '@amcharts/amcharts4/.internal/charts/Legend';\r\nimport { PieSeries3D } from '@amcharts/amcharts4/.internal/charts/series/PieSeries3D';\r\n\r\nconst LEGEND_DATA = {\r\n potentialCount: 'Potential Count',\r\n confirmedCount: 'Confirmed Count',\r\n}\r\n\r\nclass DonutChart extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n }\r\n\r\n componentDidMount() {\r\n this.chart = am4core.create(\"chartdiv\", PieChart3D);\r\n this.chart.hiddenState.properties.opacity = 0;\r\n\r\n this.chart.legend = new Legend();\r\n this.chart.legend.itemContainers.template.clickable = true;\r\n this.chart.legend.itemContainers.template.focusable = false;\r\n this.chart.legend.labels.template.fill = color('#CEDBDC');\r\n this.chart.legend.valueLabels.template.fill = color('#CEDBDC');\r\n this.chart.legend.labels.template.fontSize = 14;\r\n this.chart.legend.labels.template.fontWeight = 'bold';\r\n this.chart.legend.useDefaultMarker = true;\r\n this.marker = this.chart.legend.markers.template.children.getIndex(0);\r\n this.marker.cornerRadius(12, 12, 12, 12);\r\n this.marker.width = 14;\r\n this.marker.height = 14;\r\n this.marker.dy = 4;\r\n this.marker.dx = -5;\r\n\r\n this.chart.legend.labels.template.adapter.add('text', (text, target) => {\r\n const dataLegend = target.dataItem.dataContext;\r\n if (!target.dataItem) return text\r\n\r\n return text\r\n });\r\n\r\n this.chart.innerRadius = am4core.percent(20);\r\n this.chart.depth = 30;\r\n\r\n this.createSeries();\r\n this.updateChartsData();\r\n\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.chart) {\r\n this.chart.dispose();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.props.datasets !== prevProps.datasets) {\r\n this.updateChartsData();\r\n }\r\n }\r\n\r\n createSeries = () => {\r\n this.series = this.chart.series.push(new PieSeries3D());\r\n this.series.dataFields.value = \"v\";\r\n this.series.dataFields.depthValue = \"v\";\r\n this.series.dataFields.category = \"k\";\r\n this.series.slices.template.cornerRadius = 5;\r\n\r\n this.series.hiddenState.properties.opacity = 1;\r\n this.series.hiddenState.properties.endAngle = -90;\r\n this.series.hiddenState.properties.startAngle = -90;\r\n\r\n this.series.ticks.template.disabled = true;\r\n this.series.labels.template.disabled = true;\r\n this.series.legendSettings.valueText = '[bold]{value}[/]';\r\n\r\n let filter = this.series.filters.push(new am4core.DropShadowFilter());\r\n filter.color = am4core.color(\"#CEDBDC\");\r\n filter.dx = 10;\r\n filter.dy = 0;\r\n filter.blur = 10;\r\n filter.opacity = 0.2;\r\n\r\n this.series.colors.list = [\r\n am4core.color(\"#FEBC77\"),\r\n am4core.color(\"#2980B9\"),\r\n am4core.color(\"#FF6F91\"),\r\n am4core.color(\"#845EC2\"),\r\n am4core.color(\"#D65DB1\"),\r\n am4core.color(\"#FF6F91\"),\r\n ];\r\n\r\n let rgm = new am4core.RadialGradientModifier();\r\n // rgm.lightnesses.push(-0.8, -0.8, -0.5, 0, - 0.5);\r\n // this.series.slices.template.fillModifier = rgm;\r\n // this.series.slices.template.strokeModifier = rgm;\r\n // this.series.slices.template.strokeOpacity = 0.4;\r\n // this.series.slices.template.strokeWidth = 0;\r\n\r\n rgm.opacities = [0.5, 1, 0.5];\r\n rgm.offsets = [0, 1, 1];\r\n this.series.slices.template.fillModifier = rgm;\r\n }\r\n\r\n updateChartsData = () => {\r\n const { datasets } = this.props;\r\n\r\n if (!datasets) return null\r\n\r\n this.chart.data = Object.entries(datasets).map(([key, value]) => {\r\n return {\r\n v: value,\r\n k: key\r\n }\r\n })\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n handleChart(1)}\r\n >chart 1\r\n handleChart(2)}\r\n >chart 2\r\n
\r\n \r\n Loading data from server...\r\n
\r\n )}\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nDonutChart.propTypes = {\r\n styles: PropTypes.object,\r\n datasets: PropTypes.array\r\n}\r\n\r\nexport default DonutChart\r\n","import React, { useEffect,useState } from \"react\";\r\nimport HeaderPage from \"../../Component/HeaderPage/HeaderPage\";\r\n\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\r\nimport DonutChart from \"../../Component/DonutChart/DonutChart\";\r\nimport ColumnCylinder from \"../../Component/CylinderColumnChart/ColumnCylinder\";\r\n\r\nimport './index.css'\r\n\r\nconst Qualys = () => {\r\n const [dataset, setData] = useState([]);\r\n\r\n useEffect(() => {\r\n const URL = \" https://apm-app3.alphait.us/Qualys/GetQualysData\"\r\n\r\n fetch(URL)\r\n .then((response) => {\r\n return response.json();\r\n })\r\n .then((data) => {\r\n\r\n setData(data);\r\n });\r\n\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n VULNERABILITIES\r\n \r\n {(dataset.qualysSeverity && dataset.qualysType) ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n ) : (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Qualys;","import React from \"react\"\r\nimport PropTypes from \"prop-types\"\r\n\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport { XYChart } from '@amcharts/amcharts4/.internal/charts/types/XYChart';\r\nimport { ValueAxis } from '@amcharts/amcharts4/.internal/charts/axes/ValueAxis';\r\nimport { DateAxis } from '@amcharts/amcharts4/.internal/charts/axes/DateAxis';\r\nimport { LineSeries } from '@amcharts/amcharts4/.internal/charts/series/LineSeries';\r\nimport { XYCursor } from '@amcharts/amcharts4/.internal/charts/cursors/XYCursor';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\n\r\nimport { color } from '@amcharts/amcharts4/.internal/core/utils/Color';\r\n\r\nimport './index.css'\r\n\r\nconst DEFAULT_COLORS = [\r\n color('#1ABC9C'),\r\n color('#FEBC77'),\r\n color('#2980B9'),\r\n color('#F1C40F'),\r\n color('#FF7043'),\r\n color('#9B59B6'),\r\n color('#27AE60'),\r\n color('#E74C3C'),\r\n color('#2ECC71'),\r\n color('#8DB7D7'),\r\n color('#E67E22'),\r\n color('#8E44AD'),\r\n color('#16A085'),\r\n color('#6D4C41'),\r\n color('#F39C12'),\r\n color('#D35400'),\r\n color('#3498DB'),\r\n color('#AD1457'),\r\n color('#66BB6A'),\r\n color('#ACE1AF'),\r\n color('#F7E7CE'),\r\n color('#FFB7C5'),\r\n color('#7B3F00'),\r\n];\r\n\r\n\r\nam4core.useTheme(am4themes_animated);\r\n\r\nclass LineChart extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n }\r\n\r\n componentDidMount() {\r\n this.chart = am4core.create(\"chartdiv\", XYChart);\r\n this.chart.cursor = new XYCursor();\r\n this.chart.cursor.lineY.disabled = true;\r\n\r\n this.initColors();\r\n this.chart.colors.reuse = true;\r\n\r\n this.dateAxis = this.chart.xAxes.push(new DateAxis());\r\n this.dateAxis.renderer.minGridDistance = 50;\r\n this.dateAxis.renderer.grid.template.location = 0.5;\r\n this.dateAxis.startLocation = 0.5;\r\n this.dateAxis.endLocation = 0.5;\r\n\r\n const dateTemplate = this.dateAxis.renderer.labels.template;\r\n dateTemplate.fontSize = 14;\r\n dateTemplate.fill = color('#CEDBDC');\r\n\r\n this.categoryAxis = this.chart.yAxes.push(new ValueAxis());\r\n\r\n let labelTemplate = this.categoryAxis.renderer.labels.template;\r\n labelTemplate.fill = color('#CEDBDC');\r\n labelTemplate.fontSize = 14;\r\n\r\n this.chart.cursor.xAxis = this.categoryAxis;\r\n\r\n this.createSeries();\r\n this.createSeries2();\r\n this.createSeries3();\r\n this.updateChartsData();\r\n\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.chart) {\r\n this.chart.dispose();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n\r\n }\r\n\r\n initColors = () => {\r\n this.chart.colors.list = DEFAULT_COLORS;\r\n };\r\n\r\n createSeries = () => {\r\n this.series = this.chart.series.push(new LineSeries());\r\n this.series.dataFields.valueY = \"value1\";\r\n this.series.dataFields.dateX = \"date\";\r\n this.series.strokeWidth = 2;\r\n this.series.minBulletDistance = 10;\r\n this.series.tooltipText = \"[bold]{value1}\";\r\n this.series.tooltip.pointerOrientation = \"vertical\";\r\n this.series.strokeWidth = 3;\r\n this.series.tensionX = 0.8;\r\n\r\n let filter = this.series.filters.push(new am4core.DropShadowFilter());\r\n filter.color = am4core.color(\"#1ABC9C\");\r\n filter.dx = 10;\r\n filter.dy = 0;\r\n filter.blur = 10;\r\n filter.opacity = 0.5;\r\n }\r\n\r\n createSeries2 = () => {\r\n this.series2 = this.chart.series.push(new LineSeries());\r\n this.series2.dataFields.valueY = \"value2\";\r\n this.series2.dataFields.dateX = \"date\";\r\n this.series2.strokeWidth = 2;\r\n this.series2.minBulletDistance = 10;\r\n this.series2.tooltipText = \"[bold]{value2}\";\r\n this.series2.tooltip.pointerOrientation = \"vertical\";\r\n this.series2.strokeWidth = 3;\r\n this.series2.tensionX = 0.8;\r\n\r\n let filter = this.series2.filters.push(new am4core.DropShadowFilter());\r\n filter.color = am4core.color(\"#FEBC77\");\r\n filter.dx = 10;\r\n filter.dy = 0;\r\n filter.blur = 10;\r\n filter.opacity = 0.5;\r\n }\r\n\r\n createSeries3 = () => {\r\n this.series3 = this.chart.series.push(new LineSeries());\r\n this.series3.dataFields.valueY = \"value3\";\r\n this.series3.dataFields.dateX = \"date\";\r\n this.series3.strokeWidth = 4;\r\n this.series3.minBulletDistance = 10;\r\n this.series3.tooltipText = \"[bold]{value3}\";\r\n this.series3.tooltip.pointerOrientation = \"vertical\";\r\n this.series3.tensionX = 0.8;\r\n\r\n let filter = this.series3.filters.push(new am4core.DropShadowFilter());\r\n filter.color = am4core.color(\"#2980B9\");\r\n filter.dx = 10;\r\n filter.dy = 0;\r\n filter.blur = 10;\r\n filter.opacity = 0.5;\r\n }\r\n\r\n updateChartsData = () => {\r\n\r\n this.chart.data = [\r\n {date:new Date(2019,5,12), value1:50, value2:48, value3: 37, previousDate:new Date(2019, 5, 5)},\r\n {date:new Date(2019,5,13), value1:53, value2:51, value3: 50, previousDate:new Date(2019, 5, 6)},\r\n {date:new Date(2019,5,14), value1:56, value2:58, value3: 54, previousDate:new Date(2019, 5, 7)},\r\n {date:new Date(2019,5,15), value1:52, value2:53, value3: 59,previousDate:new Date(2019, 5, 8)},\r\n {date:new Date(2019,5,16), value1:48, value2:44, value3: 65, previousDate:new Date(2019, 5, 9)},\r\n {date:new Date(2019,5,17), value1:47, value2:42, value3: 53,previousDate:new Date(2019, 5, 10)},\r\n {date:new Date(2019,5,18), value1:59, value2:55, value3: 60, previousDate:new Date(2019, 5, 11)}\r\n ]\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n Loading data from server...\r\n
\r\n )}\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nLineChart.propTypes = {\r\n dataset: PropTypes.array,\r\n}\r\n\r\nexport default LineChart\r\n\r\n","import React from \"react\"\r\nimport PropTypes from \"prop-types\"\r\n\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport { XYChart } from '@amcharts/amcharts4/.internal/charts/types/XYChart';\r\nimport { ValueAxis } from '@amcharts/amcharts4/.internal/charts/axes/ValueAxis';\r\nimport { DateAxis } from '@amcharts/amcharts4/.internal/charts/axes/DateAxis';\r\nimport { LineSeries } from '@amcharts/amcharts4/.internal/charts/series/LineSeries';\r\nimport { XYCursor } from '@amcharts/amcharts4/.internal/charts/cursors/XYCursor';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\n\r\nimport { color } from '@amcharts/amcharts4/.internal/core/utils/Color';\r\n\r\nimport { PieChart3D } from '@amcharts/amcharts4/.internal/charts/types/PieChart3D';\r\n\r\nimport { Legend } from '@amcharts/amcharts4/.internal/charts/Legend';\r\nimport './index.css'\r\nimport ColumnCylinder from \"../CylinderColumnChart/ColumnCylinder\";\r\n\r\nconst DEFAULT_COLORS = [\r\n color('#1ABC9C'),\r\n color('#FEBC77'),\r\n color('#2980B9'),\r\n color('#F1C40F'),\r\n color('#FF7043'),\r\n color('#9B59B6'),\r\n color('#27AE60'),\r\n color('#E74C3C'),\r\n color('#2ECC71'),\r\n color('#8DB7D7'),\r\n color('#E67E22'),\r\n color('#8E44AD'),\r\n color('#16A085'),\r\n color('#6D4C41'),\r\n color('#F39C12'),\r\n color('#D35400'),\r\n color('#3498DB'),\r\n color('#AD1457'),\r\n color('#66BB6A'),\r\n color('#ACE1AF'),\r\n color('#F7E7CE'),\r\n color('#FFB7C5'),\r\n color('#7B3F00'),\r\n];\r\n\r\n\r\nam4core.useTheme(am4themes_animated);\r\n\r\nclass SmallLineChart extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n }\r\n\r\n componentDidMount() {\r\n this.chart = am4core.create(this.props.chartId, XYChart);\r\n this.chart.cursor = new XYCursor();\r\n this.chart.cursor.lineY.disabled = true;\r\n\r\n this.initColors();\r\n this.chart.colors.reuse = true;\r\n\r\n this.dateAxis = this.chart.xAxes.push(new DateAxis());\r\n this.dateAxis.renderer.minGridDistance = 10;\r\n this.dateAxis.renderer.grid.template.disabled = true;\r\n this.dateAxis.renderer.labels.template.disabled = true;\r\n // this.dateAxis.renderer.baseGrid.disabled = true;\r\n // this.dateAxis.renderer.grid.template.location = 0.5;\r\n // this.dateAxis.startLocation = 0.5;\r\n // this.dateAxis.endLocation = 0.5;\r\n\r\n const dateTemplate = this.dateAxis.renderer.labels.template;\r\n dateTemplate.fontSize = 14;\r\n dateTemplate.fill = color('#CEDBDC');\r\n\r\n\r\n this.valueAxis = this.chart.yAxes.push(new ValueAxis());\r\n this.valueAxis.renderer.grid.template.disabled = true;\r\n this.valueAxis.renderer.labels.template.disabled = true;\r\n // this.valueAxis.renderer.baseGrid.disabled = true;\r\n\r\n // this.chart.cursor.xAxis = this.categoryAxis;\r\n\r\n this.createSeries();\r\n // this.createSeries2();\r\n // this.createSeries3();\r\n this.updateChartsData();\r\n\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.chart) {\r\n this.chart.dispose();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n\r\n }\r\n\r\n initColors = () => {\r\n this.chart.colors.list = [color(`${this.props.color}`)];\r\n };\r\n\r\n createSeries = () => {\r\n this.series = this.chart.series.push(new LineSeries());\r\n this.series.dataFields.valueY = \"value1\";\r\n this.series.dataFields.dateX = \"date\";\r\n this.series.strokeWidth = 2;\r\n this.series.strokeWidth = 3;\r\n this.series.tensionX = 0.8;\r\n\r\n let filter = this.series.filters.push(new am4core.DropShadowFilter());\r\n filter.color = am4core.color(\"#1ABC9C\");\r\n filter.dx = 10;\r\n filter.dy = 0;\r\n filter.blur = 10;\r\n filter.opacity = 0.5;\r\n }\r\n\r\n updateChartsData = () => {\r\n\r\n const currentDate = new Date();\r\n\r\n this.chart.data = this.props.dataset.map((item, index) => {\r\n return {\r\n date: new Date(currentDate.setDate(currentDate.getDate() + (index + 1))),\r\n value1: item\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nSmallLineChart.propTypes = {\r\n dataset: PropTypes.array,\r\n color: PropTypes.array,\r\n chartId: PropTypes.string\r\n}\r\n\r\nexport default SmallLineChart\r\n","import React, {useState} from \"react\";\r\nimport Grid from '@material-ui/core/Grid';\r\nimport classNames from \"classnames\";\r\nimport LineChart from \"../../Component/LineChart/LineChart\";\r\nimport SmallLineChart from \"../../Component/SmallLine/SmallLineChart\";\r\n\r\nimport './index.css';\r\n\r\nconst btnNames = [\r\n {name: 'Executive View', color: 'blue'},\r\n {name: 'Operation View',color: 'red'},\r\n { name: 'Management View', color: 'green'}\r\n ];\r\n\r\nconst boxNames = [\r\n {name: 'Management View', color: 'green', value: [33,36,40,44,42,45]},\r\n {name: 'Active Alerts',color: 'red', value: [23,26,27,30,32,35]},\r\n { name: 'Security Incidents', color: 'blue', value: [25,28,31,34, 31, 36]},\r\n { name: 'Vulnerabilities', color: 'orange', value: [20,22,24,25, 27, 28,30,29]}\r\n];\r\n\r\nconst lineChartData = [\r\n {value1:50, value2:48, value3: 37},\r\n {value1:53, value2:51, value3: 50,},\r\n {value1:56, value2:58, value3: 54},\r\n {value1:52, value2:53, value3: 59},\r\n {value1:48, value2:44, value3: 65},\r\n {value1:47, value2:42, value3: 53},\r\n {value1:59, value2:55, value3: 60},\r\n];\r\n\r\nconst Dashboard = () => {\r\n const [active, setActive] = useState();\r\n\r\n const handleClick = (index) => {\r\n setActive(index)\r\n }\r\n\r\n console.log('set', active)\r\n\r\n return (\r\n \r\n {boxNames.map((box) => {\r\n return (\r\n
\r\n \r\n {box.name}\r\n \r\n
\r\n )\r\n })}\r\n \n \n \n
\n \n
\n )\n}\n\nexport default memo(SumoTable);\n","import React from \"react\";\nimport TableRow from \"@material-ui/core/TableRow\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport KeyboardArrowUpIcon from \"@material-ui/icons/KeyboardArrowUp\";\nimport KeyboardArrowDownIcon from \"@material-ui/icons/KeyboardArrowDown\";\nimport Collapse from \"@material-ui/core/Collapse\";\nimport Box from \"@material-ui/core/Box\";\n\nexport default function Row(props) {\n const [open, setOpen] = React.useState(false);\n const { row } = props\n return (\n \n {subItem.key}\n {subItem.value}\n
\n )\n })}\n { list.objReply.status === '200' ?\n (\n <>\n \n \n
\n \n
\n )\n}\n\nexport default memo(SumoTableFilter);\n\n","import withStyles from '@material-ui/core/styles/withStyles';\n\nexport default withStyles(() => ({\n root: {\n border: '1px solid red'\n },\n treeItem: {\n paddingLeft: 0,\n },\n checkedCategory: {\n paddingTop: 9,\n },\n test: {\n border: '2px solid green'\n }\n}));","import React, {useState, memo, useEffect} from \"react\";\nimport HeaderPage from \"../../Component/HeaderPage/HeaderPage\";\nimport Table from '../../Component/Table/Table'\nimport TableFilter from \"../../Component/TableFilter/TableFilter\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\nimport InputLabel from '@material-ui/core/InputLabel';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport Select from '@material-ui/core/Select';\nimport Input from '@material-ui/core/Input';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport classNames from \"classnames\";\n\nimport './index.css'\nimport classes from \"./styles\";\nimport {dividerClasses} from \"@material-ui/core\";\n\nconst URL_SUMO_LOGIC = \"https://apm-app3.alphait.us/SumoLogic/FetchSumoLogicData\"\n\nconst INPUT_PLACEHOLDER = 'Type your search here then hit Start button to execute.'\n\nconst RANGE_VALUES = ['15m', '60m', '3h', '6h', '24h', 'today', 'yesterday', '3d', '7d', 'this week', 'previous week', '14d', '30d', 'this month', 'previous month']\n\nconst RANGE_LABEL = {\n '15m': 'Last 15 Minutes',\n '60m': 'Last 60 Minutes',\n '3h': 'Last 3 Hours',\n '6h': 'Last 6 Hours',\n '24h': 'Last 24 Hours',\n 'today': 'Today',\n 'yesterday': 'Yesterday',\n\t'3d': 'Last 3 Days',\n '7d': 'Last 7 Days',\n 'this week': 'This week',\n 'previous week': 'Previous week',\n '14d': 'Last 14 Days',\n '30d': 'Last 30 Days',\n 'this month': 'This month',\n 'previous month': 'previous month',\n}\n\nconst SumoLogic = () => {\n const [active, setActive] = useState(false);\n const [filterData, setFilterData] = useState();\n const [loading, setLoading] = useState(false);\n const [initSumoLogic, setInitSumoLogic] = useState(true)\n const [dataset, setData] = useState([]);\n const [values, setValues] = React.useState({\n text: '',\n range: ''\n });\n\n useEffect(() => {\n const URL = \"https://apm-app3.alphait.us/SumoLogic/GetSumoLogicData\"\n\n fetch(URL)\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n setData(data);\n });\n\n }, []);\n\n const handleFetchSumoLogicData = () => {\n\n if ([values.text,values.range].some(el => el.length === 0)) return null\n\n const replaceQuote = values.text.toString().replace(/\"/g, \"'\");\n\n const data = {\"query\" : `${replaceQuote}`,\n \"timestamp\": `${values.range}`}\n\n fetch(URL_SUMO_LOGIC, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n // 'Content-Type': 'application/x-www-form-urlencoded',\n },\n referrerPolicy: 'no-referrer',\n body: JSON.stringify(data)\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n setFilterData(data);\n setInitSumoLogic(!initSumoLogic);\n setLoading(true)\n });\n }\n\n const handleChange = (prop) => (event) => {\n setValues({ ...values, [prop]: event.target.value });\n };\n\n const initSumoLogicRender = () => {\n if (dataset && dataset.dataList) {\n return (\n Error message
\n )\n }\n \n Loading data from server...\n
\n )\n }\n }\n\n const filterSumoLogicRender = () => {\n return (\n \n
\n )\n}\n\nexport default memo(SumoLogic)","import React from \"react\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n} from \"react-router-dom\";\nimport Grid from '@material-ui/core/Grid';\nimport { MyDrawer } from \"./Component/Drawer/Drawer\";\nimport ServiceNow from \"./Page/ServiceNow/ServiceNow\";\nimport Qualys from \"./Page/Qualys/Qualys\";\nimport Dashboard from \"./Page/Dashboard/Dashboard\";\nimport SumoLogic from \"./Page/SumoLogic/SumoLogic\";\nimport FMlogo from './images/FMLogo.png'\n\nimport './App.css';\n\nfunction App() {\n const [open, setOpen] = React.useState(false);\n const [activeRoute, setActiveRoute] = React.useState('one');\n\n\n const handleOpen = () => {\n setOpen(!open);\n };\n\n const handleRoute = key => {\n setActiveRoute(key)\n }\n\n return (\n \n \n Search text \n $}\n />\n \n \n Time range \n \n {RANGE_VALUES.map((item) => )}\n \n \n
\n { initSumoLogic ? initSumoLogicRender() : filterSumoLogicRender() }\n \n handleFetchSumoLogicData()}\n >\n Start\n \n
\n \n \n \n 
\n \n \n Security Operations Unified Dashboard\n \n \n \n \n {open ? '>' : '<'}\n \n \n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}
\n \n \n \n {/* \n \n \n
\n );\n}\n\nexport default App;\n","export default \"data:image/png;base64,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\"","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport { BrowserRouter } from \"react-router-dom\";\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n