Diff highlighting

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [8.0.2] - unreleased
 
 ### Added
+- Highlight result diffs at delta reports [#1513](https://github.com/greenbone/gsa/pull/1513)
 - Added HorizontalSep component for horizontal lists
   [#1506](https://github.com/greenbone/gsa/pull/1506),
   [#1507](https://github.com/greenbone/gsa/pull/1507)

gsa/src/web/pages/results/__tests__/__snapshots__/diff.js.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Diff component tests should render 1`] = `
+.c0 {
+  white-space: pre-wrap;
+  word-wrap: normal;
+  font-family: monospace;
+}
+
+.c2 {
+  background-color: #ffeef0;
+}
+
+.c3 {
+  background-color: #e6ffed;
+}
+
+.c1 {
+  color: rgba(0,0,0,0.3);
+}
+
+<div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c1 c0"
+  >
+    @@ -1,9 +1,14 @@
+  </div>
+  <div
+    class="c2 c0"
+  >
+    -Remote SSH server version: SSH-2.0-OpenSSH_7.6p1 Ubuntu-4
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +Remote SSH server banner: SSH-2.0-OpenSSH_7.6p1 Ubuntu-4ubuntu0.3
+  </div>
+  <div
+    class="c0"
+  >
+     Remote SSH supported authentication: password,publickey
+  </div>
+  <div
+    class="c2 c0"
+  >
+    -Remote SSH banner: (not available)
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +Remote SSH text/login banner: (not available)
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +This is probably:
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +- OpenSSH
+  </div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c0"
+  >
+     CPE: cpe:/a:openbsd:openssh:7.6p1
+  </div>
+  <div
+    class="c0"
+  />
+  <div
+    class="c0"
+  >
+     Concluded from remote connection attempt with credentials:
+  </div>
+  <div
+    class="c2 c0"
+  >
+    -  Login: VulnScan
+  </div>
+  <div
+    class="c2 c0"
+  >
+    -  Password: VulnScan
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +Login:    OpenVAS-VT
+  </div>
+  <div
+    class="c3 c0"
+  >
+    +Password: OpenVAS-VT
+  </div>
+  <div
+    class="c0"
+  />
+</div>
+`;

gsa/src/web/pages/results/__tests__/diff.js

@@ -0,0 +1,54 @@
+/* Copyright (C) 2019 Greenbone Networks GmbH
+ *
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import React from 'react';
+
+import {render} from 'web/utils/testing';
+
+import Diff from '../diff';
+
+const diff = `
+@@ -1,9 +1,14 @@
+-Remote SSH server version: SSH-2.0-OpenSSH_7.6p1 Ubuntu-4
++Remote SSH server banner: SSH-2.0-OpenSSH_7.6p1 Ubuntu-4ubuntu0.3
+ Remote SSH supported authentication: password,publickey
+-Remote SSH banner: (not available)
++Remote SSH text/login banner: (not available)
++
++This is probably:
++
++- OpenSSH
+
+ CPE: cpe:/a:openbsd:openssh:7.6p1
+
+ Concluded from remote connection attempt with credentials:
+-  Login: VulnScan
+-  Password: VulnScan
++
++Login:    OpenVAS-VT
++Password: OpenVAS-VT
+`;
+
+describe('Diff component tests', () => {
+  test('should render', () => {
+    const {container} = render(<Diff>{diff}</Diff>);
+
+    expect(container).toMatchSnapshot();
+  });
+});

gsa/src/web/pages/results/details.js

@@ -48,6 +48,8 @@ import References from '../nvts/references';
 import Solution from '../nvts/solution';
 import P from '../nvts/preformatted';
 
+import Diff from './diff';
+
 /*
  security and log messages from nvts are converted to results
  results should preserve newlines AND whitespaces for formatting
@@ -107,9 +109,11 @@ const ResultDetails = ({className, links = true, entity}) => {
           </div>
           <div>
             <h3>{_('Different Lines')}</h3>
-            <Pre>
-              {isDefined(result.delta.diff) ? result.delta.diff : _('N/A')}
-            </Pre>
+            {isDefined(result.delta.diff) ? (
+              <Diff>{result.delta.diff}</Diff>
+            ) : (
+              <Pre>{_('N/A')}</Pre>
+            )}
           </div>
         </DetailsBlock>
       ) : (

gsa/src/web/pages/results/diff.js

@@ -0,0 +1,68 @@
+/* Copyright (C) 2019 Greenbone Networks GmbH
+ *
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+import React from 'react';
+
+import styled from 'styled-components';
+
+import {isString} from 'gmp/utils/identity';
+
+const Pre = styled.div`
+  white-space: pre-wrap;
+  word-wrap: normal;
+  font-family: monospace;
+`;
+
+const Removed = styled(Pre)`
+  background-color: #ffeef0;
+`;
+
+const Added = styled(Pre)`
+  background-color: #e6ffed;
+`;
+
+const Info = styled(Pre)`
+  color: rgba(0, 0, 0, 0.3);
+`;
+
+const Diff = ({children: diffString}) => {
+  if (!isString(diffString)) {
+    return null;
+  }
+
+  const lines = diffString.split(/\r|\n|\r\n/);
+  return (
+    <React.Fragment>
+      {lines.map((line, i) => {
+        let Component;
+        if (line.startsWith('+')) {
+          Component = Added;
+        } else if (line.startsWith('-')) {
+          Component = Removed;
+        } else if (line.startsWith('@')) {
+          Component = Info;
+        } else {
+          Component = Pre;
+        }
+        return <Component key={i}>{line}</Component>;
+      })}
+    </React.Fragment>
+  );
+};
+
+export default Diff;