System monitor widget using iframe in type: html

[nikolasdmtr]

Since there is no system monitor widget yet, I did the following:

1. Selfhosted dashdot https://github.com/MauriceNino/dashdot
2. Used the provided widget creator here: https://getdashdot.com/docs/integration/widgets
3. Modified widget height and width adding for example: height="50" width="200"
4. Modified colors
5. Added the resulting html code to glance.yml as "type: html"

The glance.yml entry looks like this:

- type: html
            source: |
              <p>&nbsp;</p>
              <div class="widget-header">
                <div class="uppercase">System</div>
              </div>            
              <iframe
               src="http://127.0.1.1:90/?graph=cpu&showPercentage=true&theme=light&color=b1b1b1&surface=f6f6f6&innerRadius=0&textSize=12"
               style="border-radius: 6px; border: 1px solid #E8E8E8;"
               allowtransparency="false"
               frameborder="0"
               height="50"
               width="300">
              </iframe>
          - type: html
            source: |
              <iframe
               src="http://127.0.1.1:90/?graph=ram&showPercentage=true&theme=light&color=b1b1b1&surface=f6f6f6&innerRadius=0&textSize=12"
               style="border-radius: 6px; border: 1px solid #E8E8E8;"
               allowtransparency="false"
               frameborder="0"
               height="50"
               width="300">
              </iframe>    
          - type: html
            source: |
              <iframe
               src="http://127.0.1.1:90/?graph=storage&showPercentage=true&theme=light&color=b1b1b1&surface=f6f6f6&innerRadius=0&textSize=12"
               style="border-radius: 6px; border: 1px solid #E8E8E8;"
               allowtransparency="false"
               frameborder="0"
               height="150"
               width="300">
              </iframe>        

And the output like this (lower left corner):