Get SBC list from API and display on SIP trunk pages

src/components/blocks/Sbcs.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Sbcs = () => {
+  const [ sbcs, setSbcs ] = useState('');
+  useEffect(() => {
+    const getAPIData = async () => {
+      const sbcResults = await axios({
+        method: 'get',
+        baseURL: process.env.REACT_APP_API_BASE_URL,
+        url: '/Sbcs',
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+      });
+      setSbcs(sbcResults.data);
+    };
+    getAPIData();
+  }, []);
+
+  return (
+    <div style={{ margin: '1rem 0 1.5rem' }}>
+      Have your SIP trunking provider(s) send calls to
+      {sbcs.length > 1
+        ? <React.Fragment>
+            {':'}
+            <ul>
+              {sbcs.map(sbc => (
+                <li key={sbc.sbc_address_sid}>
+                  {`${sbc.ipv4}:${sbc.port}`}
+                </li>
+              ))}
+            </ul>
+          </React.Fragment>
+        : sbcs.length === 1
+          ? ` ${sbcs[0].ipv4}:${sbcs[0].port}`
+          : null
+      }
+    </div>
+  );
+};
+
+export default Sbcs;

src/components/pages/internal/SipTrunksAddEdit.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import InternalTemplate from '../../templates/InternalTemplate';
 import SipTrunkForm from '../../forms/SipTrunkForm';
+import Sbcs from '../../blocks/Sbcs';
 
 const SipTrunksAddEdit = () => {
   let { voip_carrier_sid } = useParams();
@@ -10,6 +11,7 @@ const SipTrunksAddEdit = () => {
     <InternalTemplate
       type="form"
       title={pageTitle}
+      subtitle={<Sbcs />}
       breadcrumbs={[
         { name: 'SIP Trunks', url: '/internal/sip-trunks' },
         { name: pageTitle },

src/components/pages/internal/SipTrunksList.js

@@ -3,6 +3,7 @@ import axios from 'axios';
 import { NotificationDispatchContext } from '../../../contexts/NotificationContext';
 import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../blocks/TableContent.js';
+import Sbcs from '../../blocks/Sbcs';
 
 const SipTrunksList = () => {
   const dispatch = useContext(NotificationDispatchContext);
@@ -119,6 +120,7 @@ const SipTrunksList = () => {
       title="SIP Trunks"
       addButtonText="Add a SIP Trunk"
       addButtonLink="/internal/sip-trunks/add"
+      subtitle={<Sbcs />}
     >
       <TableContent
         name="SIP trunk"

src/components/pages/setup/ConfigureSipTrunk.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import SetupTemplate from '../../templates/SetupTemplate';
 import SipTrunkForm from '../../forms/SipTrunkForm';
+import Sbcs from '../../blocks/Sbcs';
 
 const ConfigureSipTrunk = () => {
   return (
     <SetupTemplate
       wide
       title="Configure SIP Trunk"
+      subtitle={<Sbcs />}
       progress={3}
     >
       <SipTrunkForm