HBase
  1. HBase
  2. HBASE-6135

Style the Web UI to use Twitter's Bootstrap.

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 0.95.0
    • Component/s: None
    • Labels:
      None
    • Hadoop Flags:
      Reviewed
    • Tags:
      0.96notable

      Description

      Our web ui has lagged a little bit behind. While it's not a huge deal, it is one of the first things that new people see. As such styling it a little bit better would put a good foot forward.

      1. HBASE-6135-ADD-0.patch
        2 kB
        Elliott Clark
      2. HBASE-6135-5.patch
        349 kB
        stack
      3. HBASE-6135-4.patch
        356 kB
        Elliott Clark
      4. HBASE-6135-3.patch
        349 kB
        Elliott Clark
      5. HBASE-6135-2.patch
        341 kB
        stack
      6. HBASE-6135-1.patch
        341 kB
        Elliott Clark
      7. HBASE-6135-0.patch
        339 kB
        Elliott Clark
      8. redesign-master-r1.png
        6.53 MB
        Elliott Clark
      9. redesign-rs-r1.png
        309 kB
        Elliott Clark
      10. master-redesign.png
        246 kB
        Elliott Clark

        Issue Links

          Activity

          Hide
          stack added a comment -

          Marking closed.

          Show
          stack added a comment - Marking closed.
          Hide
          Hudson added a comment -

          Integrated in HBase-TRUNK-on-Hadoop-2.0.0 #55 (See https://builds.apache.org/job/HBase-TRUNK-on-Hadoop-2.0.0/55/)
          HBASE-6135 Style the Web UI to use Twitter's Bootstrap, addendum (Elliot Clark)

          Submitted by: Elliot Clark
          Reviewed by: Ted Yu (Revision 1350731)

          Result = FAILURE
          tedyu :
          Files :

          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon
          Show
          Hudson added a comment - Integrated in HBase-TRUNK-on-Hadoop-2.0.0 #55 (See https://builds.apache.org/job/HBase-TRUNK-on-Hadoop-2.0.0/55/ ) HBASE-6135 Style the Web UI to use Twitter's Bootstrap, addendum (Elliot Clark) Submitted by: Elliot Clark Reviewed by: Ted Yu (Revision 1350731) Result = FAILURE tedyu : Files : /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon
          Hide
          Hudson added a comment -

          Integrated in HBase-TRUNK #3031 (See https://builds.apache.org/job/HBase-TRUNK/3031/)
          HBASE-6135 Style the Web UI to use Twitter's Bootstrap, addendum (Elliot Clark)

          Submitted by: Elliot Clark
          Reviewed by: Ted Yu (Revision 1350731)

          Result = FAILURE
          tedyu :
          Files :

          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon
          Show
          Hudson added a comment - Integrated in HBase-TRUNK #3031 (See https://builds.apache.org/job/HBase-TRUNK/3031/ ) HBASE-6135 Style the Web UI to use Twitter's Bootstrap, addendum (Elliot Clark) Submitted by: Elliot Clark Reviewed by: Ted Yu (Revision 1350731) Result = FAILURE tedyu : Files : /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon
          Hide
          Ted Yu added a comment -

          Addendum integrated to trunk.

          Show
          Ted Yu added a comment - Addendum integrated to trunk.
          Hide
          Elliott Clark added a comment -

          That test is pretty in-complete. We should think about making the mocking a little more complete. Until then this should work.

          Show
          Elliott Clark added a comment - That test is pretty in-complete. We should think about making the mocking a little more complete. Until then this should work.
          Hide
          Ted Yu added a comment -

          The repeated failure of TestRSStatusServlet#testWithRegions seems to be related to this JIRA.

          Show
          Ted Yu added a comment - The repeated failure of TestRSStatusServlet#testWithRegions seems to be related to this JIRA.
          Hide
          Hudson added a comment -

          Integrated in HBase-TRUNK-on-Hadoop-2.0.0 #54 (See https://builds.apache.org/job/HBase-TRUNK-on-Hadoop-2.0.0/54/)
          HBASE-6135 Style the Web UI to use Twitter's Bootstrap. (Revision 1350407)

          Result = FAILURE
          stack :
          Files :

          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/AssignmentManagerStatusTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/RegionServerListTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RSStatusTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/ServerMetricsTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/table.jsp
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/tablesDetailed.jsp
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.min.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.min.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/hbase_logo.png
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.js
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.min.js
          Show
          Hudson added a comment - Integrated in HBase-TRUNK-on-Hadoop-2.0.0 #54 (See https://builds.apache.org/job/HBase-TRUNK-on-Hadoop-2.0.0/54/ ) HBASE-6135 Style the Web UI to use Twitter's Bootstrap. (Revision 1350407) Result = FAILURE stack : Files : /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/AssignmentManagerStatusTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/RegionServerListTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RSStatusTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/ServerMetricsTmpl.jamon /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/table.jsp /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/tablesDetailed.jsp /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.min.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.min.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/hbase_logo.png /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.js /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.min.js
          Hide
          Hudson added a comment -

          Integrated in HBase-TRUNK #3027 (See https://builds.apache.org/job/HBase-TRUNK/3027/)
          HBASE-6135 Style the Web UI to use Twitter's Bootstrap. (Revision 1350407)

          Result = FAILURE
          stack :
          Files :

          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/AssignmentManagerStatusTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/RegionServerListTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RSStatusTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/ServerMetricsTmpl.jamon
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/table.jsp
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/tablesDetailed.jsp
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.min.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.min.css
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/hbase_logo.png
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.js
          • /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.min.js
          Show
          Hudson added a comment - Integrated in HBase-TRUNK #3027 (See https://builds.apache.org/job/HBase-TRUNK/3027/ ) HBASE-6135 Style the Web UI to use Twitter's Bootstrap. (Revision 1350407) Result = FAILURE stack : Files : /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/common/TaskMonitorTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/AssignmentManagerStatusTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/RegionServerListTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RSStatusTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/RegionListTmpl.jamon /hbase/trunk/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/regionserver/ServerMetricsTmpl.jamon /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/table.jsp /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/master/tablesDetailed.jsp /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap-responsive.min.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/css/bootstrap.min.css /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/hbase_logo.png /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.js /hbase/trunk/hbase-server/src/main/resources/hbase-webapps/static/js/bootstrap.min.js
          Hide
          stack added a comment -

          Thanks for the patch Elliott. Nice.

          Show
          stack added a comment - Thanks for the patch Elliott. Nice.
          Hide
          stack added a comment -

          What I committed.

          Show
          stack added a comment - What I committed.
          Hide
          Elliott Clark added a comment -

          @Eugene
          I've been editing a jmon
          then running:

          bin/stop-hbase.sh && mvn package -DskipTests && bin/start-hbase.sh

          While it's not real fast it gets the job done.

          @stack
          Things should be good from my end.

          Show
          Elliott Clark added a comment - @Eugene I've been editing a jmon then running: bin/stop-hbase.sh && mvn package -DskipTests && bin/start-hbase.sh While it's not real fast it gets the job done. @stack Things should be good from my end.
          Hide
          Elliott Clark added a comment -

          Moved region server metrics into a table. They are actually readable now.

          Show
          Elliott Clark added a comment - Moved region server metrics into a table. They are actually readable now.
          Hide
          stack added a comment -

          Elliott's patch only w/ the logo in src/resources dir so can be found when run in-situ

          Show
          stack added a comment - Elliott's patch only w/ the logo in src/resources dir so can be found when run in-situ
          Hide
          stack added a comment -

          Ok if I commit this? Can fine tune in other issues?

          Show
          stack added a comment - Ok if I commit this? Can fine tune in other issues?
          Hide
          Eugene Koontz added a comment -

          Hi Elliott, your patch works great for me and looks very attractive in the browser.

          I had the same problem with the hadoop_logo.png.

          Also, what's the most efficient workflow for developing with jamon? I've been doing the following:

          1. edit a jamon file (e.g. hbase/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/)
          2. do the following: (using a shell script):

          rm hbase-server/target/classes/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.class \
             hbase-server/target/generated-jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.java 
          mvn compile
          bin/hbase-daemon.sh restart master
          
          Show
          Eugene Koontz added a comment - Hi Elliott, your patch works great for me and looks very attractive in the browser. I had the same problem with the hadoop_logo.png. Also, what's the most efficient workflow for developing with jamon? I've been doing the following: 1. edit a jamon file (e.g. hbase/hbase-server/src/main/jamon/org/apache/hadoop/hbase/tmpl/master/) 2. do the following: (using a shell script): rm hbase-server/target/classes/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.class \ hbase-server/target/generated-jamon/org/apache/hadoop/hbase/tmpl/master/MasterStatusTmpl.java mvn compile bin/hbase-daemon.sh restart master
          Hide
          Elliott Clark added a comment -

          Not sure how the patch handles images (or if it does).

          I removed the old one hbase-server/src/main/resources/hbase-webapps/static/hbase_logo_med.gif

          and copied the logo from the site to
          src/site/resources/images/hbase_logo.png -->
          hbase-server/src/main/resources/hbase-webapps/static/hbase_logo.png

          Show
          Elliott Clark added a comment - Not sure how the patch handles images (or if it does). I removed the old one hbase-server/src/main/resources/hbase-webapps/static/hbase_logo_med.gif and copied the logo from the site to src/site/resources/images/hbase_logo.png --> hbase-server/src/main/resources/hbase-webapps/static/hbase_logo.png
          Hide
          stack added a comment -

          Sounds fine. Logo would be good.

          Show
          stack added a comment - Sounds fine. Logo would be good.
          Hide
          Elliott Clark added a comment -

          Sure I can try and add a logo.
          The only info that we dropped was a list of co-processors on each region server when looking at the master ui. The master still displays all co-processors installed on it. And every region server's ui page has all the installed co-porcessors. So I thought that was ok

          Show
          Elliott Clark added a comment - Sure I can try and add a logo. The only info that we dropped was a list of co-processors on each region server when looking at the master ui. The master still displays all co-processors installed on it. And every region server's ui page has all the installed co-porcessors. So I thought that was ok
          Hide
          Elliott Clark added a comment -

          I think they should just have a table like the region/region server tabed tables. But then the page starts to look a little busy. I can circle back around to the ui once we have some feedback on how people are liking the new style/ui.

          Show
          Elliott Clark added a comment - I think they should just have a table like the region/region server tabed tables. But then the page starts to look a little busy. I can circle back around to the ui once we have some feedback on how people are liking the new style/ui.
          Hide
          stack added a comment -

          oh, how about a logo?

          Show
          stack added a comment - oh, how about a logo?
          Hide
          stack added a comment -

          I took a look see... its nicer than what we have. Have we dropped any info that you know of?

          Show
          stack added a comment - I took a look see... its nicer than what we have. Have we dropped any info that you know of?
          Hide
          stack added a comment -

          The metrics should go on a page of their own? Or, I suppose we have that already at /jmx? Maybe we should style /jmx or have it so you can see it as pretty html or as json... I'll commit this for now.

          Show
          stack added a comment - The metrics should go on a page of their own? Or, I suppose we have that already at /jmx? Maybe we should style /jmx or have it so you can see it as pretty html or as json... I'll commit this for now.
          Hide
          Elliott Clark added a comment -

          The blob of metrics text should be broken out into a latency section, but I haven't gotten anything that I think looks right.

          Show
          Elliott Clark added a comment - The blob of metrics text should be broken out into a latency section, but I haven't gotten anything that I think looks right.
          Hide
          Elliott Clark added a comment -

          Patch to go along with the screen shots.

          Show
          Elliott Clark added a comment - Patch to go along with the screen shots.
          Hide
          Elliott Clark added a comment -

          New version

          Show
          Elliott Clark added a comment - New version
          Hide
          stack added a comment -

          Fancypants!

          Show
          stack added a comment - Fancypants!
          Hide
          ramkrishna.s.vasudevan added a comment -

          Nice.

          Show
          ramkrishna.s.vasudevan added a comment - Nice.
          Hide
          Elliott Clark added a comment -

          Something like this.

          Show
          Elliott Clark added a comment - Something like this.
          Hide
          Enis Soztutar added a comment -

          +1 to bootstrap.

          Show
          Enis Soztutar added a comment - +1 to bootstrap.

            People

            • Assignee:
              Elliott Clark
              Reporter:
              Elliott Clark
            • Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development