portainer/app/components/network/network.html

<rd-header>
  <rd-header-title title="Network details">
    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="networks">Networks</a> > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-sitemap" title="Network details"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>Name</td>
              <td>{{ network.Name }}</td>
            </tr>
            <tr>
              <td>ID</td>
              <td>
                {{ network.Id }}
                <button class="btn btn-xs btn-danger" ng-click="removeNetwork(network.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this network</button>
              </td>
            </tr>
            <tr>
              <td>Driver</td>
              <td>{{ network.Driver }}</td>
            </tr>
            <tr>
              <td>Scope</td>
              <td>{{ network.Scope }}</td>
            </tr>
            <tr ng-if="network.IPAM.Config[0].Subnet">
              <td>Subnet</td>
              <td>{{ network.IPAM.Config[0].Subnet }}</td>
            </tr>
            <tr ng-if="network.IPAM.Config[0].Gateway">
              <td>Gateway</td>
              <td>{{ network.IPAM.Config[0].Gateway }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="!(network.Options | emptyobject)">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-cogs" title="Network options"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr ng-repeat="(key, value) in network.Options">
              <td>{{ key }}</td>
              <td>{{ value }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>


<div class="row" ng-if="!(network.Containers | emptyobject)">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-server" title="Containers in network"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <thead>
            <th>Container Name</th>
            <th>IPv4 Address</th>
            <th>IPv6 Address</th>
            <th>MacAddress</th>
            <th>Actions</th>
          </thead>
          <tbody>
            <tr ng-repeat="container in containersInNetwork">
              <td><a ui-sref="container({id: container.Id})">{{ container.Name }}</a></td>
              <td>{{ container.IPv4Address || '-' }}</td>
              <td>{{ container.IPv6Address || '-' }}</td>
              <td>{{ container.MacAddress || '-' }}</td>
              <td>
                <button type="button" class="btn btn-xs btn-danger" ng-click="containerLeaveNetwork(network, container.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Leave Network</button>
              </td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>