Merge branch 'tmpbrnch' into 'develop'

.env

-APP_API="http://localhost:8080"
\ No newline at end of file

.env.development

+VUE_APP_API="http://localhost:8080"
\ No newline at end of file

.env.production

+VUE_APP_API="http://localhost:8080"
\ No newline at end of file

.gitlab-ci.yml

+image: docker:stable
+
+variables:
+  REGISTRY: registry-gitlab.xlab.si
+  MEDINA_REGISTRY: optima-medina-docker-dev.artifact.tecnalia.com
+  MEDINA_REG_PATH: wp4/t41
+
+stages:
+- build
+- push
+
+before_script:
+- export SERVICE=cce-frontend
+- export VERSION=$(grep -w "version" package.json | cut -d ':' -f 2 | cut -d ',' -f 1 | xargs echo)
+
+build:
+    stage: build
+    script: docker build --no-cache -t $REGISTRY/medina/$SERVICE:$VERSION .
+
+push:
+    stage: push
+    script:
+    - docker login -u gitlab-ci-token -p $CI_BUILD_TOKEN $REGISTRY
+    - docker tag $REGISTRY/medina/$SERVICE:$VERSION $REGISTRY/medina/$SERVICE:latest
+    - docker push $REGISTRY/medina/$SERVICE:$VERSION
+    - docker push $REGISTRY/medina/$SERVICE:latest
+    - docker logout $REGISTRY
+    - docker login $MEDINA_REGISTRY -u medina.fordevelopers@gmail.com -p AKCp8kqMZkcPRPGZhHBw7uKFsyifF1iHb2ZvbBy5PK88wD8EdeSHZqFsc4h1wp3M2oVYGazhv
+    - docker tag $REGISTRY/medina/$SERVICE:$VERSION $MEDINA_REGISTRY/$MEDINA_REG_PATH/$SERVICE:$VERSION
+    - docker tag $REGISTRY/medina/$SERVICE:$VERSION $MEDINA_REGISTRY/$MEDINA_REG_PATH/$SERVICE:latest
+    - docker push $MEDINA_REGISTRY/$MEDINA_REG_PATH/$SERVICE:$VERSION
+    - docker push $MEDINA_REGISTRY/$MEDINA_REG_PATH/$SERVICE:latest
+    - docker logout $MEDINA_REGISTRY
+    only:
+    - master
+

.nginx/nginx.conf

+worker_processes 4;
+
+events { 
+  worker_connections 1024; 
+}
+
+http {
+  server {
+    listen 80;
+    root  /usr/share/nginx/html;
+    include /etc/nginx/mime.types;
+
+    add_header Access-Control-Allow-Origin *;
+
+    location / {
+      try_files  $uri /index.html;
+    }
+  }
+}
\ No newline at end of file

Dockerfile

+# build stage
+FROM node:lts-alpine as build-stage
+
+WORKDIR /app
+
+# Copy the package.json and install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy rest of the files
+COPY . .
+
+# Build the project
+RUN npm run build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+
+COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf
+# Remove default nginx index page
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy from build stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file

README.md

 # cce-frontend
 
 ## Project setup
+
+### Install dependencies
 ```
 npm install
 ```
@@ -20,5 +22,21 @@ npm run build
 npm run lint
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## Docker
+
+### Docker build
+```
+docker build -t registry-gitlab.xlab.si/medina/cce-frontend .
+```
+
+### Docker run
+```
+docker run -p 8081:80 registry-gitlab.xlab.si/medina/cce-frontend:latest
+```
+
+
+## Setting API url
+
+You can set the API URL in the environment file. 
+For local development (npm run serve) it is set in [.env.development](.env.development) and for production (docker run) in [.env.production](.env.production). 
+The environment must be set up before build. 
\ No newline at end of file

package.json

@@ -8,14 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ssthouse/vue3-tree-chart": "^0.1.0",
     "axios": "^0.25.0",
+    "bootstrap": "^5.1.3",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
-    "vue": "^3.0.11",
+    "vue": "^3.2.29",
     "vue-axios": "^3.4.0",
     "vue-router": "^4.0.8",
-    "vuex": "^4.0.2",
-    "bootstrap": "^5.1.3",
-    "bootstrap-vue": "^2.21.2"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -24,7 +25,9 @@
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^7.0.0",
+    "sass": "^1.49.0",
+    "sass-loader": "^10.2.0"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -19,6 +19,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  background: #f3f8fb;
+  padding: 60px;
+  height: 100vh;
 }
 </style>

src/client/client.js

 import axios from "axios";
 
 const client = axios.create({
-    baseURL: process.env.APP_API,
+  baseURL: process.env.VUE_APP_API,
   timeout: 8000,
   headers: {
     "Content-Type": "application/json",

src/components/Tree.vue

+<template>
+  <div class="container">
+    <div class="info-box" v-show="hoveredNode">
+      <p v-if="hoveredNode?.name != null"><b>Name:</b> {{hoveredNode.name}}</p>
+      <p v-if="hoveredNode?.state != null"><b>State:</b> {{hoveredNode.state}}</p>
+      <p v-if="hoveredNode?.value != null"><b>Value:</b> {{hoveredNode.value}}</p>
+      <p v-if="hoveredNode?.weight != null"><b>Weight:</b> {{hoveredNode.weight}}</p>
+      <p v-if="hoveredNode?.id != null"><b>Assesment result id:</b> {{hoveredNode.id}}</p>
+      <p v-if="hoveredNode?.metricId != null"><b>Metric id:</b> {{hoveredNode.metricId}}</p>
+      <p v-if="hoveredNode?.assessmentResult != null"><b>Assessment result:</b> {{hoveredNode.assessmentResult}}</p>
+      <p v-if="hoveredNode?.evidenceId != null"><b>Evidence id:</b> {{hoveredNode.evidenceId}}</p>
+      <p v-if="hoveredNode?.noncomplianceComments != null"><b>Noncompliance comments:</b> {{hoveredNode.noncomplianceComments}}</p>
+      <p v-if="hoveredNode?.timestamp != null"><b>Timestamp:</b> {{hoveredNode.timestamp}}</p>
+      <p v-if="hoveredNode?.threshold != null"><b>Threshold:</b> {{hoveredNode.threshold}}</p>
+      <p v-if="hoveredNode?.resource?.id != null"><b>Resource id:</b> {{hoveredNode.resource.id}}</p>
+      <p v-if="hoveredNode?.resource?.resourceType != null"><b>Resource type:</b> {{hoveredNode.resource.resourceType}}</p>
+      <p v-if="hoveredNode?.resource?.weight != null"><b>Resource weight:</b> {{hoveredNode.resource.weight}}</p>
+    </div>
+    <div style="display: flex;">
+      <button class="btn btn-outline-primary" @click="controlScale('bigger')">Zoom in</button>
+      <button class="btn btn-outline-primary" @click="controlScale('smaller')">Zoom out</button>
+      <button class="btn btn-outline-primary" @click="controlScale('restore')">Reset zoom</button>
+    </div>
+    <vue-tree 
+      v-if="treeData"
+      ref="scaleTree"
+      style="width: 100%; height: 900px; border: 1px solid gray;"
+      :dataset="treeData"
+      :config="treeConfig"
+      :collapse-enabled="true"
+      
+    >
+      <template v-slot:node="{ node, collapsed }">
+        <div
+          class="rich-media-node"
+          :class="{ 'node-unselected': node.state == 'UNSELECTED', 
+                    'node-unset': node.state == 'UNSET', 
+                    'node-set-conformant': (node.state == 'SET' && node.conformant), 
+                    'node-set-unconformant': (node.state == 'SET' && !node.conformant)}"
+          :style="{ border: collapsed ? '3px solid black' : '' }"
+          @mouseover="infoBoxShow(node)"
+          @mouseleave="infoBoxHide()"
+        >
+          <span style="padding: 4px 0; font-weight: bold; word-wrap: break-word; overflow-wrap: break-word;"
+            >{{ node.name }}</span>
+        </div>
+      </template>
+    </vue-tree>
+  </div>
+</template>
+
+<script>
+import VueTree from "@ssthouse/vue3-tree-chart";
+import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
+
+export default {
+  name: 'Tree',
+  components: {
+    'vue-tree': VueTree
+  },
+  props: ['treeData'],
+  data() {
+    return {
+      treeConfig: { nodeWidth: 180, nodeHeight: 80, levelHeight: 200 },
+      hoveredNode: null,
+    }
+  },
+  methods: {
+    controlScale(command) {
+      switch (command) {
+        case 'bigger':
+          this.$refs.scaleTree.zoomIn()
+          break
+        case 'smaller':
+          this.$refs.scaleTree.zoomOut()
+          break
+        case 'restore':
+          this.$refs.scaleTree.restoreScale()
+          break
+      }
+    },
+    infoBoxShow(node) {
+      this.hoveredNode = node;
+    },
+    infoBoxHide() {
+      this.hoveredNode = null;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/_variables.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 5000px;
+}
+
+.tree-container {
+  background: white;
+  margin-top: 20px;
+}
+
+.rich-media-node {
+  min-width: 80px;
+  max-width: 150px;
+  margin: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: black;
+  border-radius: 4px;
+}
+
+.info-box {
+  p{padding: 0px 10px}
+
+  padding-top: 10px;
+  z-index: 10;
+  position: fixed;
+  top: 128px;
+  left: 72px;
+  min-width: 340px;
+  background-color: white;
+  border: 1px solid $color-blue;
+  border-radius: 0;
+  font-size: 14px;
+  text-align: left;
+}
+
+.btn {
+  margin: 5px 5px;
+}
+
+.node-unset {
+  background-color: $node-yellow-background;
+  &:hover {
+    background-color: $node-yellow-dark-background;
+  }
+}
+
+.node-set-conformant {
+  background-color: $node-green-background;
+  &:hover {
+    background-color: $node-green-dark-background;
+  }
+}
+
+.node-set-unconformant {
+  background-color: $node-red-background;
+  &:hover {
+    background-color: $node-red-dark-background;
+  }
+}
+
+.node-unselected {
+  background-color: $node-gray-background;
+  &:hover {
+    background-color: $node-gray-dark-background;
+  }
+}
+</style>
\ No newline at end of file

src/main.js

@@ -5,10 +5,13 @@ import store from "@/store";
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap/dist/js/bootstrap.bundle.min'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
 const app = createApp(App)
 app.use(router);
 app.use(store)
 app.use(VueAxios, axios)
 
-
 app.mount('#app')

src/services/ApiService.js

 import api from "../client/client";
 
-
-
 export const ApiService = {
   getEvaluationTreeData() {
     return api.get('/tree');

src/store/index.js

@@ -20,6 +20,9 @@ const store = createStore({
       }).catch((err) => {
         console.log("ERROR at action getTreeData: " + err);
       });
+    },
+    async updateTreeData({commit}, data) {
+      commit('SAVE_TREE_DATA', data);
     }
   }
 });

src/styles/_variables.scss

+$node-yellow-background: rgb(250, 241, 149);
+$node-green-background: rgb(171, 207, 138);
+$node-red-background: rgb(243, 149, 149);
+$node-gray-background: rgb(214, 205, 205);
+
+$node-yellow-dark-background: rgb(250, 241, 50);
+$node-green-dark-background: rgb(128, 214, 48);
+$node-red-dark-background: rgb(250, 70, 70);
+$node-gray-dark-background: rgb(177, 169, 169);
+
+$color-blue: #0d6efd;
\ No newline at end of file

src/views/Home.vue

 <template>
-  <div id="app">
-    <h2>Test </h2>
-    <h2>{{treeData}} </h2>
-    <button @click="$store.dispatch('getTreeData')">getTreeData</button>
+  <div id="home">
+    <Tree :treeData='treeData.root'></Tree>
   </div>
 </template>
+
 <script>
-//import {ApiService} from '../services/ApiService';
-import {mapState} from 'vuex';
+import {mapGetters} from 'vuex';
+import Tree from '../components/Tree';
 
 export default {
   name: "Home",
   data() {
     return {
-      rez: {}
     }
   },
   computed: {
-    ...mapState(['treeData'])
-  }, /*
-  methods: {
-    async test({ commit }) {
-      let rad = await ApiService.getEvaluationTreeData();
-      commit('save_tree_data', rad.data);
-    }
+    ...mapGetters(['treeData']),
+  },
+  components: {
+    Tree
   },
-  mounted() {
-    this.test();
-  }*/
+  created() {
+    this.$store.dispatch('getTreeData');
+  }
 }
 </script>
+
 <style lang="scss">
 
 </style>
\ No newline at end of file

vue.config.js

-module.exports = {
-  devServer: {
-    proxy: 'http://localhost:8080',
-  }
-}
\ No newline at end of file