Add "ACTIVE" VMs in Dashboard tab

Community Support GUI - Sunstone
1

Hello,

I would like to see the number of “active” VMs in my system from Dashboard tab.
Screenshot_2020-10-29 OpenNebula Sunstone Cloud Operations Center

I have been searching what file is generating the “Virtual Machines” table and I have found that, maybe,

/usr/lib/one/sunstone/public/app/tabs/dashboard-tab/vms.hbs

file is where this table is generated.

My limited programming knowledge “says” me that adding a new “row” and defining its class with “active_vms” (this class exists in OpenNebula), I should see a new column with number of active VMs… but not…

Could anybody help me?

Thanks.

2

I have modified file /usr/lib/one/sunstone/public/dist/main-dist.js and I have added this:

      <h3 class="failed_vms alert-color number-title">0 </h3>
      <span class="small-12 medium-12 columns label-card">FAILED</span>

After that, I have moved file /usr/lib/one/sunstone/public/dist/main.js.map to /usr/lib/one/sunstone/public/dist/main.js.map-ORI, so now, my system has not got that file… After restarting opennebula and opennebula-sunstone daemons, now, I can get number of running VMs in Dashboard…

imagen

But, how can I recreate /usr/lib/one/sunstone/public/dist/main.js.map file with new added lines?

Thanks.

3

Hello @Daniel_Ruiz_Molina,

In short, you must rebuild the main.js file. The Sunstone Development doc should be a good starting point to understand where to look for changes. Plese note that for the actual rebuild there is a script build.sh located in /usr/lib/one/sunstone/public/ that could be used but to have a successful built there is some magic involved(not sure is there an improvement, though. It just works for me this way):

cd /usr/lib/one/sunstone/public
# backup the original main.js
mv dist/main.js main.js-tmp
# install the required packages
./build.sh -d
# add the path to the local binaries
export PATH=$PATH:$PWD/node_modules/.bin
# rebuild
./build.sh
# restart Sunstone
systemctl restart opennebula-sunstone

Hope this helps.

Best Regards,
Anton Todorov

4

Hi,

After “trying” to reproduce all steps, system returns an error (or some…) so my honest question is simple: can my OpenNebula server run fine (100% OK) without /usr/lib/one/sunstone/public/dist/main.js.map file?

Thanks.

5

And, my last question… Why, if I modify /usr/lib/one/sunstone/public/app/tabs/dashboard-tab/vms.hbs file (it’s a template), new configuration is not applied?
I have rewriten that file in the following way:

<div>
  <fieldset class="large-font dashboard-fieldset">
    <div class="row small-12 medium-12 columns">
      <div class="small-6 medium-8 columns dashboard-div-titles">
        <h5>{{tr "Virtual Machines"}}</h5>
      </div>
      <div class="small-6 medium-4 columns dashboard-div-buttons">
        <button class="button radius tiny show_vms_tab"> <i class="fas fa-lg fa-list fa-fw"></i></button>
          {{#isTabActionEnabled "vms-tab" "VM.create_dialog"}}
            <button class="button success radius tiny show_create_vm"> <i class="fas fa-lg fa-plus fa-fw"></i></button>
          {{/isTabActionEnabled}}
      </div>
    </div>
    <div class="row">
      <div class="card small-12 medium-4 columns">
        <h3 class="total_vms fadeinout number-title">0</h3>
        <span class="small-12 medium-12 columns label-card">{{tr "TOTAL"}}</span>
      </div>
      <div class="card small-12 medium-4 columns">
          <h3 class="pending_vms fadeinout warning-color number-title">0</h3>
          <span class="small-12 medium-12 columns label-card">{{tr "PENDING"}}</span>
      </div>
      <div class="card small-12 medium-4 columns">
          <h3 class="failed_vms fadeinout alert-color number-title">0</h3>
          <span class="small-12 medium-12 columns label-card">{{tr "FAILED"}}</span>
      </div>
      <div class="card small-12 medium-4 columns">
          <h3 class="off_vms fadeinout secondary-color number-title">0</h3>
          <span class="small-12 medium-12 columns label-card">{{tr "OFF"}}</span>
      </div>
     <div class="card small-12 medium-4 columns">
          <h3 class="active_vms fadeinout success-color number-title">0</h3>
          <span class="small-12 medium-12 columns label-card">{{tr "RUNNING"}}</span>
      </div>
    </div>
  </fieldset>
</div>

Thanks.