inline edit only works on the first tab loaded in a tabbed panel

[Gloria Gu]

I am following the instruction regarding how to add in-line edit to the tables based on http://docs.openstack.org/developer/horizon/topics/tables.html

I used admin -> volumes

I updated following block to the volumes tab table: openstack_dashborad/dashobards/admin/volumes/volumes/tables.py

class UpdateRow(tables.Row):
    ajax = True

    def get_data(self, request, volume_id):
        volume = cinder.volume_get(request, volume_id)
        return volume

class UpdateCell(tables.UpdateAction):
    def allowed(self, request, volume, cell):
        return True

    def update_cell(self, request, data, id,
                    cell_name, new_cell_value):

        obj = data
        setattr(obj, cell_name, new_cell_value)
        value = getattr(obj, 'name', None)

        return True
class VolumesTable(volumes_tables.VolumesTable):
    """
    name = tables.Column("name",
                         verbose_name=_("Name"),
                         link="horizon:admin:volumes:volumes:detail")"""
    name = tables.Column("name", verbose_name=_("Name"),
                         form_field=forms.CharField(
                             max_length=64, required=False),
                         update_action=UpdateCell)
......more code

I updated the following block to the volume types tab table: openstack_dashborad/dashobards/admin/volumes/volume_types/tables.py

class UpdateRow(tables.Row):
    ajax = True

    def get_data(self, request, volume_type_id):
        volume_type = cinder.volume_type_get(request, volume_type_id)
        return volume_type

class UpdateCell(tables.UpdateAction):
    def allowed(self, request, volume_type, cell):
        return True

    def update_cell(self, request, data, volume_type_id,
                    cell_name, new_cell_value):

         obj = data
         setattr(obj, cell_name, new_cell_value)
         value = getattr(obj, 'name', None)

        return True

class VolumeTypesTable(tables.DataTable):
   # name = tables.Column("name", verbose_name=_("Name"))
    name = tables.Column("name", verbose_name=_("Name"),
                         form_field=forms.CharField(
                             max_length=64, required=False),
                         update_action=UpdateCell)
.....more code

I also add the similar code to snapshots table

The inline code for volumes table it works fine. The inline code for volume_types table seems to have problem. the inline code for snapshots table doesn't work either.

examine the element noticed the following difference:

element for the name cell in volumes table

when not hover:
<div class="table_cell_action" style="display: none;"><button class="ajax-inline-edit"><span class="glyphicon glyphicon-pencil"></span></button></div>

when hover:
<div class="table_cell_action" style="display: block;"><button class="ajax-inline-edit"><span class="glyphicon glyphicon-pencil"></span></button></div>

element for the name cell in volume_types table is missing display:none as styling even both of volumes and volume_types using the same openstack_dashboard/static/dashboard/scss/_inline_edit.scss.

<div class="table_cell_action"><button class="ajax-inline-edit"><span class="glyphicon glyphicon-pencil"></span></button></div>

If I add that display:none or display:block into <div class="table_cell_action"> it seems to work for volume_types table. However it sort of disables the volumes in-line-edit.

Looks like the in-line edit only allows the first tab's table in-line edit by default, it doesn't seem to allow in-line edit to work in multiple tables on different tabs

[Gloria Gu (gloria-gu)]

the code on volumes table and volume_types table

[Gloria Gu (gloria-gu)]

more information on the issue:

the patch code in volume_types/tables.py, it is missing row_class=UpdateRow in class Meta: but adding it , it doesn't solve the issue.

Did some more digging today, find the more information:

looks like the the code in horizon/horizon/static/horizon/js/horizon.tables_inline_edit.js for mouse over didn't get add the the volume_types table.

      console.log('table_cell_action is:' + $(this).find(".table_cell_action"));
    $(this).find(".table_cell_action").fadeIn(100);
  });

  $('table').on('mouseleave', '.inline_edit_available', function (evt) {
    $(this).find(".table_cell_action").fadeOut(200);
  });

It looks like only add mouseover event to the first table loaded. If I load the the page using the following url to force load the volume_types table first, then the pencil shows up for volume_types table, but the pencil won't show up for the volumes.

http://10.50.139.1:8888/admin/volumes/?tab=volumes_group_tabs__volume_types_tab

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/137790

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/137790
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=2eb96431813cd63d56c221f51bd8604b5d1ef5ed
Submitter: Jenkins
Branch: master

commit 2eb96431813cd63d56c221f51bd8604b5d1ef5ed
Author: Timur Sufiev <email address hidden>
Date: Fri Nov 28 16:51:30 2014 +0300

    Enable tables inline-editing in lazy-loaded tabs

    Previously inline-edit was initialized only the first time the page
    was loaded which had been preventing inline-edit for the tables which
    were inside lazy-loaded tabs (i.e. loaded with AJAX-request). Fixed
    that.

    Change-Id: I5ec4d28a26cfed6e7eaef783a0d5b17762fd75d5
    Closes-Bug: #1389437