Merge pull request #766 from WoTTsecurity/752-fix-glitch-empty-trust

Fix trust score graph when we don't have trustscore yet
WoTTsecurity · Mar 11, 2020 · 5446c3f · 5446c3f
2 parents 1df5502 + edcef6a
commit 5446c3f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/backend/backend/static/scss/_dashboard.scss b/backend/backend/static/scss/_dashboard.scss
@@ -285,6 +285,11 @@
     fill: white;
   }
 
+  .chart-text-calc {
+    font: 4.5px/.8em Muli, Arial, sans-serif;
+    fill: white;
+  }
+
   .graph-half-moon {
     width: 100%;
   }

diff --git a/backend/device_registry/templates/dashboard.html b/backend/device_registry/templates/dashboard.html
@@ -211,20 +211,26 @@ <h3 class="list-subtitle mb-0">{{ action.subtitle }}</h3>
           <circle id="trust-score-circle-segment" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="url(#grad2)" stroke-width="2" stroke-dasharray="75 25" stroke-dashoffset="63"></circle>
           <circle class="graphic-ball" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="white" stroke-dasharray="0.2 99.8" stroke-dashoffset="{{ ball_offset }}" stroke-width="4.5"></circle>
           <circle class="graphic-ball" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#007DD5" stroke-dasharray="0.2 99.8" stroke-dashoffset="{{ ball_offset }}" stroke-width="3"></circle>
-
-          <g class="chart-text">
-            <text id="cve-priority" x="50%" y="50%" class="chart-number">
-              {{ trust_score.current }}
-            </text>
-            <text id="severity-inner-text" x="50%" y="50%" class="chart-label">
-              of 100 <!--HARDCODE-->
-            </text>
-            <text x="50%" y="50%" class="chart-label2">
-            </text>
-            <text x="50%" y="50%" class="chart-label3">
-              good <!--HARCODE-->
-            </text>
-          </g>
+          {% if trust_score.current is None %}
+            <g class="chart-text-calc">
+              <text id="cve-priority" x="50%" y="55%" class="chart-number">
+                Calculating...
+              </text>
+            </g>
+          {% else %}
+            <g class="chart-text">
+              <text id="cve-calculating" x="50%" y="50%" class="chart-number">
+                {{ trust_score.current }}
+              </text>
+              <text id="severity-inner-text" x="50%" y="50%" class="chart-label">
+                of 100 <!--HARDCODE-->
+              </text>
+              <text x="50%" y="50%" class="chart-label2">
+              </text>
+              <text x="50%" y="50%" class="chart-label3">
+                good <!--HARCODE-->
+              </text>
+            </g>
         </svg>
 
       </div>
@@ -234,6 +240,7 @@ <h3 class="list-subtitle mb-0">{{ action.subtitle }}</h3>
         {{ trust_score.delta }}
         OVER THE LAST WEEK
       </div>
+      {% endif %}
     </section>
   </section>
 </div>