From 601450d9fd611e74bed5d755ff9f14010789cae6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Aime?= <felix.aime@kaspersky.com>
Date: Fri, 11 Jun 2021 15:45:57 +0200
Subject: [PATCH] Adding last sync tooltip

---
 app/backend/src/App.vue             |  7 ++-----
 app/backend/src/assets/custom.css   | 29 +++++++++++++++++++++++++++--
 app/backend/src/views/iocs-misp.vue |  9 ++++++---
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/app/backend/src/App.vue b/app/backend/src/App.vue
index 1350785..d556d5b 100644
--- a/app/backend/src/App.vue
+++ b/app/backend/src/App.vue
@@ -25,9 +25,6 @@
                 <li class="menu-item">
                   <span @click="$router.push('/device/db')">Manage database</span>
                 </li>
-                <!-- <li class="menu-item">
-                  <span @click="$router.push('/device/user')">User configuration</a>
-                </li> -->
               </ul>
             </div>
           </div>
@@ -40,10 +37,10 @@
                   <span @click="$router.push('/iocs/manage')">Manage IOCs</span>
                 </li>
                 <li class="menu-item">
-                  <span @click="$router.push('/iocs/misp')">MISP Instances</span>
+                  <span @click="$router.push('/iocs/search')">Search IOCs</span>
                 </li>
                 <li class="menu-item">
-                  <span @click="$router.push('/iocs/search')">Search IOCs</span>
+                  <span @click="$router.push('/iocs/misp')">MISP Instances</span>
                 </li>
               </ul>
             </div>
diff --git a/app/backend/src/assets/custom.css b/app/backend/src/assets/custom.css
index 969789b..1231861 100644
--- a/app/backend/src/assets/custom.css
+++ b/app/backend/src/assets/custom.css
@@ -678,8 +678,9 @@ h4, h5 {
 	color: #FFF;
 	font-size: 11px;
 	border-radius: 3px;
-	padding:3px;
+	padding:3px 6px 3px 6px;
 	text-transform: uppercase;
+	cursor: help;
 }
 
 .misp-online {
@@ -687,8 +688,9 @@ h4, h5 {
 	color: #FFF;
 	font-size: 11px;
 	border-radius: 3px;
-	padding:3px;
+	padding:3px 6px 3px 6px;
 	text-transform: uppercase;
+	cursor: help;
 }
 .misp-name {
 	font-size: 1rem;
@@ -752,4 +754,27 @@ h4, h5 {
     margin-left: -.8rem;
     margin-top: -.8rem;
     width: 1.6rem;
+}
+
+.tooltip::after{
+	background:rgba(48,55,66,.95);
+	border-radius:3px;
+	bottom:100%;
+	color:#fff;
+	content:attr(data-tooltip);
+	display:block;
+	font-size: 11px;
+	text-transform: capitalize;
+	left:50%;
+	max-width:320px;
+	opacity:0;
+	overflow:hidden;
+	padding:3px 6px 3px 6px;
+	pointer-events:none;
+	position:absolute;
+	text-overflow:ellipsis;
+	transform:translate(-50%,.4rem);
+	transition:opacity .2s,transform .2s;
+	white-space:pre;
+	z-index:300
 }
\ No newline at end of file
diff --git a/app/backend/src/views/iocs-misp.vue b/app/backend/src/views/iocs-misp.vue
index a0941fd..c0edeb2 100644
--- a/app/backend/src/views/iocs-misp.vue
+++ b/app/backend/src/views/iocs-misp.vue
@@ -54,8 +54,8 @@
                                 <td>{{ i.url.replace('https://', '') .replace('http://', '') }}</td>
                                 <td>{{ i.apikey.slice(0,5) }} [...] {{ i.apikey.slice(35,40) }}</td>
                                 <td>
-                                    <span v-if="i.connected" class="misp-online">✓ Online</span>
-                                    <span v-else class="misp-offline">⚠ Offline</span>
+                                    <span v-if="i.connected" class="misp-online tooltip" :data-tooltip="i.lastsync">✓ Online</span>
+                                    <span v-else class="misp-offline tooltip" :data-tooltip="i.lastsync">⚠ Offline</span>
                                 </td>
                                 <td><button class="btn btn-sm" v-on:click="delete_instance(i)">Delete</button></td>
                             </tr>
@@ -131,7 +131,10 @@ export default {
             this.instances = []
             axios.get(`/api/misp/get_all`, { timeout: 10000, headers: {'X-Token': this.jwt} })
             .then(response => {
-                if(response.data.results) this.instances = response.data.results;
+                if(response.data.results){
+                    this.instances = response.data.results;
+                    this.instances.forEach(e => { e.lastsync = "Last-sync: "+ new Date(e.lastsync * 1000).toDateString() } )
+                }
                 this.loading = false
             })
             .catch(err => (console.log(err)))