Sort SIP gateways (in edit form and table view)

src/components/forms/SipTrunkForm.js

@@ -11,6 +11,7 @@ import FormError from '../blocks/FormError';
 import Button from '../elements/Button';
 import TrashButton from '../elements/TrashButton';
 import Loader from '../blocks/Loader';
+import sortSipGateways from '../../helpers/sortSipGateways';
 
 const SipTrunkForm = props => {
   const history = useHistory();
@@ -113,6 +114,7 @@ const SipTrunkForm = props => {
           const currentSipGateways = allSipGateways.filter(s => {
             return s.voip_carrier_sid === currentSipTrunk[0].voip_carrier_sid;
           });
+          sortSipGateways(currentSipGateways);
 
           if (currentSipTrunk.length) {
             setName(currentSipTrunk[0].name);

src/components/pages/internal/SipTrunksList.js

@@ -5,6 +5,7 @@ import { NotificationDispatchContext } from '../../../contexts/NotificationConte
 import InternalTemplate from '../../templates/InternalTemplate';
 import TableContent from '../../blocks/TableContent.js';
 import Sbcs from '../../blocks/Sbcs';
+import sortSipGateways from '../../../helpers/sortSipGateways';
 
 const SipTrunksList = () => {
   let history = useHistory();
@@ -51,6 +52,7 @@ const SipTrunksList = () => {
       // Add appropriate gateways to each trunk
       const trunksWithGateways = trunkResults.data.map(t => {
         const gateways = gatewayResults.data.filter(g => t.voip_carrier_sid === g.voip_carrier_sid);
+        sortSipGateways(gateways);
         return {
           ...t,
           gateways,

src/helpers/sortSipGateways.js

@@ -0,0 +1,13 @@
+
+const sortSipGateways = sipGateways => {
+  sipGateways.sort((a, b) => {
+    const makeIp = a => (a.ipv4 && a.ipv4.toLowerCase()) || '';
+    const makePort = a => (a.port && a.port.toString().padStart(5,0)) || '';
+    let valA = `${makeIp(a)}:${makePort(a)}`;
+    let valB = `${makeIp(b)}:${makePort(b)}`;
+    return valA > valB ? 1 : valA < valB ? -1 : 0;
+  });
+  return sipGateways;
+};
+
+export default sortSipGateways;