Commit 0b0b7e2c authored by Muhammad Umair Khan's avatar Muhammad Umair Khan
Browse files

Categorize application instances by type with read-only MEC services section

parent 03d0c8a5

js-apps/frontend/src/js/containers/sandbox/app-instance-table.js

+80 −40
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ import TableBody from '@material-ui/core/TableBody'; 
import TableCell from '@material-ui/core/TableCell';

import TableRow from '@material-ui/core/TableRow';

import Paper from '@material-ui/core/Paper';

import Typography from '@material-ui/core/Typography';

import { connect } from 'react-redux';

import React, { Component } from 'react';

import { withStyles } from '@material-ui/core/styles';
@@ -78,19 +79,33 @@ class AppInstanceTable extends Component { 


    const order = 'desc';

    const orderBy = 'name';

    const maxRows = 3;

    var emptyRows = maxRows;

    let userApps = [];

    let systemApps = [];



    if (data) {

      //disregard non USER application entries

      var validDataLength = 0;

      for (var i = 0; i < data.length; i++) {

        if (data[i].type === 'USER') {

          validDataLength++;

      let sortedData = data.sort(getSorting(order, orderBy));

      userApps = sortedData.filter(row => row.type === 'USER');

      systemApps = data.filter(row => row.type === 'SYSTEM').sort((a, b) => {

        if (a.nodeName < b.nodeName) {

          return -1;

        }

        if (a.nodeName > b.nodeName) {

          return 1;

        }

        if (a.name < b.name) {

          return -1;

        }

        if (a.name > b.name) {

          return 1;

        }

      emptyRows = Math.max(0, maxRows - validDataLength);

        return 0;

      });

    }



    const maxRows = 3;

    const totalRenderedRows = userApps.length + systemApps.length + (userApps.length > 0 ? 1 : 0) + (systemApps.length > 0 ? 1 : 0);

    const emptyRows = Math.max(0, maxRows - totalRenderedRows);



    return (

      <Paper className={classes.root}>

        <div className={classes.tableWrapper}>
@@ -99,12 +114,15 @@ class AppInstanceTable extends Component { 
            aria-labelledby="tableTitle"

            style={{ width: '100%' }}

          >

            {emptyRows < maxRows && <TableBody className={classes.tableBody}>

              {data

                .sort(getSorting(order, orderBy))

                .map((row) => {

                  if (row.type === 'USER') {

                    return (

            {data && data.length > 0 && <TableBody className={classes.tableBody}>

              {userApps.length > 0 && (

                <TableRow style={{ backgroundColor: '#f5f5f5', height: 30 }}>

                  <TableCell colSpan={2} padding="none" style={{ paddingLeft: 10 }}>

                    <Typography variant="subtitle2" color="textSecondary">USER APPLICATIONS</Typography>

                  </TableCell>

                </TableRow>

              )}

              {userApps.map(row => (

                <TableRow

                  hover

                  role="checkbox"
@@ -112,7 +130,7 @@ class AppInstanceTable extends Component { 
                  key={row.id}

                  style={{ height: 49 }}

                >

                        <TableCell className={classes.tableBodyCell} padding='none'>

                  <TableCell className={classes.tableBodyCell} padding="none">

                    <Checkbox

                      onChange={e => {

                        this.updateAppInstancesToDelete(row.id, e.target.checked);
@@ -124,10 +142,32 @@ class AppInstanceTable extends Component { 
                    ID: {row.id}

                  </TableCell>

                </TableRow>

                    );

                  }

                })

              }

              ))}



              {systemApps.length > 0 && (

                <TableRow style={{ backgroundColor: '#f5f5f5', height: 30 }}>

                  <TableCell colSpan={2} padding="none" style={{ paddingLeft: 10 }}>

                    <Typography variant="subtitle2" color="textSecondary">MEC SERVICES</Typography>

                  </TableCell>

                </TableRow>

              )}

              {systemApps.map(row => (

                <TableRow

                  hover

                  tabIndex={-1}

                  key={row.id}

                  style={{ height: 49 }}

                >

                  <TableCell className={classes.tableBodyCell} padding="none">

                    <Checkbox disabled />

                  </TableCell>

                  <TableCell className={classes.tableBodyCellNoWrap} scope="row">

                    {row.name} running on {row.nodeName}<br/>

                    ID: {row.id}

                  </TableCell>

                </TableRow>

              ))}



              {emptyRows > 0 && (

                <TableRow style={{ height: 49 * emptyRows }}>

                  <TableCell colSpan={6} />
@@ -135,9 +175,9 @@ class AppInstanceTable extends Component { 
              )}

            </TableBody>

            }

            {emptyRows === maxRows && (

            {(!data || data.length === 0) && (

              <TableBody className={classes.tableBody}>

                <TableRow style={{ height: 49 * emptyRows }}>

                <TableRow style={{ height: 49 * maxRows }}>

                  <TableCell colSpan={6} />

                </TableRow>

              </TableBody>