\n \n ChatGPT Data\n \n \n \n \n \n {props.siteName}
\n \n \n \n {props.inputFilePath}
\n \n
\n \n \n {fieldNameList.map((field_name) =>\n \n \n \n \n
\n \n )}\n {errors?.is_field_name_empty && This field is required
}\n
\n \n {loading ? \n :\n <>\n {(data.length !== 0) &&\n \n }\n \n }\n
\n \n \n \n \n \n \n \n : \"NA\"\n }\n \n )\n}\n","import axios from 'axios';\nimport { Modal, Button } from 'react-bootstrap';\nimport DataTable from 'react-data-table-component';\nimport React, { Fragment, useState, useMemo, useEffect } from 'react'\nimport SpinnerLoader from '../../../V2/Common/LoadingAnimation/SpinnerLoader.component';\nimport ExportCSVButton from './ExportCSVButton.component';\n\nexport default function HighLevelDataSummary(props) {\n\n // API Endpoint for getting the high level stats summary for LLM\n const HIGH_LEVEL_DATA_SUMMARY_DATA_API = useMemo(() => (\n `/api/v1/internal/new_qa_reports/chat_gpt_data_matching_summary?input_file_path=${props?.inputFilePath}`\n ), [props?.inputFilePath])\n\n // Misc.\n const [loading, setLoading] = useState(false);\n\n // States for storing the data fetched from API\n const [summaryReport, setSummaryReport] = useState([]);\n const [metaInformation, setMetaInformation] = useState([]);\n\n useEffect(() => {\n const controller = new AbortController();\n\n fetchSummaryData(controller.signal);\n\n // cleanup\n return () => {\n controller.abort();\n setSummaryReport([]);\n setMetaInformation([]);\n\n }\n }, [HIGH_LEVEL_DATA_SUMMARY_DATA_API])\n\n // Helper function to fetch table data\n async function fetchSummaryData(signal) {\n try {\n setLoading(true);\n const response = await axios.get(HIGH_LEVEL_DATA_SUMMARY_DATA_API, { signal: signal });\n const data = await response?.data;\n setMetaInformation(data?.meta_info);\n setSummaryReport(data?.summary_report);\n setLoading(false);\n }\n catch (error) {\n console.error(error?.response?.message);\n setLoading(false);\n }\n }\n\n // Table data columns for showing summary data\n const summaryTableColumns = [\n { name: \"Field Names\", selector: row => row?.field_name, center: true, sortable: true },\n { name: \"ChatGPT Null Values\", selector: row => row?.chatgpt_null_values, center: true, sortable: true },\n { name: \"Exact Match\", selector: row => row?.exact_match, center: true, sortable: true },\n { name: \"Crawled Null Values\", selector: row => row?.crawled_null_values, center: true, sortable: true },\n { name: \"Match Score > 60\", selector: row => row?.match_score_greater_than_60, center: true, sortable: true },\n { name: \"Match Score > 80\", selector: row => row?.match_score_greater_than_80, center: true, sortable: true },\n { name: \"Match Score < 40\", selector: row => row?.match_score_less_than_40, center: true, sortable: true },\n { name: \"Total Records\", selector: row => row?.total_records, center: true, sortable: true },\n ]\n\n // Custom table styling\n const customStyles = {\n header: {\n style: {\n minHeight: '100px',\n\n },\n },\n headRow: {\n style: {\n backgroundColor: \"#9dbaed\",\n color: \"black\",\n fontWeight: \"bold\",\n },\n },\n headCells: {\n style: {\n '&:not(:last-of-type)': {\n borderRightStyle: 'solid',\n borderRightWidth: '1px',\n borderRightColor: \"#0000\",\n },\n width: \"195px\",\n\n },\n },\n cells: {\n style: {\n '&:first-of-type': {\n minWidth: \"80px\",\n maxWidth: \"250px\",\n },\n border: \"1px solid black\",\n cursor: \"pointer\",\n fontSize: \"14px\"\n },\n },\n }\n\n return (\n \n \n \n \n High Level Data Summary Report\n \n \n \n \n \n {\n summaryReport ?\n <>\n
\n
{`Token Size > 15k : ${metaInformation?.token_size_more_than_15k ? metaInformation?.token_size_more_than_15k : 0}`}
\n
\n \n
\n
\n
\n \n : \"No data available!\"\n }\n
\n {!loading &&
}\n {loading ?
\n :
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* */}\n \n \n\n {/* es page routes */} \n \n \n \n \n \n
\n
}\n
\n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? JP Main QA : 'JP Main QA'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setFromTime(option)} />\n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n}\n\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home } from \"react-feather\";\nimport Select from \"react-select\";\n\nimport { KIBANA_JP_URL } from \"../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints\";\n\nexport default function JpImportantFilters() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const tabNameFromSearchUrl = new URLSearchParams(search).get(\"filter[tab_name]\");\n const tabNameFromUrl = window.location.hash.substr(1);\n const searchParams = {\n fromTime: new URLSearchParams(search).get(\"filter[time]\"),\n tabName: tabNameFromSearchUrl ? tabNameFromSearchUrl : tabNameFromUrl\n }\n const [fromTime, setFromTime] = useState({ label: 'Last 1 year', value: 'now-1y' });\n const [activeTab, setActiveTab] = useState(tabNameFromUrl ? tabNameFromUrl : 'jobspikr_v3_data');\n\n const timeOptions = [\n { label: 'Today', value: 'now%2Fd' },\n { label: 'Last 30 minutes', value: 'now-30m' },\n { label: 'Last 1 hour', value: 'now-1h' },\n { label: 'Last 2 hours', value: 'now-2h' },\n { label: 'Last 4 hours', value: 'now-4h' },\n { label: \"Last 10 hours\", value: \"now-10h\" },\n { label: 'Last 12 hours', value: 'now-12h' },\n { label: 'Last 24 hours', value: 'now-24h' },\n { label: 'Last 2 days', value: 'now-2d' },\n { label: 'Last 3 days', value: 'now-3d' },\n { label: 'Last 4 days', value: 'now-4d' },\n { label: 'Last 7 days', value: 'now-7d' },\n { label: 'Last 15 days', value: 'now-15d' },\n { label: 'Last 30 days', value: 'now-30d' },\n { label: 'Last 60 days', value: 'now-60d' },\n { label: 'Last 1 year', value: 'now-1y' }\n ];\n\n const [UrlParams, setUrlParams] = useState({\n fromTime: 'now-1y',\n tabName: \"jobspikr_v3_data\"\n })\n\n useEffect(() => {\n setSearchParamsData();\n }, []);\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.fromTime && searchParams.fromTime != fromTime.value) {\n setFromTime(timeOptions.filter(item => item.value == searchParams.fromTime)[0]);\n }\n if (searchParams.tabName && searchParams.tabName != activeTab) {\n setActiveTab(searchParams.tabName);\n }\n if (commit == 'Get Data' && searchParams.fromTime) {\n setUrlParams(searchParams)\n }\n }\n\n function kibanaToTimeVal() {\n return UrlParams.fromTime == \"now%2Fd\" ? \"now%2Fd\" : \"now\";\n }\n\n function jobspikrV3DataKibanaUrl(){\n return `${KIBANA_JP_URL}app/kibana#/dashboard/JPP-QA-Sample-Counts-Dashboard?_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:'${UrlParams.fromTime}',mode:quick,to:'${kibanaToTimeVal()}'))&_a=(filters:!(),options:(darkTheme:!f),panels:!((col:1,id:JPP-QA-Total-Records,panelIndex:1,row:1,size_x:6,size_y:2,type:visualization),(col:7,id:JPP-QA-Region-Presence-Counts,panelIndex:2,row:1,size_x:6,size_y:3,type:visualization),(col:4,id:JPP-QA-US-States-Count,panelIndex:3,row:3,size_x:3,size_y:3,type:visualization),(col:7,id:JPP-QA-Post-Date-Filters,panelIndex:4,row:4,size_x:6,size_y:2,type:visualization),(col:1,id:JPP-QA-Sample-Links,panelIndex:5,row:3,size_x:3,size_y:3,type:visualization)),query:(query_string:(analyze_wildcard:!t,query:'*')),title:'JPP%20QA%20-%20Sample%20Counts%20Dashboard',uiState:())`\n }\n\n function jobspikrV3StagingDataKibanaUrl(){\n return `${KIBANA_JP_URL}app/kibana#/dashboard/JPS-QA-Sample-Counts-Dashboard?_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:'${UrlParams.fromTime}',mode:quick,to:'${kibanaToTimeVal()}'))&_a=(filters:!(),options:(darkTheme:!f),panels:!((col:7,id:JPS-QA-Region-Presence-Counts,panelIndex:4,row:1,size_x:6,size_y:3,type:visualization),(col:1,id:JPS-QA-Sample-Links,panelIndex:5,row:3,size_x:3,size_y:3,type:visualization),(col:7,id:JPS-QA-Post-Date-Filters,panelIndex:6,row:4,size_x:6,size_y:2,type:visualization),(col:1,id:JPS-QA-Total-Records,panelIndex:7,row:1,size_x:6,size_y:2,type:visualization),(col:4,id:JPS-QA-US-States-Count,panelIndex:8,row:3,size_x:3,size_y:3,type:visualization)),query:(query_string:(analyze_wildcard:!t,query:'*')),title:'JPS%20QA%20-%20Sample%20Counts%20Dashboard',uiState:(P-7:(spy:(mode:(fill:!f,name:!n)))))`\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/jp_imp_filters?filter[time]=${fromTime.value}&filter[tab_name]=${activeTab}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? JP Important Filters : 'JP Important Filters'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setFromTime(option)} />\n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n}\n\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home } from \"react-feather\";\nimport Select from \"react-select\";\n\nimport { KIBANA_PLM_URL } from \"../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints\";\n\nexport default function JpIndexingErrors() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n fromTime: new URLSearchParams(search).get(\"filter[time]\")\n }\n const [fromTime, setFromTime] = useState({ label: 'Last 7 days', value: 'now-7d' });\n\n const timeOptions = [\n { label: 'Today', value: 'now%2Fd' },\n { label: 'Last 30 minutes', value: 'now-30m' },\n { label: 'Last 1 hour', value: 'now-1h' },\n { label: 'Last 2 hours', value: 'now-2h' },\n { label: 'Last 4 hours', value: 'now-4h' },\n { label: \"Last 10 hours\", value: \"now-10h\" },\n { label: 'Last 12 hours', value: 'now-12h' },\n { label: 'Last 24 hours', value: 'now-24h' },\n { label: 'Last 2 days', value: 'now-2d' },\n { label: 'Last 3 days', value: 'now-3d' },\n { label: 'Last 4 days', value: 'now-4d' },\n { label: 'Last 7 days', value: 'now-7d' },\n { label: 'Last 15 days', value: 'now-15d' },\n { label: 'Last 30 days', value: 'now-30d' },\n { label: 'Last 60 days', value: 'now-60d' },\n { label: 'Last 1 year', value: 'now-1y' }\n ];\n\n const [UrlParams, setUrlParams] = useState({\n fromTime: 'now-7d'\n })\n\n useEffect(() => {\n setSearchParamsData();\n }, []);\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.fromTime && searchParams.fromTime != fromTime.value) {\n setFromTime(timeOptions.filter(item => item.value == searchParams.fromTime)[0]);\n }\n if (commit == 'Get Data' && searchParams.fromTime) {\n setUrlParams(searchParams)\n }\n }\n\n function kibanaToTimeVal() {\n return UrlParams.fromTime == \"now%2Fd\" ? \"now%2Fd\" : \"now\";\n }\n\n function KibanaUrl(){\n return `https://kibanav8-plm.promptcloud.com/app/kibana#/dashboard/Filebeat-Logstash-Log-Dashboard-ecs?_g=(refreshInterval:(pause:!t,value:0),time:(from:'${UrlParams.fromTime}',to:'${kibanaToTimeVal()}'))&_a=(description:'Overview+of+Logstash+logs',filters:!(),fullScreenMode:!f,options:(darkTheme:!f),panels:!((embeddableConfig:(),gridData:(h:12,i:'2',w:24,x:24,y:0),id:'0b1dace0-cbdb-11e7-9852-73e0a9df1bb6-ecs',panelIndex:'2',type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:12,i:'3',w:24,x:0,y:0),id:e90b7240-cbda-11e7-9852-73e0a9df1bb6-ecs,panelIndex:'3',type:visualization,version:'7.5.1'),(embeddableConfig:(columns:!(log.level,logstash.log.module,message,source),sort:!('@timestamp',desc)),gridData:(h:40,i:'4',w:48,x:0,y:12),id:cfaba090-cbda-11e7-9852-73e0a9df1bb6-ecs,panelIndex:'4',type:search,version:'7.5.1')),query:(language:kuery,query:'(message+:+jobspikr_v3_data+or+message:jobspikr_v3_staging_date)+and+(message:%22Could+not+index+event+to%22)'),timeRestore:!f,title:'%5BFilebeat+Logstash%5D+Logstash+Logs+ECS',viewMode:view)`\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/jp_indexing_errors?filter[time]=${fromTime.value}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? Jobspikr Indexing Errors : 'Jobspikr Indexing Errors'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setFromTime(option)} />\n \n \n \n \n \n
\n \n \n \n \n \n Jobspikr Indexing Errors
\n Click here to see below graph in kibana\n \n \n \n \n\n}\n\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home } from \"react-feather\";\n\nimport { KIBANA_JP_URL } from '../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints'\n\nexport default function JpInferringErrors() {\n\n function KibanaUrl(){\n return `${KIBANA_JP_URL}app/kibana#/dashboard/JP-Logstash-QA-Inferring-Error-Dashboard?_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-7d,mode:quick,to:now))&_a=(filters:!(),options:(darkTheme:!f),panels:!((col:1,id:JP-Logstash-QA-Count-of-Inferring-Error-Domains,panelIndex:1,row:4,size_x:6,size_y:4,type:visualization),(col:7,id:JP-Logstash-QA-Count-of-Inferring-Error-Types,panelIndex:2,row:8,size_x:6,size_y:4,type:visualization),(col:1,id:JP-Logstash-QA-Inferring-Error-Types-Graph,panelIndex:3,row:1,size_x:12,size_y:3,type:visualization),(col:7,id:JP-Logstash-QA-Count-of-Inferring-Error-Site-Setup-Name,panelIndex:4,row:4,size_x:6,size_y:4,type:visualization),(col:1,id:JP-Logstash-QA-Count-of-Inferring-Error-Job-Boards,panelIndex:5,row:8,size_x:6,size_y:4,type:visualization)),query:(query_string:(analyze_wildcard:!t,query:'custom:jobspikr_inferred_location_error')),title:'JP%20Logstash%20QA%20Inferring%20Error%20Dashboard',uiState:(P-3:(vis:(legendOpen:!t))))`\n }\n\n return \n \n \n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n JP Inferring Errors Dashboard\n \n \n
\n
\n\n \n \n \n JP Inferring Errors Dashboard
\n Click here to see below graph in kibana\n \n \n \n \n\n}\n\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home } from \"react-feather\";\nimport Select from \"react-select\";\nimport axios from \"axios\";\nimport DataTable from \"react-data-table-component\";\nimport Loader from \"react-loader-spinner\";\n\n\nimport { KIBANA_JP_URL } from \"../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints\";\n\nexport default function JpIndexProgress() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n hostName: new URLSearchParams(search).get(\"filter[host_name]\"),\n fromTime: new URLSearchParams(search).get(\"filter[time]\")\n }\n const [hostName, setHostName] = useState({label: 'All', value: '*'});\n const [queueSizes, setQueueSizes] = useState([]);\n const [hostNameOptions, setHostNameOptions] = useState([]);\n const [fromTime, setFromTime] = useState({ label: 'Today', value: 'now%2Fd' });\n const [loading, setLoading] = useState(false);\n\n const timeOptions = [\n { label: 'Today', value: 'now%2Fd' },\n { label: 'Last 30 minutes', value: 'now-30m' },\n { label: 'Last 1 hour', value: 'now-1h' },\n { label: 'Last 2 hours', value: 'now-2h' },\n { label: 'Last 4 hours', value: 'now-4h' },\n { label: \"Last 10 hours\", value: \"now-10h\" },\n { label: 'Last 12 hours', value: 'now-12h' },\n { label: 'Last 24 hours', value: 'now-24h' },\n { label: 'Last 2 days', value: 'now-2d' },\n { label: 'Last 3 days', value: 'now-3d' },\n { label: 'Last 4 days', value: 'now-4d' },\n { label: 'Last 7 days', value: 'now-7d' },\n { label: 'Last 15 days', value: 'now-15d' },\n { label: 'Last 30 days', value: 'now-30d' },\n { label: 'Last 60 days', value: 'now-60d' },\n { label: 'Last 1 year', value: 'now-1y' }\n ];\n\n const columns = [\n { name: 'Queue Name', selector: 'queue_name', sortable: true },\n { name: 'Queue Size', selector: 'queue_size', sortable: true },\n { name: 'Server Name', selector: 'server', sortable: true },\n ]\n\n const [UrlParams, setUrlParams] = useState({\n hostName: '*',\n fromTime: 'now%2Fd'\n }) \n\n useEffect(() => {\n setSearchParamsData();\n axios.get('/api/v1/internal/jp_index_progress')\n .then(res => {\n let machine_names = []\n res.data.machine_names.forEach(item => {\n machine_names.push({ label: item, value: item })\n })\n machine_names.push({ label: 'All', value: '*' })\n setHostNameOptions(machine_names);\n setQueueSizes(res.data.queue_sizes);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong')\n });\n }, []);\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.hostName && searchParams.hostName != hostName.value) {\n setHostName({ \n label: searchParams.hostName == '*' ? 'All' : searchParams.hostName, \n value: searchParams.hostName == \"All\"? \"*\" : searchParams.hostName\n });\n }\n if (searchParams.fromTime && searchParams.fromTime != fromTime.value) {\n setFromTime(timeOptions.filter(item => item.value == searchParams.fromTime)[0]);\n }\n if (commit == 'Get Data') {\n setUrlParams(searchParams)\n }\n }\n\n function KibanaUrl(){\n var to_time_val = UrlParams.fromTime == \"now%2Fd\" ? \"now%2Fd\" : \"now\";\n var host_name_val = UrlParams.hostName == \"All\" ? \"*\" : UrlParams.hostName;\n\n return `${KIBANA_JP_URL}app/kibana#/visualize/edit/60b1d4f0-a1ae-11ea-8910-5d7412b1fc26?_g=(refreshInterval:(pause:!t,value:0),time:(from:'${UrlParams.fromTime}',to:'${to_time_val}'))&_a=(filters:!(),linked:!f,query:(language:kuery,query:'hostname:${host_name_val}'),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(),schema:metric,type:count),(enabled:!t,id:'2',params:(drop_partials:!f,extended_bounds:(),field:'@timestamp',interval:h,min_doc_count:1,scaleMetricValues:!f,timeRange:(from:now%2Fd,to:now%2Fd),useNormalizedEsInterval:!t),schema:segment,type:date_histogram),(enabled:!t,id:'3',params:(field:hostname,missingBucket:!f,missingBucketLabel:Missing,order:desc,orderBy:'1',otherBucket:!f,otherBucketLabel:Other,size:5),schema:group,type:terms)),params:(addLegend:!t,addTimeMarker:!f,addTooltip:!t,categoryAxes:!((id:CategoryAxis-1,labels:(filter:!t,show:!t,truncate:100),position:bottom,scale:(type:linear),show:!t,style:(),title:(),type:category)),dimensions:(series:!((accessor:1,aggType:terms,format:(id:terms,params:(id:string,missingBucketLabel:Missing,otherBucketLabel:Other)),params:())),x:(accessor:0,aggType:date_histogram,format:(id:date,params:(pattern:'YYYY-MM-DD+HH:mm')),params:(bounds:(max:'2020-09-08T18:29:59.999Z',min:'2020-09-07T18:30:00.000Z'),date:!t,format:'YYYY-MM-DD+HH:mm',interval:PT1H,intervalESUnit:h,intervalESValue:1)),y:!((accessor:2,aggType:count,format:(id:number),params:()))),grid:(categoryLines:!f),labels:(show:!f),legendPosition:right,seriesParams:!((data:(id:'1',label:Count),drawLinesBetweenPoints:!t,lineWidth:2,mode:stacked,show:!t,showCircles:!t,type:histogram,valueAxis:ValueAxis-1)),thresholdLine:(color:%2334130C,show:!f,style:full,value:10,width:1),times:!(),type:histogram,valueAxes:!((id:ValueAxis-1,labels:(filter:!f,rotate:0,show:!t,truncate:100),name:LeftAxis-1,position:left,scale:(mode:normal,type:linear),show:!t,style:(),title:(text:Count),type:value))),title:'Jobspikr+Index+Progress+Graph',type:histogram))`\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/jp_index_progress?filter[host_name]=${hostName.value}&filter[time]=${fromTime.value}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? JP index progress : 'JP index progress'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setHostName(option)} />\n \n \n \n setFromTime(option)} />\n \n \n \n \n
\n \n \n \n \n \n Click here to see below graph in kibana
\n Jobspikr_v3_data-* - Hourly index count from both data api servers\n \n \n \n \n\n}\n\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home } from \"react-feather\";\nimport Select from \"react-select\";\nimport axios from \"axios\";\n\nimport { KIBANA_PLM_URL } from \"../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints\";\n\nexport default function JpInferredLocationErrorBySite() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n siteName: new URLSearchParams(search).get(\"filter[site_name]\"),\n errorSubType: new URLSearchParams(search).get(\"filter[error_sub_type]\"),\n fromTime: new URLSearchParams(search).get(\"filter[time]\")\n }\n const [siteName, setSiteName] = useState({label: 'All', value: '*'});\n const [siteNameOptions, setSiteNameOptions] = useState([]);\n const [errorSubType, setErrorSubType] = useState({label: 'All', value: '*'});\n const [fromTime, setFromTime] = useState({ label: 'Today', value: 'now%2Fd' });\n\n const timeOptions = [\n { label: 'Today', value: 'now%2Fd' },\n { label: 'Last 30 minutes', value: 'now-30m' },\n { label: 'Last 1 hour', value: 'now-1h' },\n { label: 'Last 2 hours', value: 'now-2h' },\n { label: 'Last 4 hours', value: 'now-4h' },\n { label: \"Last 10 hours\", value: \"now-10h\" },\n { label: 'Last 12 hours', value: 'now-12h' },\n { label: 'Last 24 hours', value: 'now-24h' },\n { label: 'Last 2 days', value: 'now-2d' },\n { label: 'Last 3 days', value: 'now-3d' },\n { label: 'Last 4 days', value: 'now-4d' },\n { label: 'Last 7 days', value: 'now-7d' },\n { label: 'Last 15 days', value: 'now-15d' },\n { label: 'Last 30 days', value: 'now-30d' },\n { label: 'Last 60 days', value: 'now-60d' },\n { label: 'Last 1 year', value: 'now-1y' }\n ];\n\n const errorSubTypeOptions = [\n { label: 'All', value: '*' },\n { label: 'city_not_found', value: 'city_not_found' },\n { label: 'state_not_found', value: 'state_not_found' },\n { label: 'country_not_found', value: 'country_not_found' }\n ];\n\n const [UrlParams, setUrlParams] = useState({\n siteName: '*',\n errorSubType: '*',\n fromTime: 'now%2Fd'\n })\n\n useEffect(() => {\n setSearchParamsData();\n axios.get('/api/v1/internal/jobspikr_sites')\n .then(res => {\n let site_names = []\n res.data.site_names.forEach(item => {\n site_names.push({ label: item, value: item })\n })\n site_names.push({ label: 'All', value: '*' })\n setSiteNameOptions(site_names);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong')\n });\n }, []);\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.siteName && searchParams.siteName != siteName.value) {\n setSiteName({ \n label: searchParams.siteName == '*' ? 'All' : searchParams.siteName, \n value: searchParams.siteName == \"All\"? \"*\" : searchParams.siteName\n });\n }\n if (searchParams.errorSubType && searchParams.errorSubType != errorSubType.value) {\n setErrorSubType({ \n label: searchParams.errorSubType == '*' ? 'All' : searchParams.errorSubType, \n value: searchParams.errorSubType == \"All\"? \"*\" : searchParams.errorSubType\n });\n }\n if (searchParams.fromTime && searchParams.fromTime != fromTime.value) {\n setFromTime(timeOptions.filter(item => item.value == searchParams.fromTime)[0]);\n }\n if (commit == 'Get Data') {\n setUrlParams(searchParams)\n }\n }\n\n function KibanaUrl(){\n var to_time_val = UrlParams.fromTime == \"now%2Fd\" ? \"now%2Fd\" : \"now\";\n var site_name_val = UrlParams.siteName == \"All\" ? \"*\" : UrlParams.siteName;\n var error_subType_val = UrlParams.errorSubType == \"All\" ? \"*\" : UrlParams.errorSubType;\n\n return `${KIBANA_PLM_URL}app/kibana#/visualize/edit/f974daf0-9670-11ea-8b4a-69464b0a274d?_g=(refreshInterval:(pause:!t,value:0),time:(from:'${UrlParams.fromTime}',to:'${to_time_val}'))&_a=(filters:!(),linked:!f,query:(language:kuery,query:'*jobspikr_inferred_location_error*+and+site_name.raw:${site_name_val}+and+error_sub_type.raw:${error_subType_val}'))`\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/jp_inferred_location_error_by_site?filter[site_name]=${siteName.value}&filter[time]=${fromTime.value}&filter[error_sub_type]=${errorSubType.value}&commit=${'Get Data'}`\n }\n\n return \n \n\n \n \n \n \n \n setSiteName(option)} />\n Please type atleast 3 characters while searching the sitename!
\n \n \n \n setFromTime(option)} />\n \n \n \n setErrorSubType(option)} />\n \n
\n \n \n \n \n \n \n
\n \n \n \n \n \n Click here to see below graph in kibana
\n \n \n \n \n\n}\n\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home } from \"react-feather\";\nimport moment from \"moment\";\nimport DatePicker from \"react-datepicker\";\nimport { Info } from 'react-feather';\nimport ReactTooltip from 'react-tooltip';\nimport DataTable from \"react-data-table-component\";\nimport axios from \"axios\";\n\n\nimport { KIBANA_JP_URL } from \"../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints\";\n\nexport default function DedupTracker() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const tabNameFromSearchUrl = new URLSearchParams(search).get(\"filter[tab_name]\");\n const tabNameFromUrl = window.location.hash.substr(1);\n const searchParams = {\n uniqId: new URLSearchParams(search).get(\"filter[uniq_id]\"),\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\"),\n tabName: tabNameFromSearchUrl ? tabNameFromSearchUrl : tabNameFromUrl\n }\n const now = new Date();\n const [uniqId, setUniqId] = useState(\"\");\n const [siteName, setSiteName] = useState(\"jobspikr_com_dedup_record_linkage_pc_jobspikr\");\n const [rssQueueInfo, setRssQueueInfo] = useState([]);\n const [queueSizeInfo, setQueueSizeInfo] = useState([]);\n const [siteRssCount, setSiteRssCount] = useState([]);\n const [jobStatusData, setJobStatusData] = useState([]);\n const [fromTime, setFromTime] = useState(\"\");\n const [toTime, setToTime] = useState(\"\");\n const [activeTab, setActiveTab] = useState(tabNameFromUrl ? tabNameFromUrl : 'overall_dedup_status');\n const [fromDate, setFromDate] = useState(new Date(moment().subtract(7, 'days')));\n const [toDate, setToDate] = useState(now);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n setSearchParamsData()\n }, []);\n\n const rssQueueInfoColumns = [\n { name: 'Site', selector: 'site_name', sortable: true, cell: (each) => {each?.site_name} },\n { name: 'Rss Q Size', selector: 'queue_size', sortable: true, cell: (each) => <>\n {each?.queue_size} \n \n Go to Queue Size View\n },\n ]\n\n const queueSizeInfoColumns = [\n { name: 'Queue Name', selector: 'queue_name', sortable: true },\n { name: 'Queue Size', selector: 'queue_size', sortable: true, cell: (each) => <>\n {each?.queue_size} \n \n Go to Queue Size View\n },\n { name: 'Server Name', selector: 'server', sortable: true },\n ]\n\n const siteRssCountColumns = [\n { name: 'Site Name', selector: 'site', sortable: true },\n { name: 'Crawl Date', selector: 'date', sortable: true },\n { name: 'Rss Count', selector: 'rss_count', sortable: true },\n ]\n\n const UniqIdColumns = [\n { name: 'Uniq Id', selector: 'uniq_id', sortable: true },\n { name: 'Duplicate Status', selector: 'duplicate_status', sortable: true },\n { name: 'Duplicate of', selector: 'duplicate_of', sortable: true },\n ]\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate));\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate));\n }\n if (searchParams.tabName && searchParams.tabName != activeTab) {\n setActiveTab(searchParams.tabName);\n }\n if (commit == 'Get Data' && searchParams.fromDate && searchParams.toDate) {\n setActiveTab('overall_dedup_status');\n fetchOverallDedupStatusData(searchParams.fromDate, searchParams.toDate)\n }\n if (commit == 'Get Data' && searchParams.uniqId) {\n setActiveTab('job_status_by_uniq_id');\n fetchJobStatusByUniqIdData(searchParams.uniqId);\n }\n else {\n fetchOverallDedupStatusData(fromDate, toDate);\n }\n }\n\n function fetchOverallDedupStatusData(from_date = fromDate, to_date = toDate) {\n setLoading(true)\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/dedup_tracker?filter[from_date]=${moment(from_date).format('YYYY/MM/DD')}&filter[to_date]=${moment(to_date).format('YYYY/MM/DD')}`)\n .then(res => {\n setSiteName(res.data.site_name);\n setRssQueueInfo(res.data.rss_queue_info);\n setQueueSizeInfo(res.data.queue_size_info);\n setSiteRssCount(res.data.site_rss_count);\n setUniqId(res.data.uniq_id);\n setJobStatusData(res.data.job_status_data);\n setFromTime(res.data.from_time);\n setToTime(res.data.to_time);\n setLoading(false);\n })\n .catch(err => {\n console.log(err?.message || 'Oops something went wrong');\n setLoading(false);\n })\n }\n\n function fetchJobStatusByUniqIdData(uniq_id = uniqId) {\n setLoading(true)\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/dedup_tracker?filter[uniq_id]=${uniq_id}`)\n .then(res => {\n setSiteName(res.data.site_name);\n setRssQueueInfo(res.data.rss_queue_info);\n setQueueSizeInfo(res.data.queue_size_info);\n setSiteRssCount(res.data.site_rss_count);\n setUniqId(res.data.uniq_id);\n setJobStatusData(res.data.job_status_data);\n setFromTime(res.data.from_time);\n setToTime(res.data.to_time);\n setLoading(false);\n })\n .catch(err => {\n console.log(err?.message || 'Oops something went wrong');\n setLoading(false);\n })\n }\n\n function overallDedupStatusKibanaUrl(){\n return `${KIBANA_JP_URL}app/kibana#/dashboard/bf2c8c20-9400-11ea-8910-5d7412b1fc26?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${fromTime}',to:'${toTime}'))&_a=(description:'',filters:!(('$state':(store:appState),meta:(alias:'Posted+in+last+1+month',disabled:!f,index:'1bfae8a0-47e6-11ea-8910-5d7412b1fc26',key:post_date,negate:!f,params:(gte:now-1M,lt:now),type:range),range:(post_date:(gte:now-1M,lt:now)))),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(),gridData:(h:15,i:'146c26dc-d721-43aa-9829-72ef9de8e06b',w:24,x:0,y:0),id:'3f6dd400-93fe-11ea-806d-951c44727d29',panelIndex:'146c26dc-d721-43aa-9829-72ef9de8e06b',type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:c217b9e5-f474-4690-a30c-8bc759b61fcb,w:24,x:24,y:0),id:e68ab380-93fd-11ea-806d-951c44727d29,panelIndex:c217b9e5-f474-4690-a30c-8bc759b61fcb,type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:14,i:ba2983f8-b183-4c3c-bd48-09fb11f2d51e,w:48,x:0,y:15),id:c0f7cbb0-93ff-11ea-8910-5d7412b1fc26,panelIndex:ba2983f8-b183-4c3c-bd48-09fb11f2d51e,type:visualization,version:'7.5.1'),(embeddableConfig:(),gridData:(h:15,i:f623a92e-4afd-42ea-b31b-5a9922885127,w:48,x:0,y:29),id:'73579f80-93fe-11ea-8910-5d7412b1fc26',panelIndex:f623a92e-4afd-42ea-b31b-5a9922885127,type:visualization,version:'7.5.1')),query:(language:kuery,query:''),timeRestore:!f,title:'JPP+QA+-+Duplication+Status+Dashboard',viewMode:view)`\n }\n\n function jobStatusByUniqIdKibanaUrl(){\n return `${KIBANA_JP_URL}app/kibana#/discover?_g=(refreshInterval:(pause:!t,value:0),time:(from:now-30d,to:now))&_a=(columns:!(_source),index:'1bfae8a0-47e6-11ea-8910-5d7412b1fc26',interval:auto,query:(language:kuery,query:'uniq_id:+%22${uniqId}%22'),sort:!(!('@timestamp',desc)))`\n }\n\n const handleInputChange = event => {\n setUniqId(event.target.value);\n }\n\n const handleJobStatusByUniqIdData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/dedup_tracker?filter[uniq_id]=${uniqId}&filter[tab_name]=job_status_by_uniq_id&commit=${'Get Data'}`\n }\n\n const handleOverallDedupStatusData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/dedup_tracker?filter[from_date]=${moment(fromDate).format('YYYY/MM/DD')}&filter[to_date]=${moment(toDate).format('YYYY/MM/DD')}&filter[tab_name]=overall_dedup_status&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? Dedup Tracker : 'Dedup Tracker'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n\n}\n","import axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport { Home } from \"react-feather\";\nimport Loader from \"react-loader-spinner\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { Container, Col, Row, Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader } from \"reactstrap\";\n\n// Kibana Version 8.0 link for jobspikr\nimport { KIBANA_JP_URL } from '../../../Common/KibanaAPIEndpoints/KibanaAPIEndpoints'\n\nexport default function Countries30dVs7d() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n indexName: new URLSearchParams(search).get(\"filter[jp_index_name]\")\n }\n const [indexName, setIndexName] = useState({ label: \"jobspikr_v3_data-*\", value: \"jobspikr_v3_data-*\" });\n const [last30Days, setLast30Days] = useState([]);\n const [last7Days, setLast7Days] = useState([]);\n const [missingCountries, setMissingCountries] = useState([]);\n const [newCountries, setNewCountries] = useState([]);\n const [last30dSearchText, setLast30dSearchText] = useState('');\n const [last7dSearchText, setLast7dSearchText] = useState('');\n const [missingSearchText, setMissingSearchText] = useState('');\n const [newSearchText, setNewSearchText] = useState('');\n const [last30dSearch, setLast30dSearch] = useState([]);\n const [last7dSearch, setLast7dSearch] = useState([]);\n const [missingSearch, setMissingSearch] = useState([]);\n const [newSearch, setNewSearch] = useState([]);\n const [loading, setLoading] = useState(false);\n\n\n const indexOptions = [\n { label: \"jobspikr_v3_data-*\", value: \"jobspikr_v3_data-*\" },\n { label: \"jobspikr_v3_staging_data-*\", value: \"jobspikr_v3_staging_data-*\" }\n ]\n const lastDaysColumns = [\n { name: \"Country\", selector: \"country\", sortable: true, center: true },\n { name: \"Data count\", selector: \"data_count\", sortable: true, center: true },\n\n ]\n const missingColumns = [\n { name: \"Country\", selector: \"country\", sortable: true, center: true },\n\n ]\n\n useEffect(() => {\n setSearchParamsData()\n }, []);\n\n function setSearchParamsData() {\n if (searchParams.indexName && searchParams.indexName != indexName.value) {\n setIndexName(indexOptions.filter(option => option.value == searchParams.indexName)[0])\n }\n if (commit == 'Get Data' && searchParams.indexName) {\n fetchData(searchParams.indexName)\n }\n else {\n fetchData()\n }\n }\n\n function fetchData(IndexName = indexName.value) {\n setLoading(true)\n\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/countries_30d_vs_7d?filter[jp_index_name]=${IndexName}`)\n .then(res => {\n setLast30Days(res.data.last_30_days);\n setLast7Days(res.data.last_7_days);\n setMissingCountries(res.data.missing_countries);\n setNewCountries(res.data.new_countries)\n setLast30dSearch(res.data.last_30_days);\n setLast7dSearch(res.data.last_7_days);\n setMissingSearch(res.data.missing_countries);\n setNewSearch(res.data.new_countries);\n setLoading(false);\n }).catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n\n setLoading(false);\n })\n }\n\n const handleLast30dChange = event => {\n if (event.target.value == '') {\n setLast30dSearch(last30Days)\n }\n else {\n console.log(event.target.value, 'value', last30Days.filter(item => item.country.includes(event.target.value)))\n setLast30dSearch(last30Days.filter(item => item.country.toLowerCase().includes(event.target.value)))\n }\n setLast30dSearchText(event.target.value)\n }\n\n const handleLast7dChange = event => {\n if (event.target.value == '') {\n setLast7dSearch(last30Days)\n }\n else {\n setLast7dSearch(last7Days.filter(item => item.country.toLowerCase().includes(event.target.value)))\n }\n setLast7dSearchText(event.target.value)\n }\n\n const handleMissingCountriesChange = event => {\n if (event.target.value == '') {\n setMissingSearch(missingCountries)\n }\n else {\n setMissingSearch(missingCountries.filter(item => item.country.toLowerCase().includes(event.target.value)))\n }\n setMissingSearchText(event.target.value)\n }\n\n const handleNewCountriesChange = event => {\n if (event.target.value == '') {\n setNewSearch(newCountries)\n }\n else {\n setNewSearch(newCountries.filter(item => item.country.toLowerCase().includes(event.target.value)))\n }\n setNewSearchText(event.target.value)\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/countries_30d_vs_7d?filter[jp_index_name]=${indexName.value}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? Countries: Last 30 days vs 7 days : 'Countries: Last 30 days vs 7 days'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setIndexName(option)} />\n \n \n \n \n
\n \n \n {loading ? : \n \n \n Countries: Last 30 days vs 7 days JP index name:{indexName.value}\n
\n \n \n \n \n Countries crawled in last 30 days:{last30Days.length}
\n Click here to see below table in kibana\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n \n Countries crawled in last 7 days:{last7Days.length}
\n Click here to see below table in kibana\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n
\n \n \n Missing countries:{missingCountries.length}
\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n \n New countries:{newCountries.length}
\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n
\n \n }\n \n}","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home, Info } from \"react-feather\";\nimport moment from \"moment\";\nimport axios from \"axios\";\nimport DatePicker from \"react-datepicker\";\nimport DataTable from \"react-data-table-component\";\nimport Loader from \"react-loader-spinner\";\nimport Select, { components } from \"react-select\";\nimport { toast } from 'react-toastify'\n\nexport default function Index() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n siteName: new URLSearchParams(search).get(\"filter[jobspikr_site_name]\"),\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\")\n }\n const [siteName, setSiteName] = useState({label: 'All', value: '*'});\n const [siteNameOptions, setSiteNameOptions] = useState([]);\n const [uploadStatsData, setUploadStatsData] = useState([]);\n const [dateArr, setDateArr] = useState([]);\n const now = new Date();\n const [fromDate, setFromDate] = useState(new Date(moment().subtract(7, 'days')));\n const [toDate, setToDate] = useState(now);\n const [loading, setLoading] = useState(false);\n\n const [searchText, setSearchText] = useState('');\n const [searchResults, setSearchResults]= useState([]);\n\n useEffect(() => {\n setSearchParamsData();\n axios.get('/api/v1/internal/jobspikr_drl_sites')\n .then(res => {\n let site_names = []\n res.data.site_names.forEach(item => {\n site_names.push({ label: item, value: item })\n })\n site_names.push({ label: 'All', value: '*' })\n setSiteNameOptions(site_names);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n toast.error(err?.message || 'Oops something went wrong');\n });\n }, []);\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.siteName && searchParams.siteName != siteName.value) {\n setSiteName({ label: searchParams.siteName == \"*\" ? \"All\" : searchParams.siteName, value: searchParams.siteName });\n }\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate));\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate));\n }\n if (commit == 'Get Data') {\n fetchDataWithParams(searchParams);\n buildTableColums();\n }\n else {\n fetchData();\n }\n }\n\n function fetchDataWithParams(filterParams) {\n setLoading(true)\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/upload_stats_of_jp_sites?filter[jobspikr_site_name]=${filterParams.siteName}&filter[from_date]=${moment(filterParams.fromDate).format('YYYY/MM/DD')}&filter[to_date]=${moment(filterParams.toDate).format('YYYY/MM/DD')}`)\n .then(res => {\n setUploadStatsData(res.data?.upload_stats_data);\n setSearchResults(res.data?.upload_stats_data);\n setDateArr(res.data?.date_header_arr);\n setLoading(false)\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n toast.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n })\n }\n\n function fetchData() {\n setLoading(true)\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/upload_stats_of_jp_sites`)\n .then(res => {\n setUploadStatsData(res.data?.upload_stats_data);\n setSearchResults(res.data?.upload_stats_data);\n setDateArr(res.data?.date_header_arr);\n setLoading(false)\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n toast.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n })\n }\n\n function buildTableColums() {\n const tableColumns = [\n {name: 'Site Name', selector: 'site_name', sortable: true, cell: (each) => \n {each.site_name}\n , grow: 3},\n ]\n dateArr.map(item => tableColumns.push({name: `${item}`, selector: `${item.replaceAll(\"/\", \"\")}`, sortable: true}));\n return tableColumns;\n }\n\n const handleSearch = event =>{\n if(event.target.value == ''){\n setSearchResults(uploadStatsData);\n }\n else{\n setSearchResults(searchFromData(event.target.value));\n }\n setSearchText(event.target.value);\n }\n\n function searchFromData(value){\n var search_result = uploadStatsData.filter(item => item.site_name.includes(value));\n if (search_result.length > 0){\n return search_result;\n }\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/upload_stats_of_jp_sites?filter[jobspikr_site_name]=${siteName.value}&filter[from_date]=${moment(fromDate).format('YYYY/MM/DD')}&filter[to_date]=${moment(toDate).format('YYYY/MM/DD')}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? Upload stats of JP sites : 'Upload stats of JP sites'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setSiteName(option)} />\n \n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n \n
\n \n \n\n \n \n Upload Count
\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n \n\n}\n\n","import axios from \"axios\";\nimport moment from \"moment\";\nimport React, { useEffect, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport DatePicker from \"react-datepicker\";\nimport { Home } from \"react-feather\";\nimport Loader from \"react-loader-spinner\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { Container, Row, Col, BreadcrumbItem, Breadcrumb, Card, CardBody } from \"reactstrap\";\n\n\n\nexport default function UploadCountVsIndexCountOfJpSites() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n siteName: new URLSearchParams(search).get(\"filter[site_name]\"),\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\"),\n platformType: new URLSearchParams(search).get(\"filter[platform_type]\")\n }\n\n const [fromDate, setFromDate] = useState(null);\n const [toDate, setToDate] = useState(null);\n const [platformType, setPlatformType] = useState({ label: 'All', value: null });\n const [data, setData] = useState([])\n const [searchData, setSearchData] = useState([])\n const [searchText, setSearchText] = useState('');\n const [loading, setLoading] = useState(false);\n\n const platformTypesOptions = [\n { label: 'All', value: null },\n { label: \"f500\", value: 'f500' },\n { label: \"Job Board\", value: \"job_board\" },\n { label: \"Platforms\", value: \"platforms\" },\n { label: \"Common\", value: 'common' }\n ]\n\n const columnsWithCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n { name: `Upload count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"upload_count_custom_date\", sortable: true, center: true },\n { name: `Indexed count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"indexed_count_custom_date\", sortable: true, center: true }\n ]\n\n const columnsWithOutCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n ]\n\n useEffect(() => {\n setSearchParamsData();\n }, []);\n\n function setSearchParamsData() {\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate))\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate))\n }\n if (searchParams.platformType && searchParams.platformType != platformType.value) {\n setPlatformType(platformTypesOptions.filter(item => item.value == searchParams.platformType)[0])\n }\n if (commit == 'Get Data') {\n\n fetchData(searchParams.fromDate, searchParams.toDate, searchParams?.platformType || '')\n }\n else {\n fetchData();\n }\n\n }\n\n function fetchData(FromDate = fromDate, ToDate = toDate, PlatformType = platformType.value) {\n setLoading(true);\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/upload_count_vs_index_count_of_jp_sites?filter[from_date]=${FromDate ? moment(FromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${ToDate ? moment(ToDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${PlatformType ? PlatformType : ''}`)\n .then(res => {\n setData(res.data.data);\n setSearchData(res.data.data);\n setLoading(false);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n\n })\n }\n\n const handleInputChange = event => {\n if (event.target.value == '') {\n setSearchData(data);\n }\n else {\n setSearchData(data.filter(item => item.site_name.includes(event.target.value)))\n }\n setSearchText(event.target.value)\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/upload_count_vs_index_count_of_jp_sites?filter[from_date]=${fromDate ? moment(fromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${toDate ? moment(toDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${platformType.value ? platformType.value : ''}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n\n \n \n \n \n \n \n \n \n \n Internal QA\n \n \n {commit == 'Get Data' ? Upload vs Indexed count of JP sites : 'Upload vs Indexed count of JP sites'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n
\n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n setPlatformType(option)} />\n \n \n \n \n
\n \n \n {loading ? : \n \n Upload count vs Indexed count\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n }\n \n}","import axios from \"axios\";\nimport moment from \"moment\";\nimport React, { Fragment, useEffect, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport DatePicker from \"react-datepicker\";\nimport { Home } from \"react-feather\";\nimport Loader from \"react-loader-spinner\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { toast } from \"react-toastify\";\nimport { Container, Row, Col, BreadcrumbItem, Breadcrumb, Card, CardBody, Modal, ModalHeader, ModalBody, ModalFooter } from \"reactstrap\";\n\n\n\nexport default function CountDataOfMostUsedSites() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\"),\n platformType: new URLSearchParams(search).get(\"filter[platform_type]\")\n }\n\n const [fromDate, setFromDate] = useState(null);\n const [toDate, setToDate] = useState(null);\n const [platformType, setPlatformType] = useState({ label: 'All', value: null });\n const [data, setData] = useState([])\n const [searchData, setSearchData] = useState([])\n const [searchText, setSearchText] = useState('')\n const [loading, setLoading] = useState(false);\n const [showModal, setShowModal] = useState(false);\n const [topSites, setTopSites] = useState([]);\n const [siteNamesOptions, setSiteNamesOptions] = useState([]);\n const [siteNames, setSiteNames] = useState([]);\n\n const platformTypesOptions = [\n { label: 'All', value: null },\n { label: \"f500\", value: 'f500' },\n { label: \"Job Board\", value: \"job_board\" },\n { label: \"Platforms\", value: \"platforms\" },\n { label: \"Common\", value: 'common' }\n ]\n\n const columnsWithCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n { name: `Upload count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"upload_count_custom_date\", sortable: true, center: true },\n { name: `Indexed count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"indexed_count_custom_date\", sortable: true, center: true }\n ]\n\n const columnsWithOutCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n ]\n\n useEffect(() => {\n getSiteNames();\n setSearchParamsData();\n }, []);\n\n function getSiteNames() {\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/site_names`)\n .then(res => {\n setSiteNamesOptions(res.data.site_names)\n }).catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n })\n }\n\n function setSearchParamsData() {\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate))\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate))\n }\n if (searchParams.platformType && platformType != platformType.value) {\n setPlatformType(platformTypesOptions.filter(item => item.value == searchParams.platformType)[0])\n }\n if (commit == 'Get Data') {\n\n fetchData(searchParams.fromDate, searchParams.toDate, searchParams?.platformType || '')\n }\n else {\n fetchData();\n }\n\n }\n\n function fetchData(FromDate = fromDate, ToDate = toDate, PlatformType = platformType.value) {\n setLoading(true);\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/count_data_of_most_used_sites?filter[from_date]=${FromDate ? moment(FromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${ToDate ? moment(ToDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${PlatformType ? PlatformType : ''}`)\n .then(res => {\n setData(res.data.data);\n setSearchData(res.data.data);\n setTopSites(res.data.top_sites.map(item => ({ label: item, value: item })));\n setSiteNames(res.data.site_names.map(item => ({ label: item, value: item })))\n setLoading(false);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n\n })\n }\n\n const handleInputChange = event => {\n if (event.target.value == '') {\n setSearchData(data);\n }\n else {\n setSearchData(data.filter(item => item.site_name.includes(event.target.value)))\n }\n setSearchText(event.target.value)\n }\n\n const handleGetData = () => {\n window.location.href = `/jobspikr_v3_internal/jobspikr_graphs/count_data_of_most_used_sites?filter[from_date]=${fromDate ? moment(fromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${toDate ? moment(toDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${platformType.value ? platformType.value : ''}&commit=${'Get Data'}`\n }\n\n const handleAddSites = () => {\n setShowModal(false);\n axios.post(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/save_top_sites`, { sites: { site_names: topSites.length == 0 ? '' : topSites.map(item => item.value) } })\n .then(res => {\n if (res.data.status == 200) {\n toast.success('Site Added Successfully');\n window.location.reload();\n fetchData()\n }\n else {\n toast.error('Oops something went wrong')\n\n\n }\n })\n .catch(err => {\n console.log(err?.message || 'Oops something went wrong');\n })\n }\n\n return \n {loading ? :\n \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n Internal QA\n \n \n {commit == 'Get Data' ? Upload vs Indexed count of most used JP sites : 'Upload vs Indexed count of most used JP sites'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n
\n \n \n \n \n setTopSites(option)} />\n \n
\n \n \n \n \n\n \n \n \n \n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n setPlatformType(option)} />\n \n \n \n \n
\n \n \n \n \n Upload count vs Indexed count\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n \n }\n \n}\n","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, } from \"reactstrap\";\nimport { Home } from \"react-feather\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport DataTable from \"react-data-table-component\";\nimport axios from \"axios\";\nimport Loader from \"react-loader-spinner\";\n\nexport default function VolumeOfListingsFromTopCountries() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const [platformType, setPlatformType] = useState({ label: 'All', value: null });\n const [comparisionValue, setComparisionValue] = useState({ label: \"Day on Day\", value: \"day\" });\n const [columns, setColumns] = useState([]);\n const [data, setData] = useState([]);\n const [loading,setLoading]=useState(false);\n const platformTypesOptions = [\n { label: 'All', value: null },\n { label: \"f500\", value: 'f500' },\n { label: \"Job Board\", value: \"job_board\" },\n { label: \"Platforms\", value: \"platforms\" },\n { label: \"Common\", value: 'common' }\n ]\n const comparisionOptions = [\n { label: \"Week of Week\", value: 'week' },\n { label: \"Month on Month\", value: \"month\" },\n { label: \"Day on Day\", value: \"day\" }\n ]\n const searchParams = {\n comparisionValue: new URLSearchParams(search).get(\"filter[comparision_type]\"),\n platformType: new URLSearchParams(search).get(\"filter[platform_type]\")\n }\n\n\n useEffect(() => {\n setSearchParamsData()\n \n }, []);\n\n function setSearchParamsData(){\n console.log(searchParams)\n if (searchParams.comparisionValue && searchParams.comparisionValue != comparisionValue.value) {\n setComparisionValue(comparisionOptions.filter(item => item.value == searchParams.comparisionValue)[0])\n }\n if (searchParams.platformType && searchParams.platformType != platformType.value) {\n let filterPlatform=platformTypesOptions.filter(item => item.value == searchParams.platformType)\n setPlatformType(filterPlatform.length == 0 ? { label: 'All', value: null } : filterPlatform[0] )\n }\n if (commit == 'Get Data' && searchParams.comparisionValue) {\n\n fetchData(searchParams.comparisionValue, searchParams?.platformType || '')\n }\n else{\n fetchData()\n }\n }\n\n function fetchData(ComparisionValue=comparisionValue.value,PlatformType=platformType.value){\n setLoading(true)\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/volume_of_listings_from_top_countries?filter[comparision_type]=${ComparisionValue}&filter[platform_type]=${PlatformType ? PlatformType : ''}`)\n .then(res => {\n let newColumns=res.data.dates.map(item =>({name: item, sortable: true, center: true, cell: row => {row[item]}
{row[`${item}_percentage`]}
}))\n setColumns([{name: \"Country\", selector: \"country\", center: true, sortable: true, cell: row=> {row[\"country\"]}
},...newColumns]);\n setData(res.data.data)\n setLoading(false)\n })\n .catch(err => {\n console.log(err?.message || 'Oops something went wrong')\n setLoading(false)\n })\n }\n\n const handleGetData= () =>{\n window.location.href=`/jobspikr_v3_internal/jobspikr_graphs/volume_of_listings_from_top_countries?filter[comparision_type]=${comparisionValue.value}&filter[platform_type]=${platformType?.value || ''}&commit=${'Get Data'}`\n }\n\n \n return \n \n
\n \n Internal Dashboard
\n\n \n \n \n \n \n \n \n \n \n Internal QA\n \n \n {commit == 'Get Data' ? Volume of job listings from top countries : 'Volume of job listings from top countries'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setComparisionValue(option)}\n />\n \n \n \n setPlatformType(option)} />\n \n \n \n \n
\n \n \n {loading ? :\n \n {searchParams.comparisionValue ? searchParams.comparisionValue : 'Day on Day'} comparision of volume of job listings from top 10 countries
\n \n \n }\n \n}","import axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport { Home } from \"react-feather\";\nimport Loader from \"react-loader-spinner\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Container, Col, Row, Breadcrumb, BreadcrumbItem, Card, CardBody } from \"reactstrap\";\n\n\nexport default function FreshnessCheckStats() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const [columns, setColumns] = useState([]);\n const [data, setData] = useState([])\n const [loading,setLoading]=useState(false);\n\n useEffect(() => {\n setLoading(true)\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/freshness_check_stats`)\n .then(res => {\n setData(res.data.data);\n let hash = {},column=[]\n column.push({name: \"Stats Type\", selector: \"stats_type\", sortable: true, center: true, grow: 2})\n res.data.dates.forEach(item => {\n hash = {}\n hash[\"name\"]=item\n hash[\"sortable\"]=true\n hash[\"center\"]=true\n hash[\"cell\"]=row =>{row[item]}
{row[`${item}_percentage`]}
\n column.push(hash)\n })\n setColumns(column)\n setLoading(false)\n })\n .catch(err =>{\n console.error(err?.message || 'Oops something went wrong')\n setLoading(false);\n })\n }, [])\n\n return \n \n \n \n Internal Dashboard
\n\n \n \n \n \n \n \n \n \n \n Internal QA\n \n \n Freshness check stats\n \n \n \n
\n
\n {loading ? :\n \n \n \n }\n \n}","import React, { useEffect, useState } from \"react\";\nimport { Container, Row, Col, Breadcrumb, BreadcrumbItem, Card, CardBody, Nav, NavItem, NavLink, TabContent, TabPane } from \"reactstrap\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { Home, Info } from \"react-feather\";\nimport moment from \"moment\";\nimport axios from \"axios\";\nimport DatePicker from \"react-datepicker\";\nimport DataTable from \"react-data-table-component\";\nimport Loader from \"react-loader-spinner\";\nimport Select, { components } from \"react-select\";\nimport { toast } from 'react-toastify'\n\nimport { NewJpInternalBasePoint } from '../../../../Common/BaseEsPoints/InternalEsBasePoint';\n\nexport default function Index() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n siteName: new URLSearchParams(search).get(\"filter[jobspikr_site_name]\"),\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\")\n }\n const [siteName, setSiteName] = useState({label: 'All', value: '*'});\n const [siteNameOptions, setSiteNameOptions] = useState([]);\n const [uploadStatsData, setUploadStatsData] = useState([]);\n const [dateArr, setDateArr] = useState([]);\n const now = new Date();\n const [fromDate, setFromDate] = useState(new Date(moment().subtract(7, 'days')));\n const [toDate, setToDate] = useState(now);\n const [loading, setLoading] = useState(false);\n\n const [searchText, setSearchText] = useState('');\n const [searchResults, setSearchResults]= useState([]);\n\n useEffect(() => {\n setSearchParamsData();\n axios.get('/api/v1/internal/jobspikr_drl_sites')\n .then(res => {\n let site_names = []\n res.data.site_names.forEach(item => {\n site_names.push({ label: item, value: item })\n })\n site_names.push({ label: 'All', value: '*' })\n setSiteNameOptions(site_names);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n toast.error(err?.message || 'Oops something went wrong');\n });\n }, []);\n\n function setSearchParamsData() {\n console.log(\"searchParams\", searchParams);\n if (searchParams.siteName && searchParams.siteName != siteName.value) {\n setSiteName({ label: searchParams.siteName == \"*\" ? \"All\" : searchParams.siteName, value: searchParams.siteName });\n }\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate));\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate));\n }\n if (commit == 'Get Data') {\n fetchDataWithParams(searchParams);\n buildTableColums();\n }\n else {\n fetchData();\n }\n }\n\n function fetchDataWithParams(filterParams) {\n setLoading(true)\n axios.get(`/api/v2/jobspikr_v3_internal/jobspikr_graphs/upload_stats_of_jp_sites?filter[jobspikr_site_name]=${filterParams.siteName}&filter[from_date]=${moment(filterParams.fromDate).format('YYYY/MM/DD')}&filter[to_date]=${moment(filterParams.toDate).format('YYYY/MM/DD')}`)\n .then(res => {\n setUploadStatsData(res.data?.upload_stats_data);\n setSearchResults(res.data?.upload_stats_data);\n setDateArr(res.data?.date_header_arr);\n setLoading(false)\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n toast.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n })\n }\n\n function fetchData() {\n setLoading(true)\n axios.get(`/api/v2/jobspikr_v3_internal/jobspikr_graphs/upload_stats_of_jp_sites`)\n .then(res => {\n setUploadStatsData(res.data?.upload_stats_data);\n setSearchResults(res.data?.upload_stats_data);\n setDateArr(res.data?.date_header_arr);\n setLoading(false)\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n toast.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n })\n }\n\n function buildTableColums() {\n const tableColumns = [\n {name: 'Site Name', selector: 'site_name', sortable: true, cell: (each) => \n {each.site_name}\n , grow: 3},\n ]\n dateArr.map(item => tableColumns.push({name: `${item}`, selector: `${item.replaceAll(\"/\", \"\")}`, sortable: true}));\n return tableColumns;\n }\n\n const handleSearch = event =>{\n if(event.target.value == ''){\n setSearchResults(uploadStatsData);\n }\n else{\n setSearchResults(searchFromData(event.target.value));\n }\n setSearchText(event.target.value);\n }\n\n function searchFromData(value){\n var search_result = uploadStatsData.filter(item => item.site_name.includes(value));\n if (search_result.length > 0){\n return search_result;\n }\n }\n\n const handleGetData = () => {\n window.location.href = `${NewJpInternalBasePoint}/jobspikr_graphs/upload_stats_of_jp_sites?filter[jobspikr_site_name]=${siteName.value}&filter[from_date]=${moment(fromDate).format('YYYY/MM/DD')}&filter[to_date]=${moment(toDate).format('YYYY/MM/DD')}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? Upload stats of JP sites : 'Upload stats of JP sites'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n setSiteName(option)} />\n \n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n \n
\n \n \n\n \n \n Upload Count
\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n \n\n}\n\n","import axios from \"axios\";\nimport moment from \"moment\";\nimport React, { Fragment, useEffect, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport DatePicker from \"react-datepicker\";\nimport { Home } from \"react-feather\";\nimport Loader from \"react-loader-spinner\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { toast } from \"react-toastify\";\nimport { Container, Row, Col, BreadcrumbItem, Breadcrumb, Card, CardBody, Modal, ModalHeader, ModalBody, ModalFooter } from \"reactstrap\";\n\nimport { NewJpInternalBasePoint } from '../../../../Common/BaseEsPoints/InternalEsBasePoint';\n\nexport default function CountDataOfMostUsedSites() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\"),\n platformType: new URLSearchParams(search).get(\"filter[platform_type]\")\n }\n\n const [fromDate, setFromDate] = useState(null);\n const [toDate, setToDate] = useState(null);\n const [platformType, setPlatformType] = useState({ label: 'All', value: null });\n const [data, setData] = useState([])\n const [searchData, setSearchData] = useState([])\n const [searchText, setSearchText] = useState('')\n const [loading, setLoading] = useState(false);\n const [showModal, setShowModal] = useState(false);\n const [topSites, setTopSites] = useState([]);\n const [siteNamesOptions, setSiteNamesOptions] = useState([]);\n const [siteNames, setSiteNames] = useState([]);\n\n const platformTypesOptions = [\n { label: 'All', value: null },\n { label: \"f500\", value: 'f500' },\n { label: \"Job Board\", value: \"job_board\" },\n { label: \"Platforms\", value: \"platforms\" },\n { label: \"Common\", value: 'common' }\n ]\n\n const columnsWithCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n { name: `Upload count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"upload_count_custom_date\", sortable: true, center: true },\n { name: `Indexed count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"indexed_count_custom_date\", sortable: true, center: true }\n ]\n\n const columnsWithOutCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n ]\n\n useEffect(() => {\n getSiteNames();\n setSearchParamsData();\n }, []);\n\n function getSiteNames() {\n axios.get(`/api/v1/jobspikr_v3_internal/jobspikr_graphs/site_names`)\n .then(res => {\n setSiteNamesOptions(res.data.site_names)\n }).catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n })\n }\n\n function setSearchParamsData() {\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate))\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate))\n }\n if (searchParams.platformType && platformType != platformType.value) {\n setPlatformType(platformTypesOptions.filter(item => item.value == searchParams.platformType)[0])\n }\n if (commit == 'Get Data') {\n\n fetchData(searchParams.fromDate, searchParams.toDate, searchParams?.platformType || '')\n }\n else {\n fetchData();\n }\n\n }\n\n function fetchData(FromDate = fromDate, ToDate = toDate, PlatformType = platformType.value) {\n setLoading(true);\n axios.get(`/api/v2/jobspikr_v3_internal/jobspikr_graphs/count_data_of_most_used_sites?filter[from_date]=${FromDate ? moment(FromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${ToDate ? moment(ToDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${PlatformType ? PlatformType : ''}`)\n .then(res => {\n setData(res.data.data);\n setSearchData(res.data.data);\n setTopSites(res.data.top_sites.map(item => ({ label: item, value: item })));\n setSiteNames(res.data.site_names.map(item => ({ label: item, value: item })))\n setLoading(false);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n\n })\n }\n\n const handleInputChange = event => {\n if (event.target.value == '') {\n setSearchData(data);\n }\n else {\n setSearchData(data.filter(item => item.site_name.includes(event.target.value)))\n }\n setSearchText(event.target.value)\n }\n\n const handleGetData = () => {\n window.location.href = `${NewJpInternalBasePoint}/jobspikr_graphs/count_data_of_most_used_sites?filter[from_date]=${fromDate ? moment(fromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${toDate ? moment(toDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${platformType.value ? platformType.value : ''}&commit=${'Get Data'}`\n }\n\n const handleAddSites = () => {\n setShowModal(false);\n axios.post(`/api/v2/jobspikr_v3_internal/jobspikr_graphs/save_top_sites`, { sites: { site_names: topSites.length == 0 ? '' : topSites.map(item => item.value) } })\n .then(res => {\n if (res.data.status == 200) {\n toast.success('Site Added Successfully');\n window.location.reload();\n fetchData()\n }\n else {\n toast.error('Oops something went wrong')\n\n\n }\n })\n .catch(err => {\n console.log(err?.message || 'Oops something went wrong');\n })\n }\n\n return \n {loading ? :\n \n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n Internal QA\n \n \n {commit == 'Get Data' ? Upload vs Indexed count of most used JP sites : 'Upload vs Indexed count of most used JP sites'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n
\n \n \n \n \n setTopSites(option)} />\n \n
\n \n \n \n \n\n \n \n \n \n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n setPlatformType(option)} />\n \n \n \n \n
\n \n \n \n \n Upload count vs Indexed count\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n \n}\n \n}\n","import axios from \"axios\";\nimport moment from \"moment\";\nimport React, { useEffect, useState } from \"react\";\nimport DataTable from \"react-data-table-component\";\nimport DatePicker from \"react-datepicker\";\nimport { Home } from \"react-feather\";\nimport Loader from \"react-loader-spinner\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { Container, Row, Col, BreadcrumbItem, Breadcrumb, Card, CardBody } from \"reactstrap\";\n\nimport { NewJpInternalBasePoint, NewInternalBasePoint } from '../../../../Common/BaseEsPoints/InternalEsBasePoint';\n\nexport default function UploadCountVsIndexCountOfJpSites() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n const searchParams = {\n siteName: new URLSearchParams(search).get(\"filter[site_name]\"),\n fromDate: new URLSearchParams(search).get(\"filter[from_date]\"),\n toDate: new URLSearchParams(search).get(\"filter[to_date]\"),\n platformType: new URLSearchParams(search).get(\"filter[platform_type]\")\n }\n\n const [fromDate, setFromDate] = useState(null);\n const [toDate, setToDate] = useState(null);\n const [platformType, setPlatformType] = useState({ label: 'All', value: null });\n const [data, setData] = useState([])\n const [searchData, setSearchData] = useState([])\n const [searchText, setSearchText] = useState('');\n const [loading, setLoading] = useState(false);\n\n const platformTypesOptions = [\n { label: 'All', value: null },\n { label: \"f500\", value: 'f500' },\n { label: \"Job Board\", value: \"job_board\" },\n { label: \"Platforms\", value: \"platforms\" },\n { label: \"Common\", value: 'common' }\n ]\n\n const columnsWithCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n { name: `Upload count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"upload_count_custom_date\", sortable: true, center: true },\n { name: `Indexed count ${moment(fromDate).format(\"YYYY/MM/DD\")} to ${moment(toDate).format(\"YYYY/MM/DD\")}`, selector: \"indexed_count_custom_date\", sortable: true, center: true }\n ]\n\n const columnsWithOutCount = [\n { name: \"Jobspikr site name\", sortable: true, center: true, cell: row => {row.site_name}, grow: 2 },\n { name: \"Upload count last 24 hours\", selector: \"upload_count_24_hours\", sortable: true, center: true },\n { name: \"Indexed count last 24 hours\", selector: \"indexed_count_24_hours\", sortable: true, center: true },\n { name: \"Upload count last 7 days\", selector: \"upload_count_7_days\", sortable: true, center: true },\n { name: \"Indexed count last 7 days\", selector: \"indexed_count_7_days\", sortable: true, center: true },\n { name: \"Upload count last 30 days\", selector: \"upload_count_30_days\", sortable: true, center: true },\n { name: \"Indexed count last 30 days\", selector: \"indexed_count_30_days\", sortable: true, center: true },\n ]\n\n useEffect(() => {\n setSearchParamsData();\n }, []);\n\n function setSearchParamsData() {\n if (searchParams.fromDate && searchParams.fromDate != fromDate) {\n setFromDate(new Date(searchParams.fromDate))\n }\n if (searchParams.toDate && searchParams.toDate != toDate) {\n setToDate(new Date(searchParams.toDate))\n }\n if (searchParams.platformType && searchParams.platformType != platformType.value) {\n setPlatformType(platformTypesOptions.filter(item => item.value == searchParams.platformType)[0])\n }\n if (commit == 'Get Data') {\n\n fetchData(searchParams.fromDate, searchParams.toDate, searchParams?.platformType || '')\n }\n else {\n fetchData();\n }\n\n }\n\n function fetchData(FromDate = fromDate, ToDate = toDate, PlatformType = platformType.value) {\n setLoading(true);\n axios.get(`/api/v2/jobspikr_v3_internal/jobspikr_graphs/upload_count_vs_index_count_of_jp_sites?filter[from_date]=${FromDate ? moment(FromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${ToDate ? moment(ToDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${PlatformType ? PlatformType : ''}`)\n .then(res => {\n setData(res.data.data);\n setSearchData(res.data.data);\n setLoading(false);\n })\n .catch(err => {\n console.error(err?.message || 'Oops something went wrong');\n setLoading(false);\n\n })\n }\n\n const handleInputChange = event => {\n if (event.target.value == '') {\n setSearchData(data);\n }\n else {\n setSearchData(data.filter(item => item.site_name.includes(event.target.value)))\n }\n setSearchText(event.target.value)\n }\n\n const handleGetData = () => {\n window.location.href = `${NewJpInternalBasePoint}/jobspikr_graphs/upload_count_vs_index_count_of_jp_sites?filter[from_date]=${fromDate ? moment(fromDate).format(\"YYYY/MM/DD\") : ''}&filter[to_date]=${toDate ? moment(toDate).format(\"YYYY/MM/DD\") : ''}&filter[platform_type]=${platformType.value ? platformType.value : ''}&commit=${'Get Data'}`\n }\n\n return \n \n
\n \n Internal Dashboard
\n\n \n \n \n \n \n \n \n \n \n Internal QA\n \n \n {commit == 'Get Data' ? Upload vs Indexed count of JP sites : 'Upload vs Indexed count of JP sites'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n
\n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n setPlatformType(option)} />\n \n \n \n \n
\n \n \n {loading ? : \n \n Upload count vs Indexed count\n \n \n \n \n Search\n \n \n \n
\n
\n \n
\n \n \n}\n \n}\n","import React from 'react';\nimport { Home } from 'react-feather';\nimport { Row, Col } from 'reactstrap';\nimport { Breadcrumb, BreadcrumbItem } from 'reactstrap';\nimport { useLocation, Link } from 'react-router-dom';\n\nimport { NewJpInternalBasePoint } from '../../../../../../Common/BaseEsPoints/InternalEsBasePoint';\n\nexport default function BreadCrumb() {\n const search = useLocation().search;\n const commit = new URLSearchParams(search).get(\"commit\");\n \n return (\n \n
\n \n Internal Dashboard
\n \n \n \n \n \n \n \n \n \n {commit == 'Get Data' ? Dedup Tracker : 'Dedup Tracker'}\n \n {commit == 'Get Data' && \n Search\n }\n \n \n
\n
\n \n \n \n setFromDate(date)} />\n \n \n \n setToDate(date)} />\n \n \n \n \n
\n
\n \n \n )\n}\n","import React from 'react';\nimport DataTable from 'react-data-table-component';\nimport ReactTooltip from 'react-tooltip';\nimport { Info } from 'react-feather';\n\nexport default function RssQInfoTable({ data, loading }) {\n const columns = [\n {\n name: 'Site',\n selector: 'site_name',\n sortable: true,\n cell: (each) => {each?.site_name}\n },\n {\n name: 'Rss Q Size',\n selector: 'queue_size',\n sortable: true,\n cell: (each) => <>\n {each?.queue_size} \n \n Go to Queue Size View\n \n \n },\n ];\n\n return (\n \n \n
\n )\n}\n","import React from 'react';\nimport ReactTooltip from 'react-tooltip';\nimport { Info } from 'react-feather';\nimport DataTable from 'react-data-table-component';\n\nexport default function ESBulkUpdatesTable({ data, loading }) {\n const columns = [\n {\n name: 'Queue Name',\n selector: 'queue_name',\n sortable: true\n },\n {\n name: 'Queue Size',\n selector: 'queue_size',\n sortable: true,\n cell: (each) => <>\n {each?.queue_size} \n \n Go to Queue Size View\n \n \n },\n {\n name: 'Server Name',\n selector: 'server',\n sortable: true\n },\n ];\n\n return (\n \n \n
\n )\n}\n","import React from 'react';\nimport DataTable from 'react-data-table-component';\n\nconst columns = [\n {\n name: 'Site Name',\n selector: 'site',\n sortable: true\n },\n {\n name: 'Crawl Date',\n selector: 'date',\n sortable: true\n },\n {\n name: 'Rss Count',\n selector: 'rss_count',\n sortable: true\n }\n];\nexport default function RssCountsTable({ data, loading }) {\n return (\n \n \n
\n )\n}\n","import React from 'react';\nimport DataTable from 'react-data-table-component';\nconst columns = [\n {\n name: 'Uniq Id',\n selector: 'uniq_id',\n sortable: true\n },\n {\n name: 'Duplicate Status',\n selector: 'duplicate_status',\n sortable: true\n },\n {\n name: 'Duplicate of',\n selector: 'duplicate_of',\n sortable: true\n },\n];\n\nexport default function JobStatusTable({ data, loading }) {\n return (\n \n \n
\n )\n}\n","/**\n * CREATED ON: 26 July 2023\n * CREATED BY: atramaniket@promptcloud.com\n * DESCRIPTION: The components is rendered in internaldashboard/Jobspike V3 Internal Dashboard/InternalQALinks/100 Random Records for QA\n */\nimport React, { useState, useEffect, Fragment } from 'react'\n\nimport { Container, Row, Col, Card, CardBody, Collapse } from 'reactstrap'\nimport BreadCrumbs from '../../../../Common/BreadCrumb/BreadCrumbs.component'\nimport SpinnerLoader from '../../../../Common/LoadingAnimation/SpinnerLoader.component'\n\nimport axios from 'axios'\nimport moment from 'moment'\nimport { toast } from 'react-toastify'\nimport ReactJson from 'react-json-view';\n\n\nconst BASE_URL = '/api/v1/jobspikr_v3_internal/jobspikr_graphs/random_records_for_qa'\n\nexport default function HundredRandomRecordsForQA() {\n\n const [randomRecords, setRandomRecords] = useState([])\n const [cardOpen, setCardOpen] = useState(false)\n const [loading, setLoading] = useState(false)\n\n const customCardStyle = {\n cursor: \"pointer\"\n }\n\n useEffect(() => {\n const controller = new AbortController();\n const signal = controller.signal;\n\n async function fetchRandomRecords() {\n try {\n setLoading(true);\n const response = await axios.get(BASE_URL, { signal: signal });\n const responseData = response?.data?.table_data;\n if (!signal.aborted && responseData?.length > 0) {\n setRandomRecords(responseData);\n }\n setLoading(false);\n } catch (error) {\n toast.error(error?.message);\n setLoading(false);\n }\n }\n\n fetchRandomRecords();\n\n // Cleanup\n return () => {\n controller.abort();\n };\n }, []);\n\n // Helper function to open and collapse the card\n function openCard() {\n setCardOpen(!cardOpen)\n }\n\n return (\n \n \n \n \n \n \n Date: {moment().subtract(1, \"days\").format(\"YYYY/MM/DD\")}\n
\n \n {\n randomRecords.length > 0 &&\n randomRecords\n .map((validRecord) => (\n \n
{\n setCardOpen(cardOpen === validRecord.id ? '' : validRecord.id)\n }}>\n
{validRecord.site_name}
\n
\n
\n \n \n _id: {validRecord.id} _index: {validRecord.index}\n
\n
\n
\n \n \n
\n
\n Hi {userEmail}!\n
\n
\n
\n \n \n \n Submit Requirements\n
\n
\n \n \n {({ isSubmitting, values, setFieldValue, validateForm , errors, setTouched, touched, validateField})=>{\n return(\n \n )\n }}\n \n
\n \n Copyright © 2021 PromptCloud All Rights Reserved.\n
Privacy Policy \n
\n
\n \n \n \n \n {\n setFieldValue(\"organization_name\",e.target.value).then(()=> validateField(\"organization_name\"))\n }}\n />\n \n \n Please give legal name of the company, it can't be changed later. This name is used while generating invoices.\n
\n \n \n \n \n \n \n {industryOptions.map(industry => (\n \n ))}\n \n \n \n \n \n \n \n \n \n {options.map(each => (\n \n ))}\n \n \n \n Required to serve the right payment gateway.\n
\n \n \n
\n \n
\n \n \n \n \n | SI.No | \n URL | \n {accessEnv.includes(environment) ? Rss urls crawl limit | : \"\"}\n
\n \n \n {\n site_details.map((row, index)=>{\n return(\n \n | {index + 1} | \n \n {\n try {\n await url_schema.validate(value.trim())\n return \"\"\n } catch (error) {\n return error.message;\n }\n }}\n />\n \n | \n \n {\n accessEnv.includes(environment) ?\n <>\n \n \n \n : \"\"\n }\n | \n
\n )\n })\n }\n \n
\n \n \n \n OR\n
\n \n \n \n \n Add Sites via a file:
\n \n \n \n handleChangeStatus(uploadData, status, { push, values: values?.site_details, insert})}\n multiple={false}\n canCancel={true}\n accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel.sheet.binary.macroEnabled.12,application/vnd.oasis.opendocument.spreadsheet,application/vnd.ms-excel.sheet.macroEnabled.12,application/vnd.oasis.opendocument.spreadsheet-template\"\n inputContent={(files, extra) => (extra.reject ? 'Please enter only supported files' : 'Upload / Drop an Excel File')}\n styles={{\n dropzone: { height: 40 },\n dropzoneActive: { borderColor: 'green' },\n }}\n />\n
\n \n Support file formats are .xls, .xlsx, .xlsb, .xlsm, .ods, .ots, .uos\n
\n \n \n \n Please do not change column headers\n
\n
\n \n
\n )\n }}\n \n )\n})\n\nexport default SiteDetails;","import React from 'react';\nimport { forwardRef, useImperativeHandle, useState, useEffect } from 'react';\n\n\nimport { Row, Col, Form, Label, Input, Table } from 'reactstrap';\nimport { Field, useFormikContext, ErrorMessage, setNestedObjectValues, FastField } from 'formik';\nimport DatePicker from \"react-datepicker\";\nimport { toast } from 'react-toastify';\nimport Dropzone from 'react-dropzone-uploader';\nimport axios from 'axios';\nimport XLSX from 'xlsx';\n\nimport CrawlForm from './CrawlForm.component';\n\nconst SchemaDetails = forwardRef(({ formikRef, accessEnv }, ref) => {\n\n const { values, validateForm, touched, setTouched, setErrors, setFieldValue } = useFormikContext()\n\n const environment = localStorage.getItem(\"environment\");\n\n useImperativeHandle(ref, () => ({\n isValidated() {\n let validateValues = {...values}\n delete validateValues[\"site_details\"]\n return new Promise((resolve, reject) => {\n formikRef.current.validateForm(validateValues)\n .then(errors => {\n if (Object.keys(errors).length === 0) {\n resolve();\n } else {\n reject(errors);\n setTouched(setNestedObjectValues(errors, true))\n toast.error(\"The form is invalid so please check it!\")\n }\n })\n .catch(error => reject(error));\n });\n }\n }))\n\n return(\n \n
\n \n \n \n \n
\n
{\n const newValue = e.target.value.replace(/\\s/g, '_');\n setFieldValue('sitegroup_name', newValue);\n }}\n />\n \n \n All sites within a sitegroup share the same fields, frequency and output format\n
\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n {\n accessEnv.includes(environment) ? (\n \n \n \n \n
\n ) : null\n }\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n
\n {\n values?.frequency == 'weekly' && \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n }\n {\n values?.frequency == 'other_frequency' &&\n \n
\n
\n
\n
\n *Minimum requirements - at least one crawl per month, for a minimum period of 3 months. Please note that we do not take up one-time data acquisition projects.\n
\n
\n \n \n {({ field }) => (\n {\n field.onChange({ target: { name: field.name, value: date } });\n }}\n />\n )}\n \n \n
\n }\n \n
\n \n \n
\n
\n \n \n \n | Field Name | \n Data Type | \n isMandatory | \n Default Value | \n Sample Value | \n Comments | \n Options | \n
\n \n \n {schema_fields_details?.map((row, index) => (\n \n | \n {\n let normalized_value = e.target.value.replace(/[^a-z0-9A-Z]+/g, ' ').replace(/\\s+/g, '_').toLowerCase();\n setFieldValue(`schema_fields_details[${index}].field_name`, normalized_value);\n }}\n />\n \n | \n \n \n \n \n \n \n \n \n \n \n \n | \n \n \n \n \n \n \n \n | \n \n \n | \n \n \n | \n \n \n | \n \n {index > 2 && (\n {\n if(index == 3 && schema_fields_details.length == 4){\n toast.error(\"Minimum one schema field is required..!\")\n } else {\n remove(index)\n }\n }}\n >\n Delete\n \n )}\n | \n
\n ))}\n \n
\n \n \n OR\n
\n \n \n Add Schema details via a file:
\n \n \n \n handleChangeStatus(uploadData, status, { push, remove, schema_fields_details})} multiple={false}\n canCancel={true}\n accept=\"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel.sheet.binary.macroEnabled.12,application/vnd.oasis.opendocument.spreadsheet,application/vnd.ms-excel.sheet.macroEnabled.12,application/vnd.oasis.opendocument.spreadsheet-template\"\n inputContent={(files, extra) => (extra.reject ? 'Please enter only supported files' : 'Upload / Drop an Excel File')}\n styles={{\n dropzone: { height: 40 },\n dropzoneActive: { borderColor: 'green' },\n }}\n />\n
\n \n Support file formats are .xls, .xlsx, .xlsb, .xlsm, .ods, .ots, .uos\n
\n \n \n \n Please do not change column headers\n
\n
\n );\n }}\n \n )\n}\n","import React from 'react';\nimport { forwardRef, useImperativeHandle, useState } from 'react';\n\nimport { Row, Col, Form, Input } from 'reactstrap';\nimport { Field, useFormikContext } from 'formik';\nimport { useHistory } from \"react-router-dom\";\nimport { toast } from 'react-toastify';\nimport Dropzone from 'react-dropzone-uploader';\n\nimport axios from 'axios';\nimport moment from 'moment';\n\nconst AdditionalDetails = forwardRef(({ formikRef, accessEnv }, ref) => {\n\n const history = useHistory();\n const { values } = useFormikContext()\n const environment = localStorage.getItem(\"environment\");\n\n const [buttonLoading, setButtonLoading] = useState(false);\n\n const [attachmentIds, setAttachmentIds] = useState([]);\n\n const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }\n\n\n const handleChangeStatus = ({ meta, file }, status) => {\n if (status == 'done') {\n uploadFile(file)\n }\n if (status == 'removed') {\n setAttachmentIds([])\n }\n }\n\n const uploadFile = (file) => {\n let fd = new FormData();\n fd.append('file', file)\n axios.post(`/api/v1/new_attachments`, fd, {\n headers: {\n 'Content-Type': 'multipart/form-data'\n }\n }).then(res => {\n let tempIds = [res.data.attachment.id]\n setAttachmentIds(tempIds)\n toast.success(res.data.message)\n }).catch(err => {\n toast.error(err.response.data.message)\n })\n }\n\n useImperativeHandle(ref, () => ({\n isValidated() {\n return true\n }\n }));\n\n const handleDataSubmit = () => {\n console.log(values)\n setButtonLoading(true);\n let freq = values?.frequency\n let freqObj = {}\n if (freq == 'weekly') {\n freqObj = { \"days\": values?.weekly }\n }\n else if (freq == 'other') {\n freqObj = { \"other_details\": values?.details }\n }\n else if (freq == 'monthly') {\n freqObj = { \"date\": moment(values?.monthly || new Date()).format(\"MM/DD/YYYY\") }\n }\n let new_urls = []\n var rss_urls = accessEnv.includes(environment) ? new RegExp(/^\\d+$/) : new RegExp(/.*/)\n new_urls = values?.site_details.filter(site => site?.url?.length > 0 && rss_urls.test(site?.rss_urls_crawl_limit))\n let inputData = {\n \"submit_requirements\": {\n \"organization_name\": values?.organization_name,\n \"industry\": values?.industry,\n \"country\": values?.country,\n \"sitegroup_name\": values?.sitegroup_name,\n \"frequency\": values?.frequency,\n \"data_delivery\": values?.data_delivery,\n \"data_format\": values?.data_format,\n \"crawl_type\": values?.crawl_type,\n \"additional_information\": values?.additional_information,\n \"attachment_ids\": attachmentIds,\n \"schema_fields_details\": values?.schema_fields_details,\n \"rss_urls_crawl_limit\": values?.rss_urls_crawl_limit,\n \"additional_details\": { \n \"merge_files\": values?.merge_files ? 1 : 0, \n \"image_downloads\": values?.image_downloads ? 1 : 0 \n },\n \"delivery_frequency_details\": freqObj,\n \"site_details\": new_urls\n }\n }\n\n axios.post(`/api/v1/organizations/create`, inputData)\n .then(res => {\n const data = res.data\n if (data.status == 'success') {\n toast.success(data.message)\n history.push(`/`)\n }\n else {\n toast.error(data.message)\n }\n setButtonLoading(false);\n }).catch(err => {\n setButtonLoading(false);\n toast.error(err.response.data.message)\n })\n\n }\n\n const handleSubmit = (files, allFiles) => {\n allFiles.forEach(f => f.remove())\n toast.success(\"Dropzone successfully submitted !\");\n }\n\n \n return(\n <>\n \n \n \n \n \n Any further description\n
\n \n \n \n \n \n \n \n \n Additional Requirements\n
\n \n \n \n \n {' '}\n Enable Merge\n
\n \n \n {' '}\n Enable Image / File Downloads\n
\n \n
\n \n \n \n Attach File\n
\n \n \n \n \n
\n \n
\n \n \n )\n\n})\n\nexport default AdditionalDetails;\n","import React from 'react';\nimport { useState, useContext, useEffect, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { SitesContext } from '../Context/SitesState';\nimport { Modal, ModalBody, ModalHeader, ModalFooter, Button } from 'reactstrap';\nimport SpinnerButton from '../../../Common/SpinnerButton/SpinnerButton.component';\nimport DatePicker from 'react-datepicker';\nimport axios from 'axios';\nimport { toast } from 'react-toastify';\n\n\nexport default function ScheduleCrawls() {\n const { organization_name } = useParams(); // Name of organization\n const { siteGroupNames, tableSelection } = useContext(SitesContext); // Names of sitegroups \n const [modalOpen, setModalOpen] = useState(false); // use for opening and closing modal\n const [selectedDate, setSelectedDate] = useState(new Date(Date.now()));\n const [selectedOptions, setSelectedOptions] = useState(\"all\");\n const [testCrawlButtonLoading, setTestCrwalButtonLoading] = useState(false); // loading animation when test crawl button is clicked\n const [fullCrawlButtonLoading, setFullCrwalButtonLoading] = useState(false); // loading animation when full crawl button is clicked\n\n // THE API endpoint used for POST request \n const API_ENDPOINT = useMemo(() => {\n return `/api/v1/organizations/${organization_name}/sites/crawl_schedules`\n }, [organization_name]);\n\n\n // use effect hook for everytime the modal is loaded\n useEffect(() => {\n if (tableSelection.length > 0) {\n setSelectedOptions(\"selected_sites\");\n }\n else {\n setSelectedOptions(\"all\");\n }\n }, [tableSelection])\n\n // Helper function make API call based on crawl type\n async function handleCrawlScheduleRequest(crawlType) {\n switch (crawlType) {\n case \"test_crawl\":\n setTestCrwalButtonLoading(true);\n await sendRequest(\"test_crawl\");\n setTestCrwalButtonLoading(false);\n break;\n case \"full_crawl\":\n setFullCrwalButtonLoading(true);\n await sendRequest(\"full_crawl\");\n setFullCrwalButtonLoading(false);\n break;\n default:\n console.log(\"NO OPTION SELECTED!\");\n }\n }\n\n // Function to open and close modal\n function openCloseModal() {\n setModalOpen(!modalOpen);\n }\n\n // Function to handle options select from dropdown\n function onSiteGroupNameSelectHandler(event) {\n const { value } = event.target;\n setSelectedOptions(value);\n\n }\n\n // Function to handle date select\n function onDateSelectHandler(date) {\n setSelectedDate(date);\n }\n\n\n // Function to send POST request to backend DB\n async function sendRequest(crwlTyp) {\n try {\n if (selectedOptions === \"all\") {\n const request = await axios.post(API_ENDPOINT, {\n schedule: {\n date: getFormattedDate(selectedDate),\n site_options: 'all_sites',\n crawl_type: crwlTyp\n }\n });\n setModalOpen(false);\n toast.success(request?.data?.message);\n }\n else if (selectedOptions === \"selected_sites\") {\n const request = await axios.post(API_ENDPOINT, {\n schedule: {\n selected_sites: tableSelection,\n date: getFormattedDate(selectedDate),\n site_options: 'selected_sites',\n crawl_type: crwlTyp\n }\n });\n setModalOpen(false);\n toast.success(request?.data?.message);\n }\n else {\n const request = await axios.post(API_ENDPOINT, {\n schedule: {\n date: getFormattedDate(selectedDate),\n site_options: selectedOptions,\n crawl_type: crwlTyp\n }\n });\n setModalOpen(false);\n toast.success(request?.data?.message);\n }\n }\n catch (error) {\n toast.error(error?.response?.data?.message);\n }\n }\n\n // Misc\n function getFormattedDate(date) {\n var year = date.getFullYear();\n\n var month = (1 + date.getMonth()).toString();\n month = month.length > 1 ? month : '0' + month;\n\n var day = date.getDate().toString();\n day = day.length > 1 ? day : '0' + day;\n\n return month + '/' + day + '/' + year;\n }\n\n return (\n \n
\n
\n \n Schedule Crawls\n \n \n \n
\n
\n Sites:\n
\n \n \n
\n
\n Date:\n
\n \n \n
\n NOTE: These crawls will be performed only\n if it does not clash with already running crawl\n
\n
\n
\n
\n
openCloseModal()} backdrop='static' size='lg'>\n openCloseModal()}>\n Set Billing Alarms\n \n \n \n \n \n postBillingAlarms()}>\n Set Alarm\n \n \n \n
\n
\n
openCloseModal()} backdrop='static' size='lg'>\n openCloseModal()}>\n Schedule Crawl Notifications\n \n \n \n
\n
\n Sites:\n
\n \n \n
\n \n setCrawlNotifications({ ...crawlNotifications, [e.target.name]: e.target.checked })} />\n {' '}\n Crawl Start Notification
\n \n \n setCrawlNotifications({ ...crawlNotifications, [e.target.name]: e.target.checked })} />\n {' '}\n Crawl Completion Notification
\n \n
\n
\n Edit Crawl Notification Preferences\n \n
\n
\n
\n \n \n \n \n \n onOptionSelectHandler(event)}\n >\n \n {siteGroupNames?.map(each => (\n \n ))}\n \n \n {\n sitegroupData?.fields_to_extract &&\n (\n \n \n
Fields to extract
\n \n {sitegroupData?.fields_to_extract}\n
\n \n \n )\n }\n {\n sitegroupData?.additional_details &&\n (\n \n \n \n \n | Enable Merge | \n \n {sitegroupData?.additional_details?.merge_files == 0 ? \"Disabled\" : \"Enabled\"}\n | \n
\n \n | Enable Image Downloads | \n \n {sitegroupData?.additional_details.image_downloads == 0 ? \"Disabled\" : \"Enabled\"}\n | \n
\n {\n sitegroupData?.additional_details?.hosted_indexing &&\n (\n <>\n \n | Two days of delivery: | \n \n {sitegroupData?.additional_details?.two_days_of_delivery == 0 ? \"Disabled\" : \"Enabled\"}\n | \n
\n \n | Hosted Indexing | \n \n {sitegroupData?.additional_details?.hosted_indexing == 0 ? \"Disabled\" : \"Enabled\"}\n | \n
\n \n )\n }\n \n
\n \n )\n }\n \n \n \n \n | Output Format | \n \n {\n sitegroupData?.delivery_format ? cleanText(sitegroupData?.delivery_format) : \"NA\"\n }\n | \n
\n \n | Frequency | \n \n {\n sitegroupData?.delivery_frequency_in_text ? cleanText(sitegroupData?.delivery_frequency_in_text) : \"NA\"\n }\n | \n
\n \n | Delivery method | \n \n {\n sitegroupData?.delivery_method ? cleanText(sitegroupData?.delivery_method) : \"NA\"\n }\n | \n
\n \n
\n \n
\n \n \n \n
\n
\n \n \n \n
\n \n
\n\n )\n }\n else {\n return (null)\n }\n}\n","import React from 'react';\nimport { useContext, useState, useEffect, useMemo } from 'react';\nimport { SitesContext } from '../Context/SitesState';\nimport { useParams } from 'react-router-dom';\nimport { Card, CardHeader, CardBody, Row, Col } from 'reactstrap';\nimport SpinnerLoader from '../../../Common/LoadingAnimation/SpinnerLoader.component';\nimport SpinnerButton from '../../../Common/SpinnerButton/SpinnerButton.component';\nimport DatePicker from 'react-datepicker';\nimport { toast } from 'react-toastify';\nimport axios from 'axios';\nimport Chart from \"react-apexcharts\";\n\n\nexport default function SitesCrawlGraphCard() {\n const { sitegroupId } = useContext(SitesContext);\n const { organization_name } = useParams();\n\n const [loading, setLoading] = useState(false);\n const [siteNames, setSiteNames] = useState([]);\n const [graphData, setGraphData] = useState({});\n const [selectedSite, setSelectedSite] = useState(\"\");\n const [series, setSeries] = useState([]);\n const [options, setOptions] = useState({});\n\n const minimumSelection = new Date(Date.now() - 180 * 24 * 60 * 60 * 1000)\n const [startDate, setStartDate] = useState(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000));\n const [endDate, setEndDate] = useState(new Date(Date.now()));\n\n\n\n // This use effect is for getting site names and graph data for first time when component loads \n useEffect(async () => {\n const controller = new AbortController();\n\n await getSiteNames(controller.signal, sitegroupId);\n await getUploadCounts(controller.signal);\n // cleanup\n return () => {\n controller.abort();\n }\n }, [sitegroupId]);\n\n // Function to get site names from DB\n // This changes when sitegroup Id changes\n async function getSiteNames(signal, groupId) {\n setLoading(true);\n try {\n const response = await axios.get(`/api/v1/organizations/${organization_name}/site_name_list?sitegroup_id=${groupId}`, { signal: signal });\n const data = await response?.data?.site_names;\n setSiteNames(data);\n setLoading(false);\n }\n catch (error) {\n toast.error(error?.response?.data?.message);\n setLoading(false);\n }\n }\n\n // Function to get upload counts \n async function getUploadCounts(signal) {\n setLoading(true);\n try {\n const response = await axios.get(`/api/v1/organizations/${organization_name}/sites/uploads_count?from_date=${getFormattedDate(startDate)}&to_date=${getFormattedDate(endDate)}&site_id=${selectedSite}&sitegroup_id=${sitegroupId}`, { signal: signal });\n const counts = {\n days: await response?.data?.sites_upload_count?.days,\n uploads_count: response?.data?.sites_upload_count?.uploads_count\n };\n setGraphData(counts);\n setLoading(false);\n }\n catch (error) {\n toast.error(error?.status?.data?.message);\n setLoading(false);\n }\n }\n\n // Function to set graph data\n useEffect(() => {\n if ('days' in graphData && graphData?.days?.length > 0) {\n setOptions(\n {\n chart: { id: \"basic-bar\" },\n xaxis: { categories: graphData?.days }\n })\n setSeries([\n {\n name: \"uploads\",\n data: graphData?.uploads_count\n }\n ])\n }\n else {\n setOptions({})\n setSeries([])\n }\n }, [graphData])\n\n function onOptionSelectHandler(event) {\n const { value } = event.target;\n setSelectedSite(value);\n }\n\n function onDateChange(dates) {\n const [start, end] = dates;\n setStartDate(start);\n setEndDate(end);\n }\n\n async function onRequestSubmitHandler() {\n const difference = datediff(parseDate(startDate), parseDate(endDate));\n if (difference > 30) {\n toast.error(\"Date difference cannot be more than 30 days!\");\n return;\n }\n else if (selectedSite === \"\") {\n toast.error(\"Site name is required and cannot be empty!\");\n return;\n }\n else {\n await getUploadCounts();\n }\n }\n\n // Format date\n function getFormattedDate(date) {\n var year = date.getFullYear();\n\n var month = (1 + date.getMonth()).toString();\n month = month.length > 1 ? month : '0' + month;\n\n var day = date.getDate().toString();\n day = day.length > 1 ? day : '0' + day;\n\n return month + '/' + day + '/' + year;\n }\n\n // Date parser for calculating the date diff\n function parseDate(str) {\n str = getFormattedDate(str)\n var mdy = str.split('/');\n return new Date(mdy[2], mdy[0] - 1, mdy[1]);\n }\n\n // Date difference calculation\n function datediff(first, second) {\n return Math.round((second - first) / (1000 * 60 * 60 * 24));\n }\n\n return (\n \n
\n \n \n \n onOptionSelectHandler(event)} >\n \n {siteNames?.map(each => (\n \n ))}\n \n \n \n \n \n
Select Date Range:
\n
\n \n \n Any 30 days in last 6 months\n \n
\n
\n \n \n \n {('days' in graphData) ?\n \n \n
: \n <>\n Select a sitename and click on apply
\n }\n \n \n \n
\n \n \n Bulk Actions:\n \n \n \n \n \n \n \n \n
\n )\n}\n","import React from 'react';\nimport { useState, useEffect, useContext, useCallback } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { Row, Col } from 'reactstrap';\nimport { SitesContext } from '../Context/SitesState';\nimport DataTable from 'react-data-table-component';\nimport axios from 'axios';\nimport { toast } from 'react-toastify';\n\nconst columns = [\n { name: 'Site Name', selector: 'site_name', sortable: true },\n { name: 'Status', selector: 'site_status', sortable: true, },\n { name: 'Uploads in last 30 days', selector: 'uploads_in_last_30_days', sortable: true },\n { name: 'Uploads in last 24 hours', selector: 'uploads_in_last_24_hours', sortable: true },\n { name: 'Last Run Date', selector: 'last_run_date', sortable: true },\n { name: 'Next Scheduled Run', selector: 'next_scheduled_run_date', sortable: true },\n { name: 'Queue count (Urls in queue)', selector: 'queue_count', sortable: true },\n];\n\n\nexport default function SitesInformationTable() {\n const { siteStatus, sitegroupId, selectionFromTable } = useContext(SitesContext);\n const { organization_name } = useParams();\n const [tableData, setTableData] = useState([]);\n const [siteName, setSiteName] = useState(\"\");\n const [pageNumber, setPageNumber] = useState(1);\n const [pageTotal, setPageTotal] = useState(0);\n const [status, setStatus] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n useEffect(async () => {\n\n const controller = new AbortController();\n\n await getTabelData(controller.signal);\n\n // cleanup\n return () => {\n controller.abort();\n }\n }, [sitegroupId, pageNumber, status, siteName]);\n\n\n\n // Helper function to fetch data from DB and display in table\n async function getTabelData(SIGNAL) {\n const API_URL = `/api/v1/organizations/${organization_name}/sites?filterrific[filter_by_site_status]=${status}&filterrific[search_by_site_name]=${siteName}&sitegroup_id=${sitegroupId}&page=${pageNumber}`;\n setLoading(true);\n try {\n const response = await axios.get(API_URL, { signal: SIGNAL });\n const sitesData = await response?.data?.sites;\n const totalPages = await response?.data?.total_sites_count;\n setTableData(sitesData);\n setPageTotal(totalPages);\n setLoading(false);\n }\n catch (error) {\n toast.error(error?.response?.data?.message);\n setLoading(false);\n }\n }\n\n // Optimize the search using debounce\n function debounce(func) {\n let timer;\n return function (...args) {\n const context = this;\n if (timer) clearTimeout(timer);\n timer = setTimeout(() => {\n timer = null;\n func.apply(context, args);\n }, 650);\n }\n }\n // When search input changes this method is invoked\n function onInputChangeHandler(event) {\n let { value } = event.target;\n setLoading(true);\n setSiteName(value);\n setLoading(false);\n }\n\n // Use debounce to stop multiple API calls \n const optimizedSearchHandler= useCallback(debounce(onInputChangeHandler), []);\n\n\n // Server side pagination for data table\n function onPaginationHandler(pagenum) {\n setPageNumber(pagenum);\n }\n\n // Helper function for selecting rows\n // This function updates the array of selected sites ID in context whenever\n // user clicks on the table select checkbox. This is essential for handelling the \n // crawl schedules in the \"Schedule Crawls\" button. If user selects sites, the the option\n // \"Selected Sites\" is shown, otherwise, all sites is shown as default.\n function onRowSelectHandler({ selectedRows }) {\n const selections = selectedRows.map(obj => obj[\"id\"]).toString();\n selectionFromTable(selections);\n }\n\n // Helper function to set site status.\n // When status changes, so does the contents of the table.\n function handleSiteStatus(event) {\n const { value } = event?.target;\n setStatus(value);\n }\n return (\n \n \n \n Status:
\n \n \n \n \n Search:
\n {setLoading(true),optimizedSearchHandler(event)}} />\n \n
\n row?.site_status != \"active\"}\n pagination\n paginationServer\n progressPending={loading}\n paginationTotalRows={pageTotal}\n paginationPerPage={10}\n paginationComponentOptions={{ noRowsPerPage: true }}\n onChangePage={(page) => onPaginationHandler(page)}\n />\n
\n )\n}\n","import React from 'react';\nimport { useState, useEffect, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport axios from 'axios';\nimport { toast } from 'react-toastify';\nimport { SitesContext } from './SitesState';\n\nexport default function SitesContextProvider({ children }) {\n const { organization_name } = useParams();\n const [loading, setLoading] = useState(false);\n const [siteGroupNames, setSiteGroupNames] = useState([]);\n const [siteGroupID, setSiteGroupID] = useState(\"\");\n const [country, setCountry] = useState(\"\");\n const [siteGroupData, setSiteGroupData] = useState({});\n const [selectedSitesFromTable, setSelectedSitesFromTable] = useState([]);\n const siteStatusDropdownOptions = useMemo(() => {\n return [\n { value: \"\", label: \"All\" },\n { value: \"under_review\", label: \"Under Review\" },\n { value: \"report_generated\", label: \"Report Generated\" },\n { value: \"payment_pending\", label: \"Payment Pending\" },\n { value: \"queued\", label: \"Queued\" },\n { value: \"setup_in_progress\", label: \"Setup In Progress\" },\n { value: \"waiting_on_client\", label: \"Waiting on Client\" },\n { value: \"active\", label: \"Active\" },\n { value: \"pause_requested\", label: \"Pause Requested\" },\n { value: \"paused\", label: \"Paused\" },\n { value: \"archived\", label: \"Archived\" },\n ]\n }, []);\n\n // Use effect hook for when the organization name changes\n useEffect(async () => {\n const controller = new AbortController();\n\n await getSiteGroupName(`/api/v1/organizations/${organization_name}/sitegroups?from=site_list`, controller.signal);\n\n // cleanup\n return () => {\n controller.abort();\n }\n }, [organization_name])\n\n // Use effect hook for when the site group ID changes\n // This use-effect is triggered when the sitegroupId changes\n // It populates the sitegroupData state with schema details of site for each individual Id\n useEffect(async () => {\n const controller = new AbortController();\n\n await getSchemaDetailsByID(siteGroupID, controller.signal);\n\n // cleanup\n return () => {\n controller.abort();\n }\n }, [siteGroupID])\n\n // Function to get all the sitegroup names from the DB\n async function getSiteGroupName(BASE_URL, signal) {\n setLoading(true);\n try {\n const response = await axios.get(BASE_URL, { signal: signal });\n const siteNames = await response?.data?.sitegroups;\n const country = await response?.data?.currency_code;\n setSiteGroupNames(siteNames);\n setCountry(country);\n setLoading(false);\n }\n catch (error) {\n toast.error(error?.response?.data?.message);\n setLoading(false);\n }\n }\n // Function to get sitegroup schema data from DB\n // This function fetched the schema details for specific sitegroup based on details\n async function getSchemaDetailsByID(sitegroupID, signal) {\n setLoading(true);\n try {\n const response = await axios.get(`/api/v1/organizations/${organization_name}/sitegroups/${sitegroupID}`, { signal: signal });\n const sitegroupData = await response?.data?.sitegroup;\n setSiteGroupData(sitegroupData);\n setLoading(false);\n }\n catch (error) {\n toast.error(error?.response?.data?.message);\n setLoading(false);\n }\n }\n\n // Custom hook to set sitegroup ID\n function setSitegroupId(siteId) {\n setSiteGroupID(siteId)\n }\n\n // Cutom hook to get the IDs of selected rows from the data table\n function TableSelection(arr_) {\n setSelectedSitesFromTable(arr_);\n }\n\n // Value passed to context\n const sitesContextValue = {\n loading: loading,\n siteGroupNames: siteGroupNames,\n sitegroupId: siteGroupID,\n country: country,\n sitegroupData: siteGroupData,\n setgroupId: setSitegroupId,\n siteStatus: siteStatusDropdownOptions,\n tableSelection:selectedSitesFromTable,\n selectionFromTable:TableSelection\n }\n return (\n \n \n {children}\n \n
\n )\n}\n","import React, {useState, useEffect} from 'react'\nimport { Row, Col, Alert } from 'reactstrap'\nimport Loader from 'react-loader-spinner';\nimport axios from 'axios'\nimport { toast } from 'react-toastify';\nimport DataTable from 'react-data-table-component';\nimport { useParams } from \"react-router-dom\";\nimport ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';\n\nexport default function DataFileComparison({downloadDoc, activeTabName}) {\n let { sitename } = useParams();\n const [oldData, setOldData] = useState({});\n const [newData, setNewData] = useState({});\n const [loadingOldFile, setLoadingOldFile] = useState(true);\n const [loadingNewFile, setLoadingNewFile] = useState(true);\n\n useEffect(() => {\n if (activeTabName == \"file_comparison\"){\n setLoadingNewFile(true)\n axios.get(`/api/v1/internal/qa/segment_level_qa_data_file?site_name=${sitename}&data_fetch_type=file_comparison`).then(res => {\n setNewData(res?.data?.data_file)\n setLoadingNewFile(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoadingNewFile(false)\n })\n\n setLoadingOldFile(true)\n axios.get(`/api/v1/internal/qa/file_before_runforce?site_name=${sitename}`).then(res => {\n setOldData(res?.data?.data_file)\n setLoadingOldFile(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoadingOldFile(false)\n })\n }\n }, [activeTabName])\n\n const handleDataDownload = () => {\n setLoadingNewFile(true)\n axios.get(`/api/v1/internal/qa/${sitename}/download_data_file`).then(res => {\n if (newData.file_extension == \"json\"){\n downloadDoc(JSON.stringify(res.data), newData.file_name, newData.content_type)\n }\n else{\n downloadDoc(res.data, newData.file_name, newData.content_type)\n }\n setLoadingNewFile(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoadingNewFile(false)\n })\n } \n\n const handleOldDataDownload = () => {\n setLoadingOldFile(true)\n axios.get(`/api/v1/internal/qa/${sitename}/download_file_before_runforce`).then(res => {\n downloadDoc(JSON.stringify(res.data), `download_${sitename}.json`, \"text/json\")\n setLoadingOldFile(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoadingOldFile(false)\n })\n } \n\n const newStyles = {\n diffContainer: {\n display: \"block\",\n overflow: \"auto\",\n wordWrap: \"anywhere\"\n },\n titleBlock: {\n textAlign: \"center\",\n fontSize: \"18px\",\n fontWeight: \"500\"\n },\n content: {\n width: \"50%\",\n position: \"relative\"\n }\n }\n\n return ( \n \n {\n loadingOldFile || loadingNewFile ? \n :\n <>\n {\n oldData?.file_present == true && newData?.file_present == true ?\n <>\n {\n oldData?.has_error == false && newData?.has_error == false ?\n <>\n \n \n Last updated: {oldData?.last_updated_at}\n
\n \n to download the actual file
\n Click here to download the actual file
\n Showing first 200 records.
\n \n \n \n \n Last updated: {newData?.last_updated_at}\n
\n \n to download the actual file
\n Click here to download the actual file
\n Showing first 200 records.
\n \n \n \n \n \n \n :\n <>\n \n no file content present
\n \n \n \n \n \n \n \n \n \n }\n \n :\n <>\n \n \n {oldData?.file_present == true ?\n <>\n The file is present in the respective path. The file comparison can be shown only if both files are present!
\n \n :\n <>\n \n \n }\n \n \n \n \n {newData?.file_present == true ?\n <>\n The file is present in the respective path. The file comparison can be shown only if both files are present!
\n \n :\n <>\n \n \n }\n \n \n \n }\n \n }\n
\n )\n}\n","import React, {useState, useEffect, Fragment} from 'react'\nimport { Card, CardBody, Col, Container, Row, Breadcrumb, BreadcrumbItem, Nav, Table, Alert,\n NavItem, NavLink, TabContent, TabPane, CardHeader } from 'reactstrap'\nimport Loader from 'react-loader-spinner';\nimport axios from 'axios'\nimport { toast } from 'react-toastify';\nimport { useParams } from \"react-router-dom\";\nimport MyAccordion from '../../global/MyAccordion'\n\nexport default function ExamplesForMissingFields({activeTabName}) {\n let { sitename } = useParams();\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (activeTabName == \"missing_fields\"){\n setLoading(true)\n axios.get(`/api/v1/internal/qa/segment_level_qa?site_name=${sitename}&data_fetch_type=example_for_missing_fields`).then(res => {\n setData(res?.data?.qa_json_data)\n setLoading(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoading(false)\n })\n }\n }, [activeTabName])\n\n return (\n <>\n {\n loading ? \n :\n <>\n {\n data?.file_present == false ? \n \n \n \n :\n <>\n {\n Object.keys(data?.examples_for_missing_fields).length > 0 ?\n Object.keys(data?.examples_for_missing_fields).map(each => \n (\n \n {JSON.stringify(data?.examples_for_missing_fields[each])}\n
\n \n )) \n : \n \n \n \n }\n \n }\n \n }\n \n )\n}\n","import React, {useState, useEffect} from 'react'\nimport { Card, CardHeader, CardBody, Alert } from 'reactstrap'\nimport Loader from 'react-loader-spinner';\nimport axios from 'axios'\nimport { toast } from 'react-toastify';\nimport DataTable from 'react-data-table-component';\nimport { useParams } from \"react-router-dom\";\nimport { JSONTree } from 'react-json-tree';\n\nexport default function SampleMaxRecord({theme, activeTabName}) {\n let { sitename } = useParams();\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (activeTabName == \"segment_level_qa\"){\n setLoading(true)\n axios.get(`/api/v1/internal/qa/segment_level_qa?site_name=${sitename}&data_fetch_type=sample_max_record`).then(res => {\n setData(res?.data?.qa_json_data)\n setLoading(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoading(false)\n })\n }\n }, [activeTabName])\n\n return (\n \n \n Sample record with max number of fields\n \n \n {\n loading ? \n :\n <>\n {\n data?.file_present == false ? \n \n \n \n :\n \n }\n \n }\n \n \n )\n}\n\n","import React, {useState, useEffect} from 'react'\nimport { Card, CardHeader, CardBody, Alert } from 'reactstrap'\nimport Loader from 'react-loader-spinner';\nimport axios from 'axios'\nimport { toast } from 'react-toastify';\nimport DataTable from 'react-data-table-component';\nimport { useParams } from \"react-router-dom\";\nimport { JSONTree } from 'react-json-tree';\n\nexport default function SampleMinRecord({theme, activeTabName}) {\n let { sitename } = useParams();\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (activeTabName == \"segment_level_qa\"){\n setLoading(true)\n axios.get(`/api/v1/internal/qa/segment_level_qa?site_name=${sitename}&data_fetch_type=sample_min_record`).then(res => {\n setData(res?.data?.qa_json_data)\n setLoading(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoading(false)\n })\n }\n }, [activeTabName])\n\n return (\n \n \n Sample record with min number of fields\n \n \n {\n loading ? \n :\n <>\n {\n data?.file_present == false ? \n \n \n \n :\n \n }\n \n }\n \n \n )\n}\n\n","import React, {useState, useEffect} from 'react'\nimport { Card, CardHeader, CardBody, Alert } from 'reactstrap'\nimport Loader from 'react-loader-spinner';\nimport axios from 'axios'\nimport { toast } from 'react-toastify';\nimport DataTable from 'react-data-table-component';\nimport { useParams } from \"react-router-dom\";\nimport { JSONTree } from 'react-json-tree';\n\nexport default function SampleMissingFields({activeTabName}) {\n let { sitename } = useParams();\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (activeTabName == \"segment_level_qa\"){\n setLoading(true)\n axios.get(`/api/v1/internal/qa/segment_level_qa?site_name=${sitename}&data_fetch_type=sample_missing_fields`).then(res => {\n setData(res?.data?.qa_json_data)\n setLoading(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoading(false)\n })\n }\n }, [activeTabName])\n\n return (\n \n \n Missing fields\n \n \n {\n loading ? \n :\n <>\n {\n data?.file_present == false ? \n \n \n \n :\n {data?.sample_record_for_missing_field}\n }\n \n }\n \n \n )\n}\n\n","import React, {useState, useEffect} from 'react'\nimport { Alert } from 'reactstrap'\nimport Loader from 'react-loader-spinner';\nimport axios from 'axios'\nimport { toast } from 'react-toastify';\nimport DataTable from 'react-data-table-component';\nimport { useParams } from \"react-router-dom\";\nimport { JSONTree } from 'react-json-tree';\nimport ScrollArea from 'react-scrollbar';\n\nexport default function SegmentLevelDataFile({theme, downloadDoc, activeTabName}) {\n let { sitename } = useParams();\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(true);\n const [download, setDownload] = useState(false);\n const [dataFileColumns, setDataFileColumns] = useState([])\n\n useEffect(() => {\n if (activeTabName == \"data_file\"){\n setLoading(true)\n axios.get(`/api/v1/internal/qa/segment_level_qa_data_file?site_name=${sitename}&data_fetch_type=data_file`).then(res => {\n setData(res?.data?.data_file)\n\n if (res?.data?.data_file?.file_present){\n let tableColumns = res.data?.data_file?.file_content[0]\n let resultColumns = []\n tableColumns?.forEach((each, index) => {\n if (index == 6){\n resultColumns.push({\n name: each, selector: `a${index}`, width: '400px'\n })\n } else{\n resultColumns.push({\n name: each, selector: `a${index}`\n })\n }\n })\n setDataFileColumns(resultColumns)\n }\n setLoading(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setLoading(false)\n })\n }\n }, [activeTabName])\n\n const handleDataDownload = () => {\n setDownload(true)\n axios.get(`/api/v1/internal/qa/${sitename}/download_data_file`).then(res => {\n if (data.file_extension == \"json\"){\n downloadDoc(JSON.stringify(res.data), data.file_name, data.content_type)\n }\n else{\n downloadDoc(res.data, data.file_name, data.content_type)\n }\n setDownload(false)\n }).catch(err => {\n console.log(\"err\", err);\n toast.error(err.response?.data?.message)\n setDownload(false)\n })\n } \n\n const transformData = arr => {\n let result = []\n if (arr){\n arr?.forEach((each) => {\n let tempObj = {}\n each?.forEach((each2, index) => {\n tempObj = {...tempObj, [`a${index}`]: each2}\n })\n result.push(tempObj)\n })\n return result\n }\n else{\n return result\n }\n }\n\n return (\n <>\n {\n loading ? \n :\n <>\n {\n data?.file_present == false ?\n \n \n \n : \n <>\n {\n data?.has_error == true ?\n <>\n \n \n \n \n :\n <>\n \n
\n Last updated: {data?.last_updated_at}\n
\n {\n download ?
\n : \n <>\n
\n to download the actual file
\n Click here to download the actual file
\n Showing atmost 200 randomly selected records.
\n \n \n }\n
\n
\n Last updated: {data?.last_updated_at}\n
\n
\n
\n {\n download ?
\n : \n
\n to download the actual file
\n Click here to download the actual file
\n Number of records considered for QA Report: {data?.qa_total_records}
\n \n }\n
\n \n List Name
\n setListName(e.target.value)} />\n \n \n Site names
\n
\n \n \n \n \n \n \n \n \n )\n}\n","import React from 'react';\nimport moment from \"moment\";\nimport DataTable from 'react-data-table-component';\n\n\n // Helper function for getting difference in time\n function getDifferenceInHours(start_date, end_date) {\n let a = moment(end_date);\n let b = moment(start_date);\n let hours = a.diff(b, 'hours');\n let minutes = moment.utc(a.diff(b)).format(\"mm\");\n let seconds = moment.utc(a.diff(b)).format(\"ss\");\n return `${Math.floor(hours)}h ${Math.floor(minutes)}m ${seconds}s`\n};\n\n// Table column definitions\nconst columns = [\n {\n name: 'Site',\n selector: 'site',\n center: true,\n sortable: true,\n cell: row => {row.site}
\n },\n {\n name: 'Host Name',\n selector: 'hostname',\n center: true,\n sortable: true\n },\n {\n name: 'Crawl Date',\n selector: 'crawldate',\n center: true,\n sortable: true\n },\n {\n name: 'Extraction Start Time',\n selector: 'extraction_start_time',\n center: true, sortable: true,\n cell: row => {moment.utc(row.extraction_start_time).format('YYYY-MM-DD HH:mm:ss')} UTC
\n },\n {\n name: 'Extraction End Time',\n selector: 'extraction_end_time',\n center: true,\n sortable: true,\n cell: row => {moment.utc(row.extraction_end_time).format('YYYY-MM-DD HH:mm:ss')} UTC
\n },\n {\n name: 'Takes More Time',\n center: true, sortable: true,\n cell: row => {getDifferenceInHours(row.extraction_start_time, row.extraction_end_time)}
\n },\n];\n\nexport default function SegmentsDataTable(props) {\n return (\n \n \n
\n )\n}\n","import invariant from 'invariant';\n\nvar noop = function noop() {};\n\nfunction readOnlyPropType(handler, name) {\n return function (props, propName) {\n if (props[propName] !== undefined) {\n if (!props[handler]) {\n return new Error(\"You have provided a `\" + propName + \"` prop to `\" + name + \"` \" + (\"without an `\" + handler + \"` handler prop. This will render a read-only field. \") + (\"If the field should be mutable use `\" + defaultKey(propName) + \"`. \") + (\"Otherwise, set `\" + handler + \"`.\"));\n }\n }\n };\n}\n\nexport function uncontrolledPropTypes(controlledValues, displayName) {\n var propTypes = {};\n Object.keys(controlledValues).forEach(function (prop) {\n // add default propTypes for folks that use runtime checks\n propTypes[defaultKey(prop)] = noop;\n\n if (process.env.NODE_ENV !== 'production') {\n var handler = controlledValues[prop];\n !(typeof handler === 'string' && handler.trim().length) ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Uncontrollable - [%s]: the prop `%s` needs a valid handler key name in order to make it uncontrollable', displayName, prop) : invariant(false) : void 0;\n propTypes[prop] = readOnlyPropType(handler, displayName);\n }\n });\n return propTypes;\n}\nexport function isProp(props, prop) {\n return props[prop] !== undefined;\n}\nexport function defaultKey(key) {\n return 'default' + key.charAt(0).toUpperCase() + key.substr(1);\n}\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\nexport function canAcceptRef(component) {\n return !!component && (typeof component !== 'function' || component.prototype && component.prototype.isReactComponent);\n}","function _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\n\nfunction _toPropertyKey(arg) {\n var key = _toPrimitive(arg, \"string\");\n\n return _typeof(key) === \"symbol\" ? key : String(key);\n}\n\nfunction _toPrimitive(input, hint) {\n if (_typeof(input) !== \"object\" || input === null) return input;\n var prim = input[Symbol.toPrimitive];\n\n if (prim !== undefined) {\n var res = prim.call(input, hint || \"default\");\n if (_typeof(res) !== \"object\") return res;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n\n return (hint === \"string\" ? String : Number)(input);\n}\n\nimport { useCallback, useRef, useState } from 'react';\nimport * as Utils from './utils';\n\nfunction useUncontrolledProp(propValue, defaultValue, handler) {\n var wasPropRef = useRef(propValue !== undefined);\n\n var _useState = useState(defaultValue),\n stateValue = _useState[0],\n setState = _useState[1];\n\n var isProp = propValue !== undefined;\n var wasProp = wasPropRef.current;\n wasPropRef.current = isProp;\n /**\n * If a prop switches from controlled to Uncontrolled\n * reset its value to the defaultValue\n */\n\n if (!isProp && wasProp && stateValue !== defaultValue) {\n setState(defaultValue);\n }\n\n return [isProp ? propValue : stateValue, useCallback(function (value) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n if (handler) handler.apply(void 0, [value].concat(args));\n setState(value);\n }, [handler])];\n}\n\nexport { useUncontrolledProp };\nexport default function useUncontrolled(props, config) {\n return Object.keys(config).reduce(function (result, fieldName) {\n var _extends2;\n\n var _ref = result,\n defaultValue = _ref[Utils.defaultKey(fieldName)],\n propsValue = _ref[fieldName],\n rest = _objectWithoutPropertiesLoose(_ref, [Utils.defaultKey(fieldName), fieldName].map(_toPropertyKey));\n\n var handlerName = config[fieldName];\n\n var _useUncontrolledProp = useUncontrolledProp(propsValue, defaultValue, props[handlerName]),\n value = _useUncontrolledProp[0],\n handler = _useUncontrolledProp[1];\n\n return _extends({}, rest, (_extends2 = {}, _extends2[fieldName] = value, _extends2[handlerName] = handler, _extends2));\n }, props);\n}","import React from 'react'; // TODO: check\n\nvar context = /*#__PURE__*/React.createContext(null);\ncontext.displayName = 'NavbarContext';\nexport default context;","import { useMemo } from 'react';\n\nvar toFnRef = function toFnRef(ref) {\n return !ref || typeof ref === 'function' ? ref : function (value) {\n ref.current = value;\n };\n};\n\nexport function mergeRefs(refA, refB) {\n var a = toFnRef(refA);\n var b = toFnRef(refB);\n return function (value) {\n if (a) a(value);\n if (b) b(value);\n };\n}\n/**\n * Create and returns a single callback ref composed from two other Refs.\n *\n * ```tsx\n * const Button = React.forwardRef((props, ref) => {\n * const [element, attachRef] = useCallbackRef();\n * const mergedRef = useMergedRefs(ref, attachRef);\n *\n * return \n * })\n * ```\n *\n * @param refA A Callback or mutable Ref\n * @param refB A Callback or mutable Ref\n * @category refs\n */\n\nfunction useMergedRefs(refA, refB) {\n return useMemo(function () {\n return mergeRefs(refA, refB);\n }, [refA, refB]);\n}\n\nexport default useMergedRefs;","import React from 'react'; // TODO: check this\n\nvar NavContext = /*#__PURE__*/React.createContext(null);\nNavContext.displayName = 'NavContext';\nexport default NavContext;","import React from 'react'; // TODO (apparently this is a bare \"onSelect\"?)\n\nvar SelectableContext = /*#__PURE__*/React.createContext(null);\nexport var makeEventKey = function makeEventKey(eventKey, href) {\n if (href === void 0) {\n href = null;\n }\n\n if (eventKey != null) return String(eventKey);\n return href || null;\n};\nexport default SelectableContext;","import React from 'react';\nvar TabContext = /*#__PURE__*/React.createContext(null);\nexport default TabContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"as\", \"onSelect\", \"activeKey\", \"role\", \"onKeyDown\"];\nimport qsa from 'dom-helpers/querySelectorAll';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport useForceUpdate from '@restart/hooks/useForceUpdate';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nimport TabContext from './TabContext'; // eslint-disable-next-line @typescript-eslint/no-empty-function\n\nvar noop = function noop() {};\n\nvar AbstractNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'ul' : _ref$as,\n onSelect = _ref.onSelect,\n activeKey = _ref.activeKey,\n role = _ref.role,\n onKeyDown = _ref.onKeyDown,\n props = _objectWithoutPropertiesLoose(_ref, _excluded); // A ref and forceUpdate for refocus, b/c we only want to trigger when needed\n // and don't want to reset the set in the effect\n\n\n var forceUpdate = useForceUpdate();\n var needsRefocusRef = useRef(false);\n var parentOnSelect = useContext(SelectableContext);\n var tabContext = useContext(TabContext);\n var getControlledId, getControllerId;\n\n if (tabContext) {\n role = role || 'tablist';\n activeKey = tabContext.activeKey;\n getControlledId = tabContext.getControlledId;\n getControllerId = tabContext.getControllerId;\n }\n\n var listNode = useRef(null);\n\n var getNextActiveChild = function getNextActiveChild(offset) {\n var currentListNode = listNode.current;\n if (!currentListNode) return null;\n var items = qsa(currentListNode, '[data-rb-event-key]:not(.disabled)');\n var activeChild = currentListNode.querySelector('.active');\n if (!activeChild) return null;\n var index = items.indexOf(activeChild);\n if (index === -1) return null;\n var nextIndex = index + offset;\n if (nextIndex >= items.length) nextIndex = 0;\n if (nextIndex < 0) nextIndex = items.length - 1;\n return items[nextIndex];\n };\n\n var handleSelect = function handleSelect(key, event) {\n if (key == null) return;\n if (onSelect) onSelect(key, event);\n if (parentOnSelect) parentOnSelect(key, event);\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (onKeyDown) onKeyDown(event);\n var nextActiveChild;\n\n switch (event.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n nextActiveChild = getNextActiveChild(-1);\n break;\n\n case 'ArrowRight':\n case 'ArrowDown':\n nextActiveChild = getNextActiveChild(1);\n break;\n\n default:\n return;\n }\n\n if (!nextActiveChild) return;\n event.preventDefault();\n handleSelect(nextActiveChild.dataset.rbEventKey, event);\n needsRefocusRef.current = true;\n forceUpdate();\n };\n\n useEffect(function () {\n if (listNode.current && needsRefocusRef.current) {\n var activeChild = listNode.current.querySelector('[data-rb-event-key].active');\n if (activeChild) activeChild.focus();\n }\n\n needsRefocusRef.current = false;\n });\n var mergedRef = useMergedRefs(ref, listNode);\n return /*#__PURE__*/React.createElement(SelectableContext.Provider, {\n value: handleSelect\n }, /*#__PURE__*/React.createElement(NavContext.Provider, {\n value: {\n role: role,\n // used by NavLink to determine it's role\n activeKey: makeEventKey(activeKey),\n getControlledId: getControlledId || noop,\n getControllerId: getControllerId || noop\n }\n }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n onKeyDown: handleKeyDown,\n ref: mergedRef,\n role: role\n }))));\n});\nexport default AbstractNav;","import { useReducer } from 'react';\n/**\n * Returns a function that triggers a component update. the hook equivalent to\n * `this.forceUpdate()` in a class component. In most cases using a state value directly\n * is preferable but may be required in some advanced usages of refs for interop or\n * when direct DOM manipulation is required.\n *\n * ```ts\n * const forceUpdate = useForceUpdate();\n *\n * const updateOnClick = useCallback(() => {\n * forceUpdate()\n * }, [forceUpdate])\n *\n * return \n * ```\n */\n\nexport default function useForceUpdate() {\n // The toggling state value is designed to defeat React optimizations for skipping\n // updates when they are stricting equal to the last state value\n var _useReducer = useReducer(function (state) {\n return !state;\n }, false),\n dispatch = _useReducer[1];\n\n return dispatch;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"className\", \"children\", \"as\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar NavItem = /*#__PURE__*/React.forwardRef( // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\nfunction (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n className = _ref.className,\n children = _ref.children,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-item');\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n className: classNames(className, bsPrefix)\n }), children);\n});\nNavItem.displayName = 'NavItem';\nexport default NavItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"active\", \"className\", \"eventKey\", \"onSelect\", \"onClick\", \"as\"];\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport useEventCallback from '@restart/hooks/useEventCallback';\nimport warning from 'warning';\nimport NavContext from './NavContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nvar defaultProps = {\n disabled: false\n};\nvar AbstractNavItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var active = _ref.active,\n className = _ref.className,\n eventKey = _ref.eventKey,\n onSelect = _ref.onSelect,\n onClick = _ref.onClick,\n Component = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n var navKey = makeEventKey(eventKey, props.href);\n var parentOnSelect = useContext(SelectableContext);\n var navContext = useContext(NavContext);\n var isActive = active;\n\n if (navContext) {\n if (!props.role && navContext.role === 'tablist') props.role = 'tab';\n var contextControllerId = navContext.getControllerId(navKey);\n var contextControlledId = navContext.getControlledId(navKey);\n process.env.NODE_ENV !== \"production\" ? warning(!contextControllerId || !props.id, \"[react-bootstrap] The provided id '\" + props.id + \"' was overwritten by the current navContext with '\" + contextControllerId + \"'.\") : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!contextControlledId || !props['aria-controls'], \"[react-bootstrap] The provided aria-controls value '\" + props['aria-controls'] + \"' was overwritten by the current navContext with '\" + contextControlledId + \"'.\") : void 0;\n props['data-rb-event-key'] = navKey;\n props.id = contextControllerId || props.id;\n props['aria-controls'] = contextControlledId || props['aria-controls'];\n isActive = active == null && navKey != null ? navContext.activeKey === navKey : active;\n }\n\n if (props.role === 'tab') {\n if (props.disabled) {\n props.tabIndex = -1;\n props['aria-disabled'] = true;\n }\n\n props['aria-selected'] = isActive;\n }\n\n var handleOnclick = useEventCallback(function (e) {\n if (onClick) onClick(e);\n if (navKey == null) return;\n if (onSelect) onSelect(navKey, e);\n if (parentOnSelect) parentOnSelect(navKey, e);\n });\n return /*#__PURE__*/React.createElement(Component, _extends({}, props, {\n ref: ref,\n onClick: handleOnclick,\n className: classNames(className, isActive && 'active')\n }));\n});\nAbstractNavItem.defaultProps = defaultProps;\nexport default AbstractNavItem;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"disabled\", \"className\", \"href\", \"eventKey\", \"onSelect\", \"as\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport SafeAnchor from './SafeAnchor';\nimport AbstractNavItem from './AbstractNavItem';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar defaultProps = {\n disabled: false,\n as: SafeAnchor\n};\nvar NavLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n disabled = _ref.disabled,\n className = _ref.className,\n href = _ref.href,\n eventKey = _ref.eventKey,\n onSelect = _ref.onSelect,\n as = _ref.as,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n bsPrefix = useBootstrapPrefix(bsPrefix, 'nav-link');\n return /*#__PURE__*/React.createElement(AbstractNavItem, _extends({}, props, {\n href: href,\n ref: ref,\n eventKey: eventKey,\n as: as,\n disabled: disabled,\n onSelect: onSelect,\n className: classNames(className, bsPrefix, disabled && 'disabled')\n }));\n});\nNavLink.displayName = 'NavLink';\nNavLink.defaultProps = defaultProps;\nexport default NavLink;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"as\", \"bsPrefix\", \"variant\", \"fill\", \"justify\", \"navbar\", \"navbarScroll\", \"className\", \"children\", \"activeKey\"];\nimport classNames from 'classnames';\nimport all from 'prop-types-extra/lib/all';\nimport React, { useContext } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport NavbarContext from './NavbarContext';\nimport CardContext from './CardContext';\nimport AbstractNav from './AbstractNav';\nimport NavItem from './NavItem';\nimport NavLink from './NavLink';\nvar defaultProps = {\n justify: false,\n fill: false\n};\nvar Nav = /*#__PURE__*/React.forwardRef(function (uncontrolledProps, ref) {\n var _classNames;\n\n var _useUncontrolled = useUncontrolled(uncontrolledProps, {\n activeKey: 'onSelect'\n }),\n _useUncontrolled$as = _useUncontrolled.as,\n as = _useUncontrolled$as === void 0 ? 'div' : _useUncontrolled$as,\n initialBsPrefix = _useUncontrolled.bsPrefix,\n variant = _useUncontrolled.variant,\n fill = _useUncontrolled.fill,\n justify = _useUncontrolled.justify,\n navbar = _useUncontrolled.navbar,\n navbarScroll = _useUncontrolled.navbarScroll,\n className = _useUncontrolled.className,\n children = _useUncontrolled.children,\n activeKey = _useUncontrolled.activeKey,\n props = _objectWithoutPropertiesLoose(_useUncontrolled, _excluded);\n\n var bsPrefix = useBootstrapPrefix(initialBsPrefix, 'nav');\n var navbarBsPrefix;\n var cardHeaderBsPrefix;\n var isNavbar = false;\n var navbarContext = useContext(NavbarContext);\n var cardContext = useContext(CardContext);\n\n if (navbarContext) {\n navbarBsPrefix = navbarContext.bsPrefix;\n isNavbar = navbar == null ? true : navbar;\n } else if (cardContext) {\n cardHeaderBsPrefix = cardContext.cardHeaderBsPrefix;\n }\n\n return /*#__PURE__*/React.createElement(AbstractNav, _extends({\n as: as,\n ref: ref,\n activeKey: activeKey,\n className: classNames(className, (_classNames = {}, _classNames[bsPrefix] = !isNavbar, _classNames[navbarBsPrefix + \"-nav\"] = isNavbar, _classNames[navbarBsPrefix + \"-nav-scroll\"] = isNavbar && navbarScroll, _classNames[cardHeaderBsPrefix + \"-\" + variant] = !!cardHeaderBsPrefix, _classNames[bsPrefix + \"-\" + variant] = !!variant, _classNames[bsPrefix + \"-fill\"] = fill, _classNames[bsPrefix + \"-justified\"] = justify, _classNames))\n }, props), children);\n});\nNav.displayName = 'Nav';\nNav.defaultProps = defaultProps;\nNav.Item = NavItem;\nNav.Link = NavLink;\nexport default Nav;","import React, { useMemo } from 'react';\nimport { useUncontrolled } from 'uncontrollable';\nimport TabContext from './TabContext';\nimport SelectableContext from './SelectableContext';\n\nvar TabContainer = function TabContainer(props) {\n var _useUncontrolled = useUncontrolled(props, {\n activeKey: 'onSelect'\n }),\n id = _useUncontrolled.id,\n generateCustomChildId = _useUncontrolled.generateChildId,\n onSelect = _useUncontrolled.onSelect,\n activeKey = _useUncontrolled.activeKey,\n transition = _useUncontrolled.transition,\n mountOnEnter = _useUncontrolled.mountOnEnter,\n unmountOnExit = _useUncontrolled.unmountOnExit,\n children = _useUncontrolled.children;\n\n var generateChildId = useMemo(function () {\n return generateCustomChildId || function (key, type) {\n return id ? id + \"-\" + type + \"-\" + key : null;\n };\n }, [id, generateCustomChildId]);\n var tabContext = useMemo(function () {\n return {\n onSelect: onSelect,\n activeKey: activeKey,\n transition: transition,\n mountOnEnter: mountOnEnter || false,\n unmountOnExit: unmountOnExit || false,\n getControlledId: function getControlledId(key) {\n return generateChildId(key, 'tabpane');\n },\n getControllerId: function getControllerId(key) {\n return generateChildId(key, 'tab');\n }\n };\n }, [onSelect, activeKey, transition, mountOnEnter, unmountOnExit, generateChildId]);\n return /*#__PURE__*/React.createElement(TabContext.Provider, {\n value: tabContext\n }, /*#__PURE__*/React.createElement(SelectableContext.Provider, {\n value: onSelect || null\n }, children));\n};\n\nexport default TabContainer;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"bsPrefix\", \"as\", \"className\"];\nimport classNames from 'classnames';\nimport React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nvar TabContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {\n var bsPrefix = _ref.bsPrefix,\n _ref$as = _ref.as,\n Component = _ref$as === void 0 ? 'div' : _ref$as,\n className = _ref.className,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n var decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'tab-content');\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref\n }, props, {\n className: classNames(className, decoratedBsPrefix)\n }));\n});\nexport default TabContent;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nvar _excluded = [\"activeKey\", \"getControlledId\", \"getControllerId\"],\n _excluded2 = [\"bsPrefix\", \"className\", \"active\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"mountOnEnter\", \"unmountOnExit\", \"transition\", \"as\", \"eventKey\"];\nimport classNames from 'classnames';\nimport React, { useContext } from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport TabContext from './TabContext';\nimport SelectableContext, { makeEventKey } from './SelectableContext';\nimport Fade from './Fade';\n\nfunction useTabContext(props) {\n var context = useContext(TabContext);\n if (!context) return props;\n\n var activeKey = context.activeKey,\n getControlledId = context.getControlledId,\n getControllerId = context.getControllerId,\n rest = _objectWithoutPropertiesLoose(context, _excluded);\n\n var shouldTransition = props.transition !== false && rest.transition !== false;\n var key = makeEventKey(props.eventKey);\n return _extends({}, props, {\n active: props.active == null && key != null ? makeEventKey(activeKey) === key : props.active,\n id: getControlledId(props.eventKey),\n 'aria-labelledby': getControllerId(props.eventKey),\n transition: shouldTransition && (props.transition || rest.transition || Fade),\n mountOnEnter: props.mountOnEnter != null ? props.mountOnEnter : rest.mountOnEnter,\n unmountOnExit: props.unmountOnExit != null ? props.unmountOnExit : rest.unmountOnExit\n });\n}\n\nvar TabPane = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var _useTabContext = useTabContext(props),\n bsPrefix = _useTabContext.bsPrefix,\n className = _useTabContext.className,\n active = _useTabContext.active,\n onEnter = _useTabContext.onEnter,\n onEntering = _useTabContext.onEntering,\n onEntered = _useTabContext.onEntered,\n onExit = _useTabContext.onExit,\n onExiting = _useTabContext.onExiting,\n onExited = _useTabContext.onExited,\n mountOnEnter = _useTabContext.mountOnEnter,\n unmountOnExit = _useTabContext.unmountOnExit,\n Transition = _useTabContext.transition,\n _useTabContext$as = _useTabContext.as,\n Component = _useTabContext$as === void 0 ? 'div' : _useTabContext$as,\n _ = _useTabContext.eventKey,\n rest = _objectWithoutPropertiesLoose(_useTabContext, _excluded2);\n\n var prefix = useBootstrapPrefix(bsPrefix, 'tab-pane');\n if (!active && !Transition && unmountOnExit) return null;\n var pane = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {\n ref: ref,\n role: \"tabpanel\",\n \"aria-hidden\": !active,\n className: classNames(className, prefix, {\n active: active\n })\n }));\n if (Transition) pane = /*#__PURE__*/React.createElement(Transition, {\n in: active,\n onEnter: onEnter,\n onEntering: onEntering,\n onEntered: onEntered,\n onExit: onExit,\n onExiting: onExiting,\n onExited: onExited,\n mountOnEnter: mountOnEnter,\n unmountOnExit: unmountOnExit\n }, pane); // We provide an empty the TabContext so `