sc-portal/app/src/app/networking/firewall-rules/firewall-rules.component.html

<div class="d-flex flex-column h-100">
  <div class="container text-center mt-1" [formGroup]="editorForm">
    <div class="btn-toolbar pt-2">
      <div class="btn-group flex-grow-1 flex-grow-sm-0">
        <button class="btn btn-lg btn-info" (click)="showEditor()" [disabled]="loadingIndicator">
          Create a new firewall rule
        </button>
      </div>

      <span class="d-none d-sm-block flex-grow-1"></span>

      <ng-container *ngIf="firewallRules && firewallRules.length">
        <div class="input-group input-group-pill flex-grow-1 flex-grow-sm-0 me-sm-3 w-sm-auto w-100">
          <input type="text" class="form-control" placeholder="Search by description..." formControlName="searchTerm" appAlphaOnly="^[A-Za-z0-9_-]+$">
          <button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value"
                  tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false">
            <fa-icon icon="times" size="sm" [fixedWidth]="true"></fa-icon>
          </button>
        </div>

        <div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100" dropdown placement="bottom right">
          <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
            Sort by
            <span *ngIf="editorForm.get('sortProperty').value === 'action'">action</span>
            <span *ngIf="editorForm.get('sortProperty').value === 'enabled'">status</span>
            <span *ngIf="editorForm.get('sortProperty').value === 'description'">description</span>
          </button>
          <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
            <li role="menuitem">
              <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'action'" (click)="setSortProperty('action')">
                Action
              </button>
            </li>
            <li role="menuitem">
              <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'enabled'" (click)="setSortProperty('enabled')">
                Status
              </button>
            </li>
            <li role="menuitem">
              <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'description'" (click)="setSortProperty('description')">
                Description
              </button>
            </li>
          </ul>
        </div>
      </ng-container>
    </div>

    <div class="spinner-border text-center text-info text-faded" role="status" *ngIf="loadingIndicator">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>

  <div class="overflow-auto flex-grow-1 my-3">
    <div class="container my-2">
      <div class="table-responsive" *ngIf="!loadingIndicator">
        <p *ngIf="!firewallRules.length" class="text-center text-info text-faded p-3 mb-0">
          There are no firewall rules yet.
        </p>

        <table class="table table-hover" *ngIf="firewallRules.length">
          <thead>
            <tr>
              <th>Action</th>
              <th>Enabled</th>
              <th>Description</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let fw of listItems">
              <td class="rule">
                <span [ngClass]="fw.action === 'ALLOW' ? 'text-success' : 'text-danger'">
                  {{ fw.action }}
                </span>

                <span class="highlight">
                  {{ fw.protocol }}
                  <b>{{ fw.protocolConfig }}</b>
                </span>

                From
                <span *ngFor="let from of fw.fromArray" class="inline-list-item highlight" text="OR">
                  {{ from.type }}
                  <b *ngIf="from.config">{{ machines[from.config] || from.config }}</b>
                </span>

                <span>
                  To
                  <span *ngFor="let to of fw.toArray" class="inline-list-item highlight" text="OR">
                    {{ to.type }}
                    <span *ngIf="to.type === 'tag'" class="badge badge-discreet">{{ machines[to.config] || to.config }}</span>
                    <b *ngIf="to.type !== 'tag'">{{ machines[to.config] || to.config }}</b>
                  </span>
                </span>
              </td>
              <td class="text-center">
                <div class="form-check form-switch">
                  <input class="form-check-input mt-0" type="checkbox" id="fw{{ fw.id }}" [(ngModel)]="fw.enabled" [disabled]="fw.working"
                         (change)="toggleFirewallRule($event, fw)">
                </div>
              </td>
              <td>
                <div class="text-truncate">{{ fw.description }}</div>
              </td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" dropdown placement="bottom right" container="body" [isDisabled]="fw.working">
                  <button class="btn btn-link text-info" [disabled]="fw.working" (click)="showEditor(fw)"
                          tooltip="Edit this firewall rule" container="body" placement="top" [adaptivePosition]="false">
                    <fa-icon icon="pen" [fixedWidth]="true" size="sm"></fa-icon>
                  </button>

                  <button class="btn btn-link text-info" dropdownToggle
                          tooltip="More options" container="body" placement="top" [adaptivePosition]="false">
                    <fa-icon icon="ellipsis-v" [fixedWidth]="true" size="sm"></fa-icon>
                  </button>
                  <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                    <li role="menuitem">
                      <button class="dropdown-item" (click)="deleteFirewallRule(fw)">
                        <fa-icon icon="trash" [fixedWidth]="true"></fa-icon>
                        Delete this firewall rule
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>