Pool Disks - DataTable or no?

Hello! After making a right fool of myself tromping through the GitHub issues and PRs, I figured I’d start in the forums instead for a small discussion, over the pool disks table. Could we make it a sortable DataTable instead of just a plain one?

Currently the table is just a plain-jane table, with seeminbly no rhyme or reason to the order of it’s contents:


The boxes indicate the missing sort buttons found in other places in the UI, such as the Balances table:

(which, ironically, I would expect to always only be sorted by recency, and not a full datatable)

I was able to activate the DataTable features with a simple console call to the element (love that DataTables are this easy!) and now I can sort by something reasonable, like the BTRFS DevID:

So I was wondering if this was an intentional omission, and if not, if a PR would be welcome to address such a shortcoming. Perhaps there are even more tables which should be sortable that I missed!

2 Likes

I’m by no means the deciding vote, but I think a sortable table here would be great. Ever since I’ve replaced existing disks with new ones, my order was “messed up” (read, not the way I always had it :slight_smile: ), so, for me, sorting would be a welcome feature.

1 Like

@StephenBrown2 Hello again.
Just chipping in re:

I would strongly disagree. We are a diseptively large project and on-boarding is hard for all parties: especially with so little team resources. You recent (and past form a few years ago :slight_smile: ) efforts are always apprecieated. I for one have so little time to assist I likely come over quite terse. But I try to be clear and to the point - whiles also doing what bits I can afford time wise.

We have no ‘foolish’ here: or I would have to excuse myself immidiately (some years ago actually :slight_smile: ). And I myself started on the GitHub when I should have been on the forum - hopefully that has worked out. Not really for me to judge. However the forum at that time didn’t actuall render in Firefox so there is that.

@Hooverdan none of us here has a canonical vote as it goes. But of those that have last say you are one of 4 :).

I like the idea also as it goes. Plus we have sorts build-in to many of our other tables: @Flox ?
There may be a ‘tecnical’ reason we don’t yet have a sort here. But it is just a likely no-one has stepped up to make-it-so.

Hope that helps.

3 Likes

Thanks for the kind reassurances, I feel much better now.

That’s exactly the situation I’ve gotten into. My disks have been unplugged and replugged and replaced and shuffled around so much now you can see the “mess” they’re in.

I can add DataTables to that table and send up a PR. Would sorting by DevID by default make the most sense to everyone else like it does to me?

1 Like

I think Device ID default sorting makes the most sense in that context.

1 Like

So I’m not sure exactly what is going wrong. I had thought it would be as simple as adding a data-table class to the table, but that’s not activating it:

diff --git a/src/rockstor/storageadmin/static/storageadmin/js/templates/pool/resize_pool_info.jst b/src/rockstor/storageadmin/static/storageadmin/js/templates/pool/resize_pool_info.jst
index 3da610a0..e91f3ca8 100644
--- a/src/rockstor/storageadmin/static/storageadmin/js/templates/pool/resize_pool_info.jst
+++ b/src/rockstor/storageadmin/static/storageadmin/js/templates/pool/resize_pool_info.jst
@@ -49,7 +49,7 @@
     to reset.</i>
 
 <table id="pool-disk-table"
-       class="table table-condensed table-bordered table-hover">
+       class="table table-condensed table-bordered table-hover data-table">
     <thead>
     <tr>
         <th scope="col" abbr="Name">Name</th>

So then I added a line to specifically enable DataTables on that table id (with the appropriate sorting), and still no dice:

diff --git a/src/rockstor/storageadmin/static/storageadmin/js/views/pool_details_layout_view.js b/src/rockstor/storageadmin/static/storageadmin/js/views/pool_details_layout_view.js
index 7c597853..aad639db 100644
--- a/src/rockstor/storageadmin/static/storageadmin/js/views/pool_details_layout_view.js
+++ b/src/rockstor/storageadmin/static/storageadmin/js/views/pool_details_layout_view.js
@@ -122,6 +122,8 @@ PoolDetailsLayoutView = RockstorLayoutView.extend({
         };
         this.renderDataTables(customs);
 
+        // Sort the Pool Disk table by the Btrfs DevID ascending
+        this.$('#pool-disk-table').DataTable({'order': [[2, 'asc']]});
 
         this.$('#ph-compression-info').html(this.compression_info_template({
             pool: this.pool.toJSON()

poetry run django-admin collectstatic --no-input --verbosity 2 was run from /opt/rockstor after each attempt, just like I did with the compression tooltips, and I also hard-refreshed my browser and logged out and back in to Rockstor… the typical troubleshooting steps you would expect.

Any thoughts?

I have no idea obviously, but looking at this example (again, might be totally different):

adds the sortable tag to the column headers …

or could the table-condensed part of the class make the behavior change?

Edit: One different question, and again pardon my ignorance, but did you also do the export of django setting before the collection? Mostly looking at this here:

https://rockstor.com/docs/contribute/contribute.html?highlight=collectstatic#change-test-cycle

buildvm:~ # cd /opt/rockstor
buildvm:~ # export DJANGO_SETTINGS_MODULE=settings
buildvm:~ # poetry run django-admin collectstatic --no-input --verbosity 2

It’s not a Bootstrap Table, it’s a DataTable, so the construction is completely different. Good thought though!

From what I can tell, this function: https://github.com/rockstor/rockstor-core/blob/testing/src/rockstor/storageadmin/static/storageadmin/js/views/pool_details_layout_view.js#L123 which is inherited from RockstorLayoutView here: https://github.com/rockstor/rockstor-core/blob/4d60a2c683140aaa10a8e5b201157163cc9a898b/src/rockstor/storageadmin/static/storageadmin/js/rockstor.js#L68 should apply the DataTable to any table with a data-table class: https://github.com/rockstor/rockstor-core/blob/testing/src/rockstor/storageadmin/static/storageadmin/js/rockstor.js#L79

But, I definitely am no front-end guru, so this javascript looks pretty convoluted to me. I’m probably missing something simple.

Yes, I did. Without that, django-admin won’t even run! :slight_smile:

3 Likes

Got it, I was thinking it was a bootstrap table due to these classes

2 Likes

Ah yes. It’s using bootstrap styling, but the DataTables library for data sorting/filtering/whatnot.

2 Likes

Any thoughts, pointers? Things I’m missing that would prevent that table from being affected?

Hi there @StephenBrown2,

After you enact change in the sources, compile and restart rockstor services, is the change visible when you check the html/js code behind the the web ui via the browsers DevTools?

I see no harm in adding sorting to tables if a reasonable default is chosen.

3 Likes

@StephenBrown2 ,

I’m not used to DataTables() in js at all but it worked for me when the call to renderDataTables() was last in the renderSubViews() function.

I placed it at the very end:

        // Attempt to colour "Disabled" red. Non functional currently.
        // https://vitalets.github.io/bootstrap-editable/
        $('#editQuota').on('render', function (e, editable) {
            // colour #EB6841 is our default for links.
            var colors = {'Enabled': '#EB6841', 'Disabled': 'red'};
            $(this).css("color", colors[editable.value]);
        });

        // Sort all SubView tables in descending order by initial column.
        // This way we see the latest Scrub / Balance items at the top.
        var customs = {
            'order': [[2, 'asc']]
        };
        this.renderDataTables(customs);

    },

    deletePool: function(event) {
        var _this = this;
        (...)

Hope this helps,

Edit: note that this customization and renderDataTables block was moved from higher up in the renderSubViews() function.

3 Likes