Updating annotations directive to always display Show/Hide Annotations link

and adding message “There are no annotations on this resource.” if
there are no annotations.

Resolves openshift/origin#7643

Author: rhamilto

app/views/directives/annotations.html

@@ -1,21 +1,28 @@
-<div ng-if="annotations" class="gutter-top-bottom">
-  <a href="" ng-click="toggleAnnotations()" ng-if="annotations && !expandAnnotations">Show annotations</a>
-  <a href="" ng-click="toggleAnnotations()" ng-if="annotations && expandAnnotations">Hide annotations</a>
-  <div ng-if="expandAnnotations" class="table-responsive" style="margin-top: 5px;">
-    <table class="table table-bordered table-bordered-columns key-value-table">
-      <tbody>
-        <tr ng-repeat="(annotationKey, annotationValue) in annotations">
-          <td class="key">{{annotationKey}}</td>
-          <td class="value">
-            <truncate-long-text
-                content="annotationValue | prettifyJSON"
-                limit="500"
-                newlineLimit="20"
-                expandable="true">
-            </truncate-long-text>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+<div class="gutter-top-bottom">
+  <p>
+    <a href="" ng-click="toggleAnnotations()" ng-if="!expandAnnotations">Show annotations</a>
+    <a href="" ng-click="toggleAnnotations()" ng-if="expandAnnotations">Hide annotations</a>
+  </p>
+  <div ng-if="expandAnnotations">
+    <div ng-if="annotations" class="table-responsive">
+      <table class="table table-bordered table-bordered-columns key-value-table">
+        <tbody>
+          <tr ng-repeat="(annotationKey, annotationValue) in annotations">
+            <td class="key">{{annotationKey}}</td>
+            <td class="value">
+              <truncate-long-text
+                  content="annotationValue | prettifyJSON"
+                  limit="500"
+                  newlineLimit="20"
+                  expandable="true">
+              </truncate-long-text>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p ng-if="!annotations">
+      There are no annotations on this resource.
+    </p>
   </div>
 </div>

dist/scripts/templates.js

@@ -5321,10 +5321,13 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/annotations.html',
-    "<div ng-if=\"annotations\" class=\"gutter-top-bottom\">\n" +
-    "<a href=\"\" ng-click=\"toggleAnnotations()\" ng-if=\"annotations && !expandAnnotations\">Show annotations</a>\n" +
-    "<a href=\"\" ng-click=\"toggleAnnotations()\" ng-if=\"annotations && expandAnnotations\">Hide annotations</a>\n" +
-    "<div ng-if=\"expandAnnotations\" class=\"table-responsive\" style=\"margin-top: 5px\">\n" +
+    "<div class=\"gutter-top-bottom\">\n" +
+    "<p>\n" +
+    "<a href=\"\" ng-click=\"toggleAnnotations()\" ng-if=\"!expandAnnotations\">Show annotations</a>\n" +
+    "<a href=\"\" ng-click=\"toggleAnnotations()\" ng-if=\"expandAnnotations\">Hide annotations</a>\n" +
+    "</p>\n" +
+    "<div ng-if=\"expandAnnotations\">\n" +
+    "<div ng-if=\"annotations\" class=\"table-responsive\">\n" +
     "<table class=\"table table-bordered table-bordered-columns key-value-table\">\n" +
     "<tbody>\n" +
     "<tr ng-repeat=\"(annotationKey, annotationValue) in annotations\">\n" +
@@ -5337,6 +5340,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</tbody>\n" +
     "</table>\n" +
     "</div>\n" +
+    "<p ng-if=\"!annotations\">\n" +
+    "There are no annotations on this resource.\n" +
+    "</p>\n" +
+    "</div>\n" +
     "</div>"
   );