DEV Community

Franck Pachot for YugabyteDB

Posted on • Updated on

Bookmarklet for YugabyteDB table's tablets

You may have seen in this blog that screenshots I take from the YugabyteDB console may have less columns. An example:
Image description
Rather than this:
Image description

I do it for clarity, removing the columns that are not meaningful for the blog post. This help with the very low image resolution. I also use it for presentations where it is better to show only the relevant info in large fonts.

I do that simply with some CSS and I'll share in this post the bookmarklets I use. For example, for the above, just create a bookmark with this

Enter fullscreen mode Exit fullscreen mode

and it will remove columns 3 to 6 on the 4th table, which is the list of tablets from the master webconsole.

It does this:

    '.table-striped:nth-child(4) tr>*:nth-child(n+3):nth-child(-n+6)'
    ).forEach(el =>
    .display = 'none');
document.getElementsByClassName("yb-main container-fluid")[0].style.marginLeft="88px";
Enter fullscreen mode Exit fullscreen mode

In short:

  • .table-striped:nth-child(4): the 4th table of class table-striped
  • tr>*:the first tag under tr (it is th or td)
  • nth-child(n+3):from the 3th one
  • :nth-child(-n+6): to the 6th one
  • finally I resize the sidebar menu

I transformed it to a bookmarklet with

Top comments (0)