Merge branch 'master' of https://bitbucket.org/frolovng/asb_cloud_front_react

public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>АСБ Vision</title>
   </head>

src/App.js

@@ -1,5 +1,4 @@
 import './styles/App.less'
-import React /*, { useContext, createContext, useState }*/ from "react"
 import {
   BrowserRouter as Router,
   Switch,

src/components/LoaderPortal.jsx

@@ -0,0 +1,12 @@
+import Loader from './Loader'
+
+export default function LoaderPortal({show, fade=true, children}){
+  return(
+    <div className='loader-container'>
+      <div className='loader-content'>
+        {children}
+      </div>
+      {show && fade && <div className='loader-fade'/>}      
+      {show && <div className='loader-overlay'><Loader/></div>}
+    </div>)
+}

src/components/Well.jsx

@@ -17,7 +17,7 @@ export default function Well() {
     <Layout>
       <Menu
         mode="horizontal"
-        selectable={false}
+        selectable={true}
         className="well_menu"
       >
         <Menu.Item key="1" icon={<FundViewOutlined/>}>

src/components/charts/ChartTimeBase.tsx

@@ -30,11 +30,11 @@ const defaultOptions = {
           millisecond: 'HH:mm:ss.SSS',
           second: 'HH:mm:ss',
           minute: 'HH:mm:ss',
-          hour: 'dd HH:mm:ss',
+          hour: 'DD HH:mm:ss',
-          day: 'MM.dd HH:mm',
+          day: 'MM.DD HH:mm',
-          week: 'yy.MM.dd HH:mm',
+          week: 'yy.MM.DD HH:mm',
-          month: 'yyyy.MM.dd',
+          month: 'yyyy.MM.DD',
-          quarter: 'yyyy.MM.dd',
+          quarter: 'yyyy.MM.DD',
           year: 'yyyy.MM',
         },
       },
@@ -90,19 +90,80 @@ export type ChartTimeBaseProps = {
   options?: ChartOptions<keyof ChartTypeRegistry> | any,
 }
 
-const timeUnitByInterval = (intervalSec:number):String =>{
+export type TimeParams = {
-  if(intervalSec < 24*60*60)
+  unit: String
+  stepSize: number
+}
+
+const linesPerInterval = 32
+
+const timeUnitByInterval = (intervalSec:number):String => {
+  if(intervalSec <= 60)
+    return 'millisecond'
+
+  if(intervalSec <= 32*60)
     return 'second'
 
-  if(intervalSec < 30*24*60*60)
+  if(intervalSec <= 32*60*60)
-    return 'day'
+    return 'minute'
   
-  if(intervalSec < 365*24*60*60)
+  if(intervalSec <= 32*12*60*60)
+    return 'hour'
+  
+  if(intervalSec <= 32*24*60*60)
+    return 'day'
+
+  if(intervalSec <= 32*7*24*60*60)
     return 'week'
+  
+  if(intervalSec <= 32*30.4375*24*60*60)
+    return 'month'
+
+  if(intervalSec <= 32*121.75*24*60*60)
+    return 'quarter'
   else
     return 'year'
 }
 
+const timeParamsByInterval = (intervalSec:number) :TimeParams => {
+  let stepSize = intervalSec
+  let unit = timeUnitByInterval(intervalSec)
+
+  switch(unit){
+    case "millisecond":
+      stepSize *= 1000
+      break;
+    case "second":
+      //stepSize *= 1
+      break;
+    case "minute":
+      stepSize /= 60
+      break;
+    case "hour":
+      stepSize /= 60*60
+      break;
+    case "day":
+      stepSize /= 24*60*60
+      break;
+    case "week":
+      stepSize /= 7*24*60*60
+      break;
+    case "month":
+      stepSize /= 30*24*60*60
+      break;
+    case "quarter":
+      stepSize /= 91*24*60*60
+      break;
+    case "year":
+      stepSize /= 365.25*24*60*60
+      break;
+  }
+  
+  stepSize = Math.round(stepSize/linesPerInterval)
+  stepSize = stepSize > 0 ? stepSize : 1;
+  return {unit, stepSize}
+}
+
 export const ChartTimeBase: React.FC<ChartTimeBaseProps> = ({options, dataParams}) => {  
   const chartRef = useRef<HTMLCanvasElement>(null)
   const [chart, setChart] = useState<any>()
@@ -130,18 +191,19 @@ export const ChartTimeBase: React.FC<ChartTimeBaseProps> = ({options, dataParams
 
     chart.data = dataParams.data
     chart.options.aspectRatio = options?.aspectRatio
-
     if(dataParams.yStart){
       let interval = Number(dataParams.yInterval ?? 600)
       let start = new Date(dataParams.yStart)
       let end = new Date(dataParams.yStart)
-      end.setSeconds(end.getSeconds() + interval)
+      end.setSeconds(end.getSeconds() + interval)      
+      let {unit, stepSize} = timeParamsByInterval(interval)
+
       if(chart.options.scales?.y){
         chart.options.scales.y.max = end.getTime()
         chart.options.scales.y.min = start.getTime()
         chart.options.scales.y.ticks.display = dataParams.displayLabels ?? true
-        chart.options.scales.y.time.unit = timeUnitByInterval(interval)
+        chart.options.scales.y.time.unit = unit
-        chart.options.scales.y.time.stepSize = Math.round(interval/32)
+        chart.options.scales.y.time.stepSize = stepSize
       }
     }
 

src/pages/Archive.jsx

@@ -13,6 +13,7 @@ import {generateUUID} from '../services/UidGenerator'
 import { ArchiveColumn } from '../components/ArchiveColumn'
 import moment from 'moment'
 import notify from '../components/notify'
+import LoaderPortal from '../components/LoaderPortal'
 
 const { RangePicker } = DatePicker;
 
@@ -31,7 +32,8 @@ export default function Archive() {
   const [saubData, setSaubData] = useState([])
   const [chartsCfgs, setChartsCfgs] = useState([])
   const [rangeDate, setRangeDate] = useState([moment().subtract(3,'hours'), moment()])
-  const [geometry, setGeometry] = useState({ratioRest:1, ratio1st:1, wRest:.5, w1st:.5})
+  const [geometry, setGeometry] = useState({ratioRest:1, ratio1st:1, wRest:.5, w1st:.5})  
+  const [loader, setLoader] = useState(false)
   const chartsCfgsKey = 'chartsCfgs'
   const chartsContainerRef = useRef();
 
@@ -95,12 +97,14 @@ export default function Archive() {
     let interval = (rangeDate[1] - rangeDate[0]) / 1000
     let startDate = rangeDate[0].toISOString()
     
+    setLoader(true)
     DataService.getData(id, startDate, interval, 2048)
       .then(handleReceiveDataSaub)
       .catch(error => {
         notify(`Не удалось загрузить данные по скважине (${id}) c ${rangeDate[0]} по ${rangeDate[1]}`, 'error')
         console.error(error)
       })
+      .finally(()=>setLoader(false))
   }, [id, rangeDate]);
 
   let charts = null
@@ -137,8 +141,10 @@ export default function Archive() {
         value = {rangeDate}
         />
     </ConfigProvider>
-    <Row ref={chartsContainerRef}>
+    <LoaderPortal show={loader}>
-        {charts}
+      <Row ref={chartsContainerRef}>
-    </Row>
+          {charts}
+      </Row>
+    </LoaderPortal>
   </>)
 }

src/pages/LayoutPortal.jsx

@@ -1,32 +1,9 @@
 import {Layout} from 'antd'
 import PageHeader from './Header'
-// import { useState, useEffect, createContext} from 'react'
-// import { useParams } from 'react-router-dom'
 
 const {Content} = Layout
 
 export default function LayoutPortal({title, children}) {
-  // const [wells, setWells] = useState([])
-  // let { id } = useParams();
-
-  // let updateWellsList = async () => {
-  //   setLoader(true)
-  //   try {
-  //     let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
-  //     setWells(newWells)
-  //   }
-  //   catch (e) {
-  //     console.error(`${e.message}`);
-  //   }
-  //   setLoader(false)
-  // }
-
-  // useEffect(() => {
-  //   updateWellsList()
-  // }, [])
-  
-  // const WellsContext = createContext({wells});
-
   return (     
       <Content>
         <PageHeader title={title}/>

src/pages/Messages.jsx

@@ -1,14 +1,16 @@
-import {Button, Table, Select} from 'antd';
+import {Table, Select, DatePicker, ConfigProvider} from 'antd';
 import {MessageService} from '../services/api'
 import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
-import {Subscribe} from '../services/signalr'
+import LoaderPortal from '../components/LoaderPortal'
-import Loader from '../components/Loader'
-import moment from 'moment'
 import '../styles/message.css'
 import notify from '../components/notify'
+import locale from "antd/lib/locale/ru_RU";
+import moment from 'moment'
 
 const {Option} = Select
+const pageSize = 26
+const {RangePicker} = DatePicker;
 
 // Словарь категорий для строк таблицы
 const categoryDictionary = {
@@ -17,7 +19,6 @@ const categoryDictionary = {
   3: {title: 'Информация'},
 }
 
-// Конфигурация таблицы
 const columns = [
   {
     title: 'Дата',
@@ -31,11 +32,7 @@ const columns = [
     dataIndex: 'categoryId',
     render: (_, item) => categoryDictionary[item.categoryId].title,
     style: (_, item) => categoryDictionary[item.categoryId].style,
-    filters: [
+    ellipsis: true,
-      {text: 'Авария', value: '1'},
-      {text: 'Предупреждение', value: '2'},
-      {text: 'Информация', value: '3'},
-    ]
   },
   {
     title: 'Сообщение',
@@ -49,76 +46,103 @@ const columns = [
   },
 ];
 
-// Опции для фильра
+const filterOptions = [
+  {label: 'Авария', value: 1},
+  {label: 'Предупреждение', value: 2},
+  {label: 'Информация', value: 3},
+]
 
 // Данные для таблицы
 export default function Messages() {
   let {id} = useParams()
   const [messages, setMessages] = useState([])
-  const [loader] = useState(false)
+  const [pagination, setPagination] = useState(null)
+  const [page, setPage] = useState(1)
+  const [range, setRange] = useState([])
+  const [categories, setCategories] = useState([])
 
-  const filterOptions = [
+  const [loader, setLoader] = useState(false)
-    {label: 'Авария', value: 1},
-    {label: 'Предупреждение', value: 2},
-    {label: 'Информация', value: 3},
-  ]
 
-  const children = filterOptions.map((line) => (<Option key={line.value}>{line.label}</Option>))
+  const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
 
-  const handleReceiveMessages = (messages) => {
+  const onChangeRange = (range) => {
-    if (messages) {
+    setRange(range)
-      setMessages(messages.items)
-    }
   }
-
+  
   useEffect(() => {
-    MessageService.getMessage(id)
+    const GetMessages = async () => {
-      .then(handleReceiveMessages)
+      setLoader(true)
-      .catch((ex) => {
+      try {
+        let begin = null
+        let end = null
+        if (range?.length > 1) {
+          begin = range[0].toISOString()
+          end = range[1].toISOString()
+        }
+        let paginatedMessages = await MessageService.getMessage(`${id}`,
+          (page - 1) * pageSize,
+          pageSize,
+          categories,
+          begin,
+          end)
+        setMessages(paginatedMessages.items.map(m => {
+          return {
+            key: m.id,
+            categoryids: categoryDictionary[m.categoryId],
+            begin: m.date,
+            ...m
+          }
+        }))
+        setPagination({
+          total: paginatedMessages.count,
+          current: Math.floor(paginatedMessages.skip / pageSize),
+        })
+      } catch (ex) {
         notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
         console.log(ex)
-      })
+      }
-
+      setLoader(false)
-    let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
-    return () => {
-      unSubscribeMessagesHub()
     }
-  }, [id])
+    GetMessages()
+  }, [id, page, categories, range])
 
   return (
     <>
-      <h2>Сообщения</h2>
+
-      <hr/>
+      <div className='filter-group'>
-      <h3>Фильтр сообщений</h3>
+        <h3 className='filter-group__heading'>Фильтр сообщений</h3>
-      <Select
+        <Select
-        mode="multiple"
+          mode="multiple"
-        allowClear
+          allowClear
-        placeholder="Фильтр сообщений"
+          placeholder="Фильтр сообщений"
-        className="filter-selector"
+          className="filter-selector"
-        // onChange={messagesFilter}
+          value={categories}
-      >
+          onChange={setCategories}>
-        {children}
+          {children}
-      </Select>
+        </Select>
-      <Button
+        <ConfigProvider locale={locale}>
-        type="primary"
+          <RangePicker
-        className="submit-button"
+            showTime
-      >
+            onChange={onChangeRange}
-        Применть
+          />
-      </Button>
+        </ConfigProvider>
-      <Button
+      </div>
-        className="submit-button"
+      <LoaderPortal show={loader}>
-      >
+        <Table
-        Обновить
+          columns={columns}
-      </Button>
+          dataSource={messages}
-      <Table
+          rowClassName={(record) => `event_message_${record.categoryId} event_message`}
-        columns={columns}
+          size={'small'}
-        dataSource={messages}
+          pagination={{
-        rowClassName={(record) => `event_message_${record.categoryId} event_message`}
+            pageSize: pageSize,
-        size={'small'}
+            showSizeChanger: false,
-        pagination={{pageSize: 26}}
+            total: pagination?.total,
-        rowKey={(record) => record.id}
+            current: page,
-      />
+            onChange: (page) => setPage(page)
-      {loader && <Loader/>}
+          }}
+          rowKey={(record) => record.id}
+        />
+      </LoaderPortal>
     </>
   )
 }

src/pages/TelemetryView.jsx

@@ -2,7 +2,7 @@ import {useState, useEffect} from 'react'
 import {useParams} from 'react-router-dom'
 import {Row, Col, Select, Table} from 'antd'
 import {ChartTimeOnline} from '../components/charts/ChartTimeOnline'
-import Loader from '../components/Loader'
+import LoaderPortal from '../components/LoaderPortal'
 import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
 import {CustomColumn} from '../components/CustomColumn'
 import {UserOfWells} from '../components/UserOfWells'
@@ -189,7 +189,7 @@ export default function TelemetryView(props) {
   const [chartInterval, setChartInterval] = useState(600)
   const [messages, setMessages] = useState([])
 
-  const [loader] = useState(false)  // , setLoader
+  const [loader, setLoader] = useState(false)  // , setLoader
 
   const handleReceiveDataSaub = (data) => {
     if (data) {
@@ -204,20 +204,23 @@ export default function TelemetryView(props) {
   }
 
   useEffect(() => {
-    DataService.getData(id)
+    setLoader(true)
+    let promiseData = DataService.getData(id)
       .then(handleReceiveDataSaub)
       .catch((ex) => {
         notify(`Не удалось загрузить данные по скважине "${id}"`, 'error')
         console.log(ex)
       })
 
-    MessageService.getMessage(id)
+    let promiseMessages = MessageService.getMessage(id)
       .then(handleReceiveMessages)
       .catch((ex) => {
         notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
         console.log(ex)
       })
 
+    Promise.all([promiseData, promiseMessages]).then(()=>setLoader(false))
+
     let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
     let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
     return () => {
@@ -227,14 +230,16 @@ export default function TelemetryView(props) {
   }, [id]);
 
   useEffect(() => {
+    setLoader(true)
     DataService.getData(id, null, chartInterval)
       .then(handleReceiveDataSaub)
       .catch(error => console.error(error))
+      .finally(()=>setLoader(false))
   }, [id, chartInterval]);
 
   const colSpan = 24 / (paramsGroups.length)
 
-  return (<div>
+  return (<LoaderPortal show={loader}>
     <Row style={{marginBottom: '1rem'}}>
       <Col>
         <ModeDisplay data={saubData}/>
@@ -278,6 +283,5 @@ export default function TelemetryView(props) {
       pagination={false}
       rowKey={(record) => record.id}
     />
-    {loader && <Loader/>}
+  </LoaderPortal>)
-  </div>)
 }

src/pages/Wells.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { WellService } from '../services/api'
-import Loader from '../components/Loader'
+import LoaderPortal from '../components/LoaderPortal'
 import { Table } from 'antd' // TreeSelect 
 import { useHistory } from 'react-router-dom'
 import notify from '../components/notify'
@@ -37,21 +37,22 @@ export default function Wells(props){
     setLoader(true)
     try{
       let newWells = (await WellService.getWells()).map(w =>{return {key:w.id, ...w}})
-      console.log(Wells.wellsTree)
+      console.log(newWells)
       setWells( newWells )
     }
     catch(e){
       notify('Не удалось загрузить список скважин', 'error')
-      console.error(`${e.message}`);
+      console.error(`${e}`);
     }
     setLoader(false)
   }
 
-  useEffect(()=>updateWellsList())
+  useEffect(()=>updateWellsList(), [])
 
   return(<>
       <h2>Скважины</h2>
-      <Table 
+      <LoaderPortal show={loader}>
+        <Table 
         dataSource={wells} 
         columns={columns}
         onRow={(record) => {
@@ -59,6 +60,6 @@ export default function Wells(props){
             onClick: event => {history.push(`/well/${record.id}/`)},
           };
         }}/>
-      {loader&&<Loader/>}
+      </LoaderPortal>
     </>)
 }

src/styles/loader.css

@@ -31,4 +31,39 @@
     height: 72px;
     opacity: 0;
   }
-}
+}
+
+.loader-container{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.loader-content{
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+}
+
+.loader-overlay{
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  place-self: center;
+  align-self: center;
+  justify-self: center;
+  z-index: 1; 
+  height: 80px;
+  width: 80px;  
+  border-radius: 40px;
+}
+
+.loader-fade{
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  background-color: rgba(255, 255, 255, 0.4);
+  align-self: stretch;
+  justify-self: stretch;
+  z-index: 1;  
+  box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4);
+}

src/styles/message.css

@@ -1,11 +1,3 @@
-/*.ant-table.ant-table-small .ant-table-tbody > tr > td {*/
-/*  padding: 0;*/
-/*}*/
-
-/*.ant-table-tbody > tr > td {*/
-/*  border-bottom: 0.5px;*/
-/*}*/
-
 .event_message > td {
   font-size: 14px;
   padding: 1px !important;
@@ -37,6 +29,15 @@
   background: #505060;
 }
 
+.filter-group {
+  margin: 0 0 5px 0;
+}
+
+.filter-group__heading {
+  margin: 5px auto;
+  align-items: center;
+}
+
 td.ant-table-column-sort {
   color: black;
   background-color: rgb(221, 247, 221);