Merge pull request #196 from SAP/sample_update

Update sample app with new features

Author: nicklas-dohrn

sample/cf-nodejs-logging-support-sample/app.js

@@ -1,6 +1,7 @@
 const express = require("express");
-var log = require("cf-nodejs-logging-support");
+const log = require("cf-nodejs-logging-support");
 const app = express();
+var lastMessage = null;
 
 // roots the views directory to public
 app.set('views', 'public');
@@ -13,6 +14,11 @@ app.use(express.static(__dirname + "/public"));
 // add logger to the server network queue to log all incoming requests.
 app.use(log.logNetwork);
 
+log.setSinkFunction((_, msg) => {
+  lastMessage = msg
+  console.log(msg)
+});
+
 // set the logging level threshold
 log.setLoggingLevel("info");
 
@@ -39,22 +45,29 @@ app.get("/", function (req, res) {
 // https://sap.github.io/cf-nodejs-logging-support/general-usage/logging-contexts#global-context
 app.get("/globalcontext", function (req, res) {
   log.info("Message logged in global context");
-  res.send();
+  res.send(lastMessage);
 });
 
 // demonstrate log in request context
 // https://sap.github.io/cf-nodejs-logging-support/general-usage/logging-contexts#request-context
 app.get("/requestcontext", function (req, res) {
   var reqLogger = req.logger; // reqLogger logs in request context
   reqLogger.info("Message logged in request context");
-  res.send();
+  res.send(lastMessage);
 });
 
 // log message with some custom fields in global context 
 // https://sap.github.io/cf-nodejs-logging-support/general-usage/custom-fields
 app.get("/customfields", function (req, res) {
   log.info("Message logged in global context with some custom fields", { "custom-field-a": "value-a", "custom-field-b": "value-b" });
-  res.send();
+  res.send(lastMessage);
+});
+
+// log message with some custom fields in global context 
+// https://sap.github.io/cf-nodejs-logging-support/general-usage/custom-fields
+app.get("/passport", function (req, res) {
+  log.info("Message with passport", { "sap_passport": "2A54482A0300E60000756E64657465726D696E6564202020202020202020202020202020202020202000005341505F4532455F54415F557365722020202020202020202020202020202020756E64657465726D696E65645F737461727475705F302020202020202020202020202020202020200005756E64657465726D696E6564202020202020202020202020202020202020202034323946383939424439414334374342393330314345463933443144453039432020200007793BCF7D8152423B8A7FD073109C45CE0000000000000000000000000000000000000000000000E22A54482A" });
+  res.send(lastMessage);
 });
 
 // demonstrate an error stack trace logging
@@ -65,7 +78,7 @@ app.get("/stacktrace", function (req, res) {
     res.send("request succesful");
   } catch (e) {
     log.error("Error occurred", e)
-    res.status(500).send("error ocurred");
+    res.status(500).send(lastMessage);
   }
 });
 
@@ -79,7 +92,7 @@ app.get("/childlogger", function (req, res) {
   var subLogger = log.createLogger({ "new-field": "value" });
   subLogger.setLoggingLevel("warn");
   subLogger.warn("Message logged from child logger.");
-  res.send();
+  res.send(lastMessage);
 });
 
 // get the correlation and tenant ID by calling req.logger.getCorrelationId() and .getTenantId()
@@ -89,9 +102,23 @@ app.get("/correlationandtenantid", function (req, res) {
   var correlationId = reqLogger.getCorrelationId();
   var tenantId = reqLogger.getTenantId();
   reqLogger.info("Correlation ID: %s Tenant ID: %s", correlationId, tenantId);
-  res.send();
+  res.send(lastMessage);
 });
 
+app.get("/binding_information", function (_, res) {
+  result = "There are the following bindings: <br>"
+  var services
+  if (process.env.VCAP_SERVICES)
+    services = JSON.parse(process.env.VCAP_SERVICES)
+  if (services == undefined)
+    res.send("There are no bindings present for this application")
+  else {
+    for (var service in services)
+      result += service + "<br>"
+    res.send(result)
+  }
+})
+
 
 // binds the express module to 'app', set port and run server
 var port = Number(process.env.VCAP_APP_PORT || 8080);

sample/cf-nodejs-logging-support-sample/public/index.html

@@ -11,10 +11,10 @@
 </head>
 
 <body>
+    <div class="title">cf-nodejs-logging-support | sample app</div>
     <div class="main-container">
-        <h1 class="title">cf-nodejs-logging-support | sample app</h1>
         <div id="buttons-container" class="buttons-container">
-            <h2 class="subtitle">Buttons to test functionalities:</h2>
+            <div class="subtitle">Use buttons to send test logs:</div>
             <button class="btn" targetpath="globalcontext" type="submit">Log message in global
         context</button>
             <button class="btn" targetpath="requestcontext" type="submit">Log message in request
@@ -27,6 +27,13 @@ <h2 class="subtitle">Buttons to test functionalities:</h2>
             <button class="btn" targetpath="childlogger" type="submit">Logs from child logger</button>
             <button class="btn" targetpath="correlationandtenantid" type="submit">Logs Correlation-
         and Tenant-ID</button>
+        </div>
+        <div id="feedback-container" class="feedback-container">
+            <div class="subtitle">The message sent:</div>
+            <div class="feedback-box" id="feedback">
+            </div>
+            <div class="subtitle">Binding information:</div>
+            <div class="feedback-box" id="binding_information">
             <a href="https://sap.github.io/cf-nodejs-logging-support/">Visit Documentation</a>
         </div>
     </div>

sample/cf-nodejs-logging-support-sample/public/scripts/logic.js

@@ -1,13 +1,33 @@
 document.addEventListener('DOMContentLoaded', () => {
 
     const collection = Array.from(document.getElementsByClassName("btn"));
+    const feedback = document.getElementById("feedback");
+    const binding = document.getElementById("binding_information");
+
+    // Getting currently working binding information
+    var xhttp = new XMLHttpRequest();
+    xhttp.open("GET", "binding_information");
+    xhttp.send();
+    xhttp.onreadystatechange = function() {
+        if (xhttp.readyState == XMLHttpRequest.DONE) {
+            console.log("testing")
+            console.log(xhttp.responseText)
+            binding.innerHTML = xhttp.responseText
+        }
+    }
 
     collection.forEach(
         (element) => {
             element.addEventListener("click", () => {
                 var xhttp = new XMLHttpRequest();
                 xhttp.open("GET", element.getAttribute('targetpath'));
                 xhttp.send();
+                xhttp.onreadystatechange = function() {
+                    if (xhttp.readyState == XMLHttpRequest.DONE) {
+                        console.log(xhttp.responseText)
+                        feedback.innerHTML= xhttp.responseText;
+                    }
+                }
             });
         }
     );

sample/cf-nodejs-logging-support-sample/public/styles/style.css

@@ -3,40 +3,40 @@ body {
 }
 
 .main-container {
-    text-align: center!important;
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .title {
     color: rgb(33, 37, 41);
     display: block;
     font-size: 2.5rem;
     font-weight: 700!important;
-    margin-bottom: 1rem!important;
-    margin-block-start: 0.67em;
-    margin-block-end: 0.67em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
     margin-top: 0;
+    text-align: center;
 }
 
 .subtitle {
     color: rgb(33, 37, 41);
     display: block;
     font-size: 2rem;
     font-weight: 400;
-    margin-block-start: 0.83em;
-    margin-block-end: 0.63em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
+    margin-top: 20px!important;
     margin-top: 0;
+    text-align: center;
 }
 
 .buttons-container {
-    display: inline-block;
+    max-width: 450px;
+    margin: 10px;
 }
 
-.buttons-container>* {
-    max-width: 450px;
+.feedback-container {
+    max-width: 900px;
+    margin: 10px;
 }
 
 .btn {
@@ -63,6 +63,25 @@ body {
     overflow: visible;
 }
 
+.feedback-box {
+    text-align: left;
+    margin-top: 0.5rem;
+    display: block;
+    padding: 0.5rem 1rem;
+    line-height: 1.5;
+    border-radius: 0.3rem;
+    background-color: #dadada;
+    font-weight: 200;
+    user-select: all;
+    border: 1px solid #dcdcdc;
+    text-transform: none;
+    overflow: auto;
+}
+
+.btn:active {
+    background-color: #3f9cff;
+}
+
 a {
     color: #007bff;
     cursor: pointer;