Refactored CardTitleRow into single component

magma · Aug 6, 2020 · eb1deb3 · eb1deb3
1 parent 159a45f
commit eb1deb3
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 66 deletions.
diff --git a/nms/app/fbcnms-projects/magmalte/app/components/ActionTable.js b/nms/app/fbcnms-projects/magmalte/app/components/ActionTable.js
@@ -17,6 +17,7 @@ import type {ComponentType} from 'react';
 
 import AddBox from '@material-ui/icons/AddBox';
 import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import CardTitleRow from './layout/CardTitleRow';
 import Check from '@material-ui/icons/Check';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
@@ -39,7 +40,6 @@ import SaveAlt from '@material-ui/icons/SaveAlt';
 import Search from '@material-ui/icons/Search';
 import Select from '@material-ui/core/Select';
 
-import {CardTitleRow} from './layout/CardTitleRow';
 import {forwardRef} from 'react';
 
 const tableIcons = {

diff --git a/nms/app/fbcnms-projects/magmalte/app/components/DashboardAlertTable.js b/nms/app/fbcnms-projects/magmalte/app/components/DashboardAlertTable.js
@@ -17,6 +17,7 @@
 import type {RowData} from './TabbedTable';
 import type {prom_firing_alert} from '@fbcnms/magma-api';
 
+import CardTitleRow from './layout/CardTitleRow';
 import LoadingFiller from '@fbcnms/ui/components/LoadingFiller';
 import MagmaV1API from '@fbcnms/magma-api/client/WebClient';
 import React from 'react';
@@ -25,7 +26,6 @@ import nullthrows from '@fbcnms/util/nullthrows';
 import useMagmaAPI from '@fbcnms/ui/magma/useMagmaAPI';
 
 import {Alarm} from '@material-ui/icons';
-import {CardTitleRow} from './layout/CardTitleRow';
 import {useRouter} from '@fbcnms/ui/hooks';
 
 type AlertTable = {[string]: Array<RowData>};

diff --git a/nms/app/fbcnms-projects/magmalte/app/components/DashboardKPIs.js b/nms/app/fbcnms-projects/magmalte/app/components/DashboardKPIs.js
@@ -14,12 +14,12 @@
  * @format
  */
 
+import CardTitleRow from './layout/CardTitleRow';
 import EnodebKPIs from './EnodebKPIs';
 import GatewayKPIs from './GatewayKPIs';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
 
-import {CardTitleRow} from './layout/CardTitleRow';
 import {GpsFixed} from '@material-ui/icons';
 
 export default function () {

diff --git a/nms/app/fbcnms-projects/magmalte/app/components/DateTimeMetricChart.js b/nms/app/fbcnms-projects/magmalte/app/components/DateTimeMetricChart.js
@@ -17,13 +17,13 @@
 import AsyncMetric from '@fbcnms/ui/insights/AsyncMetric';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
+import CardTitleRow from './layout/CardTitleRow';
 import DataUsageIcon from '@material-ui/icons/DataUsage';
 import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import Text from '../theme/design-system/Text';
 import moment from 'moment';
 
-import {CardTitleFilterRow} from './layout/CardTitleRow';
 import {DateTimePicker} from '@material-ui/pickers';
 import {colors} from '../theme/default';
 import {makeStyles} from '@material-ui/styles';
@@ -86,11 +86,7 @@ export default function DateTimeMetricChart(props: DateTimeMetricChartProps) {
 
   return (
     <>
-      <CardTitleFilterRow
-        icon={DataUsageIcon}
-        label={props.title}
-        filter={Filter}
-      />
+      <CardTitleRow icon={DataUsageIcon} label={props.title} filter={Filter} />
       <Card elevation={0}>
         <CardHeader
           title={<Text variant="body2">Frequency of {props.title}</Text>}

diff --git a/nms/app/fbcnms-projects/magmalte/app/components/layout/CardTitleRow.js b/nms/app/fbcnms-projects/magmalte/app/components/layout/CardTitleRow.js
@@ -36,27 +36,10 @@ const useStyles = makeStyles(theme => ({
 type CardTitleRowProps = {
   icon?: ComponentType<SvgIconExports>,
   label: string,
-};
-
-export const CardTitleRow = (props: CardTitleRowProps) => {
-  const classes = useStyles();
-  const Icon = props.icon;
-
-  return (
-    <Grid container alignItems="center" className={classes.cardTitleRow}>
-      {Icon ? <Icon className={classes.cardTitleIcon} /> : null}
-      <Text variant="body1">{props.label}</Text>
-    </Grid>
-  );
-};
-
-type CardTitleFilterRowProps = {
-  icon?: ComponentType<SvgIconExports>,
-  label: string,
   filter?: () => React$Node,
 };
 
-export const CardTitleFilterRow = (props: CardTitleFilterRowProps) => {
+export default function CardTitleRow(props: CardTitleRowProps) {
   const classes = useStyles();
   const Filters = props.filter;
   const Icon = props.icon;
@@ -69,7 +52,11 @@ export const CardTitleFilterRow = (props: CardTitleFilterRowProps) => {
           <Text variant="body1">{props.label}</Text>
         </Grid>
       </Grid>
-      <Grid item>{Filters ? <Filters /> : null}</Grid>
+      {Filters ? (
+        <Grid item>
+          <Filters />
+        </Grid>
+      ) : null}
     </Grid>
   );
-};
+}
diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/EnodebDetailConfig.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/EnodebDetailConfig.js
@@ -17,6 +17,7 @@ import type {DataRows} from '../../components/DataGrid';
 
 import AddEditEnodeButton from './EnodebDetailConfigEdit';
 import Button from '@material-ui/core/Button';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import DataGrid from '../../components/DataGrid';
 import EnodebContext from '../../components/context/EnodebContext';
 import Grid from '@material-ui/core/Grid';
@@ -25,7 +26,6 @@ import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
 import nullthrows from '@fbcnms/util/nullthrows';
 
-import {CardTitleFilterRow} from '../../components/layout/CardTitleRow';
 import {EnodeConfigFdd} from './EnodebDetailConfigFdd';
 import {EnodeConfigTdd} from './EnodebDetailConfigTdd';
 import {colors, typography} from '../../theme/default';
@@ -134,20 +134,16 @@ export default function EnodebConfig() {
     <div className={classes.dashboardRoot}>
       <Grid container spacing={4}>
         <Grid item xs={12}>
-          <CardTitleFilterRow
-            label="Config"
-            icon={SettingsIcon}
-            filter={editJSON}
-          />
+          <CardTitleRow label="Config" icon={SettingsIcon} filter={editJSON} />
         </Grid>
 
         <Grid item xs={12} md={6}>
-          <CardTitleFilterRow label="eNodeb" filter={editEnodeb} />
+          <CardTitleRow label="eNodeb" filter={editEnodeb} />
           <EnodebInfoConfig />
         </Grid>
 
         <Grid item xs={12} md={6}>
-          <CardTitleFilterRow label="RAN" filter={editRAN} />
+          <CardTitleRow label="RAN" filter={editRAN} />
           <EnodebRanConfig />
         </Grid>
       </Grid>

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/EnodebDetailMain.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/EnodebDetailMain.js
@@ -15,6 +15,7 @@
  */
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import DateTimeMetricChart from '../../components/DateTimeMetricChart';
 import EnodebConfig from './EnodebDetailConfig';
@@ -31,7 +32,6 @@ import Tabs from '@material-ui/core/Tabs';
 import Text from '../../theme/design-system/Text';
 import nullthrows from '@fbcnms/util/nullthrows';
 
-import {CardTitleRow} from '../../components/layout/CardTitleRow';
 import {EnodebJsonConfig} from './EnodebDetailConfig';
 import {EnodebStatus, EnodebSummary} from './EnodebDetailSummaryStatus';
 import {GetCurrentTabPos} from '../../components/TabUtils.js';

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/EquipmentGateway.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/EquipmentGateway.js
@@ -17,6 +17,7 @@ import type {WithAlert} from '@fbcnms/ui/components/Alert/withAlert';
 import type {gateway_id, lte_gateway} from '@fbcnms/magma-api';
 
 import ActionTable from '../../components/ActionTable';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import CellWifiIcon from '@material-ui/icons/CellWifi';
 import EquipmentGatewayKPIs from './EquipmentGatewayKPIs';
 import GatewayCheckinChart from './GatewayCheckinChart';
@@ -31,7 +32,6 @@ import TypedSelect from '@fbcnms/ui/components/TypedSelect';
 import isGatewayHealthy from '../../components/GatewayUtils';
 import withAlert from '@fbcnms/ui/components/Alert/withAlert';
 
-import {CardTitleFilterRow} from '../../components/layout/CardTitleRow';
 import {SelectEditComponent} from '../../components/ActionTable';
 import {colors} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
@@ -184,10 +184,10 @@ function GatewayTableRaw(props: WithAlert) {
 
   return (
     <>
-      <CardTitleFilterRow
+      <CardTitleRow
         key="title"
         icon={CellWifiIcon}
-        label={'Gateways(' + lteGatewayRows.length + ')'}
+        label={`Gateways (${lteGatewayRows.length})`}
         filter={() => (
           <Grid container justify="flex-end" alignItems="center" spacing={1}>
             <Grid item>

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayCheckinChart.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayCheckinChart.js
@@ -19,13 +19,13 @@ import type {TimeRange} from '@fbcnms/ui/insights/AsyncMetric';
 import AsyncMetric from '@fbcnms/ui/insights/AsyncMetric';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import DataUsageIcon from '@material-ui/icons/DataUsage';
 import Grid from '@material-ui/core/Grid';
 import React, {useState} from 'react';
 import Text from '../../theme/design-system/Text';
 import TimeRangeSelector from '../../theme/design-system/TimeRangeSelector';
 
-import {CardTitleFilterRow} from '../../components/layout/CardTitleRow';
 import {colors} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
 
@@ -97,7 +97,7 @@ export default function () {
 
   return (
     <>
-      <CardTitleFilterRow
+      <CardTitleRow
         icon={DataUsageIcon}
         label="Gateway Check-Ins"
         filter={Filter}

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayDetailConfig.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayDetailConfig.js
@@ -20,6 +20,7 @@ import type {lte_gateway} from '@fbcnms/magma-api';
 import ActionTable from '../../components/ActionTable';
 import AddEditGatewayButton from './GatewayDetailConfigEdit';
 import Button from '@material-ui/core/Button';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import DataGrid from '../../components/DataGrid';
 import EnodebContext from '../../components/context/EnodebContext';
 import GatewayContext from '../../components/context/GatewayContext';
@@ -29,7 +30,6 @@ import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
 import nullthrows from '@fbcnms/util/nullthrows';
 
-import {CardTitleFilterRow} from '../../components/layout/CardTitleRow';
 import {colors, typography} from '../../theme/default';
 import {makeStyles} from '@material-ui/styles';
 import {useContext, useState} from 'react';
@@ -155,7 +155,7 @@ export default function GatewayConfig() {
       <Grid container spacing={4}>
         <Grid item xs={12}>
           <Grid item xs={12}>
-            <CardTitleFilterRow
+            <CardTitleRow
               icon={SettingsIcon}
               label="Config"
               filter={ConfigFilter}
@@ -165,11 +165,11 @@ export default function GatewayConfig() {
             <Grid item xs={12} md={6} alignItems="center">
               <Grid container spacing={4}>
                 <Grid item xs={12}>
-                  <CardTitleFilterRow label="Gateway" filter={editGateway} />
+                  <CardTitleRow label="Gateway" filter={editGateway} />
                   <GatewayInfoConfig gwInfo={gwInfo} />
                 </Grid>
                 <Grid item xs={12}>
-                  <CardTitleFilterRow
+                  <CardTitleRow
                     label="Aggregations"
                     filter={editAggregations}
                   />
@@ -180,11 +180,11 @@ export default function GatewayConfig() {
             <Grid item xs={12} md={6} alignItems="center">
               <Grid container spacing={4}>
                 <Grid item xs={12}>
-                  <CardTitleFilterRow label="EPC" filter={editEPC} />
+                  <CardTitleRow label="EPC" filter={editEPC} />
                   <GatewayEPC gwInfo={gwInfo} />
                 </Grid>
                 <Grid item xs={12}>
-                  <CardTitleFilterRow label="Ran" filter={editRan} />
+                  <CardTitleRow label="Ran" filter={editRan} />
                   <GatewayRAN gwInfo={gwInfo} />
                 </Grid>
               </Grid>

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayDetailMain.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayDetailMain.js
@@ -16,6 +16,7 @@
 import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import CellWifiIcon from '@material-ui/icons/CellWifi';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import EventsTable from '../../views/events/EventsTable';
@@ -40,7 +41,6 @@ import Tabs from '@material-ui/core/Tabs';
 import Text from '../../theme/design-system/Text';
 import nullthrows from '@fbcnms/util/nullthrows';
 
-import {CardTitleRow} from '../../components/layout/CardTitleRow';
 import {GatewayJsonConfig} from './GatewayDetailConfig';
 import {GetCurrentTabPos} from '../../components/TabUtils.js';
 import {Redirect, Route, Switch} from 'react-router-dom';

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayLogs.js b/nms/app/fbcnms-projects/magmalte/app/views/equipment/GatewayLogs.js
@@ -17,6 +17,7 @@ import type {ActionQuery} from '../../components/ActionTable';
 
 import ActionTable from '../../components/ActionTable';
 import Button from '@material-ui/core/Button';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import Grid from '@material-ui/core/Grid';
 import LaunchIcon from '@material-ui/icons/Launch';
 import ListAltIcon from '@material-ui/icons/ListAlt';
@@ -27,7 +28,6 @@ import Text from '../../theme/design-system/Text';
 import moment from 'moment';
 import nullthrows from '@fbcnms/util/nullthrows';
 
-import {CardTitleFilterRow} from '../../components/layout/CardTitleRow';
 import {CsvBuilder} from 'filefy';
 import {DateTimePicker} from '@material-ui/pickers';
 import {colors} from '../../theme/default';
@@ -293,7 +293,7 @@ export default function GatewayLogs() {
     <div className={classes.dashboardRoot}>
       <Grid container spacing={4}>
         <Grid item xs={12}>
-          <CardTitleFilterRow
+          <CardTitleRow
             icon={ListAltIcon}
             label={`Logs (${logCount})`}
             filter={LogsFilter}

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/events/EventsTable.js b/nms/app/fbcnms-projects/magmalte/app/views/events/EventsTable.js
@@ -17,6 +17,7 @@ import type {ActionQuery} from '../../components/ActionTable';
 import type {event as MagmaEvent} from '@fbcnms/magma-api';
 
 import ActionTable from '../../components/ActionTable';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import EventChart from './EventChart';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
@@ -30,7 +31,6 @@ import Text from '../../theme/design-system/Text';
 import moment from 'moment';
 import nullthrows from '@fbcnms/util/nullthrows';
 
-import {CardTitleFilterRow} from '../../components/layout/CardTitleRow';
 import {DateTimePicker} from '@material-ui/pickers';
 import {colors} from '../../theme/default';
 import {getStep} from '../../components/CustomHistogram';
@@ -340,7 +340,7 @@ export default function EventsTable({
         <div className={classes.dashboardRoot}>
           <Grid container spacing={4}>
             <Grid item xs={12}>
-              <CardTitleFilterRow
+              <CardTitleRow
                 icon={MyLocationIcon}
                 label={`Events (${eventCount})`}
                 filter={DateFilter}

diff --git a/nms/app/fbcnms-projects/magmalte/app/views/network/NetworkDashboard.js b/nms/app/fbcnms-projects/magmalte/app/views/network/NetworkDashboard.js
@@ -21,6 +21,7 @@ import type {
 
 import AddEditNetworkButton from './NetworkEdit';
 import AppBar from '@material-ui/core/AppBar';
+import CardTitleRow from '../../components/layout/CardTitleRow';
 import Grid from '@material-ui/core/Grid';
 import LoadingFiller from '@fbcnms/ui/components/LoadingFiller';
 import MagmaV1API from '@fbcnms/magma-api/client/WebClient';
@@ -36,10 +37,6 @@ import Text from '@fbcnms/ui/components/design-system/Text';
 import nullthrows from '@fbcnms/util/nullthrows';
 import useMagmaAPI from '@fbcnms/ui/magma/useMagmaAPI';
 
-import {
-  CardTitleFilterRow,
-  CardTitleRow,
-} from '../../components/layout/CardTitleRow';
 import {NetworkCheck} from '@material-ui/icons';
 import {Redirect, Route, Switch} from 'react-router-dom';
 import {colors} from '../../theme/default';
@@ -271,19 +268,19 @@ function NetworkDashboardInternal() {
         <Grid item xs={12} md={6}>
           <Grid container spacing={4}>
             <Grid item xs={12}>
-              <CardTitleFilterRow label="Network" filter={editNetwork} />
+              <CardTitleRow label="Network" filter={editNetwork} />
               <NetworkInfo networkInfo={networkInfo} />
             </Grid>
             <Grid item xs={12}>
-              <CardTitleFilterRow label="RAN" filter={editRAN} />
+              <CardTitleRow label="RAN" filter={editRAN} />
               <NetworkRanConfig lteRanConfigs={lteRanConfigs} />
             </Grid>
           </Grid>
         </Grid>
         <Grid item xs={12} md={6}>
           <Grid container spacing={4}>
             <Grid item xs={12}>
-              <CardTitleFilterRow label="EPC" filter={editEPC} />
+              <CardTitleRow label="EPC" filter={editEPC} />
               <NetworkEpc epcConfigs={epcConfigs} />
             </Grid>
           </Grid>