Set unique identifier for Django messages

Messages details template should have unique IDs to get
collapse/expand working.

Change-Id: Ia9ff81694fc7a84417ea2c998721475332a7e772
Closes: Bug #1895570

horizon/karma.conf.js

@@ -81,6 +81,7 @@ module.exports = function (config) {
 
       // from jasmine_tests.py; only those that are deps for others
       'horizon/js/horizon.js',
+      'horizon/js/horizon.uuid.js',
 
       /**
        * First, list all the files that defines application's angular modules.

horizon/static/framework/util/uuid/uuid.js

@@ -27,19 +27,8 @@
    * have unique IDs for interactions.
    */
   function uuidService() {
-    var service = {
+    return {
-      generate: generate
+      generate: horizon.uuid.generate
     };
-    return service;
-
-    function generate() {
-      var d = new Date().getTime();
-      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-        var r = (d + Math.random() * 16) % 16 | 0;
-        d = Math.floor(d / 16);
-        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
-      });
-      return uuid;
-    }
   }
 })();

horizon/static/horizon/js/horizon.messages.js

@@ -39,9 +39,11 @@ horizon.alert = function (type, message, extra_tags, details) {
     return str.split('\u2026');
   }
 
+  var id = horizon.uuid.generate();
   var template = horizon.templates.compiled_templates["#alert_message_template"],
     params = {
       "type": type || 'default',
+      "id": id,
       "type_display": type_display,
       "message": message,
       "safe": safe,

horizon/static/horizon/js/horizon.uuid.js

@@ -0,0 +1,27 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License. You may obtain
+ * a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+horizon.uuid = {
+
+  generate: function() {
+    var d = new Date().getTime();
+    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random() * 16) % 16 | 0;
+      d = Math.floor(d / 16);
+      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+    return uuid;
+  }
+};
+

horizon/templates/horizon/_messages.html

@@ -35,9 +35,9 @@
         {% with message.message|split_message as messages %}
         <strong>{% trans "Error: " %}</strong>{{ messages|first }}
           {% if messages|length > 1 %}
-            <a href="#message_details"  data-toggle="collapse"
+            <a href="#message_details" data-toggle="collapse"
-            data-target="#message_details">Details</a>
+             data-target="#message_details_{{ forloop.counter }}">Details</a>
-            <div id="message_details" class="collapse">
+            <div id="message_details_{{ forloop.counter }}" class="collapse">
               {{ messages|last }}
             </div>
           {% endif %}

horizon/templates/horizon/client_side/_alert_message.html

@@ -16,8 +16,8 @@
     [[^safe]]
       [[message]]
       <a id="details_link" href="#message_details"  data-toggle="collapse"
-         data-target="#message_details">Details</a>
+         data-target="#message_details_[[id]]">Details</a>
-      <div id="message_details" class="collapse">
+      <div id="message_details_[[id]]" class="collapse">
       [[details]]
       </div>
     [[/safe]]

openstack_dashboard/templates/horizon/_scripts.html

@@ -28,6 +28,7 @@
 <script src='{{ STATIC_URL }}horizon/js/horizon.messages.js'></script>
 <script src='{{ STATIC_URL }}horizon/js/horizon.modals.js'></script>
 <script src='{{ STATIC_URL }}horizon/js/horizon.hacks.js'></script>
+<script src='{{ STATIC_URL }}horizon/js/horizon.uuid.js'></script>
 <script type="text/javascript">
   horizon.modals.MODAL_BACKDROP = "{% firstof HORIZON_CONFIG.modal_backdrop 'static' %}";
 </script>