mendersoftware / gui / 951400782

Source File
Press 'n' to go to next uncovered line, 'b' for previous

5.66
/src/js/components/devices/device-details/devicesystem.js
1 
// Copyright 2022 Northern.tech AS
2 
//
3 
//    Licensed under the Apache License, Version 2.0 (the "License");
4 
//    you may not use this file except in compliance with the License.
5 
//    You may obtain a copy of the License at
6 
//
7 
//        http://www.apache.org/licenses/LICENSE-2.0
8 
//
9 
//    Unless required by applicable law or agreed to in writing, software
10 
//    distributed under the License is distributed on an "AS IS" BASIS,
11 
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 
//    See the License for the specific language governing permissions and
13 
//    limitations under the License.
14 
import React, { useEffect, useState } from 'react';
15 
import { useDispatch, useSelector } from 'react-redux';
16 
import { Link, useNavigate } from 'react-router-dom';
17 









18



import { Button } from '@mui/material';










19



import { makeStyles } from 'tss-react/mui';










20












21



import { setSnackbar } from '../../../actions/appActions';










22



import { getSystemDevices } from '../../../actions/deviceActions';










23



import { SORTING_OPTIONS } from '../../../constants/appConstants';










24



import { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';










25



import { getDemoDeviceAddress, toggle } from '../../../helpers';










26



import { getDevicesById, getIdAttribute, getIsPreview, getOrganization, getTenantCapabilities } from '../../../selectors';










27



import { TwoColumnData } from '../../common/configurationobject';










28



import DocsLink from '../../common/docslink';










29



import EnterpriseNotification from '../../common/enterpriseNotification';










30



import { getHeaders } from '../authorized-devices';










31



import { routes } from '../base-devices';










32



import Devicelist from '../devicelist';










33



import ConnectToGatewayDialog from '../dialogs/connecttogatewaydialog';










34



import DeviceDataCollapse from './devicedatacollapse';










35












36



const useStyles = makeStyles()(theme => ({ container: { maxWidth: 600, marginTop: theme.spacing(), marginBottom: theme.spacing() } }));




9✔





37












38



export const DeviceSystem = ({ columnSelection, device, onConnectToGatewayClick, openSettingsDialog }) => {




9✔





39



  const [columnHeaders, setColumnHeaders] = useState([]);




×







40



  const [headerKeys, setHeaderKeys] = useState([]);




×







41



  const [page, setPage] = useState(DEVICE_LIST_DEFAULTS.page);




×







42



  const [perPage, setPerPage] = useState(DEVICE_LIST_DEFAULTS.perPage);




×







43



  const { classes } = useStyles();




×







44



  const navigate = useNavigate();




×







45



  const dispatch = useDispatch();




×







46



  const devicesById = useSelector(getDevicesById);




×







47



  const idAttribute = useSelector(getIdAttribute);




×







48



  const hasFullFiltering = useSelector(getTenantCapabilities);




×







49












50



  const { systemDeviceIds = [], systemDeviceTotal = 0 } = device;





×







51



  const deviceIp = getDemoDeviceAddress([device]);




×







52












53



  const [sortOptions, setSortOptions] = useState([]);




×







54












55



  const onSortChange = attribute => {




×







56



    let changedOrder = SORTING_OPTIONS.asc;




×







57



    if (sortOptions.length && sortOptions[0].attribute == attribute.name) {





×







58



      changedOrder = sortOptions[0].order === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;





×







59



    }










60



    setSortOptions([{ attribute: attribute.name, scope: attribute.scope, order: changedOrder }]);




×







61



  };










62












63



  useEffect(() => {




×







64



    const columnHeaders = getHeaders(columnSelection, routes.allDevices.defaultHeaders, idAttribute, openSettingsDialog);




×







65



    setColumnHeaders(columnHeaders);




×







66



    setHeaderKeys(columnHeaders.map(({ attribute: { name, scope } }) => `${name}-${scope}`).join('-'));




×







67



  }, [columnSelection, idAttribute.attribute]);










68












69



  useEffect(() => {




×







70



    if (device.attributes) {





×







71



      dispatch(getSystemDevices(device.id, { page, perPage, sortOptions }));




×







72



    }










73



  }, [device.id, device.attributes?.mender_is_gateway, page, perPage, sortOptions]);










74












75



  const onDeviceClick = (device = {}) => navigate(`/devices/${device.status}?id=${device.id}&open=true&tab=identity`);





×







76












77



  return (




×







78



    <>










79



      <DeviceDataCollapse title="Mender Gateway">










80



        <TwoColumnData config={{ 'Server IP': deviceIp }} compact setSnackbar={message => dispatch(setSnackbar(message))} />




×







81



      </DeviceDataCollapse>










82



      <DeviceDataCollapse className={classes.container} title="System for this gateway">










83



        <EnterpriseNotification isEnterprise={hasFullFiltering} benefit="see devices connected to your gateway device for easy access" />










84



        {systemDeviceTotal ? (





×







85



          <Devicelist










86



            customColumnSizes={[]}










87



            columnHeaders={columnHeaders}










88



            devices={systemDeviceIds.map(id => devicesById[id])}




×







89



            deviceListState={{ page, perPage }}










90



            headerKeys={headerKeys}










91



            idAttribute={idAttribute}










92



            onChangeRowsPerPage={setPerPage}










93



            onExpandClick={onDeviceClick}










94



            onResizeColumns={false}










95



            onPageChange={setPage}










96



            onSelect={false}










97



            onSort={onSortChange}










98



            pageLoading={false}










99



            pageTotal={systemDeviceTotal}










100



          />










101



        ) : (










102



          <div className="dashboard-placeholder">










103



            <p>No devices have been connected to this gateway device yet.</p>










104



            <div>










105



              Visit the <DocsLink path="get-started/mender-gateway" title="full Mender Gateway documentation" /> to learn how to make the most of the gateway










106



              functionality.










107



            </div>










108



          </div>










109



        )}










110



      </DeviceDataCollapse>










111



      <div className="flexbox">










112



        <Button color="secondary" component={Link} to={`/deployments?deviceId=${device.id}&open=true`}>










113



          Create deployment for this system










114



        </Button>










115



        <Button onClick={onConnectToGatewayClick}>Connect devices</Button>










116



      </div>










117



    </>










118



  );










119



};










120












121



const DeviceSystemTab = ({ device, ...remainder }) => {




9✔





122



  const [open, setOpen] = useState(false);




×







123



  const isPreRelease = useSelector(getIsPreview);




×







124



  const { tenant_token: tenantToken } = useSelector(getOrganization);




×







125












126



  const gatewayIp = getDemoDeviceAddress([device]);




×







127



  const toggleDialog = () => setOpen(toggle);




×







128



  return (




×







129



    <>










130



      <DeviceSystem onConnectToGatewayClick={toggleDialog} {...{ device, ...remainder }} />










131



      {open && <ConnectToGatewayDialog gatewayIp={gatewayIp} isPreRelease={isPreRelease} onCancel={toggleDialog} tenantToken={tenantToken} />}





×







132



    </>










133



  );










134



};










135












136



export default DeviceSystemTab;
























    

  • 

    •