T157 Message info loaded in list

.idea/workspace.xml

@@ -21,6 +21,7 @@
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/resources/static/css/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/css/main.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/datatransfer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/datatransfer.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -305,7 +306,7 @@
       <workItem from="1611659140629" duration="2109000" />
       <workItem from="1611757446709" duration="6743000" />
       <workItem from="1611826821050" duration="10679000" />
-      <workItem from="1611915874625" duration="3918000" />
+      <workItem from="1611915874625" duration="6344000" />
     </task>
     <task id="LOCAL-00077" summary="testing jenkins docker">
       <created>1601453886631</created>

src/main/resources/static/css/main.css

@@ -155,13 +155,15 @@
 .menuItem {
     width: 174px;
     padding: 13px;
-    font-size: 24px;
-    text-align: center;
+    font-size: 12px;
+    text-align: left;
     margin-bottom: 5px;
     border: 1px solid lightgray;
     cursor: pointer;
 }
 
+
+
 .menuFactory {
     color: lightgray;
 }
@@ -175,8 +177,8 @@
 .menuItemSelected {
     width: 174px;
     padding: 13px;
-    font-size: 24px;
-    text-align: center;
+    font-size: 12px;
+    text-align: left;
     margin-bottom: 5px;
     border: 1px solid lightgray;
     background: gray;

src/main/resources/static/js/datatransfer.js

@@ -6,7 +6,7 @@ function getData(uuid){
                         , json[0].messageBody
                         , json[0].httpStatus);
        fillHeaderTable(json[0].httpHeaders);
-
+       fillMessageList(json);
     });
 }
 
@@ -55,4 +55,18 @@ function generateHeaderTable(headers){
     return innerHTML;
 }
 
+function fillMessageList(json){
+    var innerHTML = generateMessageTileHtml(json[0].mockedResponseId, json[0].httpStatus, json[0].mediaType);
+    $("#listItems").append(innerHTML);
+}
+
+function generateMessageTileHtml(id, httpStatus, mediaType){
+    var innerHTML = '<div class="menuItem">' +
+        '<table><tr><td>Id: '+ id +'</td></tr>' +
+        '<tr><td>Content-type: '+mediaType+'</td></tr>' +
+        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
+        '</table></div>';
+    return innerHTML;
+}
+
 $(document).ready(getData());