Merge pull request #66 from AnglesHQ/ux_and_ui_improvements

Ux and UI improvements
AnglesHQ · Dec 17, 2023 · 60dce8b · 60dce8b
2 parents 5523eb2 + acefe2d
commit 60dce8b
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 82 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
-    <meta name="viewport" content="width=device-width, minimal-scale=1.0, maximum-scale=1.0,">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

diff --git a/src/components/pages/dashboard/charts/ExecutionBarChart.js b/src/components/pages/dashboard/charts/ExecutionBarChart.js
@@ -51,7 +51,7 @@ const defaultOptions = {
     //   },
     // },
   ],
-  colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)', '#2485C1'],
+  colors: ['var(--pass-color)', 'var(--fail-color)', 'var(--error-color)', 'var(--skipped-color)', '#2485C1'],
   legend: { show: true },
 };
 
@@ -91,8 +91,8 @@ const generateResultsData = (builds) => {
       type: 'column',
     },
     {
-      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
-      data: results.SKIPPED,
+      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.fail' }),
+      data: results.FAIL,
       type: 'column',
     },
     {
@@ -101,8 +101,8 @@ const generateResultsData = (builds) => {
       type: 'column',
     },
     {
-      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.fail' }),
-      data: results.FAIL,
+      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
+      data: results.SKIPPED,
       type: 'column',
     },
     // {

diff --git a/src/components/pages/dashboard/charts/ExecutionPieChart.js b/src/components/pages/dashboard/charts/ExecutionPieChart.js
@@ -18,8 +18,12 @@ const defaultOptions = {
       show: true,
     },
   },
-  colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)'],
-  legend: { show: true },
+  colors: ['var(--pass-color)', 'var(--fail-color)', 'var(--error-color)', 'var(--skipped-color)'],
+  legend: {
+    show: true,
+    fontSize: '15px',
+    formatter: (seriesName, opts) => `${seriesName}: <strong> ${opts.w.config.series[opts.seriesIndex]}</strong>`,
+  },
 };
 
 const generatePieChartData = (testRunMetrics) => {
@@ -31,12 +35,12 @@ const generatePieChartData = (testRunMetrics) => {
     error,
   } = testRunMetrics;
   const graphData = {
-    data: [pass || 0, skipped || 0, error || 0, fail || 0],
+    data: [pass || 0, fail || 0, error || 0, skipped || 0],
     labels: [
       intl.formatMessage({ id: 'page.dashboard.chart.barchart.pass' }),
-      intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
-      intl.formatMessage({ id: 'page.dashboard.chart.barchart.error' }),
       intl.formatMessage({ id: 'page.dashboard.chart.barchart.fail' }),
+      intl.formatMessage({ id: 'page.dashboard.chart.barchart.error' }),
+      intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
     ],
   };
   return graphData;

diff --git a/src/components/pages/metrics/charts/ExecutionMetricsResultsBarChart.js b/src/components/pages/metrics/charts/ExecutionMetricsResultsBarChart.js
@@ -35,7 +35,7 @@ const defaultOptions = {
     },
   },
   yaxis: [],
-  colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)'],
+  colors: ['var(--pass-color)', 'var(--fail-color)', 'var(--error-color)', 'var(--skipped-color)'],
   legend: { show: true },
 };
 
@@ -71,8 +71,8 @@ const generateMetricsResultsData = (metrics) => {
       type: 'column',
     },
     {
-      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
-      data: results.SKIPPED,
+      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.fail' }),
+      data: results.FAIL,
       type: 'column',
     },
     {
@@ -81,8 +81,8 @@ const generateMetricsResultsData = (metrics) => {
       type: 'column',
     },
     {
-      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.pass' }),
-      data: results.FAIL,
+      name: intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
+      data: results.SKIPPED,
       type: 'column',
     },
   );

diff --git a/src/components/pages/test-execution-history/charts/TestExecutionsResultPieChart.js b/src/components/pages/test-execution-history/charts/TestExecutionsResultPieChart.js
@@ -17,8 +17,13 @@ const defaultOptions = {
       show: true,
     },
   },
-  colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)'],
-  legend: { show: false },
+  colors: ['var(--pass-color)', 'var(--fail-color)', 'var(--error-color)', 'var(--skipped-color)'],
+  legend: {
+    show: true,
+    fontSize: '14px',
+    formatter: (seriesName, opts) => `${seriesName}: <strong> ${opts.w.config.series[opts.seriesIndex]}</strong>`,
+
+  },
 };
 
 const generateExecutionMetricsPieChartData = (executions) => {
@@ -37,11 +42,11 @@ const generateExecutionMetricsPieChartData = (executions) => {
     SKIPPED,
     ERROR,
   } = result;
-  const data = [PASS, SKIPPED, ERROR, FAIL];
+  const data = [PASS, FAIL, ERROR, SKIPPED];
   const graphData = {
     data,
-    labels: ['PASS', 'SKIPPED', 'ERROR', 'FAIL'],
-    colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)'],
+    labels: ['PASS', 'FAIL', 'ERROR', 'SKIPPED'],
+    colors: ['var(--pass-color)', 'var(--fail-color)', 'var(--error-color)', 'var(--skipped-color)'],
   };
   return graphData;
 };

diff --git a/src/components/pages/test-run/TestRunDetailsPage.js b/src/components/pages/test-run/TestRunDetailsPage.js
@@ -9,6 +9,8 @@ import { saveAs } from 'file-saver';
 import { AiOutlineTeam, AiOutlinePartition } from 'react-icons/ai';
 import { GiSandsOfTime, GiTrafficLightsGreen } from 'react-icons/gi';
 import { BiSolidFlagCheckered } from 'react-icons/bi';
+import { PiMapPinDuotone } from 'react-icons/pi';
+
 import {
   BsJournalCheck,
   BsJournalX,
@@ -291,62 +293,85 @@ const TestRunDetailsPage = function (props) {
                     </Steps>
                   </div>
                   <FlexboxGrid className="test-run-details-grid" justify="space-between">
-                    <Whisper
-                      placement="topStart"
-                      controlId="control-id-hover"
-                      trigger="hover"
-                      speaker={(
-                        <Tooltip>
-                          {intl.formatMessage({ id: 'page.test-run.icons.team.whisper' })}
-                        </Tooltip>
-                      )}
-                    >
-                      <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
-                        <AiOutlineTeam className="test-run-details-icon" />
-                        {currentBuild.team.name}
-                      </FlexboxGrid.Item>
-                    </Whisper>
-                    <Whisper
-                      placement="topStart"
-                      controlId="control-id-hover"
-                      trigger="hover"
-                      speaker={(
-                        <Tooltip>
-                          {intl.formatMessage({ id: 'page.test-run.icons.component.whisper' })}
-                        </Tooltip>
-                      )}
-                    >
-                      <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
-                        <CgExtension className="test-run-details-icon" />
-                        {getComponentName(currentBuild).name}
-                      </FlexboxGrid.Item>
-                    </Whisper>
-                    <Whisper
-                      placement="topEnd"
-                      controlId="control-id-hover"
-                      trigger="hover"
-                      speaker={(
-                        <Tooltip>
-                          {intl.formatMessage({ id: 'page.test-run.icons.phase.whisper' })}
-                        </Tooltip>
-                      )}
-                    >
-                      <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
-                        {
-                          (currentBuild.phase) ? (
-                            <>
-                              <TbTimelineEventText className="test-run-details-icon" />
-                              {currentBuild.phase.name}
-                            </>
-                          ) : (
-                            <>
-                              <TbTimelineEventText className="test-run-details-icon-disabled" />
-                              none
-                            </>
-                          )
-                        }
-                      </FlexboxGrid.Item>
-                    </Whisper>
+                    <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
+                      <Whisper
+                        placement="topStart"
+                        controlId="control-id-hover"
+                        trigger="hover"
+                        speaker={(
+                          <Tooltip>
+                            {intl.formatMessage({ id: 'page.test-run.icons.team.whisper' })}
+                          </Tooltip>
+                        )}
+                      >
+                        <span>
+                          <PiMapPinDuotone className="test-run-details-icon" />
+                          {currentBuild.environment.name}
+                        </span>
+                      </Whisper>
+                    </FlexboxGrid.Item>
+                    <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
+                      <Whisper
+                        placement="topStart"
+                        controlId="control-id-hover"
+                        trigger="hover"
+                        speaker={(
+                          <Tooltip>
+                            {intl.formatMessage({ id: 'page.test-run.icons.component.whisper' })}
+                          </Tooltip>
+                        )}
+                      >
+                        <span>
+                          <CgExtension className="test-run-details-icon" />
+                          {getComponentName(currentBuild).name}
+                        </span>
+                      </Whisper>
+                    </FlexboxGrid.Item>
+                    <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
+                      <Whisper
+                        placement="topStart"
+                        controlId="control-id-hover"
+                        trigger="hover"
+                        speaker={(
+                          <Tooltip>
+                            {intl.formatMessage({ id: 'page.test-run.icons.team.whisper' })}
+                          </Tooltip>
+                        )}
+                      >
+                        <span>
+                          <AiOutlineTeam className="test-run-details-icon" />
+                          {currentBuild.team.name}
+                        </span>
+                      </Whisper>
+                    </FlexboxGrid.Item>
+                    <FlexboxGrid.Item colspan={6} className="test-run-details-grid-item">
+                      <Whisper
+                        placement="topEnd"
+                        controlId="control-id-hover"
+                        trigger="hover"
+                        speaker={(
+                          <Tooltip>
+                            {intl.formatMessage({ id: 'page.test-run.icons.phase.whisper' })}
+                          </Tooltip>
+                        )}
+                      >
+                        <span>
+                          {
+                            (currentBuild.phase) ? (
+                              <>
+                                <TbTimelineEventText className="test-run-details-icon" />
+                                {currentBuild.phase.name}
+                              </>
+                            ) : (
+                              <>
+                                <TbTimelineEventText className="test-run-details-icon-disabled" />
+                                none
+                              </>
+                            )
+                          }
+                        </span>
+                      </Whisper>
+                    </FlexboxGrid.Item>
                   </FlexboxGrid>
                 </Panel>
                 <FlexboxGrid className="test-run-icons-grid">

diff --git a/src/components/pages/test-run/charts/ExecutionPieChart.js b/src/components/pages/test-run/charts/ExecutionPieChart.js
@@ -24,8 +24,12 @@ const defaultOptions = {
       show: true,
     },
   },
-  colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)'],
-  legend: { show: true },
+  colors: ['var(--pass-color)', 'var(--fail-color)', 'var(--error-color)', 'var(--skipped-color)'],
+  legend: {
+    show: true,
+    fontSize: '15px',
+    formatter: (seriesName, opts) => `${seriesName}: <strong> ${opts.w.config.series[opts.seriesIndex]}</strong>`,
+  },
 };
 
 const generateExecutionMetricsPieChartData = (currentBuild) => {
@@ -37,14 +41,14 @@ const generateExecutionMetricsPieChartData = (currentBuild) => {
       SKIPPED,
       ERROR,
     } = currentBuild.result;
-    const data = [PASS, SKIPPED, ERROR, FAIL];
+    const data = [PASS, FAIL, ERROR, SKIPPED];
     const graphData = {
       data,
       labels: [
         intl.formatMessage({ id: 'page.dashboard.chart.barchart.pass' }),
-        intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
-        intl.formatMessage({ id: 'page.dashboard.chart.barchart.error' }),
         intl.formatMessage({ id: 'page.dashboard.chart.barchart.fail' }),
+        intl.formatMessage({ id: 'page.dashboard.chart.barchart.error' }),
+        intl.formatMessage({ id: 'page.dashboard.chart.barchart.skipped' }),
       ],
       colors: ['var(--pass-color)', 'var(--skipped-color)', 'var(--error-color)', 'var(--fail-color)'],
     };

diff --git a/src/components/pages/test-run/styles.less b/src/components/pages/test-run/styles.less
@@ -100,6 +100,9 @@
     :nth-child(2) {
       text-align: center;
     }
+    :nth-child(3) {
+      text-align: center;
+    }
     :last-child {
       text-align: right;
     }