firewall: Show service name in port forwarding info table

- Also add CSS class for the table to aide functional tests.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/firewall/components.py

@@ -173,6 +173,7 @@ def get_port_forwarding_info(app_):
 
             for detail in port['details']:
                 info['ports'].append({
+                    'name': port['name'],
                     'protocol': detail[1].upper(),
                     'ports': detail[0]
                 })

plinth/templates/port-forwarding-info.html

@@ -30,10 +30,11 @@
         {{ service_name }}:
       {% endblocktrans %}
 
-      <div class="table-responsive">
+      <div class="table-responsive table-port-forwarding-info">
         <table class="table">
           <thead>
             <tr>
+              <th>{% trans "Service Name" %}</th>
               <th>{% trans "Protocol" %}</th>
               <th>{% trans "From Router/WAN Ports" %}</th>
               <th>{% blocktrans %}To {{box_name}} Ports{% endblocktrans %}</th>
@@ -42,6 +43,7 @@
           <tbody>
             {% for port in port_forwarding_info.ports %}
             <tr>
+              <td>{{ port.name }}</td>
               <td>{{ port.protocol }}</td>
               <td>{{ port.ports }}</td>
               <td>{{ port.ports }}</td>