Fixed #55

Author: Rafael Grigorian

Block/Adminhtml/Template.php

@@ -5,6 +5,7 @@
 	use Magento\Framework\View\Element\Template as BaseTemplate;
 	use Magento\Framework\View\Element\Template\Context;
 	use Magento\Framework\App\DeploymentConfig;
+	use Magento\Framework\App\ProductMetadataInterface;
 	use JetRails\Varnish\Helper\Data as Helper;
 
 	/**
@@ -23,11 +24,13 @@ public function __construct (
 			Context $context,
 			Helper $helper,
 			DeploymentConfig $config,
+			ProductMetadataInterface $metadata,
 			array $data = []
 		) {
 			parent::__construct ( $context, $data );
 			$this->helper = $helper;
 			$this->config = $config;
+			$this->metadata = $metadata;
 		}
 
 	}

view/adminhtml/templates/configuration.phtml

@@ -115,15 +115,23 @@
 					<table>
 						<tr>
 							<th width="33.33%" >Varnish Server</th>
-							<th width="33.33%" >Magento Version</th>
-							<th width="33.33%" >Module Version</th>
+							<th width="33.33%" >Generated VCL With Magento Version</th>
+							<th width="33.33%" >Generated VCL With Module Version</th>
+							<th width="33.33%" >Update Needed</th>
 						</tr>
 						<?php if ( $edited ): ?>
 							<?php foreach ( $servers as $index => $server ): ?>
 								<tr>
 									<td><?= $server->host . ":" . $server->port ?></td>
-									<td><?= $server->magento ?></td>
-									<td><?= $server->version ?></td>
+									<td><span class="tag <?= $server->magento == $block->metadata->getVersion () ? "match" : "no-match" ?>" ><?= $server->magento ?></span></td>
+									<td><span class="tag <?= $server->version == $block->helper->getModuleVersion () ? "match" : "no-match" ?>" ><?= $server->version ?></span></td>
+									<td>
+									<?=
+										$server->magento == $block->metadata->getVersion () &&
+										$server->version == $block->helper->getModuleVersion ()
+										? "No" : "Yes"
+									?>
+									</td>
 								</tr>
 							<?php endforeach; ?>
 						<?php else: ?>

view/adminhtml/web/css/styles.css

@@ -241,6 +241,24 @@ section.varnish .card .method-container .tray img {
 	border: solid 1px #E6E6E6;
 }
 
+section.varnish .tag {
+	background-color: #F3F2F1;
+	border-radius: 3px;
+	padding: 1px 4px;
+	position: relative;
+}
+
+section.varnish .tag.no-match::after {
+	position: absolute;
+	top: -2px;
+	right: -5px;
+	height: 8px;
+	width: 8px;
+	content: "";
+	background-color: #DC5549;
+	border-radius: 5px;
+}
+
 section.varnish table {
 	width: 100%;
 }