\r\n {tagGroup.length === 0 ? (\r\n 선택안함 \r\n ) : (\r\n tagGroup.map((m, i) => (\r\n \r\n {m.tagName}\r\n tagDelete(m)}>\r\n close\r\n \r\n \r\n ))\r\n )}\r\n
\r\n {isTrafficType() && ※트래픽IP는 최대 5개까지 설정 가능합니다.
}\r\n \r\n }\r\n allCheckboxView={!isTrafficType()}\r\n checkboxDisabled={checkboxDisabled}\r\n checkItems={checkItems}\r\n setCheckItems={setCheckItems}\r\n addHandleModal={tagAddModalHandle}\r\n add={tagAdd}\r\n t={t}\r\n optionType={'Tag'}\r\n >\r\n );\r\n};\r\n\r\nexport default MonitoringCurrentSituationSetting;\r\n","import React, { useEffect, useState, memo } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { pannelAction } from '../../redux/monitoring/ReducerMonitoringPannel';\r\nimport LoadingSpninner from '../dataState/LoadingSpninner';\r\nimport _ from 'lodash';\r\nimport { mcsAction } from '../../redux/dashboard/ReducerMonitoringCurrentSituationSetting';\r\nimport ErrorHandler from '../error/ErrorHandler';\r\nimport { monitoringModalAction } from '../../redux/monitoring/ReducerMonitoringModal';\r\nconst Popup = memo(({ serverTagData,tagAddModalHandle, Type }) => {\r\n const dispatch = useDispatch();\r\n const [onPercent, setOnPercent] = useState(0);\r\n const [onPercentAnimation, setOnPercentAnimation] = useState(0);\r\n const [downPercent, setDownPercent] = useState(0);\r\n const [downPercentAnimation, setDownPercentAnimation] = useState(0);\r\n\r\n const [nonRegisteredPercent, setNonRegisteredPercent] = useState(0);\r\n const [nonRegisteredAnimation, setNonRegisteredAnimation] = useState(0);\r\n const [allSelcet, setAllSelect] = useState(true);\r\n const { upTime, isMenuChanged } = useSelector((state) => state.dashboard);\r\n\r\n const [onCount, setOnCount] = useState(0);\r\n const [downCount, setDownCount] = useState(0);\r\n const [nonRegisteredCount, setNonRegisteredCount] = useState(0);\r\n const [isDarkMode, setIsDarkMode] = useState(false);\r\n\r\n const [tagGroup, setTagGroup] = useState([]);\r\n const { [`${Type}monitoring`]: data, loading, error } = useSelector((state) => state.mcs);\r\n //const [serverTagData, setServerTagDate] = useState(0);\r\n const [initialized, setInitialized] = useState(false);\r\n const [viewTag, setViewTag] = useState(false);\r\n const [isLoading, setIsLoading] = useState(true);\r\n useEffect(() => {\r\n if (!initialized) {\r\n dispatch(mcsAction.getMonitoringCurrentSituationSetting(Type));\r\n setInitialized(true);\r\n }\r\n\r\n const intervalId = setInterval(() => {\r\n dispatch(mcsAction.getMonitoringCurrentSituationSetting(Type));\r\n }, upTime || 60000);\r\n\r\n return () => {\r\n clearInterval(intervalId);\r\n };\r\n }, [dispatch, initialized, upTime, isMenuChanged]);\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n animationInit();\r\n action();\r\n setTagGroup(\r\n _.chain(data.filter((f) => f.type === Type || f.type === null))\r\n .groupBy('tagName')\r\n .map((g) => ({\r\n tagName: _.get(_.find(g, 'tagName'), 'tagName'),\r\n hostName: g.map((m) => m.hostName),\r\n }))\r\n .value()\r\n );\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n let intervalId;\r\n const makeChart = () => {\r\n intervalId = setInterval(() => {\r\n if (onPercentAnimation < onPercent) {\r\n setOnPercentAnimation((prevPercent) => prevPercent + 1);\r\n } else {\r\n clearInterval(intervalId);\r\n }\r\n }, 10);\r\n\r\n return () => clearInterval(intervalId);\r\n };\r\n makeChart();\r\n return () => clearInterval(intervalId);\r\n }, [onPercentAnimation, onPercent]);\r\n\r\n useEffect(() => {\r\n const tagGroupLength = tagGroup.reduce((total, item) => total + item.hostName.length, 0);\r\n const isAllSelected = serverTagData === tagGroupLength;\r\n console.log('serverTagData :' + serverTagData);\r\n console.log('tagGroupLength : ' + tagGroupLength);\r\n console.log(tagGroup);\r\n setAllSelect(isAllSelected);\r\n }, [tagGroup, serverTagData]);\r\n\r\n useEffect(() => {\r\n let intervalId;\r\n\r\n const makeChart = () => {\r\n intervalId = setInterval(() => {\r\n if (downPercentAnimation < downPercent) {\r\n setDownPercentAnimation((prevPercent) => prevPercent + 1);\r\n } else {\r\n clearInterval(intervalId);\r\n }\r\n }, 10);\r\n\r\n return () => clearInterval(intervalId);\r\n };\r\n makeChart();\r\n return () => clearInterval(intervalId);\r\n }, [downPercentAnimation, downPercent]);\r\n\r\n useEffect(() => {\r\n let intervalId;\r\n\r\n const makeChart = () => {\r\n intervalId = setInterval(() => {\r\n if (nonRegisteredAnimation < nonRegisteredPercent) {\r\n setNonRegisteredAnimation((prevPercent) => prevPercent + 1);\r\n } else {\r\n clearInterval(intervalId);\r\n }\r\n }, 10);\r\n\r\n return () => clearInterval(intervalId);\r\n };\r\n\r\n makeChart();\r\n\r\n return () => clearInterval(intervalId);\r\n }, [nonRegisteredAnimation, nonRegisteredPercent]);\r\n\r\n const action = () => {\r\n dispatch(\r\n pannelAction.getMonitoringPannel(\r\n data.length !== 0\r\n ? data\r\n .filter((f) => f.type === Type)\r\n .map((m) => m.hostId)\r\n .join(',')\r\n : ''\r\n )\r\n )\r\n .then((pannelResponse) => {\r\n const pannelData = pannelResponse.payload;\r\n if (pannelData.status != 403 && pannelData.length !== 0) {\r\n const onCount = pannelData.filter((x) => x === '정상').length;\r\n const downCount = pannelData.filter((x) => x === '비정상').length;\r\n const total = pannelData.length;\r\n\r\n setOnCount(onCount);\r\n setDownCount(downCount);\r\n setNonRegisteredCount(total - (onCount + downCount));\r\n setOnPercent(Math.round((onCount / total) * 100));\r\n setDownPercent(Math.round((downCount / total) * 100));\r\n setNonRegisteredPercent(Math.round(((total - (onCount + downCount)) / total) * 100));\r\n }\r\n })\r\n .finally(() => setIsLoading(false));\r\n };\r\n const handleDarkModel = () => {\r\n setIsDarkMode(!isDarkMode);\r\n };\r\n const viewTagsHandle = () => {\r\n setViewTag(!viewTag);\r\n };\r\n\r\n const displayNone = {\r\n display: 'none',\r\n };\r\n const animationInit = () => {\r\n setOnPercentAnimation(0);\r\n setDownPercentAnimation(0);\r\n setNonRegisteredAnimation(0);\r\n };\r\n const downStyle = {\r\n background: `conic-gradient(#FD4646 0% ${downPercentAnimation}%, #eee ${downPercentAnimation}% 100%)`,\r\n };\r\n\r\n const onRegStyle = {\r\n background: `conic-gradient(#3DE78B 0% ${onPercentAnimation}%, #eee ${onPercentAnimation}% 100%)`,\r\n };\r\n const nonRegStyle = {\r\n background: `conic-gradient(#FEDD33 0% ${nonRegisteredAnimation}%, #eee ${nonRegisteredAnimation}% 100%)`,\r\n };\r\n\r\n if (error) {\r\n return \r\n \r\n m.ip).includes(ipAddress) ? true : false}\r\n onChange={(e) => handleSingleCheck(e.target.checked, { hostID: hostID, ip: ipAddress })}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n {ipAddress}\r\n
\r\n \r\n \r\n {tags.length !== 0 && (\r\n \r\n
\r\n {pickedTag().tagName}\r\n deleteTag(pickedTag().tagName, pickedTag().id)}>\r\n close\r\n \r\n \r\n\r\n
\r\n
\r\n viewTagsHandle()}>\r\n add\r\n \r\n
\r\n\r\n
\r\n
\r\n \r\n \r\n 대표 \r\n 태그명 \r\n \r\n \r\n \r\n {tags.map((m) => (\r\n \r\n \r\n pickTag(m.tagName, m.id, hostID, m.picked)}\r\n >\r\n \r\n \r\n \r\n {m.tagName}\r\n deleteTag(m.tagName, m.id)}>\r\n close\r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n {cpuUsageRate !== -1 && cpuUsageRate !== 'Infinity' ? (\r\n \r\n
\r\n
{cpuUsageRate}
\r\n
\r\n \r\n {memoryUsageRate !== -1 && memoryUsageRate !== 'Infinity' ? (\r\n \r\n
\r\n
{memoryUsageRate}
\r\n
\r\n \r\n {diskUsageRate !== -1 && diskUsageRate !== 'Infinity' ? (\r\n \r\n
\r\n
{diskUsageRate}
\r\n
\r\n \r\n {raidState == 0 && UP
}\r\n {raidState == 1 && DOWN
}\r\n \r\n \r\n \r\n IN \r\n {nowInTraffic} \r\n
\r\n \r\n OUT \r\n {nowOutTraffic} \r\n
\r\n \r\n \r\n {services.length !== 0 && (\r\n <>\r\n \r\n {services.slice(0, 3).map((port, index) => (\r\n {port} \r\n ))}\r\n
\r\n\r\n \r\n
\r\n viewServicesHandle()}>\r\n add\r\n \r\n
\r\n
\r\n {services.map((port) => (\r\n {port} \r\n ))}\r\n
\r\n
\r\n {/* \r\n \r\n {t('확인')}\r\n \r\n */}\r\n \r\n );\r\n }\r\n);\r\n\r\nexport default LiveMonitoringTableItem;\r\n","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport TableNoData from '../dataState/TableNoData';\r\nimport LiveMonitoringTableItem from './LiveMonitoringTableItem';\r\nimport LoadingSpninner from '../dataState/LoadingSpninner';\r\nconst LiveMonitoringTableList = ({ error, monitoringList, tableSwitch, loading, checkItems, setCheckItems }) => {\r\n const { t } = useTranslation('Lang');\r\n const handleAllCheck = (checked) => {\r\n if (checked) {\r\n const idArray = [];\r\n if (monitoringList != null) {\r\n monitoringList.forEach((el) => idArray.push({ hostID: el.hostID, ip: el.ipAddress }));\r\n setCheckItems(idArray);\r\n }\r\n } else {\r\n setCheckItems([]);\r\n }\r\n };\r\n\r\n const handleSingleCheck = (checked, id) => {\r\n if (checked) {\r\n setCheckItems([...checkItems, id]);\r\n } else {\r\n // 체크 해제\r\n setCheckItems(checkItems.filter((el) => el.hostID !== id.hostID));\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n setcState([item.selection])}\r\n editableDateInputs={false}\r\n moveRangeOnFirstSelection={false}\r\n ranges={cstate}\r\n months={1}\r\n direction=\"vertical\"\r\n scroll={{ enabled: true }}\r\n locale={i18n.language === 'zh-CN' ? zhCN : i18n.language === 'en-US' ? enUS : ko}\r\n dateDisplayFormat=\"yyyy/MM/dd\"\r\n staticRanges={defaultRange}\r\n inputRanges={[]}\r\n minDate={initDisabledDate && addDays(new Date(), initDisabledDate)}\r\n maxDate={addDays(new Date(), 0)}\r\n rangeColors={['var(--primary)']}\r\n />\r\n \r\n {t('적용')}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default DateRangePickerCompnent;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Select, { components } from 'react-select';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { SlideDown } from 'react-slidedown';\r\nimport { getTrafficIP, getTrafficFullData } from '../../redux/traffic/ActionTraffic';\r\nimport 'react-slidedown/lib/slidedown.css';\r\nimport { dateFormat, nowDateFormat, endDateFormat } from '../date/dateFormat';\r\nimport { useTranslation } from 'react-i18next';\r\nimport TrafficDetailGraph from './TrafficDetailGraph';\r\n\r\nconst TrafficTVmode = ({ setTvmodeActive, tvmodeActive, displayBlockStyle, displayNoneStyle }) => {\r\n const dispatch = useDispatch();\r\n const { trafficIPLoading, trafficIPData, trafficIPError } = useSelector((state) => state.ReducerTraffic);\r\n\r\n const startDate = dateFormat();\r\n\r\n useEffect(() => {}, []);\r\n\r\n const [darkOn, setDarkOn] = useState(false);\r\n const { t } = useTranslation('Lang');\r\n\r\n const tvModeOffClick = () => {\r\n setTvmodeActive(!tvmodeActive);\r\n };\r\n\r\n const toggleBackground = () => {\r\n setDarkOn(!darkOn);\r\n };\r\n\r\n const handleIpClick = (e, number) => {\r\n dispatch(getTrafficFullData(e.value, number));\r\n };\r\n\r\n const closedStyle = {\r\n transition: 'none ease .5s 0s',\r\n };\r\n\r\n const isDark = darkOn ? 'tv-container tv-dark' : 'tv-container';\r\n const isClosed = !tvmodeActive ? 'closed' : null;\r\n\r\n const MultiGraphFunc = (number) => {\r\n return (\r\n \r\n t('IP없음')}\r\n loadingMessage={() => t('IP조회중')}\r\n theme={theme => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n components={{\r\n IndicatorSeparator: null,\r\n }}\r\n tabSelectsValue={false}\r\n onChange={(e) => handleIpClick(e, number)}\r\n options={\r\n trafficIPData && trafficIPData.data.map(({ serverIdx, ipAddress }) => ({ value: serverIdx, label: ipAddress }))\r\n }\r\n />\r\n
\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
트래픽 비교 모드
\r\n
{startDate} \r\n \r\n \r\n \r\n {MultiGraphFunc(1)}\r\n {MultiGraphFunc(2)}\r\n {MultiGraphFunc(3)}\r\n
\r\n \r\n
\r\n {e.rank} \r\n {dateFormat(e.maxTime)} \r\n \r\n {e.maxBps}\r\n {e.bandUnit} \r\n \r\n \r\n );\r\n })\r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n no \r\n {t('시간')} \r\n {t('사용량')} \r\n \r\n \r\n \r\n {bandWidth()}\r\n \r\n {t('트래픽요금산정평균값')} \r\n {bandAvgTraffic} \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TrafficBandWidth;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { trafficAccountModal } from '../../redux/traffic/ActionTraffic';\r\nimport TrafficBandWidth from './TrafficBandWidth';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst TrafficAccount = ({ clickIp, chargeActive, startDate, endDate, trafficAllData }) => {\r\n const dispatch = useDispatch();\r\n const { accountModal } = useSelector((state) => state.ReducerTraffic);\r\n\r\n useEffect(() => {}, [clickIp, trafficAllData, startDate, endDate]);\r\n\r\n const { t } = useTranslation('Lang');\r\n\r\n const OpneModal = () => {\r\n dispatch(trafficAccountModal(accountModal));\r\n };\r\n\r\n const displayNoneStyle = {\r\n display: 'none',\r\n };\r\n\r\n const displayBlockStyle = {\r\n display: 'block',\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n {t('트래픽요금기준안내')}\r\n \r\n
{t('기간별트래픽송신합계')}(Bytes) \r\n
\r\n \r\n {clickIp ? (\r\n \r\n \r\n {startDate} ~ {endDate}\r\n \r\n {trafficAllData && trafficAllData.data.totalTraffic} \r\n \r\n ) : (\r\n \r\n {t('데이터가없습니다')} \r\n \r\n )}\r\n \r\n
\r\n
{t('기간별대역폭송신Top5')}(Bps) \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default TrafficAccount;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getTrafficAllData } from '../../redux/traffic/ActionTraffic';\r\nimport { onlyDaydateFormat, dateFormat } from '../date/dateFormat';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { CSVLink } from 'react-csv';\r\nconst TrafficFooterData = ({ clickIp, startDate, endDate }) => {\r\n const dispatch = useDispatch();\r\n const state = useSelector((state) => state.ReducerDatepicker);\r\n const user = useSelector((state) => state.oidc.user);\r\n const [csvData, setCsvData] = useState([]);\r\n const { trafficAllDataLoading, trafficAllData, trafficAllDataError } = useSelector((state) => state.ReducerTraffic);\r\n useEffect(() => {\r\n dispatch(getTrafficAllData(clickIp, startDate === '' ? onlyDaydateFormat(state.startDate) : startDate, endDate));\r\n trafficAllData && handle();\r\n }, [clickIp, startDate, endDate]);\r\n\r\n const handle = () => {};\r\n\r\n const { t } = useTranslation('Lang');\r\n\r\n function Data() {\r\n return (\r\n trafficAllData &&\r\n trafficAllData.data.trafficDailyDatas.map((e, i) => (\r\n \r\n {onlyDaydateFormat(e.trafficDate)} \r\n {e.inMaxBps} \r\n {dateFormat(e.inMaxTime)} \r\n {e.outMaxBps} \r\n {dateFormat(e.outMaxTime)} \r\n {e.inTotalTraffic} \r\n {e.outTotalTraffic} \r\n \r\n ))\r\n );\r\n }\r\n\r\n return (\r\n \r\n
\r\n [{startDate}~{endDate}]\r\n \r\n {trafficAllData && (\r\n ({\r\n 날짜: onlyDaydateFormat(e.trafficDate),\r\n IN최대값: e.inMaxBps,\r\n IN최대시간: dateFormat(e.inMaxTime),\r\n OUT최대값: e.outMaxBps,\r\n OUT최대시간: dateFormat(e.outMaxTime),\r\n IN총트래픽: e.inTotalTraffic,\r\n OUT총트래픽: e.outTotalTraffic,\r\n }))}\r\n filename={user.profile.name + '_트래픽데이터'}\r\n >\r\n CSV 내려받기\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t('날짜')}\r\n \r\n {t('대역종량제')} \r\n {t('트래픽종량제')} \r\n \r\n \r\n {t('IN최대값')} \r\n {t('IN최대시간')} \r\n {t('OUT최대값')} \r\n {t('OUT최대시간')} \r\n {t('IN총트래픽')} \r\n {t('OUT총트래픽')} \r\n \r\n \r\n \r\n {!clickIp ? (\r\n \r\n {t('데이터가없습니다')} \r\n \r\n ) : (\r\n Data()\r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {t('사용중인아이피가없습니다')}\r\n
\r\n
\r\n {trafficIPData && trafficIPData.data.length === 0 ? (\r\n ''\r\n ) : (\r\n
\r\n )}\r\n {/* IP 주소 선택 / 검색 */}\r\n \r\n
\r\n t('IP없음')}\r\n loadingMessage={() => t('IP조회중')}\r\n components={{\r\n IndicatorSeparator: null,\r\n }}\r\n tabSelectsValue={false}\r\n options={\r\n trafficIPData && trafficIPData.data.map(({ serverIdx, ipAddress }) => ({ value: serverIdx, label: ipAddress }))\r\n }\r\n value={\r\n trafficIPData &&\r\n trafficIPData.data\r\n .map(({ serverIdx, ipAddress }) => ({ value: serverIdx, label: ipAddress }))\r\n .filter(({ value }) => value === clickIp)\r\n }\r\n onChange={(e) => IpOnchange(e, 'main')}\r\n isLoading={trafficIPLoading}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n
\r\n
\r\n {subInterface && (\r\n ({ value: interfaceID, label: ipAddress }))}\r\n onChange={(e) => IpOnchange(e, 'sub')}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n >\r\n )}\r\n
\r\n\r\n
\r\n {t('기간설정')}\r\n \r\n {/*
\r\n {t('트래픽비교')}\r\n */}\r\n
\r\n
\r\n )}\r\n \r\n \r\n {t('트래픽확인')}\r\n \r\n \r\n {t('트래픽요금산정')}\r\n \r\n \r\n {/* 트래픽 확인 */}\r\n {!chargeActive && (\r\n \r\n \r\n
\r\n
\r\n
\r\n {t('트래픽상세')}\r\n \r\n {checkStartDate === startDate && tmp === 1 ? [checkEndDate] : '[' + startDate + '~' + endDate + ']'}\r\n \r\n \r\n {!clickIp ? (\r\n
{t('데이터가없습니다')}
\r\n ) : (tmp === 1 || tmp === 0) && checkStartDate === startDate ? (\r\n
\r\n ) : (\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n )}\r\n {/* 트래픽 요금 산정 */}\r\n \r\n {/* 하단 데이터 */}\r\n \r\n
\r\n ); // 로딩중이고 데이터 없을때만\r\n if (noticeerror) {\r\n return noticeerror.message;\r\n }\r\n }\r\n\r\n function NoticeTable() {\r\n if (noticedata) {\r\n if (noticedata.totalCount > 0) {\r\n return noticedata.data.map((e, i) => (\r\n \r\n {e.postNumber} \r\n \r\n getAllPageIndex(e, noticedata.data[i - 1], noticedata.data[i + 1], i)}>{e.subject} \r\n {/* getAllPageIndex(e)}>{e.subject} */}\r\n \r\n {onlyDaydateFormat(e.regDate)} \r\n {e.writer} \r\n \r\n ));\r\n }\r\n } else {\r\n return {t('데이터가없습니다')}
;\r\n }\r\n }\r\n\r\n function NoticeView(e) {\r\n if (noticedata.totalCount > 0) {\r\n return (\r\n \r\n
\r\n
{e.subject} \r\n
\r\n \r\n {t('작성자')}\r\n {e.writer} \r\n \r\n \r\n {t('작성일')}\r\n {onlyDaydateFormat(e.regDate)} \r\n \r\n \r\n {t('조회수')}\r\n {e.hit} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {LoadingFunc()}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('제목')} \r\n {t('작성일')} \r\n {t('작성자')} \r\n \r\n \r\n {NoticeTable()} \r\n
\r\n
\r\n
\r\n
'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={'on'}\r\n onPageChange={handlePageClick}\r\n />\r\n \r\n
\r\n
\r\n {NoticeView(ClickData)}\r\n
\r\n
\r\n
\r\n ); // 로딩중이고 데이터 없을때만\r\n if (securityerror) {\r\n return securityerror.message;\r\n }\r\n }\r\n\r\n function NoticeTable() {\r\n if (securitydata) {\r\n if (securitydata.totalCount > 0) {\r\n return securitydata.data.map((e, i) => (\r\n \r\n {e.postNumber} \r\n \r\n getAllPageIndex(e, securitydata.data[i - 1], securitydata.data[i + 1], i)}>{e.subject} \r\n {/* getAllPageIndex(e)}>{e.subject} */}\r\n \r\n {onlyDaydateFormat(e.regDate)} \r\n 관리자 \r\n \r\n ));\r\n }\r\n } else {\r\n return {t('데이터가없습니다')}
;\r\n }\r\n }\r\n\r\n function NoticeView(e) {\r\n if (securitydata.totalCount > 0) {\r\n return (\r\n \r\n
\r\n
{e.subject} \r\n
\r\n \r\n {t('작성자')}\r\n {e.writer} \r\n \r\n \r\n {t('작성일')}\r\n {onlyDaydateFormat(e.regDate)} \r\n \r\n \r\n {t('조회수')}\r\n {e.hit} \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {LoadingFunc()}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('제목')} \r\n {t('작성일')} \r\n {t('작성자')} \r\n \r\n \r\n {NoticeTable()} \r\n
\r\n
\r\n
\r\n
'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={'on'}\r\n onPageChange={handlePageClick}\r\n />\r\n \r\n
\r\n
\r\n {NoticeView(ClickData)}\r\n
\r\n
\r\n \r\n
\r\n {BtnStatus && (\r\n \r\n expand_less \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Footer;\r\n","import axios from 'axios';\r\nimport { settingAction } from './ReducerMonitoringSetting';\r\n\r\nexport const FETCH_PORT_POSTS_REQUEST = 'settingChangePort/FETCH_POSTS_REQUEST';\r\nexport const FETCH_RESOURCE_POSTS_REQUEST = 'settingChangeResource/FETCH_RESOURCES_REQUEST';\r\nexport const FETCH_WEB_POSTS_REQUEST = 'settingChangeWeb/FETCH_WEB_REQUEST';\r\nexport const FETCH_SERVER_STATE_POSTS_REQUEST = 'settingChangeServerState/FETCH_SERVER_STATE_REQUEST';\r\n\r\nconst fetchSettingPortRequest = () => {\r\n return {\r\n type: FETCH_PORT_POSTS_REQUEST,\r\n };\r\n};\r\n\r\nconst fetchSettingResourceRequest = () => {\r\n return {\r\n type: FETCH_PORT_POSTS_REQUEST,\r\n };\r\n};\r\n\r\nconst fetchSettingWebRequest = () => {\r\n return {\r\n type: FETCH_WEB_POSTS_REQUEST,\r\n };\r\n};\r\n\r\nconst fetchSettingServerStateRequest = () => {\r\n return {\r\n type: FETCH_SERVER_STATE_POSTS_REQUEST,\r\n };\r\n};\r\n\r\nexport const putSettingPort = (portData, hostId, t) => async (dispatch) => {\r\n dispatch(fetchSettingPortRequest());\r\n await axios\r\n .put(`${process.env.REACT_APP_REQUEST_API_URL}Monitoring/ChangeMoitoringStatus`, portData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(settingAction.getPorts(hostId));\r\n return alert(portData.monitorStatus === 'Enabled' ? t('중지되었습니다') : t('가동되었습니다'));\r\n }\r\n return alert('error : ' + response.data.message);\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n\r\nexport const putSettingResource = (portData, hostId, t) => async (dispatch) => {\r\n dispatch(fetchSettingResourceRequest());\r\n await axios\r\n .put(`${process.env.REACT_APP_REQUEST_API_URL}Monitoring/ChangeMoitoringStatus`, portData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(settingAction.getResources(hostId));\r\n return alert(portData.monitorStatus === 'Enabled' ? t('중지되었습니다') : t('가동되었습니다'));\r\n }\r\n return alert('error : ' + response.data.message);\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n\r\nexport const putSettingResourceCheckValue = (resourceData, hostId, t) => async (dispatch) => {\r\n dispatch(fetchSettingResourceRequest());\r\n await axios\r\n .put(`${process.env.REACT_APP_REQUEST_API_URL}Monitoring/ChangeResourcCheckValue`, resourceData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(settingAction.getResources(hostId));\r\n return alert(t('변경되었습니다'));\r\n }\r\n return alert('error : ' + response.data.message);\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n\r\nexport const putSettingWeb = (webData, hostId, t) => async (dispatch) => {\r\n dispatch(fetchSettingWebRequest());\r\n const putData = {\r\n checkValue: webData.checkValue,\r\n httptestid: webData.httptestid,\r\n itemId: null,\r\n lastCheckDateTime: webData.lastCheckDateTime,\r\n monitorName: webData.domainName,\r\n monitorStatus: webData.status,\r\n monitorType: 'web',\r\n rule: null,\r\n triggerId: webData.triggerId,\r\n triggerStatus: null,\r\n };\r\n await axios\r\n .put(`${process.env.REACT_APP_REQUEST_API_URL}Monitoring/ChangeMoitoringStatus`, putData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(settingAction.getWebs(hostId));\r\n return alert(webData.status === 'Enabled' ? t('중지되었습니다') : t('가동되었습니다'));\r\n }\r\n return alert('error : ' + response.data.message);\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n\r\nexport const putSettingServerState = (hostData, checked, t) => async (dispatch) => {\r\n dispatch(fetchSettingServerStateRequest());\r\n await axios\r\n .put(`${process.env.REACT_APP_REQUEST_API_URL}Monitoring/Server/${checked}`, [hostData.hostid])\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(settingAction.getSettings());\r\n return alert(!checked ? t('중지되었습니다') : t('가동되었습니다'));\r\n }\r\n return alert('error : ' + response.data.message);\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n\r\nexport const putSettingAllServerState = (hostData, checked, t) => async (dispatch) => {\r\n dispatch(fetchSettingServerStateRequest());\r\n await axios\r\n .put(`${process.env.REACT_APP_REQUEST_API_URL}Monitoring/Server/${checked}`, hostData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(settingAction.getSettings());\r\n return alert(!checked ? t('중지되었습니다') : t('가동되었습니다'));\r\n }\r\n return alert('error : ' + response.data.message);\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n","import React, { useEffect, useRef } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useLocation } from 'react-router';\r\nimport Select from 'react-select';\r\nimport { tagRegister } from '../../redux/monitoringSetting/ActionRegister';\r\nimport { putSettingServerState } from '../../redux/monitoringSetting/ActionStateChange';\r\nimport * as selectOption from '../selectOptionValue/SelectValue';\r\nimport { docModalState } from '../../redux/monitoringSetting/ActionModalState';\r\nimport { settingAction } from '../../redux/monitoringSetting/ReducerMonitoringSetting';\r\nimport { putSettingAllServerState } from '../../redux/monitoringSetting/ActionStateChange';\r\nimport ReducerTag, { action } from '../../redux/monitoringSetting/ReducerTag';\r\n\r\nconst SettingTopBar = ({ data, selectHost, setSelectHost, loading, setState, state }) => {\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const ref = useRef();\r\n const location = useLocation(null);\r\n const options = data && data.data.map((d) => ({ value: d.hostid, label: d.hostName.split('_')[0] }));\r\n const { docState } = useSelector((state) => state.ReducerModalState);\r\n const { tagData, tagLoading } = useSelector((state) => state.ReducerTag);\r\n\r\n const hangleServerStateChange = (checked) => {\r\n setState(checked);\r\n dispatch(putSettingServerState(selectHost, checked, t));\r\n };\r\n const handleChange = (selectedOption) => {\r\n dispatch(settingAction.getWebs(selectedOption.value));\r\n dispatch(settingAction.getPorts(selectedOption.value));\r\n dispatch(settingAction.getResources(selectedOption.value));\r\n dispatch(settingAction.getLogs({ page: 1, hostid: selectedOption.value }));\r\n dispatch(action.getTag(selectedOption.value));\r\n const host = data.data.find((s) => s.hostid === selectedOption.value);\r\n let status = host.status === 0 ? true : false;\r\n setState(status);\r\n setSelectHost(host);\r\n };\r\n const handleDocState = () => {\r\n dispatch(docModalState(docState));\r\n };\r\n const hangleServerAllStateChange = (checked) => {\r\n const alertTxt = checked ? t('모든서버의모니터링을켜시겠습니까') : t('모든서버의 모니터링을 끄시겠습니까?');\r\n if (window.confirm(alertTxt)) {\r\n const hostid = data && data.data.map((h) => h.hostid);\r\n setState(checked);\r\n dispatch(putSettingAllServerState(hostid, checked, t));\r\n }\r\n };\r\n const handleTagSetting = (e) => {\r\n e.preventDefault();\r\n if (selectHost === null) return alert(t('태그를등록할서버를선택해주세요'));\r\n if (ref.current.value.length > 30 || ref.current.value.length === 0) return alert(t('태그를입력하지않았거나30자를초과하였습니다'));\r\n dispatch(tagRegister(selectHost.hostid, ref.current.value));\r\n ref.current.value = '';\r\n };\r\n\r\n const handleTagDelete = () => {\r\n if (tagLoading) {\r\n return alert('이미 삭제중입니다.');\r\n }\r\n dispatch(action.deleteTag(selectHost.hostid));\r\n };\r\n return (\r\n \r\n
\r\n
\r\n t('IP조회중')}\r\n noOptionsMessage={() => t('IP없음')}\r\n isLoading={loading}\r\n defaultInputValue={location.state ? location.state.ip : ''}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n
\r\n {selectHost && tagData && (\r\n
\r\n
\r\n handleTagDelete()}>\r\n {tagData}\r\n clear \r\n \r\n \r\n
\r\n )}\r\n
\r\n
\r\n hangleServerAllStateChange(true)}>\r\n 전체 모니터링 가동\r\n \r\n hangleServerAllStateChange(false)}>\r\n 전체 모니터링 중지\r\n \r\n
\r\n
\r\n {
\r\n {t('모니터링 설정방법')}\r\n }\r\n
\r\n {selectHost && (\r\n
\r\n
\r\n
hangleServerStateChange(e.target.checked)}\r\n />\r\n \r\n ON
\r\n OFF
\r\n \r\n {/* ※ {t('해당서버의모니터링을켜고끌수있습니다')}
*/}\r\n \r\n
\r\n 태그 등록 \r\n \r\n {t('저장')}\r\n \r\n
\r\n
\r\n )}\r\n
\r\n \r\n \r\n \r\n ); // 로딩중이고 데이터 없을때만\r\n if (error) {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n if (!selectHost) return \r\n \r\n \r\n \r\n )}\r\n {data.zabbixData.map((d) => (\r\n \r\n {t('현재 모니터링이 Off상태입니다')}\r\n
\r\n);\r\n\r\nexport default SettingOff;\r\n","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { getPortDelete } from '../../../redux/monitoringSetting/ActionDelete';\r\nimport { putSettingPort } from '../../../redux/monitoringSetting/ActionStateChange';\r\nimport moment from 'moment';\r\n\r\nconst SettingPortItem = ({ data, t, hostId }) => {\r\n const dispatch = useDispatch();\r\n const handleRunState = () => {\r\n if (data.monitorStatus === 'Enabled') {\r\n return alert(t('이미가동상태입니다'));\r\n }\r\n dispatch(putSettingPort(data, hostId, t));\r\n };\r\n\r\n const handleStopState = () => {\r\n if (data.monitorStatus === 'Disabled') {\r\n return alert(t('이미중지상태입니다'));\r\n }\r\n dispatch(putSettingPort(data, hostId, t));\r\n };\r\n\r\n const handleDelete = () => {\r\n dispatch(getPortDelete(data.itemId, hostId, t));\r\n };\r\n\r\n return (\r\n \r\n {data.monitorName} \r\n {t(data.triggerStatus)} \r\n {data.lastCheckDateTime !== '1970-01-01T09:00:00+09:00' && moment(data.lastCheckDateTime).format('LLL')} \r\n \r\n \r\n {t('가동')}\r\n \r\n \r\n {t('중지')}\r\n \r\n \r\n {t('삭제')}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SettingPortItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { portModalState } from '../../../redux/monitoringSetting/ActionModalState';\r\nimport SettingMapTable from '../../common/SettingMapTable';\r\nimport SettingOff from '../SettingOff';\r\nimport SettingPortItem from './SettingPortItem';\r\n\r\nconst SettingPortTable = ({ selectHost, status, state }) => {\r\n const { data, loading, error } = useSelector((state) => state.ReducerMonitoringSetting.portData);\r\n const { portState } = useSelector((state) => state.ReducerModalState);\r\n const { deletePortLoading } = useSelector((state) => state.ReducerDelete);\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const [height, setHeight] = useState(0);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n setHeight(ref.current.clientHeight);\r\n }, [ref, data]);\r\n\r\n const handlePortState = () => {\r\n if (!selectHost) return alert(t('IP를선택하세요'));\r\n dispatch(portModalState(portState));\r\n };\r\n return (\r\n \r\n {selectHost && (status === 1 || state === false) && {t('포트설정')} \r\n {data && (\r\n \r\n {t('포트추가')}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('포트')} \r\n {t('포트상태')} \r\n {t('체크시간')} \r\n {t('변경')} \r\n \r\n \r\n \r\n {\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SettingPortTable;\r\n","import React, { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { getResourceDelete } from '../../../redux/monitoringSetting/ActionDelete';\r\nimport { putSettingResource } from '../../../redux/monitoringSetting/ActionStateChange';\r\nimport moment from 'moment';\r\n\r\nconst SettingResourceItem = ({ data, t, hostId, setInputs, inputs }) => {\r\n const dispatch = useDispatch();\r\n const [inputValue, setInputValue] = useState(data.checkValue);\r\n const handleRunState = () => {\r\n if (data.monitorStatus === 'Enabled') {\r\n return alert(t('이미가동상태입니다'));\r\n }\r\n dispatch(putSettingResource(data, hostId,t));\r\n };\r\n\r\n const handleStopState = () => {\r\n if (data.monitorStatus === 'Disabled') {\r\n return alert(t('이미중지상태입니다'));\r\n }\r\n dispatch(putSettingResource(data, hostId,t));\r\n };\r\n\r\n const handleDelete = () => {\r\n dispatch(getResourceDelete(data.itemId, hostId,t));\r\n };\r\n const handleChange = (value, triggerId) => {\r\n const newValue = value.replace(/[^0-9]/g, '');\r\n setInputValue(newValue);\r\n const curruntInputs = inputs.filter((s) => s.triggerId !== triggerId);\r\n const changeData = {\r\n ...data,\r\n checkValue: newValue,\r\n };\r\n setInputs(curruntInputs.concat(changeData));\r\n };\r\n return (\r\n \r\n {data.monitorName} \r\n {data.rule} \r\n \r\n \r\n {data.lastCheckDateTime !== '1970-01-01T09:00:00+09:00' && moment(data.lastCheckDateTime).format('LLL')} \r\n \r\n \r\n \r\n {t('가동')}\r\n \r\n \r\n {t('중지')}\r\n \r\n \r\n {t('삭제')}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SettingResourceItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { resourceModalState } from '../../../redux/monitoringSetting/ActionModalState';\r\nimport { putSettingResourceCheckValue } from '../../../redux/monitoringSetting/ActionStateChange';\r\nimport SettingMapTable from '../../common/SettingMapTable';\r\nimport SettingOff from '../SettingOff';\r\nimport SettingResourceItem from './SettingResourceItem';\r\n\r\nconst SettingResourceTable = ({ selectHost, status, state }) => {\r\n const { data, loading, error } = useSelector((state) => state.ReducerMonitoringSetting.resourceData);\r\n const { resoureState } = useSelector((state) => state.ReducerModalState);\r\n const { deleteResourceLoading } = useSelector((state) => state.ReducerDelete);\r\n const [inputs, setInputs] = useState(data && data.zabbixData);\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n\r\n const handleResourceState = () => {\r\n if (!selectHost) return alert(t('IP를선택하세요'));\r\n dispatch(resourceModalState(resoureState));\r\n };\r\n\r\n const [height, setHeight] = useState(0);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n setHeight(ref.current.clientHeight);\r\n }, [ref, data]);\r\n\r\n const handleChange = (e) => {\r\n e.preventDefault();\r\n const selectValue = inputs.reduce(\r\n (result, item) =>\r\n data.zabbixData.some((el) => el.triggerId === item.triggerId && el.checkValue !== item.checkValue)\r\n ? [...result, item]\r\n : result,\r\n []\r\n );\r\n if (selectValue.length === 0) {\r\n return alert(t('변경될체크값을설정해주세요'));\r\n }\r\n dispatch(putSettingResourceCheckValue(selectValue, data.hostId, t));\r\n };\r\n return (\r\n \r\n {selectHost && (status === 1 || state === false) && \r\n Agent {t('중지')} {t('및')} {t('삭제')}\r\n \r\n {data && (\r\n \r\n Agent {t('추가')}\r\n \r\n )}*서버에 Agent가 설치되어 있어야 스캔이 가능합니다. 먼저 지원센터에서 Agent 설치 요청을 해주시기 바랍니다. \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('이름')} \r\n {t('규칙')} \r\n {t('체크값')} \r\n {t('체크시간')} \r\n {t('변경')} \r\n \r\n \r\n \r\n {\r\n \r\n
\r\n
\r\n \r\n {t('저장')}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default SettingResourceTable;\r\n","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { webDelete } from '../../../redux/monitoringSetting/ActionDelete';\r\nimport { putSettingWeb } from '../../../redux/monitoringSetting/ActionStateChange';\r\nconst SettingWebItem = ({ data, t, hostId }) => {\r\n const dispatch = useDispatch();\r\n const handleRunState = () => {\r\n if (data.monitorStatus === 'Enabled') {\r\n return alert(t('이미가동상태입니다'));\r\n }\r\n dispatch(putSettingWeb(data, hostId,t));\r\n };\r\n\r\n const handleStopState = () => {\r\n if (data.monitorStatus === 'Disabled') {\r\n return alert(t('이미중지상태입니다'));\r\n }\r\n dispatch(putSettingWeb(data, hostId,t));\r\n };\r\n\r\n const handleDelete = () => {\r\n dispatch(webDelete(data, hostId,t));\r\n };\r\n\r\n return (\r\n \r\n {data.checkUrl} \r\n {data.checkValue} \r\n {data.responseCode} \r\n \r\n \r\n \r\n {t('가동')}\r\n \r\n \r\n {t('중지')}\r\n \r\n \r\n {t('삭제')}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default SettingWebItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { webHostModalState, webModalState } from '../../../redux/monitoringSetting/ActionModalState';\r\nimport SettingMapTable from '../../common/SettingMapTable';\r\nimport SettingOff from '../SettingOff';\r\nimport SettingWebItem from './SettingWebItem';\r\n\r\nconst SettingWebTable = ({ selectHost, status, state }) => {\r\n const { data, loading, error } = useSelector((state) => state.ReducerMonitoringSetting.web);\r\n const { t } = useTranslation('Lang');\r\n const { webState } = useSelector((state) => state.ReducerModalState);\r\n const { deleteWebLoading } = useSelector((state) => state.ReducerDelete);\r\n const dispatch = useDispatch();\r\n\r\n const handleWebState = () => {\r\n if (!selectHost) return alert(t('IP를선택하세요'));\r\n dispatch(webModalState(webState));\r\n dispatch(webHostModalState(selectHost));\r\n };\r\n\r\n const [height, setHeight] = useState(0);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n setHeight(ref.current.clientHeight);\r\n }, [ref, data]);\r\n return (\r\n \r\n {selectHost && (status === 1 || state === false) && \r\n Web {t('중지')} {t('및')} {t('삭제')}\r\n \r\n {data && (\r\n \r\n {t('추가')}\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n URL \r\n {t('체크값')} \r\n {t('응답코드')} \r\n {t('변경')} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SettingWebTable;\r\n","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport SettingPortTable from './port/SettingPortTable';\r\nimport SettingResourceTable from './resource/SettingResourceTable';\r\nimport SettingWebTable from './web/SettingWebTable';\r\n\r\nconst SettingList = ({ selectHost, status, state }) => {\r\n const [tabState, setTabState] = useState(1);\r\n const { t } = useTranslation('Lang');\r\n const handleTabState = (idx) => {\r\n setTabState(idx);\r\n };\r\n return (\r\n <>\r\n \r\n handleTabState(1)}>\r\n {t('포트')}\r\n \r\n handleTabState(2)}>\r\n {t('리소스')}\r\n \r\n handleTabState(3)}>\r\n {t('웹')}\r\n \r\n \r\n {tabState === 1 && \r\n
\r\n \r\n );\r\n};\r\nexport default MonitoringSetting;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport { getRecordData } from '../../redux/nameserver/ActionRecord';\r\nimport * as selectOption from '../selectOptionValue/SelectValue';\r\n\r\nconst NameServerTopBar = ({ DnsData, handleModal, setDomainState, DnsLoading, domainState, handleSearch, searchRef}) => {\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n\r\n const options = DnsData && DnsData.data.map((d) => ({ value: d.domainName, label: d.domainName }));\r\n\r\n const handleChange = (selectedOption) => {\r\n dispatch(getRecordData(selectedOption.value));\r\n setDomainState(selectedOption.value);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n t('IP조회중')}\r\n noOptionsMessage={() => t('IP없음')}\r\n isLoading={DnsLoading}\r\n value={DnsData && options.filter(({ value }) => value === domainState)}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n
\r\n
\r\n \r\n {t('도메인추가')}\r\n \r\n
\r\n
\r\n {idx + 1} \r\n {data.subDomain} \r\n \r\n {data.recordType} {`${data.recordType === 'MX' ? '/ ' + data.priority : ''}`}\r\n \r\n {data.recordValue} \r\n {ttl} \r\n \r\n {\r\n handleModionClick(data);\r\n }}\r\n >\r\n {t('수정')}\r\n \r\n {\r\n handleDelonClick();\r\n }}\r\n >\r\n {t('삭제')}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default RecordItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport MonitoringMapTable from '../common/MonitoringMapTable';\r\nimport RecordItem from './RecordItem';\r\n\r\nconst RecordTable = ({ t, domainState, handleDomainDeleteModal }) => {\r\n const { recordData, recordLoading, recordError } = useSelector((state) => state.ReducerRecord);\r\n const [height, setHeight] = useState(0);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n setHeight(ref.current.clientHeight);\r\n }, [ref, recordData]);\r\n\r\n return (\r\n \r\n \r\n DNS {t('레코드')} {t('관리')}\r\n \r\n \r\n \r\n {t('도메인삭제')}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('서브도메인')} \r\n \r\n {t('타입')} / {t('순위')}\r\n \r\n {t('IP주소레코드값')} \r\n TTL \r\n {t('상태설정')} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
{t('레코드타입')} \r\n
{t('주소(A)')}
\r\n
{t('MX레코드')}
\r\n
{t('텍스트TXT')}
\r\n
{t('별칭CNAME')}
\r\n
\r\n );\r\n};\r\n\r\nexport default RecordTable;\r\n","import React, { memo, useEffect, useRef, useState } from 'react';\r\nimport Select from 'react-select';\r\nimport * as selectOption from '../selectOptionValue/SelectValue';\r\nimport { useDispatch } from 'react-redux';\r\nimport { setDnsRecord } from '../../redux/nameserver/ActionRecord';\r\nimport useValidator from '../useValidator';\r\n\r\nconst DnsRecordAdd = memo(({ t, domainState }) => {\r\n const [validator, showValidationMessage] = useValidator();\r\n const dispatch = useDispatch();\r\n const [inputs, setInputs] = useState({\r\n data: {\r\n Action: '',\r\n RecordType: '',\r\n SubDomain: '',\r\n Domain: '',\r\n Content: '',\r\n Priority: '',\r\n TTL: 86400,\r\n },\r\n });\r\n const [selectTTL, setSelectTTL] = useState(null);\r\n const [selectReg, setSelectReg] = useState({});\r\n const [ruleText, ruleTextSet] = useState('required');\r\n const [selectType, setSelectType] = useState(null);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n setInputs({\r\n ...inputs,\r\n data: {\r\n ...inputs.data,\r\n Domain: domainState,\r\n Action: '',\r\n RecordType: '',\r\n SubDomain: '',\r\n Content: '',\r\n Priority: 0,\r\n TTL: 86400,\r\n },\r\n });\r\n setSelectType(null);\r\n }, [domainState]);\r\n\r\n const onChange = (e) => {\r\n const { value, name } = e.target;\r\n if ([name] == 'Priority') {\r\n setInputs({\r\n ...inputs,\r\n data: { ...inputs.data, [name]: e.target.valueAsNumber },\r\n });\r\n } else {\r\n setInputs({\r\n ...inputs,\r\n data: { ...inputs.data, [name]: value },\r\n });\r\n }\r\n };\r\n\r\n const handleRecordChange = (selectedOption) => {\r\n let a = 0;\r\n if (selectedOption.value === 'MX' || selectedOption.value === 'SRV') {\r\n ref.current.focus();\r\n a = 0;\r\n }\r\n\r\n setSelectType(selectedOption.value);\r\n if (selectedOption.value === 'A') {\r\n ruleTextSet('required|ip');\r\n setSelectReg({\r\n ...selectReg,\r\n ip: {\r\n message: t('ip형식이아닙니다'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(\r\n val,\r\n /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n },\r\n });\r\n } else if (selectedOption.value === 'TXT') {\r\n ruleTextSet('required');\r\n } else if (selectedOption.value === 'SRV') {\r\n //srv 필요\r\n } else {\r\n ruleTextSet('required|domain');\r\n setSelectReg({\r\n ...selectReg,\r\n domain: {\r\n message: t('도메인형식이아닙니다'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(\r\n val.toLowerCase(),\r\n /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/g\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n required: true,\r\n },\r\n });\r\n }\r\n setInputs({\r\n ...inputs,\r\n data: { ...inputs.data, RecordType: selectedOption, Priority: a },\r\n });\r\n };\r\n\r\n const handleTTLChange = (selectedOption) => {\r\n setInputs({\r\n ...inputs,\r\n data: { ...inputs.data, TTL: selectedOption.value },\r\n });\r\n setSelectTTL(selectedOption.value);\r\n };\r\n\r\n const handleSumbit = (e) => {\r\n e.preventDefault();\r\n\r\n if (!domainState) {\r\n alert(t('도메인을먼저선택해주세요'));\r\n } else if (validator.allValid()) {\r\n dispatch(setDnsRecord(inputs, domainState, t));\r\n } else {\r\n alert(t('필수값을모두입력해주세요'));\r\n showValidationMessage(true);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n {domainState && (\r\n \r\n \r\n DNS {t('레코드')} {t('추가')}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('레코드타입')} \r\n \r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n {validator.message('RecordType', inputs.data.RecordType, 'required', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n })}\r\n\r\n \r\n TTL \r\n \r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n value={\r\n !selectTTL\r\n ? selectOption.dnsTTLoptions(t).filter((s) => s.value === 86400)\r\n : selectOption.dnsTTLoptions(t).filter((s) => s.value === selectTTL)\r\n }\r\n />\r\n \r\n \r\n \r\n {t('서브도메인')} \r\n \r\n \r\n IP / {t('레코드')} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {t('DNS 레코드 추가')}\r\n \r\n \r\n )}\r\n \r\n \r\n DNS {t('레코드')} {t('유의사항')}\r\n \r\n \r\n
{t('유의사항1')}
\r\n
{t('유의사항2')}
\r\n
{t('유의사항3')}
\r\n
\r\n \r\n );\r\n});\r\n\r\nexport default DnsRecordAdd;\r\n","import React, { memo } from 'react';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nconst NameServerAddress = memo(({ t,user }) => {\r\n return (\r\n \r\n );\r\n});\r\n\r\nexport default NameServerAddress;\r\n","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch } from 'react-redux';\r\nimport { deleteDomain } from '../../redux/nameserver/ActionNameServer';\r\nimport useValidator from '../useValidator';\r\n\r\nconst DomainDeleteModal = ({ handleDomainDeleteModal, selectDomain, setDomainState }) => {\r\n const { t } = useTranslation('Lang');\r\n const [domainInput, setDomainInput] = useState(null);\r\n const [validator, showValidationMessage] = useValidator();\r\n const dispatch = useDispatch();\r\n const handleChange = (e) => {\r\n setDomainInput(e.target.value);\r\n };\r\n\r\n const handleSumbit = (e) => {\r\n e.preventDefault();\r\n if (validator.allValid()) {\r\n if (window.confirm(t('도메인을 정말 삭제하시겠습니까'))) {\r\n dispatch(deleteDomain(selectDomain, t, setDomainState));\r\n }\r\n } else {\r\n showValidationMessage(true);\r\n }\r\n };\r\n return (\r\n \r\n \r\n
{t('도메인 삭제')} \r\n
\r\n {t('도메인 주소를 다시 한번 입력하여 주세요')}
\r\n
\r\n
\r\n {validator.message('domainInput', domainInput, 'required|domain', {\r\n messages: {\r\n required: t('삭제할 도메인을 입력하지 않았습니다'),\r\n },\r\n validators: {\r\n domain: {\r\n message: t('삭제할 도메인과 일치하지 않습니다'),\r\n rule: (val, params, validator) => {\r\n return validator.helpers.testRegex(val, selectDomain) && params.indexOf(val) === -1;\r\n },\r\n required: true,\r\n },\r\n },\r\n })}\r\n
\r\n\r\n
\r\n {t('취소')} \r\n \r\n {t('도메인삭제')}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default DomainDeleteModal;\r\n","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch } from 'react-redux';\r\nimport { setDomain } from '../../redux/nameserver/ActionNameServer';\r\nimport useValidator from '../useValidator';\r\n\r\nconst DomainAddModal = ({ handleModal, setDomainState }) => {\r\n const [validator, showValidationMessage] = useValidator();\r\n const [inputs, setInputs] = useState({\r\n data: {\r\n domain: '',\r\n ipAddress: '',\r\n },\r\n });\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const handleChange = (e) => {\r\n const { value, name } = e.target;\r\n setInputs({\r\n ...inputs,\r\n data: { ...inputs.data, [name]: value },\r\n });\r\n };\r\n const handleSave = (e) => {\r\n e.preventDefault();\r\n if (validator.allValid()) {\r\n dispatch(setDomain(inputs, t, setDomainState));\r\n } else {\r\n showValidationMessage(true);\r\n }\r\n };\r\n return (\r\n \r\n \r\n
{t('사이트입력')} \r\n
{t('본인소유의도메인주소를입력해주세요')}
\r\n
\r\n
\r\n {validator.message('DomainAddress', inputs.data.domain, 'required|domain', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n validators: {\r\n domain: {\r\n message: t('도메인형식이아닙니다'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(\r\n val,\r\n /^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{0,61}[a-zA-Z0-9]))\\.([a-zA-Z]{2,8}|[a-zA-Z0-9-]{2,30}\\.[a-zA-Z]{2,8}|xn--mk1bu44c|xn--t60b56a|xn--3e0b707e)$/\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n required: true,\r\n },\r\n },\r\n })}\r\n
\r\n
\r\n
\r\n {validator.message('ipAddress', inputs.data.ipAddress, 'required|ip', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n validators: {\r\n ip: {\r\n message: t('ip형식이아닙니다'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(\r\n val,\r\n /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n },\r\n },\r\n })}\r\n
\r\n \r\n
\r\n \r\n {t('취소')}\r\n \r\n \r\n {t('도메인추가')}\r\n \r\n
\r\n
※ {t('버튼비활성화시기술문의')}.
\r\n
\r\n );\r\n};\r\nexport default DomainAddModal;\r\n","import React, { memo, useEffect, useState, useRef} from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { domainAdd, getDnsData, domainDelete } from '../../redux/nameserver/ActionNameServer';\r\nimport NameServerTopBar from './NameServerTopBar';\r\nimport RecordTable from './RecordTable';\r\nimport DnsRecordAdd from './DnsRecordAdd';\r\nimport NameServerAddress from './NameServerAddress';\r\nimport ErrorHandler from '../error/ErrorHandler';\r\nimport DomainDeleteModal from '../modal/DomainDeleteModal';\r\nimport DomainAddModal from '../modal/DomainAddModal';\r\n\r\nconst NameServerManaged = memo(() => {\r\n const { DnsData, DnsLoading, DnsError, DomainAdd, DomainDelete } = useSelector((state) => state.ReducerNameServer);\r\n const [domainState, setDomainState] = useState(null);\r\n const dispatch = useDispatch();\r\n const searchRef = useRef(null);\r\n const { t } = useTranslation('Lang');\r\n const user = useSelector((state) => state.oidc.user);\r\n\r\n useEffect(() => {\r\n setTimeout(() => dispatch(getDnsData(setDomainState, true,''), 1000));\r\n }, [dispatch]);\r\n\r\n const handleModal = () => {\r\n dispatch(domainAdd(DomainAdd));\r\n };\r\n const handleSearch = (e) => {\r\n e.preventDefault();\r\n let searchText = searchRef.current.value;\r\n dispatch(getDnsData(setDomainState, true, searchText));\r\n };\r\n\r\n const handleDomainDeleteModal = () => {\r\n if (!domainState) {\r\n return alert('삭제할 도메인을 선택해 주세요');\r\n }\r\n dispatch(domainDelete(DomainDelete));\r\n };\r\n\r\n if (DnsError) return \r\n \r\n
{' '}\r\n {DomainDelete && (\r\n \r\n 날짜 \r\n ~ \r\n
\r\n );\r\n};\r\n\r\nexport default DateSelect;\r\n","import React, { useEffect, useState } from 'react';\r\nimport styles from '../css/securityevent.module.css'\r\nimport Select from 'react-select';\r\n\r\nconst DropboxFilter = (props) => {\r\n\r\n let options = [];\r\n let placeholder = '';\r\n if (props.name == 'Risk') {\r\n options = [\r\n { value: 'ALL', label: '위험도 전체' },\r\n { value: 'LOW', label: 'LOW' },\r\n { value: 'MIDDLE', label: 'MIDDLE' },\r\n { value: 'HIGH', label: 'HIGH' }\r\n ]\r\n placeholder = '위험도';\r\n } else if (props.name == 'Ip')\r\n {\r\n options = [\r\n { value: 'event', label: '이벤트명' },\r\n { value: 'start', label: '출발지IP' },\r\n { value: 'end', label: '목적지IP' }\r\n ]\r\n placeholder = '이벤트/IP';\r\n }\r\n\r\n const handleSelectChangeRisk = (selected) => {\r\n props.setData(selected);\r\n };\r\n return (\r\n \r\n ({\r\n ...baseStyles,\r\n borderColor: state.isFocused ? '#5a4df9' : '#e2e1e1',\r\n height: 40,\r\n width : 160,\r\n fontSize : 10,\r\n }),\r\n }}\r\n />\r\n
\r\n \r\n\r\n );\r\n\r\n\r\n\r\n};\r\nexport default DropboxFilter;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Select from 'react-select';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport DateSelect from './DateSelect';\r\nimport DropboxFilter from './DropboxFilter';\r\nimport styles from '../css/securityevent.module.css';\r\nimport axios from 'axios';\r\n\r\nconst SecEventFilter = (props) => {\r\n const [options, setOptions] = useState([]);\r\n const [selectedOptions, setSelectedOptions] = useState([]);\r\n const [startDate, setStartDate] = useState([]);\r\n const [endDate, setEndDate] = useState([]);\r\n const [risk, setRisk] = useState([]);\r\n const [ipState, setIpState] = useState([]);\r\n const [ipName, setIpName] = useState([]);\r\n\r\n const apiserverUrl = process.env.REACT_APP_REQUEST_API_URL;\r\n useEffect(() => {\r\n axios\r\n .get(apiserverUrl + 'SecurityEvent/FilterEqIp')\r\n .then((response) => {\r\n // 서버에서 받아온 데이터를 가공하여 options 배열에 넣기\r\n const formattedOptions = response.data.data.map((item) => ({\r\n value: item.equipIps, // value는 서버에서 받아온 값에 따라 변경\r\n label: item.equipIps + ' / ' + item.equipTypes + ' / ' + item.serverName, // label은 서버에서 받아온 값에 따라 변경\r\n }));\r\n setOptions(formattedOptions);\r\n })\r\n .catch((error) => {\r\n // 에러 처리\r\n console.error('Error fetching data:', error);\r\n });\r\n }, []);\r\n\r\n const handleSelectChange = (selected) => {\r\n setSelectedOptions(selected);\r\n };\r\n\r\n const handleSearchChange = (e) => {\r\n const eqIpValues = selectedOptions.map((item) => item.value);\r\n\r\n props.setEqIpf(eqIpValues);\r\n props.setStartDatef(startDate);\r\n props.setEndDatef(endDate);\r\n props.setRiskf(risk);\r\n props.setIpStatef(ipState);\r\n props.setIpNamef(ipName);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
setIpName(e.target.value)}\r\n placeholder=\"이벤트 명 / IP주소를 입력해주세요\"\r\n />\r\n \r\n 조회\r\n \r\n 검색결과 : {props.totalCount}
\r\n \r\n
\r\n
\r\n ); // 로딩중이고 데이터 없을때만\r\n if (seceventerror) {\r\n return seceventerror.message;\r\n }\r\n }\r\n\r\n \r\n const openNewWindow = (htmlString) => {\r\n if (!htmlString) {\r\n console.error('HTML 문자열이 null 또는 비어있습니다.');\r\n return;\r\n }\r\n\r\n const width = 900;\r\n const height = 1000;\r\n const left = (window.innerWidth - width) / 2;\r\n const top = (window.innerHeight - height) / 2;\r\n const options = `width=${width},height=${height},top=${top},left=${left},toolbar=no,location=no,status=no`;\r\n\r\n const newWindow = window.open('', '_blank', options);\r\n newWindow.document.write(htmlString);\r\n newWindow.focus(); // 팝업 창에 초점을 맞춥니다.\r\n };\r\n\r\n \r\n useEffect(() => {\r\n props.setTotalCount(seceventdata.totalCount);\r\n },[seceventdata]);\r\n\r\n const handlePageClick = (selectedPage) => {\r\n setPage(selectedPage.selected + 1);\r\n\r\n dispatch(\r\n searchData(\r\n selectedPage.selected + 1,\r\n pathFunc(),\r\n 0,\r\n 10,\r\n props.eqIp,\r\n props.startDate,\r\n props.endDate,\r\n props.risk?.value,\r\n props.ipState?.value,\r\n props.ipName\r\n )\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n // 필터가 변경될 때 페이지를 1로 리셋\r\n setPage(1);\r\n setSelectedPage(0); // 선택된 페이지도 초기화\r\n // 페이지네이션 로직을 실행\r\n handlePageClick({ selected: 0 });\r\n \r\n }, [props.eqIp, props.startDate, props.endDate, props.risk, props.ipState, props.ipName]);\r\n\r\n\r\n const addPage = (p) => {\r\n setPage(p);\r\n return p;\r\n };\r\n\r\n const getAllPageIndex = (e, prev, next, i) => {\r\n setClickData(e);\r\n setPrevIndex(prev);\r\n setNextIndex(next);\r\n setNowIndex(i);\r\n setShowOn(true);\r\n };\r\n\r\n const handleListClick = () => {\r\n setShowOn(false);\r\n };\r\n\r\n const displayNoneStyle = {\r\n display: 'none',\r\n };\r\n\r\n const displayBlockStyle = {\r\n display: 'block',\r\n };\r\n\r\n function NoticeTable() {\r\n if (seceventdata) {\r\n if (seceventdata.totalCount > 0) {\r\n return seceventdata.data.map((e) => (\r\n \r\n {moment(e.seCreatedAt).format(`YYYY-MM-DD A HH:mm:ss`)} \r\n {e.seEqIp} \r\n {e.seSoIp} \r\n {e.seDeIp} \r\n openNewWindow(e.workhistory)}>{e.seName} {e.seRisk} \r\n ));\r\n }\r\n } else {\r\n return {t('데이터가없습니다')}
;\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n {LoadingFunc()}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 발생시간 \r\n 장비 IP \r\n 출발지 IP \r\n 목적지 IP \r\n 이벤트 명 \r\n 위험도 \r\n \r\n \r\n {NoticeTable()} \r\n
\r\n
\r\n
\r\n
'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={styles.onPage}\r\n onPageChange={(selected) => {\r\n handlePageClick(selected);\r\n setSelectedPage(selected.selected); // 선택된 페이지 업데이트\r\n }}\r\n forcePage={selectedPage} // forcePage prop을 사용하여 페이지네이션 버튼 상태 업데이트\r\n />\r\n \r\n
\r\n
{t('데이터가없습니다')}
;\r\n};\r\nexport default DivNoData;\r\n","import React, { useEffect , useMemo} from 'react';\r\nimport { Bar } from 'react-chartjs-2';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getSecEventData } from '../../redux/chart/ActionChart';\r\nimport DivNoData from '../dataState/DivNoData';\r\nimport LoadingSpninner from '../dataState/LoadingSpninner';\r\nimport ErrorHandler from '../error/ErrorHandler';\r\n\r\nconst SecEventChart = ({ startDate, endDate, eqIp, risk, ipState, ipName}) => {\r\n const { chartData, chartLoading, chartError } = useSelector((state) => state.ReducerChart.secevent);\r\n const dispatch = useDispatch();\r\n \r\n useEffect(() => {\r\n console.log(risk?.value);\r\n console.log(ipState?.value);\r\n dispatch(getSecEventData( eqIp, startDate, endDate, risk?.value, ipState?.value, ipName));\r\n }, [ dispatch, startDate, endDate, eqIp, risk, ipState, ipName]);\r\n\r\n if (chartError)\r\n return (\r\n \r\n
\r\n );\r\n if (chartLoading && !chartData) return
;\r\n};\r\n\r\nexport default SecEventChart;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Select from 'react-select';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport SecEventChart from '../chart/SecEventChart';\r\n\r\nconst SecEventGraph = ({startDate, endDate, eqIp, risk, ipState, ipName }) => {\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{user.profile.name}님 안녕하세요.
\r\n
user.auth_time : {user.profile.auth_time}
\r\n
getDoughnuts()}>\r\n get Api Call\r\n \r\n
\r\n {prettifyJson(doughnutData ? doughnutData : 'No doughnuts yet :(')}\r\n \r\n
\r\n
\r\n
403 forbidden \r\n
접근 권한이 없습니다.
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ProtectedRoute;\r\n","import axios from 'axios';\r\nimport moment from 'moment';\r\nimport {\r\n INQUIRY_LIST_REQUEST,\r\n INQUIRY_LIST_SUCCESS,\r\n INQUIRY_LIST_ERROR,\r\n INQUIRY_DETAIL_REQUEST,\r\n INQUIRY_DETAIL_SUCCESS,\r\n INQUIRY_DETAIL_ERROR,\r\n ADMIN_INFO_REQUEST,\r\n ADMIN_INFO_SUCCESS,\r\n ADMIN_INFO_ERROR,\r\n} from './SupportType';\r\n\r\nexport const getInquiryData = (page, pageSize) => async (dispatch) => {\r\n dispatch({\r\n type: INQUIRY_LIST_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .create({\r\n withCredentials: false,\r\n headers: {\r\n 'Access-Control-Allow-Origin': '*',\r\n 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',\r\n },\r\n })\r\n .get(process.env.REACT_APP_REQUEST_API_URL + `Board?page=${page}&pageSize=${pageSize}`)\r\n .then((res) => dispatch({ type: INQUIRY_LIST_SUCCESS, payload: res.data, page }));\r\n } catch (e) {\r\n dispatch({\r\n type: INQUIRY_LIST_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const getInquiryDetailData = (btIdx) => async (dispatch) => {\r\n dispatch({\r\n type: INQUIRY_DETAIL_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .create({\r\n withCredentials: false,\r\n headers: {\r\n 'Access-Control-Allow-Origin': '*',\r\n 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',\r\n },\r\n })\r\n .get(process.env.REACT_APP_REQUEST_API_URL + `Board/Detail/${btIdx}`)\r\n .then((res) => dispatch({ type: INQUIRY_DETAIL_SUCCESS, payload: res.data }));\r\n } catch (e) {\r\n dispatch({\r\n type: INQUIRY_DETAIL_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const getAdminData = () => async (dispatch) => {\r\n dispatch({\r\n type: ADMIN_INFO_REQUEST,\r\n });\r\n await axios\r\n .get(`${process.env.REACT_APP_REQUEST_API_URL}Admin`)\r\n .then((response) => {\r\n dispatch({ type: ADMIN_INFO_SUCCESS, payload: response.data });\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n //console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n\r\nexport const getSeacrhInquiry = (page, pageSize, searchText, searchType) => async (dispatch) => {\r\n \r\n dispatch({\r\n type: INQUIRY_LIST_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .get(\r\n process.env.REACT_APP_REQUEST_API_URL +\r\n `Board?page=${page}&pageSize=${pageSize}&searchText=${searchText}&searchBoardType=${searchType.searchBoardType}&workDone=${searchType.workDone}&start=${searchType.startDate}&end=${searchType.endDate}`\r\n )\r\n .then((res) => dispatch({ type: INQUIRY_LIST_SUCCESS, payload: res.data, page }));\r\n } catch (e) {\r\n dispatch({\r\n type: INQUIRY_LIST_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n","import axios from 'axios';\r\nimport {\r\n SUPPORT_SET_REQUEST,\r\n SUPPORT_SET_SUCCESS,\r\n SUPPORT_SET_ERROR,\r\n IP_ADDRESS_REQUEST,\r\n IP_ADDRESS_SUCCESS,\r\n IP_ADDRESS_ERROR,\r\n WORK_GET_REQUEST,\r\n WORK_GET_SUCCESS,\r\n WORK_GET_ERROR,\r\n WORK_SET_REQUEST,\r\n WORK_SET_SUCCESS,\r\n WORK_SET_ERROR,\r\n WORK_REQUEST_MODAL,\r\n WORK_DETAIL_REQUEST,\r\n WORK_DETAIL_SUCCESS,\r\n WORK_DETAIL_ERROR,\r\n MODAL_INDEX_DATA,\r\n VISITRESERVATIONS_REQUEST,\r\n VISITRESERVATIONS_SUCCESS,\r\n VISITRESERVATIONS_ERROR,\r\n} from './SupportType';\r\n\r\nexport const getIpAddress = () => async (dispatch) => {\r\n dispatch({\r\n type: IP_ADDRESS_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .create({\r\n withCredentials: false,\r\n headers: {\r\n 'Access-Control-Allow-Origin': '*',\r\n 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',\r\n },\r\n })\r\n .get(process.env.REACT_APP_REQUEST_API_URL + `Server/List`)\r\n .then((res) => dispatch({ type: IP_ADDRESS_SUCCESS, payload: res.data }));\r\n } catch (e) {\r\n dispatch({\r\n type: IP_ADDRESS_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const setSupportData = (boardKind, suiIdx, inputs, contents, files, inquiryFormResult) => async (dispatch) => {\r\n if (suiIdx === undefined && (boardKind === 15 || boardKind === 14)) {\r\n suiIdx = '';\r\n }\r\n\r\n dispatch({\r\n type: SUPPORT_SET_REQUEST,\r\n });\r\n\r\n let formData = new FormData();\r\n formData.append('BoardKind', boardKind);\r\n formData.append('ServerIdx', suiIdx);\r\n formData.append('Subject', inputs.Subject);\r\n formData.append('BoardWriter', inputs.Name);\r\n formData.append('BoardEmail', inputs.Email);\r\n formData.append('BoardPhone', inputs.Phone);\r\n formData.append('Contents', contents);\r\n formData.append('File', files);\r\n\r\n try {\r\n return await axios.post(process.env.REACT_APP_REQUEST_API_URL + `Board`, formData).then((res) => {\r\n if (res.status === 200) {\r\n dispatch({ type: SUPPORT_SET_SUCCESS });\r\n inquiryFormResult();\r\n } else {\r\n dispatch({ type: SUPPORT_SET_ERROR });\r\n }\r\n });\r\n } catch (e) {\r\n dispatch({\r\n type: SUPPORT_SET_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const getWorkData = (page, pageSize) => async (dispatch) => {\r\n dispatch({\r\n type: WORK_GET_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .create({\r\n withCredentials: false,\r\n headers: {\r\n 'Access-Control-Allow-Origin': '*',\r\n 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',\r\n },\r\n })\r\n .get(process.env.REACT_APP_REQUEST_API_URL + `Work/WorkRequest?page=${page}&pageSize=${pageSize}`)\r\n .then((res) => dispatch({ type: WORK_GET_SUCCESS, payload: res.data, page }));\r\n } catch (e) {\r\n dispatch({\r\n type: WORK_GET_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const setWorkData = (id, workConfirmResult) => async (dispatch) => {\r\n dispatch({\r\n type: WORK_SET_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .create({\r\n withCredentials: false,\r\n headers: {\r\n 'Access-Control-Allow-Origin': '*',\r\n 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',\r\n },\r\n })\r\n .put(process.env.REACT_APP_REQUEST_API_URL + `Work/${id}`)\r\n .then((res) => {\r\n if (res.status === 200) {\r\n dispatch({ type: WORK_SET_SUCCESS });\r\n workConfirmResult();\r\n } else {\r\n dispatch({ type: WORK_SET_ERROR });\r\n }\r\n });\r\n } catch (e) {\r\n dispatch({\r\n type: WORK_SET_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const getWorkDetailData = (id) => async (dispatch) => {\r\n dispatch({\r\n type: WORK_DETAIL_REQUEST,\r\n });\r\n\r\n try {\r\n return await axios\r\n .get(process.env.REACT_APP_REQUEST_API_URL + `Work/WorkRequest/Detail/${id}`)\r\n .then((res) => dispatch({ type: WORK_DETAIL_SUCCESS, payload: res.data }));\r\n } catch (e) {\r\n dispatch({\r\n type: WORK_DETAIL_ERROR,\r\n error: e,\r\n });\r\n }\r\n};\r\n\r\nexport const workRequestModal = (state, id) => {\r\n return {\r\n type: WORK_REQUEST_MODAL,\r\n state,\r\n id,\r\n };\r\n};\r\n\r\nexport const getVisitReservations = (page, pageSize) => async (dispatch) => {\r\n dispatch({\r\n type: VISITRESERVATIONS_REQUEST,\r\n });\r\n const url = `${process.env.REACT_APP_REQUEST_API_URL}Board/Visit?page=${page}&pageSize=${pageSize}`;\r\n await axios\r\n .get(url)\r\n .then((response) => {\r\n dispatch({\r\n type: VISITRESERVATIONS_SUCCESS,\r\n payload: response.data,\r\n });\r\n })\r\n .catch((error) => {\r\n const errorPayLoad = {};\r\n errorPayLoad['message'] = error.response.data;\r\n errorPayLoad['status'] = error.response.status;\r\n dispatch({\r\n type: VISITRESERVATIONS_ERROR,\r\n error: errorPayLoad,\r\n });\r\n });\r\n};\r\n\r\nexport const getVisitReservationsSearch = (page, pageSize, Search) => async (dispatch) => {\r\n dispatch({\r\n type: VISITRESERVATIONS_REQUEST,\r\n });\r\n const url = `${process.env.REACT_APP_REQUEST_API_URL}Board/Visit?page=${page}&pageSize=${pageSize}&searchText=${Search}`;\r\n await axios\r\n .get(url)\r\n .then((response) => {\r\n dispatch({\r\n type: VISITRESERVATIONS_SUCCESS,\r\n payload: response.data,\r\n });\r\n })\r\n .catch((error) => {\r\n const errorPayLoad = {};\r\n errorPayLoad['message'] = error.response.data;\r\n errorPayLoad['status'] = error.response.status;\r\n dispatch({\r\n type: VISITRESERVATIONS_ERROR,\r\n error: errorPayLoad,\r\n });\r\n });\r\n};\r\n\r\nexport const setVisitReservation = (visitReservationData, visitShowOnClick) => async (dispatch) => {\r\n dispatch({\r\n type: VISITRESERVATIONS_REQUEST,\r\n });\r\n await axios\r\n .post(`${process.env.REACT_APP_REQUEST_API_URL}Board/VisitJson`, visitReservationData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n visitShowOnClick(true);\r\n return alert('등록되었습니다');\r\n }\r\n return alert(response.data.message);\r\n })\r\n .catch((error) => {\r\n const errorPayLoad = {};\r\n errorPayLoad['message'] = error.response.data;\r\n errorPayLoad['status'] = error.response.status;\r\n dispatch({\r\n type: VISITRESERVATIONS_ERROR,\r\n error: errorPayLoad,\r\n });\r\n });\r\n};\r\n\r\nexport const modiVisitReservation = (visitReservationData, setModiShowOn) => async (dispatch) => {\r\n dispatch({\r\n type: VISITRESERVATIONS_REQUEST,\r\n });\r\n await axios\r\n .post(`${process.env.REACT_APP_REQUEST_API_URL}Board/Visit/EditJson`, visitReservationData)\r\n .then((response) => {\r\n if (response.data.code === 200) {\r\n dispatch(getVisitReservations(1, 10));\r\n setModiShowOn(false);\r\n return alert('수정되었습니다');\r\n }\r\n return alert(response.data.message);\r\n })\r\n .catch((error) => {\r\n const errorPayLoad = {};\r\n errorPayLoad['message'] = error.response.data;\r\n errorPayLoad['status'] = error.response.status;\r\n dispatch({\r\n type: VISITRESERVATIONS_ERROR,\r\n error: errorPayLoad,\r\n });\r\n });\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { getFile } from '../../redux/fileupload/ActionFileUpload';\r\n\r\nconst SupportCenterComment = ({ data, getFileData }) => {\r\n const { t } = useTranslation('Lang');\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {}, [data, getFileData]);\r\n\r\n const downloadOnClick = (url) => {\r\n dispatch(getFile(url));\r\n };\r\n\r\n return (\r\n data !== undefined &&\r\n data &&\r\n data.map((i, x) => {\r\n return (\r\n \r\n
\r\n {i.contents == null ? '' : i.contents} {i.writer == null ? '' : t('담당자') + ': ' + i.writer} \r\n \r\n {i.attchFiles.map((m, j) => {\r\n return (\r\n
\r\n {t('첨부파일')} \r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n\r\nexport default TableLoading;","import { useTranslation } from 'react-i18next';\r\n\r\nexport const SupportFormText = (id) => {\r\n const { t } = useTranslation('Lang');\r\n\r\n let text = '';\r\n switch (id) {\r\n case 1: // 1. CDP 백업 복구 요청\r\n text = t('CDP백업복구폼');\r\n return text;\r\n case 2: // 2. OS 재설치 요청\r\n text = t('OS재설치폼');\r\n return text;\r\n case 3: // 3. 방화벽 룰셋 요청\r\n text = t('방화벽룰셋폼');\r\n return text;\r\n case 4: // 4. 인버스 도메인 신청\r\n text = t('인버스도메인폼');\r\n return text;\r\n case 5: // 5. CDP 백업 신청\r\n text = t('CDP백업신청폼');\r\n return text;\r\n default:\r\n return text;\r\n }\r\n};\r\n\r\nexport const AccountFormText = (id) => {\r\n const { t } = useTranslation('Lang');\r\n let text = '';\r\n\r\n switch (id) {\r\n case 1: // CMS 신청\r\n text = t('CMS신청폼');\r\n return text;\r\n case 2: // 카드자동결제 신청\r\n text = t('카드자동결제신청폼');\r\n return text;\r\n case 3: // 세금계산서 발행 신청\r\n text = t('세금계산서발행신청폼');\r\n return text;\r\n case 4: // 현금영수증발행 신청\r\n text = t('현금영수증발행신청폼');\r\n return text;\r\n\r\n default:\r\n return text;\r\n }\r\n};\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getIpAddress, setSupportData } from '../../redux/supportcenter/ActionSupportCenter';\r\nimport FileUpload from '../fileUpload/FileUpload';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { getInquiryData } from '../../redux/supportcenter/ActionInquiryList';\r\n\r\nconst TextAreaForm = ({ props, radioState, selectState, selectContentState, setselectState, setSelectContentState, inputs, setInputs }) => {\r\n const { setSuccessInquiryData, setSuccessData } = useSelector((state) => state.ReducerSupportCenter);\r\n const [value, setValue] = useState([...props]);\r\n const [file, setFile] = useState('');\r\n const [message, setMessage] = useState('');\r\n const textRef = useRef('');\r\n const fileRef = useRef();\r\n\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n setValue(props);\r\n }, [props]);\r\n\r\n const { t } = useTranslation('Lang');\r\n\r\n const textStyle = {\r\n width: '99%',\r\n height: '400px',\r\n margin: '10px auto 0',\r\n border: '1px solid #ddd',\r\n resize: 'none',\r\n };\r\n\r\n const onFileChange = (event) => {\r\n if (vaildFileType(event.target.files[0]) !== true) {\r\n setMessage(t('올바른형식의파일이아닙니다'));\r\n } else {\r\n setMessage('');\r\n setFile(event.target.files[0]);\r\n }\r\n };\r\n\r\n const vaildFileType = (file) => {\r\n if (file.size > 3145728) {\r\n return setMessage(t('파일크기는3MB를넘을수없습니다'));\r\n } else {\r\n return fileTypes.includes(file.type);\r\n }\r\n };\r\n \r\n const fileTypes = ['image/png', 'image/bmp', 'image/jpeg', 'image/jpg', 'application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/x-zip-compressed', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.presentationml.presentation','application/vnd.ms-powerpoint','text/csv'];\r\n\r\n const fileFunc = () => {\r\n if (radioState === 4 && selectContentState.value === 4) {\r\n //기술문의 인버스도메인신청\r\n return fileDownloadLink(t('첨부파일'), 'inverse_domain_nuri.doc', 'https://www.nurihosting.com/pds/inverse_domain_nuri.doc');\r\n } else if (radioState === 14 && selectContentState.value === 1) {\r\n //결제,증빙문의 CMS신청\r\n return fileDownloadLink(\r\n t('첨부파일'),\r\n t('호센서비스호스팅신청서CMS'),\r\n 'https://hc.hostcenter.co.kr/download/호센-서버호스팅신청서-cms.doc',\r\n t('호센서비스호스팅신청서PDF'),\r\n 'https://hc.hostcenter.co.kr/download/호센-서버호스팅신청서-cms.pdf'\r\n );\r\n } else if (radioState === 14 && selectContentState.value === 2) {\r\n //결제,증빙문의 카드자동결제신청\r\n return fileDownloadLink(t('바로가기'), t('카드자동결제'), 'https://mypage.hostcenter.co.kr/Cost/PaymentRegular');\r\n }\r\n };\r\n\r\n const fileDownloadLink = (type, fileName1, link1, fileName2, link2) => {\r\n return (\r\n \r\n );\r\n };\r\n\r\n const inquiryFormResult = () => {\r\n alert(t('문의등록완료되었습니다'));\r\n dispatch(getIpAddress());\r\n };\r\n\r\n const onSumbit = async (event, boardKind, suiIdx, subject, value, inputs) => {\r\n event.preventDefault();\r\n\r\n if (message === '') {\r\n if (boardKind === 4) {\r\n if (suiIdx === undefined || suiIdx === '') {\r\n suiIdx = '';\r\n //alert(t('서버IP를선택해주세요'));\r\n //return;\r\n }\r\n }\r\n if (boardKind !== 15) {\r\n if (subject === '' || subject === undefined) {\r\n alert('문의내용을선택해주세요');\r\n return;\r\n }\r\n }\r\n if (inputs.Subject === '' || inputs.Subject === undefined) {\r\n return alert('제목을 입력해주세요');\r\n }\r\n\r\n if (inputs.Name === '' || inputs.Name === undefined) {\r\n return alert('이름을 입력해주세요.');\r\n }\r\n\r\n if (inputs.Email === '' || inputs.Email === undefined) {\r\n return alert('이메일을 입력해주세요');\r\n }\r\n\r\n if (inputs.Phone === '' || inputs.Phone === undefined) {\r\n return alert('연락처를 입력해주세요');\r\n }\r\n\r\n if (value === '' || value === undefined) {\r\n alert(t('문의글을작성해주세요'));\r\n return;\r\n } else {\r\n dispatch(setSupportData(boardKind, suiIdx, inputs, value, file, inquiryFormResult));\r\n dispatch(getInquiryData(1, 20));\r\n setFile('');\r\n setselectState('');\r\n setSelectContentState('');\r\n setInputs({ ...inputs, Subject: '' });\r\n setValue('');\r\n textRef.current.value = '';\r\n fileRef.current.value = '';\r\n }\r\n } else {\r\n alert(t('올바른파일형식이아니거나파일크기가3MB이하여만업로드가능합니다'));\r\n return;\r\n }\r\n };\r\n\r\n const pstyle = {\r\n display: \"inline-block\",\r\n color: \"red\",\r\n fontSize:\"12px\",\r\n lineHeight: \"45px\",\r\n marginLeft: \"10px\"\r\n }\r\n\r\n return (\r\n \r\n
\r\n
{\r\n setValue(event.target.value);\r\n }}\r\n value={value}\r\n >\r\n \r\n
{t('파일첨부')} \r\n
\r\n
※ .png, .jpeg, .jpg, .pdf, .doc, .docx, .zip, .ppt, .pptx, .xlsx, .xls, .csv의 확장자 파일을 등록하실 수 있습니다.
\r\n
\r\n {message}\r\n
\r\n
\r\n {fileFunc()}\r\n
\r\n
\r\n onSumbit(\r\n event,\r\n radioState,\r\n selectState.value,\r\n radioState === 15 ? '[NMS]영업문의' : selectContentState.label,\r\n value,\r\n inputs\r\n )\r\n }\r\n >\r\n {t('문의하기')}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n ); // 로딩중이고 데이터 없을때만\r\n\r\n if (error) {\r\n return {{ } ;\r\n }\r\n if (!data || data.data.length === 0) return \r\n \r\n \r\n \r\n )}\r\n {data.data.map((d, idx) => (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n IDC 센터 \r\n {idcText(findReservation.Idc)} \r\n 방문 목적 \r\n {visitTypeText(findReservation.VisitType)} \r\n \r\n \r\n 방문예정일 \r\n \r\n {visitResponseDate()}
\r\n \r\n \r\n {findReservation.Visitors.map((d, idx) => (\r\n \r\n 방문자명 \r\n {d.Name} \r\n 소속업체명 \r\n {d.Company} \r\n 연락처 \r\n {d.Contact} \r\n \r\n ))}\r\n \r\n 상세내용 \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n handleModiReservation(findReservation)}>\r\n 수정\r\n \r\n
\r\n
\r\n \r\n 방문자명\r\n {i === 0 ? (\r\n \r\n 방문자추가\r\n \r\n ) : (\r\n onVisitorDelete(i)}>\r\n 방문자삭제\r\n \r\n )}\r\n \r\n \r\n \r\n 소속업체명 \r\n \r\n \r\n 연락처 \r\n \r\n onChange(e, i)}\r\n value={d.Contact}\r\n />\r\n {validator.message('Contact', d.Contact, 'required|phone', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n validators: {\r\n phone: {\r\n message: t('휴대폰번호의 형식이 맞지않습니다.'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(val, /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/) &&\r\n params.indexOf(val) === -1\r\n );\r\n },\r\n required: true,\r\n },\r\n },\r\n })}\r\n \r\n \r\n ))}\r\n {/* {inputs &&\r\n inputs.Visitors.map((d, index) => (\r\n \r\n \r\n 방문자명\r\n onVisitorDelete(d.Idx)}>\r\n 방문자삭제\r\n \r\n \r\n {d.Name} \r\n 업체명 \r\n {d.Company} \r\n 연락처 \r\n {d.Contact} \r\n \r\n ))} */}\r\n \r\n );\r\n};\r\n\r\nexport default Visitors;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Select from 'react-select';\r\nimport Visitors from './Visitors';\r\nimport * as selectOption from '../../selectOptionValue/SelectValue';\r\nimport useValidator from '../../useValidator';\r\nimport { useDispatch } from 'react-redux';\r\nimport moment from 'moment';\r\nimport { modiVisitReservation, setVisitReservation } from '../../../redux/supportcenter/ActionSupportCenter';\r\nconst ReservationCreate = ({ visitShowOnClick, findReservation, mode, setModiShowOn }) => {\r\n const [visitorInputs, setVisitorInputs] = useState([\r\n {\r\n Idx: 0,\r\n Name: '',\r\n Company: '',\r\n Contact: '',\r\n Regdate: new Date(),\r\n },\r\n ]);\r\n\r\n const [inputs, setInputs] = useState({\r\n BoardSubClass: '',\r\n BoardClass: 0,\r\n Contents: '',\r\n ResponseDate: '',\r\n Visitors: [\r\n {\r\n Idx: 0,\r\n Name: '',\r\n Company: '',\r\n Contact: '',\r\n Regdate: new Date(),\r\n },\r\n ],\r\n });\r\n\r\n const { i18n, t } = useTranslation('Lang');\r\n const nextId = useRef(0);\r\n const [validator, showValidationMessage] = useValidator();\r\n const dispatch = useDispatch();\r\n const [validatorSubmit, showValidationSubmitMessage] = useValidator();\r\n const [checked, setChecked] = useState(false);\r\n const [visible, setVisible] = useState(false);\r\n useEffect(() => {\r\n if (findReservation !== null && mode === 'modify') {\r\n const { BoardClass, BoardKind, BoardSubClass, Contents, Idc, Idx, RegDate, ResponseDate, VisitType, Visitors } =\r\n findReservation;\r\n setInputs({\r\n ...findReservation,\r\n BoardClass,\r\n BoardKind,\r\n BoardSubClass,\r\n Contents,\r\n Idc,\r\n Idx,\r\n RegDate,\r\n ResponseDate,\r\n VisitType,\r\n Visitors,\r\n });\r\n }\r\n }, [findReservation, mode]);\r\n\r\n const onVisitorCreate = () => {\r\n if (!validator.allValid()) {\r\n showValidationMessage(true);\r\n return alert(t('필수값을모두입력해주세요'));\r\n }\r\n if (nextId.current >= 10) {\r\n return alert('더이상 추가할수 없습니다.');\r\n }\r\n setInputs({ ...inputs, Visitors: [...inputs.Visitors.concat(visitorInputs)] });\r\n setVisitorInputs({ ...visitorInputs, Idx: (nextId.current += 1), Name: '', Company: '', Contact: '' });\r\n };\r\n\r\n const handleAddClick = () => {\r\n if (inputs.Visitors.length > 9) {\r\n return alert('방문자는 최대 10명까지 작성 가능합니다.');\r\n }\r\n setInputs({\r\n ...inputs,\r\n Visitors: [\r\n ...inputs.Visitors,\r\n {\r\n Idx: 0,\r\n Name: '',\r\n Company: '',\r\n Contact: '',\r\n Regdate: new Date(),\r\n },\r\n ],\r\n });\r\n };\r\n const onVisitorDelete = (Idx) => {\r\n const list = [...inputs.Visitors];\r\n list.splice(Idx, 1);\r\n setInputs({ ...inputs, Visitors: list });\r\n //setInputList(list);\r\n //setInputs({ ...inputs, Visitors: [...inputs.Visitors.filter((visitor) => visitor.Idx !== Idx)] });\r\n //setVisitorInputs({ ...visitorInputs, idx: (nextId.current -= 1), name: '', company: '', contact: '' });\r\n };\r\n\r\n const onChange = (e, index) => {\r\n const { name, value } = e.target;\r\n const list = [...inputs.Visitors];\r\n list[index][name] = value;\r\n setInputs({ ...inputs, Visitors: list });\r\n //setVisitorInputs({\r\n // ...visitorInputs,\r\n // [name]: value,\r\n //});\r\n };\r\n\r\n const onInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setInputs({\r\n ...inputs,\r\n [name]: value,\r\n });\r\n };\r\n\r\n const handleIDCChange = (selectedOption) => {\r\n setInputs({ ...inputs, BoardSubClass: selectedOption.value });\r\n };\r\n\r\n const handleVisitReasonChange = (selectedOption) => {\r\n setInputs({ ...inputs, BoardClass: selectedOption.value });\r\n };\r\n\r\n const handleChecked = (e) => {\r\n setChecked(e);\r\n };\r\n\r\n const handleSubmit = () => {\r\n if (!validatorSubmit.allValid()) {\r\n showValidationSubmitMessage(true);\r\n return alert(t('필수값을모두입력해주세요'));\r\n }\r\n if (!validator.allValid()) {\r\n showValidationMessage(true);\r\n return alert(t('필수값을모두입력해주세요'));\r\n }\r\n\r\n if (!checked) {\r\n return alert('개인 정보 활용 동의에 체크해 주세요.');\r\n }\r\n if (mode === 'modify') {\r\n dispatch(modiVisitReservation(inputs, setModiShowOn));\r\n } else {\r\n dispatch(setVisitReservation(inputs, visitShowOnClick));\r\n }\r\n };\r\n\r\n const handleCalendar = (value) => {\r\n setInputs({\r\n ...inputs,\r\n ResponseDate: moment(value).format('yyyy-MM-DDTHH:mm:ss'),\r\n });\r\n };\r\n\r\n const defaultVisitReason = (value) => {\r\n if (mode === 'modify') {\r\n return selectOption.visitReason().filter((s) => s.value === value.BoardClass);\r\n }\r\n };\r\n\r\n const defaultIdcSelect = (value) => {\r\n if (mode === 'modify') {\r\n return selectOption.IDCOptions().filter((s) => s.value === value.BoardSubClass);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n
방문예약 신규등록 \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n IDC 센터 \r\n \r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n {validatorSubmit.message('idcSelect', inputs.BoardSubClass, 'required', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n })}\r\n \r\n 방문 목적 \r\n \r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n {validatorSubmit.message('visitReason', inputs.BoardClass, 'required', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n })}\r\n \r\n \r\n \r\n 방문예정일 \r\n \r\n handleCalendar(e.target.value)}\r\n min={moment(new Date()).format('YYYY-MM-DDThh:mm')}\r\n name=\"visitDate\"\r\n value={inputs.ResponseDate}\r\n />\r\n {validatorSubmit.message('visitDate', inputs.ResponseDate, 'required', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n })}\r\n \r\n \r\n \r\n 상세내용 \r\n \r\n \r\n {validatorSubmit.message('Contents', inputs.Contents, 'required', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n })}\r\n \r\n \r\n \r\n
\r\n
* 신속한 방문을 위하여 방문하시는 모든 분의 정보를 입력해 주시기 바랍니다.
\r\n
* 외부 관리업체에서 방문 시 외부 관리업체명을 작성하여 주시기 바랍니다.
\r\n
\r\n
\r\n
\r\n 호스트센터(주)는 IDC센터 방문 출입을 위해 아래와 같은 개인정보에 대한 수집 및 이용 동의를 받고 있습니다.\r\n ㆍ수집 항목 : 성명, 소속업체명, 연락처 ㆍ수집 및 이용목적 : IOC 출입, 출입자 이력 권한관리 \r\n ㆍ보유 및 이용기간 : 고객정보ㆍ서비스 가입부터 해지 시 ＃ 본 동의는 거부하실 수 있으나 거부 시에는 센터 내 방문 및 출입이 제한될 수 있습니다.
\r\n \r\n
\r\n 개인정보 수집 및 이용에 동의합니다. \r\n
\r\n
\r\n \r\n {mode === 'modify' ? '수정' : '작성'}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {data.postNumber} \r\n {moment(data.regDate).format('YYYY-MM-DD')} \r\n {idcText(data.idc)} \r\n {visitorFirst()} \r\n {visitResponseDate()} \r\n {visitTypeText(data.visitType)} \r\n \r\n handleReservationDetail(data.idx)}>\r\n {t('확인')}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ReservationItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport Paginate from 'react-paginate';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { dateChange } from '../../../redux/datepicker/ActionDatepicker';\r\nimport { getVisitReservations, getVisitReservationsSearch } from '../../../redux/supportcenter/ActionSupportCenter';\r\nimport SupportCenterMapTable from '../../common/SupportCenterMapTable';\r\nimport DateRangePickerCompnent from '../../datepicker/DateRangePickerCompnent';\r\nimport ReservaionDetail from './ReservaionDetail';\r\nimport ReservationCreate from './ReservationCreate';\r\nimport ReservationItem from './ReservationItem';\r\nconst ReservationTable = ({ findReservation, setFindReservation, visitShowOnClick }) => {\r\n const { visitReservationsLoading, visitReservationsData, visitReservationsError } = useSelector((state) => state.ReducerSupportCenter);\r\n const state = useSelector((state) => state.ReducerDatepicker.oneDay);\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const [height, setHeight] = useState(0);\r\n const ref = useRef(null);\r\n const detailRef = useRef(null);\r\n const searchRef = useRef(null);\r\n const [visible, setVisible] = useState(false);\r\n const [showOn, setShowOn] = useState(false);\r\n const [modishowOn, setModiShowOn] = useState(false);\r\n const [mode, setMode] = useState('create');\r\n const [activePage, setActivePage] = useState(0);\r\n // const [findReservation, setFindReservation] = useState(null);\r\n const scrollToBottom = () => {\r\n setTimeout(() => 3000);\r\n detailRef.current.scrollIntoView({ behavior: 'smooth' });\r\n };\r\n useEffect(\r\n () => {\r\n dispatch(getVisitReservations(1, 10));\r\n setHeight(ref.current.clientHeight);\r\n },\r\n [dispatch, ref]\r\n );\r\n\r\n const handleSearch = (e) => {\r\n e.preventDefault();\r\n if (visitReservationsLoading) {\r\n return alert(t('이미 검색중입니다. 잠시만기달려주세요'));\r\n }\r\n setActivePage(0);\r\n dispatch(getVisitReservationsSearch(1, 10, searchRef.current.value));\r\n };\r\n\r\n const datePickerOnClick = (e) => {\r\n setVisible(!visible);\r\n };\r\n\r\n const handlePageClick = (selectedPage) => {\r\n setActivePage(selectedPage.selected);\r\n dispatch(getVisitReservations(selectedPage.selected + 1, 10));\r\n };\r\n\r\n const handleReservationDetail = (id) => {\r\n const data = visitReservationsData.data.find((v) => v.idx === id);\r\n const { boardClass, boardKind, boardSubClass, contents, idc, idx, regDate, responseDate, visitType, visitors } = data;\r\n setFindReservation({\r\n ...findReservation,\r\n BoardClass: boardClass,\r\n BoardKind: boardKind,\r\n BoardSubClass: boardSubClass,\r\n Contents: contents,\r\n Idc: idc,\r\n Idx: idx,\r\n RegDate: regDate,\r\n ResponseDate: responseDate,\r\n VisitType: visitType,\r\n Visitors: visitors.map((d) => ({ Name: d.name, Company: d.company, Contact: d.contact, RegDate: d.regDate })),\r\n });\r\n setShowOn(true);\r\n setModiShowOn(false);\r\n setTimeout(() => scrollToBottom(), 300);\r\n };\r\n\r\n const handleModiReservation = () => {\r\n setShowOn(false);\r\n setModiShowOn(true);\r\n setMode('modify');\r\n };\r\n return (\r\n <>\r\n \r\n
방문예약 신청 현황 \r\n
\r\n {/*
\r\n {t('기간설정')} \r\n
*/}\r\n {visible && (\r\n
\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 번호 \r\n 신청 일시 \r\n 방문센터 \r\n 성명 \r\n 방문예정 일시 \r\n 방문 목적 \r\n 내역 확인 \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {visitReservationsData && (\r\n
'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={'on'}\r\n onPageChange={handlePageClick}\r\n />\r\n )}\r\n \r\n {showOn &&
\r\n {modishowOn && \r\n \r\n
\r\n \r\n
{t('관리자 추가')} \r\n
\r\n
\r\n {t(\r\n '추가된 관리자에게 부계정을 생성할 수 있는 안내 메일이 발송 됩니다.'\r\n )}\r\n
\r\n
\r\n
\r\n
inputChange(e)}\r\n />{' '}\r\n \r\n {validator.message('Name', inputs.Name, 'required', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n })}\r\n
\r\n inputChange(e)}\r\n />\r\n \r\n {validator.message('Email', inputs.Email, 'required|email', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n validators: {\r\n email: {\r\n message: t('이메일 형식이 아닙니다.'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(\r\n val,\r\n /^[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n required: true,\r\n },\r\n },\r\n })}\r\n
\r\n inputChange(e)}\r\n />\r\n \r\n {validator.message('CellPhone', inputs.CellPhone, 'required|phone', {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n validators: {\r\n phone: {\r\n message: t('휴대폰번호의 형식이 맞지않습니다.'),\r\n rule: (val, params, validator) => {\r\n return (\r\n validator.helpers.testRegex(val, /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/) &&\r\n params.indexOf(val) === -1\r\n );\r\n },\r\n required: true,\r\n },\r\n },\r\n })}\r\n
\r\n \r\n 개인 정보동의 \r\n 갸안ㅁㅇ나ㅓㅎㅁㄴ앎ㄶㅇ라\r\n \r\n \r\n 개인정보 제공에 동의합니다. \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\nexport default AdminAddModal;\r\n","import axios from 'axios';\r\n\r\nexport const FETCH_POSTS_REQUEST = 'admin/FETCH_POSTS_REQUEST';\r\nexport const FETCH_POSTS_SUCCESS = 'admin/FETCH_POSTS_SUCCESS';\r\nexport const FETCH_POSTS_ERROR = 'admin/FETCH_POSTS_ERROR';\r\n\r\nconst fetchRequest = () => {\r\n return {\r\n type: FETCH_POSTS_REQUEST,\r\n };\r\n};\r\n\r\nconst fetchSuccess = (data) => {\r\n return {\r\n type: FETCH_POSTS_SUCCESS,\r\n payload: data,\r\n };\r\n};\r\nconst fetchFailure = (error) => {\r\n return {\r\n type: FETCH_POSTS_ERROR,\r\n payload: error,\r\n };\r\n};\r\n\r\nexport const setAdmin = (admin, handleAdminAddModal) => async (dispatch) => {\r\n await axios\r\n .post(`${process.env.REACT_APP_REQUEST_API_URL}Admin/Create`, admin)\r\n .then((response) => {\r\n if (response.status === 200) {\r\n handleAdminAddModal();\r\n return alert('관리자가 추가되었습니다.');\r\n }\r\n return alert('추가에 실패했습니다.');\r\n })\r\n .catch((error) => {\r\n if (error.response) {\r\n // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.\r\n console.log('response', error.response.status);\r\n console.log('response', error.response.headers);\r\n } else if (error.request) {\r\n // 요청이 이루어 졌으나 응답을 받지 못했습니다.\r\n // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는\r\n // Node.js의 http.ClientRequest 인스턴스입니다.\r\n console.log('request', error.request);\r\n } else {\r\n // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.\r\n console.log('Error', error.message);\r\n }\r\n console.log(error.config);\r\n //dispatch(fetchDnsFailure(error.status));\r\n });\r\n};\r\n","export default __webpack_public_path__ + \"static/media/sc_info_bnr.5f66e182.png\";","import React, { useRef, useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport Paginate from 'react-paginate';\r\nimport { getIpAddress, getWorkData, workRequestModal, getWorkDetailData } from '../../redux/supportcenter/ActionSupportCenter';\r\nimport TableLoading from '../dataState/TableLoading';\r\nimport TableNoData from '../dataState/TableNoData';\r\nimport { SupportFormText, AccountFormText } from '../selectOptionValue/FormText';\r\nimport { onlyDaydateFormat, nowDateFormat, dateFormat, endDateFormat } from '../date/dateFormat';\r\nimport TextAreaForm from './TextAreaForm';\r\nimport { useTranslation } from 'react-i18next';\r\nimport ReservationTable from './visit/ReservationTable';\r\nimport ReservationCreate from './visit/ReservationCreate';\r\nimport { getAdminData } from '../../redux/supportcenter/ActionInquiryList';\r\nimport AdminAddModal from '../modal/AdminAddModal';\r\nimport infoBnr from '../img/sc_info_bnr.png';\r\n\r\nconst SupportInquiry = ({ display, inputs, setInputs, adminInfoData }) => {\r\n const { supportLoading, supportData, supportError, workData } = useSelector((state) => state.ReducerSupportCenter);\r\n const user = useSelector((state) => state.oidc.user);\r\n const [selectState, setselectState] = useState(0);\r\n const [adminModalView, setAdminModalView] = useState(false);\r\n const [selectContentState, setSelectContentState] = useState(0);\r\n const [radioState, setRadioState] = useState(4);\r\n\r\n const [visitShow, setVisit] = useState(true);\r\n const [visitShowDetail, setVisitDetail] = useState(false);\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n\r\n useEffect(() => {\r\n handdleRadioButton(4);\r\n adminInfoData &&\r\n setInputs({ ...inputs, Name: adminInfoData[0].name, Email: adminInfoData[0].email, Phone: adminInfoData[0].cellPhone });\r\n }, [adminInfoData]);\r\n const [findReservation, setFindReservation] = useState({\r\n BoardClass: 0,\r\n BoardKind: 0,\r\n BoardSubClass: '',\r\n Contents: '',\r\n Idc: 0,\r\n Idx: 0,\r\n RegDate: '',\r\n ResponseDate: null,\r\n VisitType: 0,\r\n Visitors: [],\r\n });\r\n const displayNone = {\r\n display: 'none',\r\n };\r\n const handleVisitDetailShow = () => {};\r\n\r\n const handleAdminAddModal = () => {\r\n setAdminModalView(!adminModalView);\r\n };\r\n const handdleRadioButton = (radioNumber) => {\r\n setRadioState(radioNumber);\r\n setselectState('');\r\n setSelectContentState('');\r\n };\r\n\r\n const handleIPChange = (selectedOption) => {\r\n setselectState(selectedOption);\r\n };\r\n\r\n const handleContentChange = (selectedOption) => {\r\n setSelectContentState(selectedOption);\r\n };\r\n\r\n const handlePageClick = (selected) => {\r\n let page = selected.selected + 1;\r\n dispatch(getWorkData(page, 20));\r\n };\r\n\r\n const handleWorkClick = () => {\r\n dispatch(getWorkData(1, 20));\r\n };\r\n\r\n const visitShowOnClick = (state) => {\r\n setVisit(state);\r\n };\r\n\r\n const customStyles = {\r\n control: (provided) => ({\r\n ...provided,\r\n width: '220px',\r\n outline: 'none',\r\n }),\r\n menu: (provided) => ({\r\n ...provided,\r\n position: 'absolute',\r\n left: '70px',\r\n width: '220px',\r\n outline: 'none',\r\n }),\r\n };\r\n\r\n const workConfirmApprove = (event, id) => {\r\n event.preventDefault();\r\n dispatch(workRequestModal(false, id));\r\n };\r\n\r\n const selectTitle = () => {\r\n switch (radioState) {\r\n case 4:\r\n return {\r\n title: t('기술문의'),\r\n items: [\r\n { id: 1, name: t('CDP백업복구요청') },\r\n { id: 2, name: t('OS재설치') },\r\n { id: 3, name: t('방화벽룰셋요청') },\r\n { id: 4, name: t('인버스도메인신청') },\r\n { id: 5, name: t('CDP 백업요청') },\r\n { id: 6, name: t('기타문의') },\r\n ],\r\n };\r\n case 14:\r\n return {\r\n title: t('결제지출증빙문의'),\r\n items: [\r\n { id: 1, name: t('CMS출금신청') },\r\n { id: 2, name: t('카드자동결제신청') },\r\n { id: 3, name: t('세금계산서문의') },\r\n { id: 4, name: t('현금영수증발행신청') },\r\n { id: 5, name: t('기타문의') },\r\n ],\r\n };\r\n case 15:\r\n return {\r\n title: t('영업문의'),\r\n items: [],\r\n };\r\n case 5:\r\n return {\r\n title: t('방문예약'),\r\n };\r\n case 20:\r\n return {\r\n title: t('작업의뢰서확인'),\r\n };\r\n default:\r\n return {\r\n title: t('기술문의'),\r\n };\r\n }\r\n };\r\n\r\n const handleInputChange = (e) => {\r\n const { value, name } = e.target;\r\n setInputs({ ...inputs, [name]: value });\r\n };\r\n\r\n const handleAdminSelectChange = (selectedOption) => {\r\n const admin = adminInfoData.find((s) => s.id === selectedOption.value);\r\n setInputs({ ...inputs, Name: admin.name, Email: admin.email, Phone: admin.cellPhone });\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n handdleRadioButton(4)}>\r\n \r\n {t('기술문의')}
\r\n {t('시스템장애, 시스템 운영 등 기술관련 문의')}
\r\n \r\n handdleRadioButton(14)}>\r\n \r\n {t('결제지출증빙문의')}
\r\n {t('세금계산서, 현금영수증, 결제방법 변경 문의')}
\r\n \r\n\r\n handdleRadioButton(15)}>\r\n \r\n {t('영업문의')}
\r\n {t('컨설팅, 구매, 비용, 견적 등 영업에 관련된 문의')}
\r\n \r\n handdleRadioButton(5)}>\r\n \r\n {t('방문예약')}
\r\n {t('IDC 방문을 위한 방문 예약 및 방문 확인')}
\r\n \r\n {\r\n handdleRadioButton(20);\r\n handleWorkClick();\r\n }}\r\n >\r\n \r\n {t('작업의뢰서')}
\r\n {t('요청하신작업중고객님의승인이필요한작업리스트')}
\r\n \r\n \r\n \r\n \r\n
{selectTitle().title} \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 이름 \r\n \r\n \r\n {/* {\r\n ({ value: s.id, label: s.name }))}\r\n value={{ value: inputs.id, label: inputs.Name }}\r\n onChange={handleAdminSelectChange}\r\n isSearchable={false}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n } */}\r\n 연락처 \r\n \r\n \r\n 이메일 \r\n \r\n handleAdminAddModal()}>\r\n 관리자 추가\r\n \r\n )} */}\r\n \r\n \r\n \r\n \r\n 서버 IP\r\n \r\n \r\n ({ value: suiIdx, label: ipfIp }))\r\n }\r\n value={selectState}\r\n onChange={handleIPChange}\r\n isSearchable={false}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n \r\n \r\n 문의 유형\r\n \r\n {radioState !== 15 ? (\r\n \r\n ({ value: id, label: name }))\r\n }\r\n value={selectContentState}\r\n onChange={handleContentChange}\r\n isSearchable={false}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n 제목 \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {/*
\r\n
\r\n \r\n 관리자 \r\n \r\n \r\n 연락처 \r\n \r\n \r\n 이메일 \r\n \r\n
\r\n
\r\n
{t('서버IP')}
\r\n
({ value: suiIdx, label: ipfIp }))}\r\n value={selectState}\r\n onChange={handleIPChange}\r\n isSearchable={false}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n \r\n {radioState !== 15 ? (\r\n
\r\n
{t('문의내용')}
\r\n
({ value: id, label: name }))}\r\n value={selectContentState}\r\n onChange={handleContentChange}\r\n isSearchable={false}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n \r\n ) : (\r\n ''\r\n )}\r\n
\r\n \r\n 제목 \r\n \r\n
\r\n
\r\n */}\r\n
\r\n
{selectTitle().title} \r\n
\r\n visitShowOnClick(true)}>\r\n 방문예약 현황/수정\r\n \r\n visitShowOnClick(false)}>\r\n 방문예약 신규 신청\r\n \r\n \r\n
\r\n {visitShow ? (\r\n
\r\n
\r\n
{selectTitle().title} \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('승인일')} \r\n {t('작업일')} \r\n {t('IP')} \r\n {t('작업내용')} \r\n {t('비용')} \r\n {t('작업승인')} \r\n {t('작업')} \r\n \r\n \r\n \r\n {supportLoading ? (\r\n \r\n {e.no} \r\n {e.authDate ? onlyDaydateFormat(e.authDate) : ''} \r\n {e.workingDate ? onlyDaydateFormat(e.workingDate) : ''} \r\n {e.ipAddress} \r\n {e.workSpec} \r\n {e.workCost} \r\n \r\n {\r\n workConfirmApprove(event, e.wrIdx);\r\n }\r\n : (event) => {\r\n workConfirmApprove(event, e.wrIdx);\r\n }\r\n }\r\n >\r\n {e.isAppApplication === false ? t('승인요청') : t('승인완료')}\r\n \r\n \r\n {e.isWork === false ? t('작업') : t('완료')} \r\n \r\n ))\r\n ) : (\r\n \r\n
\r\n
\r\n
\r\n
'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={'on'}\r\n onPageChange={handlePageClick}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SupportInquiry;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { onlyDaydateFormat, nowDateFormat, dateFormat, endDateFormat } from '../date/dateFormat';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst SupportInquiryItem = ({ inquiryData, setDetailOn }) => {\r\n const { t } = useTranslation('Lang');\r\n\r\n const dispatch = useDispatch();\r\n\r\n const boardKind = () => {\r\n switch (inquiryData.boardKind) {\r\n case 4:\r\n return t('기술문의');\r\n case 14:\r\n return t('결제지출증빙문의');\r\n case 15:\r\n return t('영업문의');\r\n default:\r\n return t('기술문의');\r\n }\r\n };\r\n\r\n useEffect(() => {}, [dispatch]);\r\n\r\n const handleInquiryDetail = (e) => {\r\n e.preventDefault();\r\n setDetailOn(inquiryData.idx);\r\n };\r\n\r\n return (\r\n \r\n {inquiryData.postNumber} \r\n {boardKind()} \r\n {dateFormat(inquiryData.regDate)} \r\n {inquiryData.subject} \r\n \r\n \r\n {inquiryData.workStatus}\r\n \r\n \r\n \r\n {t('확인')}\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default SupportInquiryItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport Paginate from 'react-paginate';\r\nimport { getInquiryData, getSeacrhInquiry, listDetailModal, listDetailSendModal } from '../../redux/supportcenter/ActionInquiryList';\r\nimport TableLoading from '../dataState/TableLoading';\r\nimport TableNoData from '../dataState/TableNoData';\r\nimport SupportInquiryItem from './SupportInquiryItem';\r\nimport { useTranslation } from 'react-i18next';\r\nimport * as selectOption from '../selectOptionValue/SelectValue';\r\nimport Select from 'react-select';\r\nimport DateRangePickerCompnent from '../datepicker/DateRangePickerCompnent';\r\nimport { dateChange } from '../../redux/datepicker/ActionDatepicker';\r\nimport moment from 'moment';\r\nconst SupportInquiryList = ({ display, askShowOn, setDetailOn, detailOn }) => {\r\n const { inquiryLoading, inquiryData, inquiryError } = useSelector((state) => state.ReducerInquiryList);\r\n const { detailLoading, detailData, detailError } = useSelector((state) => state.ReducerSupportCenter);\r\n const state = useSelector((state) => state.ReducerDatepicker.oneDay);\r\n const searchRef = useRef(null);\r\n const dispatch = useDispatch();\r\n const [visible, setVisible] = useState(false);\r\n const [searchType, setSearchType] = useState({\r\n searchBoardType: '',\r\n workDone: '',\r\n startDate: '',\r\n endDate: '',\r\n });\r\n\r\n useEffect(() => {\r\n dispatch(getInquiryData(1, 20));\r\n }, [detailData, dispatch]);\r\n\r\n const { t } = useTranslation('Lang');\r\n\r\n const handlePageClick = (selected) => {\r\n let page = selected.selected + 1;\r\n if (searchRef.current.value) {\r\n dispatch(getSeacrhInquiry(page, 20, searchRef.current.value, searchType));\r\n } else {\r\n dispatch(getInquiryData(page, 20));\r\n }\r\n };\r\n\r\n const handleDetailExit = (e) => {\r\n e.preventDefault();\r\n setDetailOn(false);\r\n };\r\n\r\n const handleSearch = (e) => {\r\n e.preventDefault();\r\n if (inquiryLoading) {\r\n return alert(t('이미 검색중입니다. 잠시만기달려주세요'));\r\n }\r\n dispatch(getSeacrhInquiry(1, 20, searchRef.current.value, searchType));\r\n };\r\n\r\n const handleSearchBoardTypeChange = (selectedOption) => {\r\n setSearchType({ ...searchType, searchBoardType: selectedOption.value });\r\n };\r\n\r\n const handleSearchWorkDoneTypeChange = (selectedOption) => {\r\n setSearchType({ ...searchType, workDone: selectedOption.value });\r\n };\r\n\r\n const datePickerOnClick = (e) => {\r\n setVisible(!visible);\r\n };\r\n const handleCalendar = (value, type) => {\r\n if (value) {\r\n setSearchType({\r\n ...searchType,\r\n [type]: value ? moment(value).format('yyyy-MM-DD') : '',\r\n });\r\n } else {\r\n setSearchType({\r\n ...searchType,\r\n startDate: '',\r\n endDate: '',\r\n });\r\n }\r\n };\r\n return (\r\n \r\n {t('나의문의내역')} \r\n \r\n
\r\n handleCalendar(e.target.value, 'startDate')}\r\n max={moment(new Date()).format('YYYY-MM-DD')}\r\n name=\"visitDate\"\r\n value={searchType.startDate}\r\n />\r\n ~\r\n handleCalendar(e.target.value, 'endDate')}\r\n max={moment(new Date()).format('YYYY-MM-DD')}\r\n min={searchType.startDate}\r\n name=\"visitDate\"\r\n readOnly={searchType.startDate ? false : true}\r\n value={searchType.endDate}\r\n />\r\n
\r\n
\r\n
\r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n
\r\n
\r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('유형')} \r\n {t('시간')} \r\n {t('제목')} \r\n {t('처리상태')} \r\n {t('처리내역')} \r\n \r\n \r\n \r\n {inquiryLoading ? (\r\n \r\n
\r\n
\r\n
'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={'on'}\r\n onPageChange={handlePageClick}\r\n />\r\n \r\n );\r\n};\r\n\r\nexport default SupportInquiryList;\r\n","import { React, useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getAdminData } from '../../redux/supportcenter/ActionInquiryList';\r\nimport { getIpAddress } from '../../redux/supportcenter/ActionSupportCenter';\r\nimport SupportCenterDetail from './SupportCenterDetail';\r\nimport SupportInquiry from './SupportInquiry';\r\nimport SupportInquiryList from './SupportInquiryList';\r\n\r\nconst SupportCenter = ({ style, handleSupportCenterShow }) => {\r\n const [askShowOn, setAskShowOn] = useState(true);\r\n const [detailOn, setDetailOn] = useState(false);\r\n const { adminInfoLoading, adminInfoData, adminInfoError } = useSelector((state) => state.ReducerInquiryList);\r\n const { t } = useTranslation('Lang');\r\n const dispatch = useDispatch();\r\n useEffect(() => {\r\n dispatch(getIpAddress());\r\n dispatch(getAdminData());\r\n }, [dispatch]);\r\n\r\n const [inputs, setInputs] = useState({\r\n Subject: '',\r\n Name: '',\r\n Phone: '',\r\n Email: '',\r\n });\r\n\r\n const displayNone = {\r\n display: 'none',\r\n };\r\n const displayBlock = {\r\n display: 'block',\r\n };\r\n\r\n const askOnClick = () => {\r\n setAskShowOn(true);\r\n setDetailOn(false);\r\n };\r\n\r\n const askListOnClick = () => {\r\n setAskShowOn(false);\r\n };\r\n\r\n const handleDetailExit = (e) => {\r\n e.preventDefault();\r\n setDetailOn(false);\r\n };\r\n return (\r\n \r\n
\r\n
\r\n {t('지원센터')} \r\n \r\n askOnClick()}>\r\n {t('문의하기')}\r\n \r\n askListOnClick()}>\r\n {t('나의 문의내역')}\r\n \r\n \r\n {detailOn \r\n ? (←
) \r\n : (\r\n
)}\r\n \r\n
\r\n {!detailOn \r\n ? (
) \r\n : (
)}\r\n
\r\n
\r\n
\r\n );\r\n if (chartLoading && !chartData) return \r\n
\r\n );\r\n if (chartLoading && !chartData) return \r\n
\r\n );\r\n if (chartLoading && !chartData) return \r\n
\r\n );\r\n if (chartLoading && !chartData) return \r\n
{t('리소스 체크')} \r\n
\r\n {t('기간설정')}\r\n \r\n {visible && (\r\n
\r\n
\r\n )}\r\n
\r\n {no - index} \r\n {data.triggerDescription} \r\n {down && down} \r\n {up && up} \r\n {dateDiff} \r\n \r\n );\r\n};\r\n\r\nexport default MonitoringModalIssueItem;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport Paginate from 'react-paginate';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport MonitoringModalIssueItem from './MonitoringModalIssueItem';\r\nimport MonitoringMapPageTable from '../common/MonitoringMapPageTable';\r\nimport { monitoringModalIssueAction } from '../../redux/monitoring/ReducerMonitoringModalIssue';\r\n\r\nconst MonitoringModalIssueTable = ({ serverIdx, t }) => {\r\n const { IssueData, IssueLoading, IssueError } = useSelector((state) => state.ReducerMonitoringModalIssue);\r\n const dispatch = useDispatch();\r\n const handlePageClick = (selectedPage) => {\r\n dispatch(monitoringModalIssueAction.getModalIssues({ page: selectedPage.selected + 1, serverIdx: serverIdx }));\r\n };\r\n const [height, setHeight] = useState(0);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n setHeight(ref.current.clientHeight);\r\n }, [IssueData]);\r\n\r\n useEffect(() => {\r\n dispatch(monitoringModalIssueAction.getModalIssues({ page: 1, serverIdx: serverIdx }));\r\n }, [serverIdx, dispatch]);\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('서비스')} \r\n {t('이슈발생시각')} \r\n {t('이슈종료시각')} \r\n {t('지속시간')} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {IssueData && (\r\n
>'}\r\n previousClassName={'prev'}\r\n nextClassName={'next'}\r\n activeClassName={'active'}\r\n onPageChange={handlePageClick}\r\n />\r\n )}\r\n \r\n
\r\n {no - idx} \r\n {data.monitorName} \r\n {t(data.monitorStatus)} \r\n {data.lastCheckDateTime !== '1970-01-01T09:00:00+09:00' && moment(data.lastCheckDateTime).format('LLL')} \r\n \r\n);\r\n\r\nexport default MonitoringPortModal;\r\n","import React from 'react';\r\nimport moment from 'moment';\r\n\r\nconst MonitoringWebModal = ({ data, idx, no, t }) => (\r\n \r\n {no - idx} \r\n {data.domainName} \r\n {t(data.status)} \r\n {data.checkUrl} \r\n {data.checkValue} \r\n {data.lastCheckDateTime !== '1970-01-01T09:00:00+09:00' && moment(data.lastCheckDateTime).format('LLL')} \r\n \r\n);\r\n\r\nexport default MonitoringWebModal;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport CpuChart from '../chart/CpuChart';\r\nimport MemoryChart from '../chart/MemoryChart';\r\nimport StorageChart from '../chart/StorageChart';\r\nimport TrafficChart from '../chart/TrafficChart';\r\nimport DatePickerToggleComponent from '../datepicker/DatePickerToggleComponent';\r\nimport MonitoringModalIssueTable from '../monitoring/MonitoringModalIssueTable';\r\nimport MonitoringPortModal from './MonitoringPortModal';\r\nimport MonitoringWebModal from './MonitoringWebModal';\r\nimport { Link } from 'react-router-dom';\r\nimport MonitoringMapTable from '../common/MonitoringMapTable';\r\nimport Select from 'react-select';\r\nimport { settingAction } from '../../redux/monitoringSetting/ReducerMonitoringSetting';\r\nimport { monitoringModalAction, monitoringModalClose, tagAddModalState } from '../../redux/monitoring/ReducerMonitoringModal';\r\nimport { issueDataReset } from '../../redux/monitoring/ReducerMonitoringModalIssue';\r\nimport { monitoringModalDataAction } from '../../redux/monitoring/ReducerMonitoringModalData';\r\nconst MonitoringModal = ({ ModalData, ModalLoading }) => {\r\n const [showModal, setShowModal] = useState(0);\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const { webLoading, webData, webError } = useSelector((state) => state.ReducerMonitoringModalData.web);\r\n const { portLoading, portData, portError } = useSelector((state) => state.ReducerMonitoringModalData.port);\r\n const { data } = useSelector((state) => state.ReducerMonitoringSetting.hostData);\r\n const options = data && data.data.map((d) => ({ value: d.hostName.split('_')[0], label: d.hostName.split('_')[0] }));\r\n\r\n useEffect(() => {\r\n dispatch(monitoringModalDataAction.getWeb(ModalData.hostID));\r\n dispatch(monitoringModalDataAction.getPort(ModalData.hostID));\r\n setShowModal(Object.keys(ModalData).length);\r\n document.body.style.overflow = 'hidden';\r\n }, [dispatch, ModalData]);\r\n\r\n const handleSettingRedirect = () => {\r\n dispatch(settingAction.getWebs(ModalData.hostID));\r\n dispatch(settingAction.getPorts(ModalData.hostID));\r\n dispatch(settingAction.getResources(ModalData.hostID));\r\n dispatch(settingAction.getLogs({ page: 1, hostid: ModalData.hostID }));\r\n ModalClose();\r\n };\r\n\r\n const ModalClose = () => {\r\n dispatch(issueDataReset());\r\n document.body.style.overflow = 'auto';\r\n dispatch(monitoringModalClose());\r\n };\r\n\r\n const handleChange = (selectedOption) => {\r\n dispatch(monitoringModalAction.getMonitoringModal({ monitoring: null, ip: selectedOption.label }));\r\n };\r\n\r\n return (\r\n 0 ? 'block' : 'none' }}>\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n t('IP조회중')}\r\n noOptionsMessage={() => t('IP없음')}\r\n isLoading={ModalLoading}\r\n value={{ value: ModalData.ipAddress, label: ModalData.ipAddress }}\r\n theme={(theme) => ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n \r\n
\r\n \r\n \r\n {ModalData.hostStatus === 1 ? t('정상') : ModalData.hostStatus === 2 ? t('비정상') : t('미등록')}\r\n
\r\n \r\n
\r\n IN \r\n {ModalData.nowInTraffic} \r\n
\r\n
\r\n OUT \r\n {ModalData.nowOutTraffic} \r\n
\r\n
\r\n
\r\n
\r\n
{t('서비스 포트 체크')} \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('포트')} \r\n {t('상태')} \r\n {t('마지막체크시간')} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {t('웹')} URL {t('모니터링')}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('번호')} \r\n {t('도메인')} \r\n {t('상태')} \r\n {t('체크')} URL \r\n {t('체크값')} \r\n {t('마지막체크시간')} \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
CPU {t('사용률 5분 평균')} \r\n \r\n
\r\n
{t('메모리 사용률')} \r\n \r\n
\r\n
{t('스토리지 사용률')} \r\n \r\n
\r\n
traffic \r\n \r\n
\r\n
{t('이슈이력')} \r\n \r\n \r\n {t('모니터링셋팅바로가기')}\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default MonitoringModal;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch } from 'react-redux';\r\nimport Select from 'react-select';\r\nimport { modifyRecordData } from '../../redux/nameserver/ActionRecord';\r\nimport * as selectOption from '../selectOptionValue/SelectValue';\r\nimport useValidator from '../useValidator';\r\nconst DomainModiModal = ({ handleModalModi, record }) => {\r\n const { t } = useTranslation('Lang');\r\n const [validator, showValidationMessage] = useValidator();\r\n const [selectReg, setSelectReg] = useState({});\r\n const [ruleText, ruleTextSet] = useState('required');\r\n const [state, setState] = useState(selectOption.dnsTTLoptions(t).filter((s) => s.value === record.ttl));\r\n const [recordState, setRecordState] = useState(record);\r\n const dispatch = useDispatch();\r\n useEffect(() => {\r\n if (record.recordType === 'A') {\r\n ruleTextSet('required|ip');\r\n setSelectReg({\r\n ...selectReg,\r\n ip: {\r\n message: t('ip형식이아닙니다'),\r\n rule: (val, params, validator) => {\r\n val = val.substr(val.length - 1) === '.' ? val.slice(0, -1) : val;\r\n return (\r\n validator.helpers.testRegex(\r\n val,\r\n /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n },\r\n });\r\n } else if (record.recordType === 'TXT') {\r\n ruleTextSet('required');\r\n } else if (record.recordType === 'SRV') {\r\n //srv 필요\r\n } else {\r\n ruleTextSet('required|domain');\r\n setSelectReg({\r\n ...selectReg,\r\n domain: {\r\n message: t('도메인형식이아닙니다'),\r\n rule: (val, params, validator) => {\r\n val = val.substr(val.length - 1) === '.' ? val.slice(0, -1) : val;\r\n return (\r\n validator.helpers.testRegex(\r\n val.toLowerCase(),\r\n /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/g\r\n ) && params.indexOf(val) === -1\r\n );\r\n },\r\n required: true,\r\n },\r\n });\r\n }\r\n }, [record]);\r\n const handleChange = (selectedOption) => {\r\n setState(selectedOption);\r\n setRecordState({\r\n ...recordState,\r\n ttl: selectedOption.value,\r\n });\r\n };\r\n\r\n const handleInputChange = (value) => {\r\n setRecordState({\r\n ...recordState,\r\n recordValue: value,\r\n });\r\n };\r\n\r\n const handleModify = (e) => {\r\n e.preventDefault();\r\n if (validator.allValid()) {\r\n dispatch(modifyRecordData(recordState, record, t, handleModalModi));\r\n } else {\r\n alert(t('필수값을모두입력해주세요'));\r\n showValidationMessage(true);\r\n }\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('서브도메인')} \r\n {record.subDomain} \r\n \r\n \r\n type \r\n {record.recordType} \r\n \r\n \r\n \r\n IP{t('주소')} / {t('레코드')}\r\n \r\n \r\n handleInputChange(e.target.value)}\r\n />\r\n {validator.message('Content', recordState.recordValue, ruleText, {\r\n messages: {\r\n required: t('필수값'),\r\n },\r\n validators: selectReg,\r\n })}\r\n \r\n \r\n \r\n TTL \r\n \r\n ({\r\n ...theme,\r\n borderRadius: 0,\r\n colors: {\r\n ...theme.colors,\r\n primary25: '#d5d3f0',\r\n primary: 'var(--primary)',\r\n },\r\n })}\r\n />\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {t('수정')}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DomainModiModal;\r\n","import React from 'react';\r\n\r\nconst PortScanModalItem = ({ data, handleSingleCheck, checkItems, t }) => (\r\n \r\n \r\n handleSingleCheck(e.target.checked, data.name)}\r\n />\r\n \r\n {data.name} \r\n {t(data.registered)} \r\n \r\n);\r\n\r\nexport default PortScanModalItem;\r\n","import React, { useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getPortRegister } from '../../../../redux/monitoringSetting/ActionRegister';\r\nimport { scanAction } from '../../../../redux/monitoringSetting/ReducerScan';\r\nimport MonitoringMapTable from '../../../common/MonitoringMapTable';\r\nimport PortScanModalItem from './PortScanModalItem';\r\n\r\nconst PortScanModalTable = ({ handlePortState }) => {\r\n const { hostId } = useSelector((state) => state.ReducerMonitoringSetting.portData.data);\r\n const { data, loading, error } = useSelector((state) => state.ReducerScan.portScanData);\r\n const { registerLoading } = useSelector((state) => state.ReducerRegister);\r\n const [checkItems, setCheckItems] = useState([]);\r\n const [height, setHeight] = useState(0);\r\n const refTableHeight = useRef(null);\r\n\r\n const ref = useRef();\r\n\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const handlePortScan = (e) => {\r\n e.preventDefault();\r\n setHeight(refTableHeight.current.clientHeight);\r\n if (loading) return alert(t('스캔중'));\r\n dispatch(scanAction.getPortScan(hostId));\r\n };\r\n\r\n const handleSinglePortScan = (e) => {\r\n e.preventDefault();\r\n if (ref.current.value.length === 0) return alert(t('스캔할포트를입력해주세요'));\r\n setHeight(refTableHeight.current.clientHeight);\r\n dispatch(scanAction.getSinglePortScan({ hostId: hostId, port: ref.current.value }));\r\n };\r\n\r\n const handleSingleCheck = (checked, id) => {\r\n if (checked) {\r\n setCheckItems([...checkItems, id]);\r\n } else {\r\n // 체크 해제\r\n setCheckItems(checkItems.filter((el) => el !== id));\r\n }\r\n };\r\n\r\n const handleAllCheck = (checked) => {\r\n if (checked) {\r\n const idArray = [];\r\n // 전체 체크 박스가 체크 되면 id를 가진 모든 elements를 배열에 넣어주어서,\r\n // 전체 체크 박스 체크\r\n if (data != null) {\r\n data.forEach((el) => !el.checkBox && idArray.push(el.name));\r\n setCheckItems(idArray);\r\n }\r\n }\r\n\r\n // 반대의 경우 전체 체크 박스 체크 삭제\r\n else {\r\n setCheckItems([]);\r\n }\r\n };\r\n\r\n const handleRegister = (e) => {\r\n e.preventDefault();\r\n if (checkItems.length === 0) {\r\n return alert(t('등록할포트를하나이상선택해주세요'));\r\n }\r\n dispatch(getPortRegister(hostId, checkItems, t));\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n
{t('모니터링포트스캔')} \r\n
\r\n
\r\n {t('포트스캔')}\r\n \r\n
\r\n \r\n {t('단일포트스캔')}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n {t('저장')}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default PortScanModalTable;\r\n","import React from 'react';\r\n\r\nconst ResourceScanModalItem = ({ data, handleSingleCheck, checkItems }) => (\r\n \r\n \r\n handleSingleCheck(e.target.checked, data.name)}\r\n />\r\n \r\n {data.name} \r\n {data.registered} \r\n \r\n);\r\n\r\nexport default ResourceScanModalItem;\r\n","import React from 'react';\r\nimport LoadingSpninner from '../../../dataState/LoadingSpninner';\r\nimport TableNoData from '../../../dataState/TableNoData';\r\nimport ErrorHandler from '../../../error/ErrorHandler';\r\nimport ResourceScanModalItem from './ResourceScanModalItem';\r\n\r\nconst ResourceScanModal = ({ data, loading, t, error, hostId, handleSingleCheck, checkItems, registerLoading, height }) => {\r\n const loadingHeight = height && (height - 100) / 2;\r\n if (loading && (!data || !data.scanModels))\r\n return (\r\n \r\n \r\n \r\n \r\n ); // 로딩중이고 데이터 없을때만\r\n\r\n if (error) {\r\n return (\r\n \r\n { \r\n \r\n );\r\n }\r\n if (!data || !data.scanModels) return \r\n \r\n
\r\n \r\n
\r\n {t('모니터링')}\r\n {t('리소스스캔')}\r\n \r\n
\r\n \r\n {t('리소스스캔')}\r\n \r\n
\r\n
\r\n
\r\n \r\n {t('저장')}\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ResourceScanModalTable;\r\n","import React, { useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { WebRegister } from '../../../../redux/monitoringSetting/ActionRegister';\r\nimport LoadingSpninner from '../../../dataState/LoadingSpninner';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { scanAction } from '../../../../redux/monitoringSetting/ReducerScan';\r\n\r\nconst WebScanModalTable = ({ handleWebState }) => {\r\n const { host } = useSelector((state) => state.ReducerModalState);\r\n const { data, loading, error } = useSelector((state) => state.ReducerScan.webScanData);\r\n const ref = useRef();\r\n const checkValue = useRef();\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const webScan = (e) => {\r\n e.preventDefault();\r\n const reg = /(http(s)?:\\/\\/)([a-z0-9\\w]+\\.*)+[a-z0-9]{2,4}/gi;\r\n const regIp =\r\n /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;\r\n if (ref.current.value.length === 0) return alert(t('스캔할url를입력해주세요'));\r\n\r\n if (!reg.test(ref.current.value) && !regIp.test(ref.current.value)) {\r\n return alert(t('url이정확하지않습니다'));\r\n }\r\n if (loading) return alert(t('스캔중'));\r\n dispatch(scanAction.getWebScan({ host, value: ref.current.value, t }));\r\n };\r\n const handleWebRegister = (e) => {\r\n e.preventDefault();\r\n if (!data) {\r\n return alert(t('URL입력후스캔이필요합니다'));\r\n }\r\n if (checkValue.current.value.length === 0 || checkValue.current.value.length > 20) {\r\n return alert(t('체크값이없거나20자를초과했습니다'));\r\n }\r\n dispatch(WebRegister(host, ref.current.value, checkValue.current.value, t));\r\n };\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n {loading &&
}\r\n
{t('모니터링')} URL \r\n
\r\n
1. {t('모니터링URL입력')} \r\n \r\n {t('스캔하기')}\r\n \r\n \r\n
\r\n
\r\n 2. {t('컨텐츠확인')}\r\n ※ {t('컨텐츠확인문구')} \r\n \r\n \r\n \r\n
\r\n
\r\n 3. {t('체크값입력')}\r\n ※ {t('체크값입력문구')} \r\n \r\n \r\n {t('저장')}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default WebScanModalTable;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\n\r\nconst TrafficModal = ({ handleTrafficModal }) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n 트래픽 요금산정 기준 상세안내 \r\n \r\n
트래픽 과금 대상 \r\n
- IDC 서버에서 외부로 데이터를 내보내는 트래픽(out)만 과금대상입니다.
\r\n
- IDC 외부에서 서버 쪽으로 들어오는 트래픽(in)은 과금대상에 포함되지 않습니다.
\r\n
과금기준 \r\n 트래픽 종략제, 대역종량제 중 기준치를 초과한 트래픽만 과금대상이며, 두 종량제 중 낮은 초과금액으로 청구됩니다.
\r\n \r\n \r\n \r\n \r\n \r\n 대역종량제 \r\n 트래픽종량제 \r\n \r\n \r\n \r\n \r\n 기본제공 \r\n 10Mbps \r\n 1,000Gbyte \r\n \r\n \r\n 초과트래픽 비용 \r\n 1Mbps당 10,000원 \r\n 1Gbyte당 100원 \r\n \r\n \r\n 과금방식 \r\n (대역평균-기본제공) * 10,000원 \r\n 총 사용량 - 1,000Gbytes \r\n \r\n \r\n 특이사항 \r\n 일간 최상위 대역 5개 중 상위 2일 제외 후 평균 \r\n out 트래픽 총 합 \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TrafficModal;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n getWorkData,\r\n setWorkData,\r\n getWorkDetailData,\r\n} from '../../redux/supportcenter/ActionSupportCenter';\r\nimport { onlyDaydateFormat, nowDateFormat, dateFormat, endDateFormat } from '../date/dateFormat';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst WorkModal = ({ handleWorkModal }) => {\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const { workDetailLoading, workDetailData, workDetailError, workModal, workIdx } = useSelector((state) => state.ReducerSupportCenter);\r\n\r\n useEffect(() => {\r\n workIdx && dispatch(getWorkDetailData(workIdx));\r\n }, [dispatch]);\r\n\r\n const workConfirm = (event, id) => {\r\n event.preventDefault();\r\n if (window.confirm(t('승인하시겠습니까'))) {\r\n dispatch(setWorkData(id, workConfirmResult, workErrorResult));\r\n handleWorkModal();\r\n }\r\n };\r\n\r\n const workConfirmResult = () => {\r\n alert(t('승인완료했습니다'));\r\n dispatch(getWorkData(1, 20));\r\n };\r\n\r\n const workErrorResult = () => {\r\n alert(t('API오류입니다다시시도해주세요'));\r\n dispatch(getWorkData(1, 20));\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {t('시스템작업의뢰서')} \r\n \r\n
{t('작업의뢰인')} \r\n
\r\n
\r\n
{t('작업의뢰정보')} \r\n
\r\n \r\n \r\n {t('작업서버IP')} \r\n {workDetailData && workDetailData.data.ipAddress} \r\n {t('작업일시')} \r\n {workDetailData && dateFormat(workDetailData.data.workingDate)} \r\n \r\n \r\n {t('담당자')} \r\n {workDetailData && workDetailData.data.workEngineerName} \r\n {t('작업비용VAT포함')} \r\n {workDetailData && workDetailData.data.workCost} \r\n \r\n \r\n {t('작업세부사항')} \r\n {workDetailData && workDetailData.data.workSpec} \r\n \r\n \r\n
\r\n
\r\n
{t('안내사항')} \r\n
{t('작업의뢰서폼1번')}
\r\n
{t('작업의뢰서폼2번')}
\r\n
{t('작업의뢰서폼3번')}
\r\n
{t('작업의뢰서폼4번')}
\r\n
{t('작업의뢰서폼5번')}
\r\n
\r\n \r\n
{\r\n workConfirm(e, workDetailData && workDetailData.data.wrIdx);\r\n }}\r\n >\r\n {t('작업승인하기')}\r\n \r\n \r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default WorkModal;\r\n","export default __webpack_public_path__ + \"static/media/monitoring-set-port01.949ef039.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-port02.e71b6584.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-port03.47887c0f.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-port05.681a2dfa.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-port06.d8654fcb.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-port07.bc400c6e.jpg\";","export default __webpack_public_path__ + \"static/media/redhat_1.28f4691b.jpg\";","export default __webpack_public_path__ + \"static/media/redhat_3.bb15a0ff.jpg\";","export default __webpack_public_path__ + \"static/media/redhat_4.fe8b8009.jpg\";","export default __webpack_public_path__ + \"static/media/windows_1.43b1f739.jpg\";","export default __webpack_public_path__ + \"static/media/windows_2.c4d8b965.jpg\";","export default __webpack_public_path__ + \"static/media/windows_2-1.5b7b82be.jpg\";","export default __webpack_public_path__ + \"static/media/windows_3.6f81c0f2.jpg\";","export default __webpack_public_path__ + \"static/media/windows_4.23320de5.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-web01.1dcbde26.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-web02.6d286e85.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-web04.4a40c1e5.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-web05.b2b3b435.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-web06.1dbff3c6.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-web07.f4ce87f9.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-nms01.ef15fc1b.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-nms02.37ee4879.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-nms03.d58157e8.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-nms04.aec13270.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-nms05.eafcf8eb.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring-set-nms06.de22fb4e.jpg\";","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport port1 from '../img/port/monitoring-set-port01.jpg';\r\nimport port2 from '../img/port/monitoring-set-port02.jpg';\r\nimport port3 from '../img/port/monitoring-set-port03.jpg';\r\nimport port4 from '../img/port/monitoring-set-port05.jpg';\r\nimport port5 from '../img/port/monitoring-set-port06.jpg';\r\nimport port6 from '../img/port/monitoring-set-port07.jpg';\r\nimport cent1 from '../img/agent/redhat_1.jpg';\r\nimport cent2 from '../img/agent/redhat_2.jpg';\r\nimport cent3 from '../img/agent/redhat_3.jpg';\r\nimport cent4 from '../img/agent/redhat_4.jpg';\r\nimport windows1 from '../img/agent/windows_1.jpg';\r\nimport windows2 from '../img/agent/windows_2.jpg';\r\nimport windows3 from '../img/agent/windows_2-1.jpg';\r\nimport windows4 from '../img/agent/windows_3.jpg';\r\nimport windows5 from '../img/agent/windows_4.jpg';\r\nimport web1 from '../img/web/monitoring-set-web01.jpg';\r\nimport web2 from '../img/web/monitoring-set-web02.jpg';\r\nimport web4 from '../img/web/monitoring-set-web04.jpg';\r\nimport web5 from '../img/web/monitoring-set-web05.jpg';\r\nimport web6 from '../img/web/monitoring-set-web06.jpg';\r\nimport web7 from '../img/web/monitoring-set-web07.jpg';\r\nimport nms1 from '../img/nms/monitoring-set-nms01.jpg';\r\nimport nms2 from '../img/nms/monitoring-set-nms02.jpg';\r\nimport nms3 from '../img/nms/monitoring-set-nms03.jpg';\r\nimport nms4 from '../img/nms/monitoring-set-nms04.jpg';\r\nimport nms5 from '../img/nms/monitoring-set-nms05.jpg';\r\nimport nms6 from '../img/nms/monitoring-set-nms06.jpg';\r\nimport CopyToClipboard from 'react-copy-to-clipboard';\r\n\r\nconst MonitoringSetHowModal = ({ handleMonitoringSetHowModal }) => {\r\n const [tabState, setTabState] = useState(1);\r\n const { t } = useTranslation('Lang');\r\n const handleTabState = (idx) => {\r\n setTabState(idx);\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n 모니터링 설정방법 \r\n \r\n handleTabState(1)}>\r\n {t('포트')}\r\n \r\n handleTabState(2)}>\r\n {t('웹')}\r\n \r\n {/* = 3 && tabState <= 6 ? 'on' : ''}`}>{t('리소스')} \r\n {t('Agent 설정')} */}\r\n handleTabState(3)}>\r\n {t('centOS / redhat')}\r\n \r\n {/* handleTabState(4)}>\r\n {t('debian / ubuntu')}\r\n */}\r\n handleTabState(5)}>\r\n {t('windows')}\r\n \r\n handleTabState(6)}>\r\n {t('NMS 설정')}\r\n \r\n handleTabState(7)}>\r\n {t('FAQ')}\r\n \r\n \r\n \r\n {tabState === 1 && (\r\n
\r\n
포트 모니터링 설정 방법 \r\n
\r\n
1. NMS 홈페이지 좌측 메뉴의 모니터링 → 모니터링 설정 페이지로 이동합니다.
\r\n
\r\n
\r\n
2. 서버 리스트에서 설정할 IP를 선택 후 [포트추가] 버튼을 클릭합니다.
\r\n
\r\n
\r\n
\r\n 3. 포트 설정 옆에있는 [스캔] 버튼을 눌러 모든 포트를 스캔 합니다. 10초가량 소요됩니다.\r\n
\r\n
\r\n
\r\n
4. 포트스캔이 완료되면 모니터링에 등록할 포트만 체크 후 [저장] 버튼을 눌러 등록 합니다.
\r\n
\r\n
\r\n
5. 등록성공 이라는 팝업이 뜨면 정상적으로 등록된 것 입니다.
\r\n
\r\n
\r\n
6. 모니터링 설정으로 돌아가 모니터링이 잘 등록되었는지 확인합니다.
\r\n
\r\n
\r\n )}\r\n {tabState === 2 && (\r\n
\r\n
Web 모니터링 설정 방법 \r\n
\r\n
1. NMS 홈페이지 좌측 메뉴의 모니터링 -{'>'} 모니터링 설정 페이지로 이동합니다.'
\r\n
\r\n
\r\n
2. 서버 리스트에서 설정할 IP를 선택합니다.
\r\n
\r\n
\r\n
3. 해당 페이지가 나오면, WEB 설정 옆 [추가]버튼을 클릭합니다.
\r\n
\r\n
\r\n
\r\n 4. 모달창의 모니터링 URL 입력 부분에 모니터링을 할 URL을 입력 후 오른쪽 [스캔]버튼을 클릭합니다.\r\n
\r\n
\r\n
\r\n
\r\n 5. 스캔 시 컨텐츠 확인에 나타난 소스중 일부를 복사하여 체크값 입력에 붙여넣고 [저장]버튼을 클릭합니다.\r\n
\r\n
\r\n
\r\n
6. 웹 등록 성공이라는 팝업이 뜨시면 정상적으로 등록된 것 입니다.
\r\n
\r\n
\r\n
7. 좌측 메뉴 모니터링 -{'>'} 모니터링 설정으로 돌아가 WEB모니터링이 잘 등록되었는지 확인합니다.
\r\n
\r\n
\r\n )}\r\n {tabState === 3 && (\r\n
\r\n
centOS / redhat \r\n
CentOS 4버전 이하는 지원되지 않습니다.
\r\n
\r\n
\r\n 1. Monitoring Repository RPM을 설치합니다.\r\n alert(`${t('복사 되었습니다.')}`)}\r\n >\r\n 복사 \r\n {' '}\r\n : rpm -ivh http://repo.monitoring.or.kr/centos/repo/monitoring-repo-1.0.0-1.noarch.rpm )\r\n
\r\n
\r\n
\r\n 2. Monitoring Agent를 Yum 을 이용하여 설치합니다.\r\n alert(`${t('복사 되었습니다.')}`)}>\r\n 복사 \r\n {' '}\r\n : yum install monitoring-agent -y )\r\n
\r\n
\r\n
\r\n 3. 설치가 완료되면 아래의 명령어로 monitoring-agent를 실행합니다.\r\n alert(`${t('복사 되었습니다.')}`)}>\r\n 복사 \r\n {' '}\r\n : /etc/init.d/monitoring-agent start )\r\n
\r\n
\r\n
\r\n 4. ps 명령어로 정상적으로 데몬이 실행중인지 확인합니다.\r\n alert(`${t('복사 되었습니다.')}`)}>\r\n 복사 \r\n {' '}\r\n : ps -ef | grep monitoring )\r\n
\r\n
설치가 완료되었다면, NMS 설정을 확인하여 모니터링에 추가하시면 됩니다.
\r\n
\r\n )}\r\n {tabState === 4 && (\r\n
\r\n
debian / ubuntu \r\n
서비스 준비 중입니다.
\r\n
\r\n )}\r\n {tabState === 5 && (\r\n
\r\n
Windows \r\n
\r\n Windows Monitoring Agent 설치 방법\r\n \r\n \r\n
\r\n
\r\n
1. 다운받은 설치파일(ZIP)을 서버에 옮겨 압축을 해제합니다.
\r\n
\r\n
2. 해제한 폴더 내 setup.bat 파일을 실행하면 DOS창에서 자동으로 설치가 완료됩니다.
\r\n
\r\n
\r\n
3. 설치후 C드라이브 내 Monitoring 폴더와 폴더 내 Agent 파일이 존재하는지 확인합니다.
\r\n
\r\n
4. Monitoring_Agent가 윈도우 서비스에 정상적으로 등록되었는지 확인합니다.
\r\n
설치가 완료되었다면, NMS 설정을 확인하여 모니터링에 추가하시면 됩니다.
\r\n
\r\n )}\r\n {tabState === 6 && (\r\n
\r\n
NMS 설정 \r\n
\r\n
1. NMS 홈페이지 좌측 메뉴의 모니터링 → 모니터링 설정 페이지로 이동합니다.
\r\n
\r\n
2. 서버 리스트에서 설정할 IP를 선택 후 [Agent 추가] 버튼을 클릭합니다.
\r\n
\r\n
\r\n 3.모니터링 리소스 스캔 옆 [리소스 스캔] 버튼을 클릭하여 스캔합니다.\r\n
\r\n
\r\n
\r\n 4. 스캔이 완료되면 등록할 서비스를 선택 후 [저장] 버튼을 클릭합니다.\r\n
\r\n
\r\n
5. 등록성공 이라는 팝업이 뜨면 정상적으로 등록된 것 입니다.
\r\n
\r\n
6. 아래의 체크값 규칙을 확인하여 수동으로 체크값을 수정할 수 있습니다.
\r\n
\r\n
7. 좌측 메뉴 모니터링 -{'>'} 모니터링 설정으로 돌아가 해당서버를 선택하여 정상적으로 등록되었는지 확인합니다.
\r\n
\r\n
※ Agent 스캔 시 에러발생원인과 해결방법은 아래와 같습니다. \r\n
\r\n agent 미지원 서버 & Timeout Error\r\n
\r\n
1. Agent가 설치되지 않았거나, 실행되지 않은 경우. \r\n
\r\n
2. 서버 내부 방화벽 혹은 외부 방화벽에서 10050포트가 차단된경우. \r\n
\r\n 두 가지 모두 정상적인 경우 기술지원팀으로 문의해주십시오. Tel) 02-6925-5044\r\n
\r\n \r\n
\r\n )}\r\n {tabState === 7 && (\r\n
\r\n
FAQ \r\n
\r\n \r\n
\r\n 통합 모니터링 서비스란 어떤 서비스 입니까? \r\n \r\n
\r\n
\r\n 통합 모니터링 서비스는 서버의 상태를 실시간으로 체크 하는 서비스이며,서버 및 홈페이지에 문제가 발생하면\r\n E-Mail & 유선전화 & SMS(별도) 등으로 고객님께 장애 통보를 해드리는 서비스입니다.또한, 웹페이지를 통해\r\n 프로그램 설치 없이 모니터링이 가능합니다.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 모니터링 등록의 서버 혹은 포트 갯수 제한이 있나요? \r\n \r\n
\r\n
\r\n 호스팅 서비스를 이용중인 서버는 무료로 이용 가능하나, IDC 외부 서버는 별도 비용이 필요합니다.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 외부의 서버도 모니터링이 가능한가요? \r\n \r\n
\r\n
\r\n 통합 모니터링 서비스는 서버의 상태를 실시간으로 체크 하는 서비스이며,서버 및 홈페이지에 문제가 발생하면\r\n E-Mail & 유선전화 & SMS(별도) 등으로 고객님께 장애 통보를 해드리는 서비스입니다.또한, 웹페이지를 통해\r\n 프로그램 설치 없이 모니터링이 가능합니다.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 포트 스캔시 서버에는 실행중인데 포트가 스캔 되지 않아요. \r\n \r\n
\r\n
\r\n 서버 내/외부 방화벽에서 해당 포트에 대한 차단 정책이 있는지 확인해야합니다.방화벽에서 포트를 특정 IP외\r\n 접근이 불가한 상태라면 Monitoring 서버의 IP를 추가해야합니다.Monitoring Server IP 대역: 110.10.81.160/27\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 포트, WEB 모니터링도 서버에 Agent를 설치해야하나요? \r\n \r\n
\r\n
포트, WEB 모니터링은 서버에 추가적으로 Agent를 설치하지 않아도 됩니다.
\r\n
\r\n
\r\n
\r\n \r\n
\r\n Resource 모니터링은 어떻게 진행해야하나요? \r\n \r\n
\r\n
\r\n 모니터링할 서버에 추가적인 Agent를 설치하고 모니터링을 등록해야합니다.설치방법은 대시보드 -{'>'} 설정방법 을\r\n 참고해 주시기 바랍니다.합 모니터링 서비스는 서버의 상태를 실시간으로 체크 하는 서비스이며,서버 및 홈페이지에\r\n 문제가 발생하면 E-Mail & 유선전화 & SMS(별도) 등으로 고객님께 장애 통보를 해드리는 서비스입니다.또한,\r\n 웹페이지를 통해 프로그램 설치 없이 모니터링이 가능합니다.\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 모니터링 서버의 IP가 어떻게 되나요? \r\n \r\n
\r\n
110.10.81.160/27 대역에서 모니터링 되고 있습니다.
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 모니터링 다운시 SMS로 받고싶은데 어떻게 해야하나요? \r\n \r\n
\r\n
SMS의 경우 별도 비용이 필요한 관계로 기술지원팀으로(02-6925-5044) 연락 주셔야 합니다.
\r\n
\r\n
\r\n
\r\n \r\n
\r\n 모니터링 에이전트 프로그램을 삭제하고싶어요. \r\n \r\n
\r\n
\r\n 서버 OS환경에 따라 아래와 같이 진행 합니다.\r\n
\r\n 1) Windows 서버 설치시 같이 있던 Uninstall.bat 파일을 실행 시키시면 삭제됩니다. 이미 Uninstall.bat 파일을\r\n 삭제했다면 아래의 파일을 다운받아 압축해제하시면 됩니다.\r\n
\r\n
→ Uninstall.zip \r\n
\r\n 2) Linux 서버 yum remove monitoring-agent\r\n
위 명령어를 사용하여 모두 삭제됩니다.\r\n
\r\n
\r\n
\r\n
\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default MonitoringSetHowModal;\r\n","export default \"data:image/jpeg;base64,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JBofh2XX59Js3CKsptZPE2ueItZP2mZXvJRdavdKs9xKtt5FqIbW3yYL25hhktI7qeK1nYG4t0mlSCbbjHmwq4ikK7QVLxllKqQwwKSvZRfVxT8rbky0cmtotuPotrfI9r1v4L6r4f0HU/FN3rNhJoFp4Y8IeIdN1KO1uhb6xP4ykeK10ixfYEOoWP2PVPtxkYKn9nyZ/wBcgb6A/YX8N+H/ABD4n8aR65oWj65HbaFZy2sWr6daajHDM2oxo0kEV5DLHDJsbazAZ25GcHFeK+O/ifY3nwX+GXwl0rXY9aj8P3us+JNcvIdMuNPEF7qbxJp2gvPd21rc6jFo0CzusoWW1jnvJvs00gZjXcfsi/FrwR8Ktf8AFV34z1KfTLXVtHtbOzeK1uL0NPFfJcMhS3QyQqqL945BIxk5xXx/iDh8yxPCXEuGymOKqZhLCSp4OOBm4Yico1ocnsnBqTla7XK3pd6bnwXilhc0xnh9xFhsjp4ypm1fLLYWngJSjjpV3VTSw86Kp1YStrbn5o9zR/bf0TRtD+Knhq00LSdM0Szl8AabPJa6VYWun2sly3iLxRCZ/s9nHFEJHggt4mcruYRgmvi/aT8vZen6fT0r6m/az+JfhD4nfETQtf8ABepNqOmWXgyw0m4nktri2YX8Wt+IL6VBDdAOuy31C2AZQqlwSqrXyvv28g5z2znGKvgChmGF4K4ew+bRrwzOlgeXEwxPMsRCrzzuq3P7/Pbdy1d7l+F2GzTBcA8K4XPIYmlm1DLaUMxhjOf60pqvNuFf2nvuqlbmcm29721IaKKK+tPugooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//Z\"","export default __webpack_public_path__ + \"static/media/dashboard.86b9a284.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring01.b59b5721.jpg\";","export default __webpack_public_path__ + \"static/media/monitoring02.2cb9a337.jpg\";","export default __webpack_public_path__ + \"static/media/reporting.0aeb390f.jpg\";","export default __webpack_public_path__ + \"static/media/traffic01.1cb73d47.jpg\";","export default __webpack_public_path__ + \"static/media/traffic02.e9ab2de5.jpg\";","export default __webpack_public_path__ + \"static/media/traffic03.77a92316.jpg\";","export default __webpack_public_path__ + \"static/media/dns.24f03b6c.jpg\";","import React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport dashboard from '../img/manual/dashboard.jpg';\r\nimport monitoring1 from '../img/manual/monitoring01.jpg';\r\nimport monitoring2 from '../img/manual/monitoring02.jpg';\r\nimport reporting from '../img/manual/reporting.jpg';\r\nimport traffic01 from '../img/manual/traffic01.jpg';\r\nimport traffic02 from '../img/manual/traffic02.jpg';\r\nimport traffic03 from '../img/manual/traffic03.jpg';\r\nimport dns from '../img/manual/dns.jpg';\r\nimport CopyToClipboard from 'react-copy-to-clipboard';\r\n\r\nconst HcManualModal = ({ handleHcManualModal }) => {\r\n const [tabState, setTabState] = useState(1);\r\n const { t } = useTranslation('Lang');\r\n const handleTabState = (idx) => {\r\n setTabState(idx);\r\n };\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n 사용자 매뉴얼 \r\n \r\n handleTabState(1)}>\r\n {t('대시보드')}\r\n \r\n handleTabState(2)}>\r\n {t('모니터링')}\r\n \r\n handleTabState(3)}>\r\n {t('트래픽')}\r\n \r\n handleTabState(4)}>\r\n {t('리포팅')}\r\n \r\n handleTabState(5)}>\r\n {t('네임서버 관리')}\r\n \r\n \r\n \r\n {tabState === 1 && (\r\n
\r\n
대시보드 \r\n
\r\n
\r\n 서버트래픽을 최대 5개까지 합산하여 볼 수 있습니다. 트래픽의 단위를 변경할 수 있습니다. 현재 발생한 모니터링의 내역을 확인 할 수 있습니다. 과거 발생한 모든 모니터링의 내역을 확인 할 수 있습니다. 지원 문의 및 작업요청서를 작성할 수 있으며, 과거 문의 내역을 조회 할 수 있습니다. \r\n
\r\n
\r\n )}\r\n {tabState === 2 && (\r\n
\r\n
실시간 모니터링 \r\n
\r\n
\r\n 리스트뷰와 카드뷰를 선택하여 보실 수 있습니다.(마지막으로 본 뷰타입으로 자동 적용되어 다음 로그인 시에도 적용됩니다.) 모니터링 상태별로 확인 할 수 있습니다. IP 또는 Tag 별로 검색하여 원하는 서버만 확인 할 수 있습니다. 상세 모니터링 내역을 확인 할 수 있습니다. \r\n
\r\n
모니터링 설정변경 \r\n
\r\n
\r\n 전체 서버의 모니터링을 켜고 끌 수 있습니다. 모니터링 서버를 선택하고 검색할 수 있습니다. 선택된 서버의 모니터링을 일괄적으로 켜고 끌 수 있습니다. 선택된 서버의 Tag를 지정할 수 있습니다. 유형별로 모니터링을 설정할 수 있습니다. 개별적으로 모니터링의 상태를 변경할 수 있습니다. \r\n
\r\n
\r\n )}\r\n {tabState === 3 && (\r\n
\r\n
트래픽 상세 그래프 \r\n
\r\n
\r\n 서버간 트래픽을 비교할 수 있습니다. 트래픽을 조회할 서버를 선택하고 검색할 수 있습니다. 트래픽 조회 기간을 설정 할 수 있습니다. 트래픽 요금 산정을 볼 수 있습니다. 그래프 단위를 변경할 수 있습니다. 개별적으로 모니터링의 상태를 확인할 수 있습니다. \r\n
\r\n
일일 트래픽 현황 \r\n
\r\n
\r\n 종량제별 일일 트랙픽 현황을 확인할 수 있습니다.
\r\n
트래픽 요금 산정 \r\n
\r\n
\r\n 트래픽 추가 요금산정 기준을 확인할 수 있습니다.
\r\n
\r\n )}\r\n {tabState === 4 && (\r\n
\r\n
리포팅 \r\n
\r\n
\r\n 발행된 리포트를 다운로드 할 수 있습니다. \r\n
\r\n
\r\n )}\r\n {tabState === 5 && (\r\n
\r\n
DNS 레코드 설정 \r\n
\r\n
\r\n DNS를 설정 할 도메인을 선택 할 수 있습니다. 신규 도메인을 추가 할 수 있습니다. 선택한 도메인을 삭제 할 수 있습니다. DNS 레코드를 수정 할 수 있습니다. DNS 레코드를 추가 할 수 있습니다.
\r\n
\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default HcManualModal;\r\n","import React, { memo } from 'react';\r\nconst MonitoringMailSettingItem = memo(({ data, checkItems, handleSingleCheck, handleDeleteOnClick, handleModifyOnClick }) => {\r\n return (\r\n \r\n \r\n mm.hostID).includes(data.hostID) ? true : false}\r\n onChange={(e) =>\r\n handleSingleCheck(e.target.checked, {\r\n hostID: data.hostID,\r\n serverIdx: data.serverIdx,\r\n ipAddress: data.ipAddress,\r\n ip: data.ipAddress,\r\n })\r\n }\r\n >\r\n \r\n {data.ipAddress} \r\n {data.tag.length > 0 ? data.tag.slice(0, 3).map((m) => {m.tagName} ) : ''}
{data.alertAssignee.length > 0 ? data.alertAssignee[0].zaaName : ''} \r\n {data.alertAssignee.length > 0 ? data.alertAssignee[0].zaaEmail : ''} \r\n \r\n {data.alertAssignee.length > 0 ? (\r\n \r\n handleModifyOnClick(data)}>\r\n 수정\r\n \r\n handleDeleteOnClick(data.hostID)}>\r\n 삭제\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n );\r\n});\r\n\r\nexport default MonitoringMailSettingItem;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { action, listClear } from '../../../redux/monitoringMailSetting/ReducerMonitoringMailSetting';\r\n\r\nconst ManagerAddModal = ({ checkItems, postLoading, setCheckItems, handleReportingModalState }) => {\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n const [inputs, setInputs] = useState({\r\n data: [\r\n {\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n name: '',\r\n email: '',\r\n },\r\n ],\r\n errors: [],\r\n });\r\n\r\n const onChange = (e, index) => {\r\n const { value, name } = e.target;\r\n\r\n setInputs((prev) => {\r\n const updatedData = [...prev.data];\r\n const updatedErrors = [...prev.errors];\r\n\r\n if (name === 'email') {\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n\r\n if (!emailRegex.test(value) && value.trim() !== '') {\r\n updatedErrors[index] = '유효하지 않은 이메일 형식입니다.';\r\n } else {\r\n updatedErrors[index] = null;\r\n }\r\n }\r\n\r\n updatedData[index] = { ...updatedData[index], [name]: value };\r\n\r\n return { ...prev, data: updatedData, errors: updatedErrors };\r\n });\r\n };\r\n\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n\r\n if (postLoading) {\r\n return alert('이미 등록중입니다. 잠시만 기다려주세요.');\r\n }\r\n\r\n if (checkItems.length === 0) {\r\n return alert('선택된 서버가 없습니다. 서버를 선택 후 다시 시도해 주세요.');\r\n }\r\n\r\n if (inputs.errors.length > 0 && inputs.errors.some((item) => item !== null && item !== undefined && item !== 'empty')) {\r\n return alert('담당자의 항목에 잘못된 입력값이 있습니다.');\r\n }\r\n\r\n let postData = checkItems.map((m) => ({\r\n HostId: m.hostID.toString(),\r\n SuiIdx: m.serverIdx.toString(),\r\n AlertAssignees: inputs.data\r\n .filter((m) => m.name.trim() !== '' && m.email.trim() !== '')\r\n .map((mm) => ({ name: mm.name, email: mm.email })),\r\n }));\r\n\r\n dispatch(action.postAlertMail({ postData, setCheckItems, handleReportingModalState }));\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
담당자 등록 \r\n
\r\n
선택한 HOST명
\r\n {checkItems.map((m, idx) => (\r\n
\r\n {m.ipAddress} \r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 이름 \r\n 수신주소 \r\n \r\n \r\n \r\n {inputs.data.map((item, index) => (\r\n \r\n 담당자 \r\n \r\n onChange(e, index)}\r\n placeholder=\"이름을 입력하세요\"\r\n />\r\n \r\n \r\n onChange(e, index)}\r\n placeholder=\"이메일을 입력하세요\"\r\n />\r\n {inputs.errors[index] && {inputs.errors[index]}
}\r\n \r\n \r\n ))}\r\n \r\n
\r\n
\r\n handleSubmit(e)}>\r\n 저장\r\n \r\n
\r\n
\r\n
\r\n 닫기 \r\n
*/}\r\n \r\n );\r\n};\r\n\r\nexport default ManagerAddModal;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { action, listClear } from '../../../redux/monitoringMailSetting/ReducerMonitoringMailSetting';\r\n\r\nconst ManagerModiModal = ({ data, postLoading, handleReportingModiModalState }) => {\r\n const [showModal, setShowModal] = useState(0);\r\n const dispatch = useDispatch();\r\n const { t } = useTranslation('Lang');\r\n\r\n const [inputs, setInputs] = useState({\r\n data: [\r\n {\r\n zaaIdx: 0,\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n zaaIdx: 0,\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n zaaIdx: 0,\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n zaaIdx: 0,\r\n name: '',\r\n email: '',\r\n },\r\n {\r\n zaaIdx: 0,\r\n name: '',\r\n email: '',\r\n },\r\n ],\r\n errors: [],\r\n });\r\n\r\n useEffect(() => {\r\n if (data.alertAssignee && data.alertAssignee.length > 0) {\r\n setInputs((prevInputs) => {\r\n const updatedData = prevInputs.data.map((item, index) => {\r\n if (data.alertAssignee[index]) {\r\n return {\r\n zaaIdx: data.alertAssignee[index].zaaIdx || 0,\r\n name: data.alertAssignee[index].zaaName || '',\r\n email: data.alertAssignee[index].zaaEmail || '',\r\n };\r\n }\r\n return item;\r\n });\r\n return { ...prevInputs, data: updatedData };\r\n });\r\n }\r\n }, [data.alertAssignee]);\r\n\r\n const onChange = (e, index) => {\r\n const { value, name } = e.target;\r\n\r\n setInputs((prev) => {\r\n const updatedData = [...prev.data];\r\n const updatedErrors = [...prev.errors];\r\n\r\n if (name === 'email') {\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n if (!emailRegex.test(value) && value.trim() !== '') {\r\n updatedErrors[index] = '유효하지 않은 이메일 형식입니다.';\r\n } else {\r\n updatedErrors[index] = null;\r\n }\r\n }\r\n\r\n updatedData[index] = { ...updatedData[index], [name]: value };\r\n\r\n return { ...prev, data: updatedData, errors: updatedErrors };\r\n });\r\n };\r\n\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n if (postLoading) {\r\n return alert('이미 수정중입니다. 잠시만 기다려주세요.');\r\n }\r\n\r\n if (inputs.errors.length > 0 && inputs.errors.some((item) => item !== null && item !== undefined && item !== 'empty')) {\r\n return alert('담당자의 항목에 잘못된 입력값이 있습니다.');\r\n }\r\n\r\n let postData = [\r\n {\r\n HostId: data.hostID.toString(),\r\n SuiIdx: data.serverIdx.toString(),\r\n AlertAssignees: inputs.data\r\n .filter((m) => m.name.trim() !== '' && m.email.trim() !== '')\r\n .map((mm) => ({ zaaIdx: mm.zaaIdx, name: mm.name, email: mm.email })),\r\n },\r\n ];\r\n dispatch(action.putAlertMail({ postData, handleReportingModiModalState }));\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
담당자 수정 \r\n
\r\n
선택한 HOST명
\r\n
\r\n {data.ipAddress} \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n 이름 \r\n 수신주소 \r\n \r\n \r\n \r\n {inputs.data.map((item, index) => (\r\n \r\n 담당자 \r\n \r\n onChange(e, index)}\r\n placeholder=\"이름을 입력하세요\"\r\n />\r\n \r\n \r\n onChange(e, index)}\r\n placeholder=\"이메일을 입력하세요\"\r\n />\r\n {inputs.errors[index] && {inputs.errors[index]}
}\r\n \r\n \r\n ))}\r\n \r\n
\r\n
\r\n handleSubmit(e)}>\r\n 수정\r\n \r\n
\r\n
\r\n
\r\n 닫기 \r\n
*/}\r\n \r\n );\r\n};\r\n\r\nexport default ManagerModiModal;\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { action, listClear } from '../../redux/monitoringMailSetting/ReducerMonitoringMailSetting';\r\nimport BasicMapTable from '../common/BasicMapTable';\r\nimport MonitoringMailSettingItem from './MonitoringMailSettingItem';\r\nimport ManagerAddModal from '../modal/monitoringMailSetting/ManagerAddModal';\r\nimport ManagerModiModal from '../modal/monitoringMailSetting/ManagerModiModal';\r\n\r\nconst MonitoringMailSetting = (props) => {\r\n const { loading, data, error } = useSelector((state) => state.ReducerMonitoringMailSetting.mailList);\r\n const { totalCount, regCount, unRegCount } = useSelector((state) => state.ReducerMonitoringMailSetting.mailStateCount);\r\n const { postLoading } = useSelector((state) => state.ReducerMonitoringMailSetting.mailPost);\r\n const dispatch = useDispatch();\r\n const [isModalView, setIsModalView] = useState(false);\r\n const [isModiModalView, setIsModiModalView] = useState(false);\r\n const [checkItems, setCheckItems] = useState([]);\r\n const [selectStatus, setSelectStatus] = useState('');\r\n const { t } = useTranslation('Lang');\r\n const searchRef = useRef(null);\r\n const [modiSelectedData, setModiSelectedData] = useState(null);\r\n\r\n useEffect(() => {\r\n dispatch(action.getAlertMailList({ searchText: searchRef.current.value }));\r\n }, []);\r\n\r\n const handleAllCheck = (checked) => {\r\n if (checked) {\r\n const idArray = [];\r\n if (data.length !== 0) {\r\n data.map((m) => idArray.push({ hostID: m.hostID, serverIdx: m.serverIdx, ipAddress: m.ipAddress }));\r\n setCheckItems(idArray);\r\n }\r\n } else {\r\n setCheckItems([]);\r\n }\r\n };\r\n\r\n const handleSingleCheck = (checked, el) => {\r\n if (checked) {\r\n setCheckItems([...checkItems, el]);\r\n } else {\r\n setCheckItems(checkItems.filter((f) => f.hostID !== el.hostID));\r\n }\r\n };\r\n\r\n const handleSearch = (e) => {\r\n e.preventDefault();\r\n if (loading) {\r\n return alert(t('이미 검색중입니다. 잠시만기달려주세요'));\r\n }\r\n dispatch(action.getAlertMailList({ searchText: searchRef.current.value }));\r\n };\r\n\r\n const handleReportingModalState = () => {\r\n if (checkItems.length === 0) {\r\n return alert('선택된 서버가 없습니다.');\r\n }\r\n setIsModalView(!isModalView);\r\n };\r\n\r\n const handleReportingModiModalState = () => {\r\n setIsModiModalView(!isModiModalView);\r\n };\r\n\r\n const handleDeleteOnClick = (hostID) => {\r\n if (hostID === undefined) {\r\n return alert('선택된 서버가 없습니다.');\r\n }\r\n\r\n if (window.confirm('삭제하시겠습니까?')) {\r\n dispatch(action.deleteAlertMail([hostID]));\r\n }\r\n };\r\n\r\n const handleModifyOnClick = (data) => {\r\n setModiSelectedData(data);\r\n\r\n setIsModiModalView(!isModiModalView);\r\n };\r\n\r\n const handleSelectDelete = () => {\r\n if (checkItems.length === 0) {\r\n return alert('선택된 서버가 없습니다.');\r\n }\r\n\r\n dispatch(action.deleteAlertMail(checkItems.map((m) => m.hostID)));\r\n };\r\n\r\n const handleStatusSelect = (value) => {\r\n console.log(value);\r\n setSelectStatus(value);\r\n dispatch(action.getAlertMailList({ searchText: searchRef.current.value, selectStatus: value }));\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n handleStatusSelect('')}>\r\n \r\n {totalCount}\r\n {t('개')}\r\n \r\n \r\n handleStatusSelect('등록')}>\r\n \r\n {regCount}\r\n {t('개')}\r\n \r\n \r\n handleStatusSelect('미등록')}>\r\n \r\n {unRegCount}\r\n {t('개')}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n handleReportingModalState()}>\r\n 담당자 일괄등록\r\n \r\n handleSelectDelete()}>\r\n 선택 담당자 삭제\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n handleAllCheck(e.target.checked)}\r\n />\r\n \r\n host명 \r\n tag \r\n 대표 담당자명 \r\n 대표 메일 주소 \r\n \r\n \r\n \r\n \r\n
\r\n {isModalView && (\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
{isPlaying &&
\r\n
\r\n {ModalData &&
}\r\n {display &&
}\r\n {portState &&
}\r\n {webState &&
}\r\n {resoureState &&
}\r\n {accountModal &&
}\r\n {workModal &&
}\r\n {docState &&
}\r\n {userMenual &&
}\r\n
\r\n
\r\n
;\r\n }\r\n userManager.getUser().then((user) => {\r\n if (user && !user.expired) {\r\n axios.defaults.headers.common['Authorization'] = 'Bearer ' + user.access_token;\r\n }\r\n });\r\n\r\n const handleSideClick = () => {\r\n console.log(1)\r\n setAsideToggle(!asideToggle);\r\n }\r\n\r\n return (\r\n \r\n <>\r\n
\r\n
\r\n \r\n
\r\n Redirecting...
\r\n \r\n );\r\n}\r\n\r\nexport default Callback;\r\n","import React from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { SignoutCallbackComponent } from 'redux-oidc';\r\nimport { setAuthHeader } from '../utils/axiosHeaders';\r\nimport userManager from '../utils/userManager';\r\nimport { persistor } from '../redux/store';\r\nfunction OutCallback() {\r\n const history = useHistory();\r\n const successCallback = (user) => {\r\n persistor.purge();\r\n userManager.clearStaleState();\r\n userManager.removeUser();\r\n localStorage.clear();\r\n history.push('/DashBoard');\r\n };\r\n const errorCallback = (error) => {\r\n persistor.purge();\r\n userManager.clearStaleState();\r\n userManager.removeUser();\r\n localStorage.clear();\r\n history.push('/DashBoard');\r\n };\r\n return (\r\n \r\n Redirecting...
\r\n \r\n );\r\n}\r\n\r\nexport default OutCallback;\r\n","import React from 'react';\r\nimport { processSilentRenew } from 'redux-oidc';\r\n\r\nexport const SilentRenewComponent = () => {\r\n processSilentRenew();\r\n return SilentRenewComponent
;\r\n};\r\n","// import React from \"react\";\r\n// import Layout from \"./components/Layout\";\r\n\r\n// const App = (props) => \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","// import React from \"react\";\r\n// import ReactDOM from \"react-dom\";\r\n// import { BrowserRouter } from \"react-router-dom\";\r\n// import { Provider } from \"react-redux\";\r\n// import App from \"./App\";\r\n// import store from \"./redux/store\";\r\n// import registerServiceWorker from \"./registerServiceWorker\";\r\n// import './i18n' // 다국어 지원 파일\r\n// const rootElement = document.getElementById(\"root\");\r\n\r\n// ReactDOM.render(\r\n// \r\n// \r\n// \r\n// ,\r\n// rootElement\r\n// );\r\n\r\n// registerServiceWorker();\r\n\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n//import 'milligram/dist/milligram.min.css';\r\nimport App from './App';\r\n\r\nReactDOM.render(