Merge pull request #1621 from sarahd93/statusbar_gsa8

Fix statusbar content can be more than 100 percent
greenbone · Sep 10, 2019 · 6d33596 · 6d33596
2 parents ba1e58e + e46f5d9
commit 6d33596
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
   [#1507](https://github.com/greenbone/gsa/pull/1507)
 
 ### Changed
+- Fix statusbar content can be more than 100% and add progressbar colors to theme [1621](https://github.com/greenbone/gsa/pull/1621)
 - Allow to overwrite details=1 for command results.get() [#1618](https://github.com/greenbone/gsa/pull/1618)
 - Ensure not to request the report details when loading a list of reports [#1617](https://github.com/greenbone/gsa/pull/1617)
 - Adjust ProtList manual links [#1599](https://github.com/greenbone/gsa/pull/1599)

diff --git a/gsa/src/web/components/bar/__tests__/__snapshots__/progressbar.js.snap b/gsa/src/web/components/bar/__tests__/__snapshots__/progressbar.js.snap
@@ -25,7 +25,7 @@ exports[`ProgressBar tests should render 1`] = `
 .c1 {
   height: 13px;
   width: 10%;
-  background: #4F91C7;
+  background: #4f91c7;
 }
 
 @media print {

diff --git a/gsa/src/web/components/bar/__tests__/__snapshots__/severitybar.js.snap b/gsa/src/web/components/bar/__tests__/__snapshots__/severitybar.js.snap
@@ -25,7 +25,7 @@ exports[`SeverityBar tests should render 1`] = `
 .c1 {
   height: 13px;
   width: 95%;
-  background: #C83814;
+  background: #c83814;
 }
 
 @media print {

diff --git a/gsa/src/web/components/bar/__tests__/progressbar.js b/gsa/src/web/components/bar/__tests__/progressbar.js
@@ -20,6 +20,8 @@ import React from 'react';
 
 import {render} from 'web/utils/testing';
 
+import Theme from 'web/utils/theme.js';
+
 import ProgressBar from '../progressbar';
 
 describe('ProgressBar tests', () => {
@@ -72,7 +74,7 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#F0A519');
+    expect(progress).toHaveStyleRule('background', Theme.severityWarnYellow);
   });
 
   test('should render background = error', () => {
@@ -81,7 +83,7 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#C83814');
+    expect(progress).toHaveStyleRule('background', Theme.errorRed);
   });
 
   test('should render background = low', () => {
@@ -90,7 +92,7 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#4F91C7');
+    expect(progress).toHaveStyleRule('background', Theme.severityLowBlue);
   });
 
   test('should render background = new', () => {
@@ -99,7 +101,7 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#99BE48');
+    expect(progress).toHaveStyleRule('background', Theme.statusNewGreen);
   });
 
   test('should render background = run', () => {
@@ -108,7 +110,7 @@ describe('ProgressBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#70C000');
+    expect(progress).toHaveStyleRule('background', Theme.statusRunGreen);
   });
 
   test('should render background = log', () => {

diff --git a/gsa/src/web/components/bar/__tests__/severitybar.js b/gsa/src/web/components/bar/__tests__/severitybar.js
@@ -20,6 +20,8 @@ import React from 'react';
 
 import {render} from 'web/utils/testing';
 
+import Theme from 'web/utils/theme.js';
+
 import SeverityBar from '../severitybar';
 
 describe('SeverityBar tests', () => {
@@ -74,14 +76,14 @@ describe('SeverityBar tests', () => {
     const {getByTestId} = render(<SeverityBar severity="9.5" />);
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#C83814');
+    expect(progress).toHaveStyleRule('background', Theme.errorRed);
   });
 
   test('should render without severity prop', () => {
     const {getByTestId} = render(<SeverityBar />);
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#4F91C7');
+    expect(progress).toHaveStyleRule('background', Theme.severityLowBlue);
     expect(progress).toHaveStyleRule('width', '0%');
   });
 });
diff --git a/gsa/src/web/components/bar/__tests__/statusbar.js b/gsa/src/web/components/bar/__tests__/statusbar.js
@@ -20,6 +20,8 @@ import React from 'react';
 
 import {render} from 'web/utils/testing';
 
+import Theme from 'web/utils/theme.js';
+
 import StatusBar from '../statusbar';
 
 import {TASK_STATUS} from 'gmp/models/task';
@@ -57,21 +59,23 @@ describe('StatusBar tests', () => {
   });
 
   test('should not render progress > 100', () => {
-    const {getByTestId} = render(
+    const {element, getByTestId} = render(
       <StatusBar progress="101" status={TASK_STATUS.stopped} />,
     );
     const progress = getByTestId('progress');
 
     expect(progress).toHaveStyleRule('width', '100%');
+    expect(element).toHaveTextContent('Stopped at 100 %');
   });
 
   test('should not render progress < 0', () => {
-    const {getByTestId} = render(
+    const {element, getByTestId} = render(
       <StatusBar progress="-1" status={TASK_STATUS.stopped} />,
     );
     const progress = getByTestId('progress');
 
     expect(progress).toHaveStyleRule('width', '0%');
+    expect(element).toHaveTextContent('Stopped at 0 %');
   });
 
   test('should render background', () => {
@@ -80,7 +84,7 @@ describe('StatusBar tests', () => {
     );
     const progress = getByTestId('progress');
 
-    expect(progress).toHaveStyleRule('background', '#F0A519');
+    expect(progress).toHaveStyleRule('background', Theme.severityWarnYellow);
   });
 });
 

diff --git a/gsa/src/web/components/bar/progressbar.js b/gsa/src/web/components/bar/progressbar.js
@@ -54,6 +54,16 @@ const Content = styled.div`
   }
 `;
 
+export const adjustProgress = progress => {
+  if (parseInt(progress) > 100) {
+    progress = '100';
+  }
+  if (parseInt(progress) < 0) {
+    progress = '0';
+  }
+  return progress;
+};
+
 const Progress = styled.div`
   height: 13px;
 
@@ -64,25 +74,21 @@ const Progress = styled.div`
     let {background, progress} = props;
 
     if (background === 'warn') {
-      background = '#F0A519';
+      background = Theme.severityWarnYellow;
     } else if (background === 'error') {
-      background = '#C83814';
+      background = Theme.errorRed;
     } else if (background === 'low') {
-      background = '#4F91C7';
+      background = Theme.severityLowBlue;
     } else if (background === 'new') {
-      background = '#99BE48';
+      background = Theme.statusNewGreen;
     } else if (background === 'run') {
-      background = '#70C000';
+      background = Theme.statusRunGreen;
     } else if (background === 'log') {
       background = 'gray';
     }
 
-    if (progress > 100) {
-      progress = 100;
-    }
-    if (progress < 0) {
-      progress = 0;
-    }
+    progress = adjustProgress(progress);
+
     return {
       width: progress + '%',
       background,

diff --git a/gsa/src/web/components/bar/statusbar.js b/gsa/src/web/components/bar/statusbar.js
@@ -28,13 +28,15 @@ import {getTranslatableTaskStatus, TASK_STATUS} from 'gmp/models/task';
 
 import PropTypes from 'web/utils/proptypes.js';
 
-import ProgressBar from './progressbar';
+import ProgressBar, {adjustProgress} from './progressbar';
 
 const Span = styled.span`
   white-space: nowrap;
 `;
 
 const StatusBar = ({status = 'Unknown', progress = '0'}) => {
+  progress = adjustProgress(progress);
+
   let text = getTranslatableTaskStatus(status);
   if (
     status === 'Unknown' ||

diff --git a/gsa/src/web/utils/theme.js b/gsa/src/web/utils/theme.js
@@ -40,10 +40,17 @@ const Theme = {
   mediumLightRed: '#ebccd1', // used by: dialog errors border
   warningRed: '#d83636', // used for warning font color at login dialog
   darkRed: '#a94442', // used by: dialog errors font
+  errorRed: '#c83814', // used by: progressbar
 
   lightBlue: '#bce8f1', // used by InfoPanel and dashboard hovering
   mediumBlue: '#5897fb', // used by active/hovered items in Select
   blue: '#0000ff', // used by: links
+  severityLowBlue: '#4f91c7', // used by: progressbar
+
+  severityWarnYellow: '#f0a519', // used by: progressbar
+
+  statusNewGreen: '#99be48', // used by: progressbar
+  statusRunGreen: '#70c000', // used by: progressbar
 
   /* source ? */
   darkGreen: '#519032', // RGB: 81, 144, 50