asb_cloud_front/src/pages/Wells.jsx

import React, { useState, useEffect } from 'react';
import { WellService } from '../services/api'
import Loader from '../components/Loader'
import { Table } from 'antd';
import { useHistory } from 'react-router-dom'

const columns = [
  {
    title: 'Месторождение',
    dataIndex: 'deposit',
    key: 'deposit',
  },
  {
    title: 'Куст',
    dataIndex: 'cluster',
    key: 'cluster',
  },
  {
    title: 'Скважина',
    dataIndex: 'caption',
    key: 'caption',
  },  
  {
    title: 'Данные',
    dataIndex: 'lastData',
    key: 'lastData',
  },
];

export default function Wells(props){
  const [wells, setWells] = useState([])
  const [loader, setLoader] = useState(false)
  const history = useHistory()

  let updateWellsList = async () => {
    setLoader(true)
    try{
      var newWells = (await WellService.get()).map(w =>{return {key:w.id, ...w}})
      setWells( newWells )
    }
    catch(e){
      console.error(`${e.message}`);
    }
    setLoader(false)
  }

  useEffect(()=>{updateWellsList()}, [])

  return(<>
      <h2>Wells</h2>
      <Table 
        dataSource={wells} 
        columns={columns}
        onRow={(record, rowIndex) => {
          return {
            onClick: event => {history.push(`well/${record.id}`)},
          };
        }}/>
      {loader&&<Loader/>}
    </>)
}