Web interface rendering incorrectly after maintenance

After maintenance, horizon dashboard does not render correctly for @stvoutsin or @GregBlow (on Edge)

https://lsstuk.slack.com/archives/C02G4QUJHMM/p1695386332647509

Stelios Voutsinas

4 hours ago Hello, just read that Somerville is back. I do still seem to be having some issues with the Horizon dashboard, not sure if its just me. Basically I'm unable to add or remove members from the Load Balancer pools 34 replies

George Beckett 4 hours ago Do you happen to know if that requires comms on a particular IP address or unusual port? A long-shot, but I'm wondering if there is a firewall issue

Stelios Voutsinas 4 hours ago I'm not sure if its a firewall issue, what I'm seeing is once logged in to Horizon dashboard, if I try to modify the loadbalancer pool for a given LB, the buttons for the pop up seem slightly off, and I can't seem to add any new nodes to the pool, as the "Add" button is greyed out. Removing nodes also doesnt seem to work. Abit more info for debugging: ID of pool: 73ff7226-a65e-4256-9cd1-bbaa515bdec3 Provisioning Status: Pending Update

Greg Blow 2 hours ago hello Stelios, are you referring to this UI element? image.png

image.png

Stelios Voutsinas 2 hours ago Yes that one.

Greg Blow 2 hours ago ok, it seems to work in principle for me. Suggests it is either: a) a browser caching issue b) specific to the object you are trying to modify.

Greg Blow 2 hours ago Lets try b first. What is the operation you are trying to do?

Stelios Voutsinas 2 hours ago 2 files

Screenshot from 2023-09-22 17-39-41.png Screenshot from 2023-09-22 17-39-32.png

Stelios Voutsinas 2 hours ago One thing that looked off was the input that appears at the top of the popup.

Stelios Voutsinas 2 hours ago What I'm trying to do is remove the member that is in the pool, and replace it with a different one.

Stelios Voutsinas 2 hours ago When I try to do that, After selecting the one I want (Click "Add") That blue button at the bottom is grayed out, as shown in the picture

Stelios Voutsinas 2 hours ago I'll try clearing cache and maybe trying on another browser

Stelios Voutsinas 2 hours ago Also the "Pending Update" status implies something may be off?

Greg Blow 2 hours ago I'm I note also that in your screenshot the rsp-test-5wwoan5... instance has no ip address.

Greg Blow 2 hours ago I haven't changed permissions during the maintenance, which is the other possibiltiy this would be suggestive of.

Greg Blow 2 hours ago ah, nor a port field.

Greg Blow 2 hours ago Which is required.

Greg Blow 2 hours ago I suspect you're missing required input fields and thus cannot add new pool members.

Greg Blow 2 hours ago where are you seeing pending update please?

Stelios Voutsinas 2 hours ago Screenshot from 2023-09-22 17-53-00.png

Screenshot from 2023-09-22 17-53-00.png

Greg Blow 2 hours ago @Daniel P can I get a second pair of eyes please to verify.

Greg Blow 2 hours ago Project: RSP. Project>Network>Load Balancers> rsp-test-5wwoan5jczw5-api_lb-tuklgcb27ijq-loadbalancer-xl5zseic3qw4

Greg Blow 2 hours ago Pool tab, select the one item in the list, Members tab, Add/Remove members.

Stelios Voutsinas 2 hours ago I'm seeing some other strange behaviour of the dashboard:

Stelios Voutsinas 2 hours ago It worked after I refreshed, but just posting it in case its useful to know Screenshot from 2023-09-22 17-57-09.png

Screenshot from 2023-09-22 17-57-09.png

Greg Blow 2 hours ago I see the same problem on edge.

Greg Blow 2 hours ago (which is not my normal browser and doesn't have any somerville content cached)

Greg Blow 1 hour ago will try and reproduce in my usual browser.

Stelios Voutsinas 1 hour ago I've seen it a couple more times already, after clearing my cache that is

Greg Blow 1 hour ago I suspect the problem at the moment is I have old data cached and thus it works for me.

Greg Blow 1 hour ago although there are other possibilities

Greg Blow 16 minutes ago comparison of presentations: image.png

image.png

George Beckett 10 minutes ago Does it feel like too much of a coincidence that this has happened after the network upgrade?

Greg Blow 8 minutes ago I've asked after likely changes, but none made that should affect, though it is conspicuous timing. I think I need to investigate what the HTTP looks like first though.

Greg Blow 5 minutes ago @stv I probably don't have time for conclusive investigation today, but can pick this up again on Monday. My next course of action will be to inspect the HTTP packets and compare between working and malfunctioning presentations to determine if it's a rendering issue or if the server is serving different contents. Can I ask what browser/version(s) you're seeing problems on please?

input code on Firefox

<div ng-if="!row.addresses" class="form-group required member-address ng-scope" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-address" type="text" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-pattern" ng-model="row.address" ng-pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))$|^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?$" ng-required="true" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-address'].$invalid &amp;&amp; memberDetailsForm[row.id + '-address'].$dirty ? ctrl.ipError : '' $}" popover="" required="required" disabled="disabled" aria-invalid="false">
              </div>

table code on firefox

<tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id" class="ng-scope" style="">
            <td class="expander">
              <span class="fa fa-chevron-right ng-isolate-scope" hz-expand-detail="" duration="200">
              </span>
            </td>
            <td class="rsp-p1">
              <!-- ngIf: !row.addresses --><!-- end ngIf: !row.addresses -->
              <div ng-if="!row.addresses" class="form-group required member-address ng-scope" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-address" type="text" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-pattern" ng-model="row.address" ng-pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))$|^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?$" ng-required="true" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-address'].$invalid &amp;&amp; memberDetailsForm[row.id + '-address'].$dirty ? ctrl.ipError : '' $}" popover="" required="required" disabled="disabled" aria-invalid="false">
              </div><!-- ngIf: row.addresses.length === 1 -->
              <!-- ngIf: row.addresses.length > 1 -->
            </td>
            <td class="rsp-p1">
              <!-- ngIf: !row.addresses --><div ng-if="!row.addresses" class="form-group required ng-scope">
                <select name="1af61179-ed85-41a2-a4ce-ea44cb316473-subnet" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" ng-options="(subnet.name||subnet.id) for subnet in model.subnets" ng-model="row.subnet_id" ng-required="true" ng-disabled="row.allocatedMember" required="required" disabled="disabled" aria-invalid="false"><option label="external-subnet" value="object:664">external-subnet</option><option label="lasair-lsst-dev-subnet" value="object:665">lasair-lsst-dev-subnet</option><option label="somerville-jade-20230914-bootstrap-network-subnet" value="object:666">somerville-jade-20230914-bootstrap-network-subnet</option><option label="gfdev-rsp-bcpksnexwosr-network-wm6ojvj4ykxc-private_subnet-hq6xdgaxegl6" value="object:667">gfdev-rsp-bcpksnexwosr-network-wm6ojvj4ykxc-private_subnet-hq6xdgaxegl6</option><option label="rsp-subnet" value="object:668">rsp-subnet</option><option label="lasair-dev-subnet" value="object:669">lasair-dev-subnet</option><option label="tides-subnet" value="object:670">tides-subnet</option><option label="qserv-subnet" value="object:671">qserv-subnet</option><option label="azimuth-demo" value="object:672">azimuth-demo</option><option label="rsp-test-5wwoan5jczw5-network-dtn6lh62kpup-private_subnet-5grxtdo2kfty" value="object:673" selected="selected">rsp-test-5wwoan5jczw5-network-dtn6lh62kpup-private_subnet-5grxtdo2kfty</option><option label="test-subnet" value="object:674">test-subnet</option><option label="rsp-prod-blue-qtdri2h55pus-network-f2r6wtf4rkuw-private_subnet-ue4gt3j236od" value="object:675">rsp-prod-blue-qtdri2h55pus-network-f2r6wtf4rkuw-private_subnet-ue4gt3j236od</option><option label="lasair-ztf-subnet" value="object:676">lasair-ztf-subnet</option><option label="stv-rsp-dev-u3sa4dgv6zer-network-xcmonjsp6unx-private_subnet-dk25kns663mp" value="object:677">stv-rsp-dev-u3sa4dgv6zer-network-xcmonjsp6unx-private_subnet-dk25kns663mp</option><option label="vdfs lan" value="object:678">vdfs lan</option><option label="sandbox-subnet" value="object:679">sandbox-subnet</option><option label="lasair-subnet" value="object:680">lasair-subnet</option><option label="cephfs-subnet" value="object:681">cephfs-subnet</option><option label="lb-mgmt-subnet" value="object:682">lb-mgmt-subnet</option><option label="lasair-test-subnet" value="object:683">lasair-test-subnet</option></select>
              </div><!-- end ngIf: !row.addresses -->
              <!-- ngIf: row.addresses -->
            </td>
            <td class="rsp-p1">
              <div class="form-group required member-port" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-port'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-port'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-port" type="number" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ng-valid-max ng-valid-required ng-valid-pattern" ng-model="row.protocol_port" ng-pattern="/^\d+$/" min="1" max="65535" ng-required="true" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-port'].$invalid &amp;&amp; memberDetailsForm[row.id + '-port'].$dirty ? ctrl.portError : '' $}" popover="" required="required" disabled="disabled" aria-invalid="false">
              </div>
            </td>
            <td class="rsp-p1">
              <div class="form-group member-weight" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-weight'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-weight'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-weight" type="number" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ng-valid-max ng-valid-pattern" ng-model="row.weight" ng-pattern="/^\d+$/" min="0" max="256" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-weight'].$invalid &amp;&amp; memberDetailsForm[row.id + '-weight'].$dirty ? ctrl.weightError : '' $}" popover="" disabled="disabled" aria-invalid="false">
              </div>
            </td>
            <td class="actions_column">
              <action-list class="btn-group">
                <button tabindex="0" class="btn btn-sm btn-default" ng-class="actionClasses" ng-click="disabled || callback(item)">
  <ng-transclude>
                  <span translate="" class="ng-scope"><span class="ng-scope">Remove</span></span>
                </ng-transclude>
</button>
              </action-list>
            </td>
          </tr>

table code on Edge:

<tr ng-repeat-start="row in ctrl.tableData.displayedAllocated track by row.id" class="ng-scope" style="">
            <td class="expander">
              <span class="fa fa-chevron-right ng-isolate-scope" hz-expand-detail="" duration="200">
              </span>
            </td>
            <td class="rsp-p1">
              <!-- ngIf: !row.addresses --><div ng-if="!row.addresses" class="form-group required member-address ng-scope" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-address" type="text" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-pattern" ng-model="row.address" ng-pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))$|^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?$" ng-required="true" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-address'].$invalid &amp;&amp; memberDetailsForm[row.id + '-address'].$dirty ? ctrl.ipError : '' $}" popover="" required="required" disabled="disabled" aria-invalid="false">
              </div><!-- end ngIf: !row.addresses -->
              <!-- ngIf: row.addresses.length === 1 -->
              <!-- ngIf: row.addresses.length > 1 -->
            </td>
            <td class="rsp-p1">
              <!-- ngIf: !row.addresses --><div ng-if="!row.addresses" class="form-group required ng-scope">
                <select name="1af61179-ed85-41a2-a4ce-ea44cb316473-subnet" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" ng-options="(subnet.name||subnet.id) for subnet in model.subnets" ng-model="row.subnet_id" ng-required="true" ng-disabled="row.allocatedMember" required="required" disabled="disabled" aria-invalid="false"><option label="external-subnet" value="object:2920">external-subnet</option><option label="lasair-lsst-dev-subnet" value="object:2921">lasair-lsst-dev-subnet</option><option label="somerville-jade-20230914-bootstrap-network-subnet" value="object:2922">somerville-jade-20230914-bootstrap-network-subnet</option><option label="gfdev-rsp-bcpksnexwosr-network-wm6ojvj4ykxc-private_subnet-hq6xdgaxegl6" value="object:2923">gfdev-rsp-bcpksnexwosr-network-wm6ojvj4ykxc-private_subnet-hq6xdgaxegl6</option><option label="rsp-subnet" value="object:2924">rsp-subnet</option><option label="lasair-dev-subnet" value="object:2925">lasair-dev-subnet</option><option label="tides-subnet" value="object:2926">tides-subnet</option><option label="qserv-subnet" value="object:2927">qserv-subnet</option><option label="azimuth-demo" value="object:2928">azimuth-demo</option><option label="rsp-test-5wwoan5jczw5-network-dtn6lh62kpup-private_subnet-5grxtdo2kfty" value="object:2929" selected="selected">rsp-test-5wwoan5jczw5-network-dtn6lh62kpup-private_subnet-5grxtdo2kfty</option><option label="test-subnet" value="object:2930">test-subnet</option><option label="rsp-prod-blue-qtdri2h55pus-network-f2r6wtf4rkuw-private_subnet-ue4gt3j236od" value="object:2931">rsp-prod-blue-qtdri2h55pus-network-f2r6wtf4rkuw-private_subnet-ue4gt3j236od</option><option label="lasair-ztf-subnet" value="object:2932">lasair-ztf-subnet</option><option label="stv-rsp-dev-u3sa4dgv6zer-network-xcmonjsp6unx-private_subnet-dk25kns663mp" value="object:2933">stv-rsp-dev-u3sa4dgv6zer-network-xcmonjsp6unx-private_subnet-dk25kns663mp</option><option label="vdfs lan" value="object:2934">vdfs lan</option><option label="sandbox-subnet" value="object:2935">sandbox-subnet</option><option label="lasair-subnet" value="object:2936">lasair-subnet</option><option label="cephfs-subnet" value="object:2937">cephfs-subnet</option><option label="lb-mgmt-subnet" value="object:2938">lb-mgmt-subnet</option><option label="lasair-test-subnet" value="object:2939">lasair-test-subnet</option></select>
              </div><!-- end ngIf: !row.addresses -->
              <!-- ngIf: row.addresses -->
            </td>
            <td class="rsp-p1">
              <div class="form-group required member-port" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-port'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-port'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-port" type="number" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ng-valid-max ng-valid-required ng-valid-pattern" ng-model="row.protocol_port" ng-pattern="/^\d+$/" min="1" max="65535" ng-required="true" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-port'].$invalid &amp;&amp; memberDetailsForm[row.id + '-port'].$dirty ? ctrl.portError : '' $}" popover="" required="required" disabled="disabled" aria-invalid="false">
              </div>
            </td>
            <td class="rsp-p1">
              <div class="form-group member-weight" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-weight'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-weight'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-weight" type="number" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ng-valid-max ng-valid-pattern" ng-model="row.weight" ng-pattern="/^\d+$/" min="0" max="256" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-weight'].$invalid &amp;&amp; memberDetailsForm[row.id + '-weight'].$dirty ? ctrl.weightError : '' $}" popover="" disabled="disabled" aria-invalid="false">
              </div>
            </td>
            <td class="actions_column">
              <action-list class="btn-group">
                <button tabindex="0" class="btn btn-sm btn-default" ng-class="actionClasses" ng-click="disabled || callback(item)">
  <ng-transclude>
                  <span translate="" class="ng-scope"><span class="ng-scope">Remove</span></span>
                </ng-transclude>
</button>
              </action-list>
            </td>
          </tr>

input code on Edge:

<div ng-if="!row.addresses" class="form-group required member-address ng-scope" ng-class="{ 'has-error': memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$invalid &amp;&amp; memberDetailsForm['1af61179-ed85-41a2-a4ce-ea44cb316473-address'].$dirty }">
                <input name="1af61179-ed85-41a2-a4ce-ea44cb316473-address" type="text" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required ng-valid-pattern" ng-model="row.address" ng-pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))$|^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?$" ng-required="true" ng-disabled="row.allocatedMember" popover-placement="top" popover-append-to-body="true" popover-trigger="focus" ng-attr-popover="{$ memberDetailsForm[row.id + '-address'].$invalid &amp;&amp; memberDetailsForm[row.id + '-address'].$dirty ? ctrl.ipError : '' $}" popover="" required="required" disabled="disabled" aria-invalid="false">
              </div>

precise match on inputs, suggests rendering issue.

Trying to create a load balancer on qserv project has failed. Stuck in pending_create (is not editable as a consequence, and can't be deleted).

62f5662c-5417-4c92-b6aa-aa4508d7a3ae

(openstack-config) [stack@sv-admin-0 openstack-config]$ openstack loadbalancer delete 62f5662c-5417-4c92-b6aa-aa4508d7a3ae
Invalid state PENDING_CREATE of loadbalancer resource 62f5662c-5417-4c92-b6aa-aa4508d7a3ae (HTTP 409) (Request-ID: req-b7c17346-4b1a-4a30-8933-a9e15553175d)
(openstack-config) [stack@sv-admin-0 openstack-config]$ openstack loadbalancer show 62f5662c-5417-4c92-b6aa-aa4508d7a3ae
+---------------------+--------------------------------------+
| Field               | Value                                |
+---------------------+--------------------------------------+
| admin_state_up      | True                                 |
| availability_zone   | None                                 |
| created_at          | 2023-09-25T11:42:12                  |
| description         |                                      |
| flavor_id           | None                                 |
| id                  | 62f5662c-5417-4c92-b6aa-aa4508d7a3ae |
| listeners           |                                      |
| name                | test                                 |
| operating_status    | ONLINE                               |
| pools               |                                      |
| project_id          | 9168c636eaec419f807c46f1454e87a9     |
| provider            | amphora                              |
| provisioning_status | PENDING_CREATE                       |
| updated_at          | 2023-09-25T11:43:30                  |
| vip_address         | 10.71.0.33                           |
| vip_network_id      | 3c7b83ed-b695-4d08-b8bf-7a3ef24a0cb7 |
| vip_port_id         | db960d0f-7b49-45f2-9ebd-32fc2eba5dc6 |
| vip_qos_policy_id   | None                                 |
| vip_subnet_id       | 3a7687de-f4dc-4d47-8d2e-02099b3ceb92 |
| tags                |                                      |
+---------------------+--------------------------------------+

differs from other loadbalancers created so far (before maintenance) with provider=amphora rather than ovn.

(openstack-config) [stack@sv-admin-0 openstack-config]$ openstack loadbalancer status show 62f5662c-5417-4c92-b6aa-aa450
8d7a3ae
{
    "loadbalancer": {
        "id": "62f5662c-5417-4c92-b6aa-aa4508d7a3ae",
        "name": "test",
        "operating_status": "ONLINE",
        "provisioning_status": "PENDING_CREATE",
        "listeners": []
    }
}

creating loadbalancer without a pool also results in getting stuck in PENDING_CREATE

Creating an ovn load balancer works fine. Amphora bug may be unrelated.

(openstack-config) [stack@sv-admin-0 openstack-config]$ openstack loadbalancer create --project Qserv --vip-network-id Qserv --provider ovn
+---------------------+--------------------------------------+
| Field               | Value                                |
+---------------------+--------------------------------------+
| admin_state_up      | True                                 |
| availability_zone   | None                                 |
| created_at          | 2023-09-26T09:32:17                  |
| description         |                                      |
| flavor_id           | None                                 |
| id                  | 819599b5-ef45-422f-a97f-c246dc9b9c8a |
| listeners           |                                      |
| name                |                                      |
| operating_status    | OFFLINE                              |
| pools               |                                      |
| project_id          | 9168c636eaec419f807c46f1454e87a9     |
| provider            | ovn                                  |
| provisioning_status | PENDING_CREATE                       |
| updated_at          | None                                 |
| vip_address         | 10.71.0.39                           |
| vip_network_id      | 3c7b83ed-b695-4d08-b8bf-7a3ef24a0cb7 |
| vip_port_id         | 9b41b770-f0e0-4cf5-8d3b-1f97b646e90f |
| vip_qos_policy_id   | None                                 |
| vip_subnet_id       | 3a7687de-f4dc-4d47-8d2e-02099b3ceb92 |
| tags                |                                      |
+---------------------+--------------------------------------+

this loadbalancer reached 'active' state successfully and could be deleted, but cannot create pools for this variety of loadbalancer as no algorithm is compatible.

Creating a new load balancer in horizon defaults to amphora rather than ovn, which fails to exit PENDING_CREATE state
creating an ovn load balancer through the cli, cannot then create a pool for it as all algorithm options (SOURCE_IP, ROUND_ROBIN, LEAST_CONNECTIONS) give an error like: HttpException: 501: Server Error for url: http://10.19.3.200:3890/v2.0/lbaas/pools, Provider 'ovn' does not support a requested option: OVN provider does not support SOURCE_IP algorithm 10:39
aforementioned browser-dependent rendering issue.

comparison of pool created by @gblow through openstack cli for testing and pool created by @stvoutsin . Loadbalancer the latter is attached to is immutable, former does not seem to be.

+----------------------+--------------------------------------+
| Field                | Value                                |
+----------------------+--------------------------------------+
| admin_state_up       | True                                 |
| created_at           | 2023-09-27T15:30:27                  |
| description          |                                      |
| healthmonitor_id     |                                      |
| id                   | c1954861-b353-4fef-9f95-0dcb459f1960 |
| lb_algorithm         | SOURCE_IP_PORT                       |
| listeners            |                                      |
| loadbalancers        | 819599b5-ef45-422f-a97f-c246dc9b9c8a |
| members              |                                      |
| name                 | test3-pool                           |
| operating_status     | OFFLINE                              |
| project_id           | 9168c636eaec419f807c46f1454e87a9     |
| protocol             | TCP                                  |
| provisioning_status  | ACTIVE                               |
| session_persistence  | None                                 |
| updated_at           | 2023-09-27T15:30:27                  |
| tls_container_ref    | None                                 |
| ca_tls_container_ref | None                                 |
| crl_container_ref    | None                                 |
| tls_enabled          | False                                |
| tls_ciphers          | None                                 |
| tls_versions         | None                                 |
| tags                 |                                      |
| alpn_protocols       | None                                 |
+----------------------+--------------------------------------+

+----------------------+--------------------------------------------------------------+
| Field                | Value                                                        |
+----------------------+--------------------------------------------------------------+
| admin_state_up       | True                                                         |
| created_at           | 2023-05-29T10:54:42                                          |
| description          |                                                              |
| healthmonitor_id     |                                                              |
| id                   | 94849da0-330f-4283-896a-8c0b53afd515                         |
| lb_algorithm         | SOURCE_IP_PORT                                               |
| listeners            | 3a39c30f-7145-4d67-b005-71e6c4859fc1                         |
| loadbalancers        | 1f011caf-0068-4fad-b4ed-ba7129b0061f                         |
| members              | 018aa473-3533-4265-b7c0-99ae41466e22                         |
| name                 | rsp-test-5wwoan5jczw5-etcd_lb-yyakthyopp6v-pool-sf7tmpqesnzi |
| operating_status     | ONLINE                                                       |
| project_id           | 5b5102968e5347ad98676ea42b6519df                             |
| protocol             | TCP                                                          |
| provisioning_status  | ACTIVE                                                       |
| session_persistence  | None                                                         |
| updated_at           | 2023-05-29T10:54:55                                          |
| tls_container_ref    | None                                                         |
| ca_tls_container_ref | None                                                         |
| crl_container_ref    | None                                                         |
| tls_enabled          | False                                                        |
| tls_ciphers          | None                                                         |
| tls_versions         | None                                                         |
| tags                 |                                                              |
| alpn_protocols       | None                                                         |
+----------------------+--------------------------------------------------------------+

@stvoutsin revisiting this and comparing between firefox and edge renders it looks like the discrepancy may have been resolved. Can you test and verify please?

Closign as no evidence issue is extant.

lsst-uk / somerville-operations

Web interface rendering incorrectly after maintenance #124