feat: add web-ui version (Decathlon#460)

* feat: add web-ui version * chore: add noopener on href target _blank
kisskool057 · Jul 7, 2021 · 1ddcfaf · 1ddcfaf
1 parent 6699225
commit 1ddcfaf
Show file tree

Hide file tree

Showing 20 changed files with 107 additions and 60 deletions.
diff --git a/code/api/api/src/main/resources/templates/mail/html/nrt-cycle.html b/code/api/api/src/main/resources/templates/mail/html/nrt-cycle.html
@@ -70,7 +70,7 @@
                         NO DATA
                         <span th:if="${execution.status}" th:class="${execution.status}">([[${#strings.toLowerCase(execution.status)}]])</span>
                         <span th:if="${execution.result}" th:class="${execution.result}">([[${#strings.toLowerCase(execution.result)}]])</span>
-                        <a th:href="${execution.jobUrl + 'console'}" target="_blank" style="text-decoration: none;">
+                        <a th:href="${execution.jobUrl + 'console'}" rel="noopener" target="_blank" style="text-decoration: none;">
                             <span class="Button" style="margin-left: 8px;">SHOW LOGS</span>
                         </a>
                     </div>

diff --git a/code/api/api/src/main/resources/templates/mail/html/nrt-run.html b/code/api/api/src/main/resources/templates/mail/html/nrt-run.html
@@ -42,7 +42,7 @@
                                     </th:block>
                                     <span th:if="${countryDeployment.status}" th:class="${countryDeployment.status}">([[${#strings.toLowerCase(countryDeployment.status)}]])</span>
                                     <span th:if="${countryDeployment.result}" th:class="${countryDeployment.result}">([[${#strings.toLowerCase(countryDeployment.result)}]])</span>
-                                    <a th:if="${countryDeployment.jobUrl}" th:href="${countryDeployment.jobUrl + 'console'}" target="_blank" style="text-decoration: none;">
+                                    <a th:if="${countryDeployment.jobUrl}" th:href="${countryDeployment.jobUrl + 'console'}" rel="noopener" target="_blank" style="text-decoration: none;">
                                         <span class="Button" style="margin-left: 8px;">SHOW LOGS</span>
                                     </a>
                                 </div>
@@ -51,7 +51,7 @@
                                     <span th:if="${run.status.name() == 'DONE'}" style="color: #ED3F14;">
                                         No result (test failed to launch, initialize or report)
                                     </span>
-                                    <a th:if="${run.jobUrl}" th:href="${run.jobUrl + 'console'}" target="_blank" style="text-decoration: none;">
+                                    <a th:if="${run.jobUrl}" th:href="${run.jobUrl + 'console'}" rel="noopener" target="_blank" style="text-decoration: none;">
                                         <span class="Button" style="margin-left: 8px;">SHOW LOGS</span>
                                     </a>
                                 </div>

diff --git a/code/web-ui/Makefile b/code/web-ui/Makefile
@@ -3,6 +3,7 @@
 #####################################
 
 NODE_VERSION=12
+FULL_IMAGE?=decathlon/ara-web-ui
 
 #####################################
 ##             DEVELOP             ##
@@ -31,7 +32,7 @@ dkr-install: ## DEV - install project with docker
 
 dkr-run: ## DEV - run web-ui with docker
 	@docker container run -it --name ara-web-ui --rm \
-        --network="host" \
+        -p 8081:8081 \
 				--user $(shell id -u):$(shell id -g) \
         -v $${HOME}/.ara-web:/var/node:rw \
         -e HOME=/var/node \
@@ -45,7 +46,7 @@ dkr-run: ## DEV - run web-ui with docker
 
 dkr-shell: ## Start a shell in docker node container
 	@docker container run -it --rm --name ara-node-$(NODE_VERSION)  \
-			--network=host \
+			-p 8081:8081 \
 			--user $(shell id -u):$(shell id -g) \
 			-v $${HOME}/.ara-web:/var/node:rw \
 			-e HOME=/var/node \
@@ -73,13 +74,6 @@ dkr-build: ## DEV - build web-ui with docker
 #####################################
 
 dkr-build-image:
-	@mkdir -p static/version
-	@SHA=$(shell git rev-parse --short HEAD) && \
-	 WEB_VERSION=$(shell cat package.json | jq -r '.version') && \
-	 jq -n	--arg version $$WEB_VERSION \
-					--arg sha $$SHA \
-					-f build/template/about.jq > \
-					static/version/about.json
 	@docker build -t $(FULL_IMAGE) .
 
 #####################################

diff --git a/code/web-ui/build/template/about.jq b/code/web-ui/build/template/about.jq
diff --git a/code/web-ui/config/index.js b/code/web-ui/config/index.js
@@ -6,8 +6,17 @@ var araAPIPort = process.env.ARA_API_PORT || 8080
 
 var araAPIURL = 'http://' + araAPIHost + ':' + araAPIPort
 
-const development = { NODE_ENV: 'development' }
-const production = { NODE_ENV: 'production' }
+var PACKAGE = require('../package.json')
+var version = PACKAGE.version
+
+const development = {
+  NODE_ENV: 'development',
+  VERSION: version
+}
+const production = {
+  NODE_ENV: 'production',
+  VERSION: version
+}
 
 module.exports = {
   build: {

diff --git a/code/web-ui/package-lock.json b/code/web-ui/package-lock.json
diff --git a/code/web-ui/package.json b/code/web-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ara-client",
-  "version": "8.6.2",
+  "version": "8.7.0",
   "description": "Agile Regression Analyzer front app",
   "author": "Decathlon <developers@decathlon.com>",
   "private": true,
@@ -21,6 +21,7 @@
     "cy:report:html": "npm run cy:report:merge; npx marge test/cypress/outputs/reports/json/merged/final-report.json --overwrite=true --charts=true --reportDir=test/cypress/outputs/reports/html"
   },
   "dependencies": {
+    "@braintree/sanitize-url": "^5.0.2",
     "downloadjs": "^1.4.7",
     "eslint-plugin-html": "^3.1.1",
     "html-to-image": "^1.6.2",

diff --git a/code/web-ui/src/components/error-debug-dropdown.vue b/code/web-ui/src/components/error-debug-dropdown.vue
@@ -40,37 +40,37 @@
         This scenario used selenium node {{executedScenario.seleniumNode}}
       </DropdownItem>
 
-      <a v-if="executedScenario.diffReportUrl" :href="executedScenario.diffReportUrl" target="_blank">
+      <a v-if="executedScenario.diffReportUrl" :href="sanitizeARAUrl(executedScenario.diffReportUrl)" rel="noopener" target="_blank">
         <DropdownItem>
           <Icon type="md-open"/> SHOW DIFF REPORT
         </DropdownItem>
       </a>
 
-      <a v-if="executedScenario.logsUrl" :href="executedScenario.logsUrl" target="_blank">
+      <a v-if="executedScenario.logsUrl" :href="sanitizeARAUrl(executedScenario.logsUrl)" rel="noopener" target="_blank">
         <DropdownItem>
           <Icon type="md-open"/> SHOW LOGS
         </DropdownItem>
       </a>
 
-      <a v-if="executedScenario.httpRequestsUrl" :href="executedScenario.httpRequestsUrl" target="_blank">
+      <a v-if="executedScenario.httpRequestsUrl" :href="sanitizeARAUrl(executedScenario.httpRequestsUrl)" rel="noopener" target="_blank">
         <DropdownItem>
           <Icon type="md-open"/> SHOW HTTP REQUESTS
         </DropdownItem>
       </a>
 
-      <a v-if="executedScenario.javaScriptErrorsUrl" :href="executedScenario.javaScriptErrorsUrl" target="_blank">
+      <a v-if="executedScenario.javaScriptErrorsUrl" :href="sanitizeARAUrl(executedScenario.javaScriptErrorsUrl)" rel="noopener" target="_blank">
         <DropdownItem>
           <Icon type="md-open"/> SHOW JAVASCRIPT ERRORS
         </DropdownItem>
       </a>
 
-      <a v-if="executedScenario.cucumberReportUrl" :href="executedScenario.cucumberReportUrl" target="_blank">
+      <a v-if="executedScenario.cucumberReportUrl" :href="sanitizeARAUrl(executedScenario.cucumberReportUrl)" rel="noopener" target="_blank">
         <DropdownItem>
           <Icon type="md-open"/> SHOW CUCUMBER REPORT
         </DropdownItem>
       </a>
 
-      <a :href="editUrl" target="_blank">
+      <a :href="sanitizeARAUrl(editUrl)" rel="noopener" target="_blank">
         <DropdownItem>
           <Icon type="md-open"/> EDIT SCENARIO
         </DropdownItem>
@@ -107,6 +107,9 @@
     methods: {
       goToErrorsPage (errorId) {
         this.$router.push({ name: 'error', params: { id: errorId } })
+      },
+      sanitizeARAUrl (url) {
+        return this.$sanitizeUrl(url)
       }
     }
   }

diff --git a/code/web-ui/src/components/error-popups.vue b/code/web-ui/src/components/error-popups.vue
@@ -19,7 +19,7 @@
     <Modal v-model="screenshotIsVisible" :title="'Screenshot' + (executedScenario ? ' for scenario: ' + executedScenario.name : '')" :width="900" style="text-align: center;" class="noFooter">
       <div v-if="executedScenario && currentPopup === 'screenshot'">
         <div style="height: 0px; display: inline-block; float: left; position: relative; top: -58px; left: 8px;">
-          <a :href="executedScenario.screenshotUrl" target="_blank">
+          <a :href="sanitizeARAUrl(executedScenario.screenshotUrl)" rel="noopener" target="_blank">
             <Button><Icon type="md-open"/> SHOW FULLSCREEN</Button>
           </a>
         </div>
@@ -32,7 +32,7 @@
     <Modal v-model="videoIsVisible" :title="'Video' + (executedScenario ? ' for scenario: ' + executedScenario.name : '')" :width="900" style="text-align: center;" class="noFooter">
       <div v-if="executedScenario && currentPopup === 'video'">
         <div style="height: 0px; display: inline-block; float: left; position: relative; top: -58px; left: 2px;">
-          <a :href="executedScenario.videoUrl" target="_blank">
+          <a :href="sanitizeARAUrl(executedScenario.videoUrl)" rel="noopener" target="_blank">
             <Button><Icon type="md-open"/> SHOW FULLSCREEN</Button>
           </a>
         </div>
@@ -101,6 +101,9 @@
     },
 
     methods: {
+      sanitizeARAUrl (url) {
+        return this.$sanitizeUrl(url)
+      },
       prettySeverity (severityCode) {
         return util.prettySeverity(severityCode, this)
       },

diff --git a/code/web-ui/src/components/execution-actions-button.vue b/code/web-ui/src/components/execution-actions-button.vue
@@ -21,7 +21,7 @@
         <Icon type="md-menu"/>
       </Button>
       <DropdownMenu slot="list" style="text-transform: initial;" title="">
-        <DropdownItem 
+        <DropdownItem
             :disabled="true"
             :data-nrt=" $route.name + '_ActionsAndJobReportsButton_' + 'Actions_' + execution.id "
             style="font-weight: bold;">
@@ -30,20 +30,20 @@
         </DropdownItem>
 
         <DropdownItem><div @click="discard(execution)"><Icon type="md-flag"/> {{execution.discardReason ? 'CHANGE DISCARD REASON' : 'DISCARD EXECUTION'}}</div></DropdownItem>
-        <DropdownItem 
+        <DropdownItem
             :data-nrt=" $route.name + '_ActionsAndJobReportsButton_' + 'UndiscardExecution_' + execution.id "
             v-if="execution.discardReason"><div @click="unDiscard(execution.id)"><Icon type="md-checkmark"/> UN-DISCARD EXECUTION</div></DropdownItem>
 
-        <DropdownItem 
+        <DropdownItem
             :disabled="true"
             :data-nrt=" $route.name + '_ActionsAndJobReportsButton_' + 'JobReports_' + execution.id "
             style="border-top: 1px solid #DDDEE1; font-weight: bold;">
           <Icon type="md-open" style="visibility: hidden;"/>
           JOB REPORTS
         </DropdownItem>
 
-        <a :href="execution.jobUrl ? (execution.jobUrl + 'console') : null" target="_blank">
-          <DropdownItem 
+        <a :href="execution.jobUrl ? (sanitizeARAUrl(execution.jobUrl + 'console')) : null" rel="noopener" target="_blank">
+          <DropdownItem
               :disabled="!execution.jobUrl"
               :data-nrt=" $route.name + '_ActionsAndJobReportsButton_' + 'Execution_' + execution.id ">
             <Icon type="md-open"/>
@@ -52,9 +52,9 @@
           </DropdownItem>
         </a>
         <div v-for="countryDeployment in execution.countryDeployments" :key="countryDeployment.id">
-          <a :href="countryDeployment.jobUrl ? (countryDeployment.jobUrl + 'console') : null" target="_blank">
-            <DropdownItem 
-                :disabled="!countryDeployment.jobUrl" 
+          <a :href="countryDeployment.jobUrl ? (sanitizeARAUrl(countryDeployment.jobUrl + 'console')) : null" rel="noopener" target="_blank">
+            <DropdownItem
+                :disabled="!countryDeployment.jobUrl"
                 :data-nrt=" $route.name + '_ActionsAndJobReportsButton_' + countryDeployment.country.code + '_Deployment_' + + execution.id "
                 style="border-top: 1px dashed #DDDEE1;">
               <Icon type="md-open"/>
@@ -63,9 +63,9 @@
             </DropdownItem>
           </a>
           <a v-for="run in execution.runs" :key="run.id" v-if="run.country.code === countryDeployment.country.code"
-              :href="run.jobUrl ? (run.jobUrl + 'cucumber-html-reports/overview-features.html') : null"
-              target="_blank">
-            <DropdownItem 
+              :href="run.jobUrl ? (sanitizeARAUrl(run.jobUrl + 'cucumber-html-reports/overview-features.html')) : null"
+              rel="noopener" target="_blank">
+            <DropdownItem
                 :disabled="!run.jobUrl"
                 :data-nrt=" $route.name + '_ActionsAndJobReportsButton_' + countryDeployment.country.code + '_' + run.type.code + '_' + execution.id ">
               <Icon type="md-open"/>
@@ -122,6 +122,10 @@
     },
 
     methods: {
+      sanitizeARAUrl (url) {
+        return this.$sanitizeUrl(url)
+      },
+
       discard (execution) {
         this.discardReason = execution.discardReason
         this.executionToDiscard = execution

diff --git a/code/web-ui/src/components/functionality-coverage-details.vue b/code/web-ui/src/components/functionality-coverage-details.vue
@@ -28,7 +28,7 @@
             <span class="tags">{{scenario.tags}}</span>
             <strong>{{scenario.name}}</strong>
             <span :class="'severityStyle' + (!scenario.severity || scenario.severity === '_' ? ' none' : '')">{{prettySeverity(scenario.severity)}}</span>
-            <a :href="editUrl(scenario, source)" target="_blank" style="margin-left: 8px;">
+            <a :href="sanitizeARAUrl(editUrl(scenario, source))" rel="noopener" target="_blank" style="margin-left: 8px;">
               <Icon type="md-open"/> EDIT SCENARIO
             </a>
             <pre><code :style="'display: table; min-width: 100%; padding: 0;'" v-html="scenarioUtil.formattedScenario(scenario, null, true)"></code></pre>
@@ -99,6 +99,10 @@
     },
 
     methods: {
+      sanitizeARAUrl (url) {
+        return this.$sanitizeUrl(url)
+      },
+
       prettySeverity (severityCode) {
         return util.prettySeverity(severityCode, this)
       },

diff --git a/code/web-ui/src/components/nrt-cycle-quality.vue b/code/web-ui/src/components/nrt-cycle-quality.vue
@@ -53,7 +53,7 @@
   <div v-else style="color: #ED3F14;">
     NO DATA
     <job-status-result :job="execution"/>
-    <a :href="execution.jobUrl + 'console'" target="_blank">
+    <a :href="sanitizeARAUrl(execution.jobUrl + 'console')" rel="noopener" target="_blank">
       <Button icon="md-open" size="small" style="margin-left: 8px;">SHOW LOGS</Button>
     </a>
   </div>
@@ -74,6 +74,9 @@
     },
 
     methods: {
+      sanitizeARAUrl (url) {
+        return this.$sanitizeUrl(url)
+      },
       routerLink (severityCode, counts) {
         return {
           name: 'execution',

diff --git a/code/web-ui/src/components/nrt-ignored-scenarios.vue b/code/web-ui/src/components/nrt-ignored-scenarios.vue
@@ -25,8 +25,8 @@
         <i-col span="4" />
         <i-col :span="(24 - 4) / severityTotals.severities.length" v-for="globalSeverityStat of severityTotals.severities" :key="globalSeverityStat.severity.code" style="text-align: center;">
           <strong>{{globalSeverityStat.severity.shortName}}</strong>
-          <div :data-nrt=" 'executions_IgnoredScenariosHeader_' + globalSeverityStat.severity.code " 
-                class="tdStyle globalStyle percentStyle" 
+          <div :data-nrt=" 'executions_IgnoredScenariosHeader_' + globalSeverityStat.severity.code "
+                class="tdStyle globalStyle percentStyle"
                 v-if="globalSeverityStat.counts.ignored > 0">
             {{globalSeverityStat.counts.percent}}%<br>
             <span style="font-size: 75%;">{{globalSeverityStat.counts.ignored}}/{{globalSeverityStat.counts.total}}</span>
@@ -47,7 +47,7 @@
                 <span v-if="severityStat.counts.ignored < 0" style="color: rgb(237, 63, 20)">
                   ?
                 </span>
-                <span :data-nrt=" 'executions_IgnoredScenariosRaw_' + sourceStat.source.code + '_' + globalSeverityStat.severity.code " 
+                <span :data-nrt=" 'executions_IgnoredScenariosRaw_' + sourceStat.source.code + '_' + globalSeverityStat.severity.code "
                       v-else-if="severityStat.counts.ignored > 0">
                   {{severityStat.counts.percent}}%<br>
                   <span style="font-size: 75%;">{{severityStat.counts.ignored}}/{{severityStat.counts.total}}</span>
@@ -70,7 +70,7 @@
           <strong :data-nrt=" 'executions_IgnoredScenariosDetailsFeature_' + feature.name " style="display: block; margin-top: 6px;">
             {{feature.name}}
             <span style="color: lightgray">({{feature.scenarios.length}})</span>
-            <a :data-nrt=" 'executions_IgnoredScenariosDetailsEditScenarios_' + feature.name " :href="editUrl(feature)" target="_blank" style="margin-left: 8px; font-weight: normal;">
+            <a :data-nrt=" 'executions_IgnoredScenariosDetailsEditScenarios_' + feature.name " :href="sanitizeARAUrl(editUrl(feature))" rel="noopener" target="_blank" style="margin-left: 8px; font-weight: normal;">
               <Icon type="md-open"/> EDIT SCENARIOS
             </a>
           </strong>
@@ -109,6 +109,9 @@
     },
 
     methods: {
+      sanitizeARAUrl (url) {
+        return this.$sanitizeUrl(url)
+      },
       loadIgnoredScenarios () {
         this.loadingIgnoredScenarios = true
         Vue.http