[SDFAB-705] Fix GUI for the control and data plane resiliency

Additionally, fix similar issues in GUI2 and add initial
support for ports with name in GUI/GUI2.

This is also the first step towards supporting port with name widely in ONOS

Change-Id: Ib04f780bf0b7171e82a6beb69b39c0aaeb4be957
(cherry picked from commit 178046ba11ab21d94a1e818fb893931bb015734b)
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts b/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts
index d5ff2a7..f3b839c 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/models/link.ts
@@ -55,7 +55,12 @@
 
     public static deviceNameFromEp(ep: string): string {
         if (ep !== undefined && ep.lastIndexOf('/') > 0) {
-            return ep.substr(0, ep.lastIndexOf('/'));
+            // named port format is [name](number)
+            if (ep.includes('[')) {
+                return ep.substr(0, ep.lastIndexOf('[') - 1);
+            } else {
+                return ep.substr(0, ep.lastIndexOf('/'));
+            }
         }
         return ep;
     }
@@ -66,17 +71,47 @@
      * @param linkId The id of the link in either format
      */
     public static linkIdFromShowHighlights(linkId: string) {
-        if (linkId.includes('-')) {
-            const parts: string[] = linkId.split('-');
+        // Already in the right format
+        if (linkId.includes('~')) {
+            const parts: string[] = linkId.split('~');
+            // remove host part if needed
             const part0 = Link.removeHostPortNum(parts[0]);
             const part1 = Link.removeHostPortNum(parts[1]);
             return part0 + '~' + part1;
         }
+
+        // Custom traffic highlight
+        if (linkId.includes('-')) {
+            // "-" is used only as separator between the links
+            if (linkId.indexOf('-') === linkId.lastIndexOf('-')) {
+                const parts: string[] = linkId.split('-');
+                const part0 = Link.removeHostPortNum(parts[0]);
+                const part1 = Link.removeHostPortNum(parts[1]);
+                return part0 + '~' + part1;
+            } else if (linkId.includes(')')) {
+                // "-" is used in the port name
+                var index = linkId.indexOf(')');
+                // the format is [name](number) on both ends
+                if (linkId.charAt(index + 1) === '-') {
+                    const part0 = Link.removeHostPortNum(linkId.substr(0, index + 1));
+                    const part1 = Link.removeHostPortNum(linkId.substr(index + 2, linkId.length));
+                    return part0 + '~' + part1;
+                } else {
+                    index = linkId.indexOf('-');
+                    const part0 = Link.removeHostPortNum(linkId.substr(0, index));
+                    const part1 = Link.removeHostPortNum(linkId.substr(index + 1, linkId.length));
+                    return part0 + '~' + part1;
+                }
+            }
+        }
+
+        // unknown format
         return linkId;
     }
 
     private static removeHostPortNum(hostStr: string) {
-        if (hostStr.includes('/None/')) {
+        // Regex is for the tagged hosts
+        if (hostStr.includes('/None/') || hostStr.match('/[+-]?[0-9]+/')) {
             const subparts = hostStr.split('/');
             return subparts[0] + '/' + subparts[1];
         }