Step 4 – Create server based files for pre and post files comparison
The final step is to create a web page that retrieves the text from these files and also provides frontend (or a web-based tool) for easy comparison. For our purpose, we use a JScript library called diffview . To call this dependency, we need to download diffview.js, difflib.js, and diffview.css which available here: https://github.com/cemerick/jsdifflib, and copy the files into our web server folder. Once done, in the similar way as accessing the files, we would again create a .aspx page to get the content of the selected files and display it for comparison.
The following is the code of the main page comparefiles.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="comparefiles.aspx.vb" Inherits="comparefiles" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<link rel="stylesheet" type="text/css" href="diffview.css"/>
<script type="text/javascript" src="diffview.js"></script>
<script type="text/javascript" src="difflib.js"></script>
<style type="text/css">
body {
font-size: 12px;
font-family: Sans-Serif;
}
h2 {
margin: 0.5em 0 0.1em;
text-align: center;
}
.top {
text-align: center;
}
.textInput {
display: block;
width: 49%;
float: left;
}
textarea {
width:100%;
height:300px;
}
label:hover {
text-decoration: underline;
cursor: pointer;
}
.spacer {
margin-left: 10px;
}
.viewType {
font-size: 16px;
clear: both;
text-align: center;
padding: 1em;
}
#diffoutput {
width: 100%;
}
</style>
<script type="text/javascript">
function diffUsingJS(viewType) {
"use strict";
var byId = function (id) { return document.getElementById(id); },
base = difflib.stringAsLines(byId("baseText").value),
newtxt = difflib.stringAsLines(byId("newText").value),
sm = new difflib.SequenceMatcher(base, newtxt),
opcodes = sm.get_opcodes(),
diffoutputdiv = byId("diffoutput"),
contextSize = byId("contextSize").value;
diffoutputdiv.innerHTML = "";
contextSize = contextSize || null;
diffoutputdiv.appendChild(diffview.buildView({
baseTextLines: base,
newTextLines: newtxt,
opcodes: opcodes,
baseTextName: "Base Text",
newTextName: "New Text",
contextSize: contextSize,
viewType: viewType
}));
}
</script>
</head>
<body>
<div class="top">
<strong>Context size (optional):</strong> <input type="text" id="contextSize" value="" />
</div>
<div class="textInput">
<h2>Pre check</h2>
<textarea id="baseText" runat="server" readonly></textarea>
</div>
<div class="textInput spacer">
<h2>Post check</h2>
<textarea id="newText" runat="server" readonly></textarea>
</div>
<% Response.Write(xmystring.ToString()) %>
<div class="viewType">
<input type="radio" name="_viewtype" id="sidebyside" onclick="diffUsingJS(0);" /> <label for="sidebyside">Side by Side Diff</label>
&amp;amp;nbsp;
<input type="radio" name="_viewtype" id="inline" onclick="diffUsingJS(1);" /> <label for="inline">Inline Diff</label>
</div>
<div id="diffoutput"> </div>
</body>
</html>
The backend code for the main page, to get the contents of the file (comparefiles.aspx.vb), is as follows:
Imports System.IO
Partial Class comparefiles
Inherits System.Web.UI.Page
Public xmystring As New StringBuilder()
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim fp As StreamReader
Dim precheck As New List(Of String)
Dim postcheck As New List(Of String)
xmystring.Clear()
Dim prefile As String
Dim postfile As String
prefile = Request.Form("prechecklist")
postfile = Request.Form("postchecklist")
fp = File.OpenText(prefile)
baseText.InnerText = fp.ReadToEnd()
fp = File.OpenText(postfile)
newText.InnerText = fp.ReadToEnd()
fp.Close()
End Sub
End Class
With this ready, let's compare the files and see the results. We select the pre and post check files and click on Submit:
The next page takes us to the content and comparison:
As we see in the preceding screenshot, on the left, we have the precheck file, and on the right, we have the postcheck file. Both can be read on the page itself through slides on both windows. The bottom window appears when we select either Side by Side Diff or Inline Diff.
On a Side by Side Diff, anything that is different will be highlighted. In our case it was uptime that was different. For everything else in common, no color highlighting will be in place and an engineer can safely assume the same states for non highlighted colors.
Let's see the same example with a Inline Diff comparison selection:
It is the same result; different lines are highlighted in different colors to confirm the pre and post check differences. With this tool now, an engineer can quickly parse through the entire log files, and based on the highlighted differences (a mismatch between precheck file content and postcheck file content), can make the decision to call the task a success or a failure.