Adding last sync tooltip

This commit is contained in:
Félix Aime 2021-06-11 15:45:57 +02:00
parent b8bed722dc
commit 601450d9fd
3 changed files with 35 additions and 10 deletions

View File

@ -25,9 +25,6 @@
<li class="menu-item"> <li class="menu-item">
<span @click="$router.push('/device/db')">Manage database</span> <span @click="$router.push('/device/db')">Manage database</span>
</li> </li>
<!-- <li class="menu-item">
<span @click="$router.push('/device/user')">User configuration</a>
</li> -->
</ul> </ul>
</div> </div>
</div> </div>
@ -40,10 +37,10 @@
<span @click="$router.push('/iocs/manage')">Manage IOCs</span> <span @click="$router.push('/iocs/manage')">Manage IOCs</span>
</li> </li>
<li class="menu-item"> <li class="menu-item">
<span @click="$router.push('/iocs/misp')">MISP Instances</span> <span @click="$router.push('/iocs/search')">Search IOCs</span>
</li> </li>
<li class="menu-item"> <li class="menu-item">
<span @click="$router.push('/iocs/search')">Search IOCs</span> <span @click="$router.push('/iocs/misp')">MISP Instances</span>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -678,8 +678,9 @@ h4, h5 {
color: #FFF; color: #FFF;
font-size: 11px; font-size: 11px;
border-radius: 3px; border-radius: 3px;
padding:3px; padding:3px 6px 3px 6px;
text-transform: uppercase; text-transform: uppercase;
cursor: help;
} }
.misp-online { .misp-online {
@ -687,8 +688,9 @@ h4, h5 {
color: #FFF; color: #FFF;
font-size: 11px; font-size: 11px;
border-radius: 3px; border-radius: 3px;
padding:3px; padding:3px 6px 3px 6px;
text-transform: uppercase; text-transform: uppercase;
cursor: help;
} }
.misp-name { .misp-name {
font-size: 1rem; font-size: 1rem;
@ -752,4 +754,27 @@ h4, h5 {
margin-left: -.8rem; margin-left: -.8rem;
margin-top: -.8rem; margin-top: -.8rem;
width: 1.6rem; 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
} }

View File

@ -54,8 +54,8 @@
<td>{{ i.url.replace('https://', '') .replace('http://', '') }}</td> <td>{{ i.url.replace('https://', '') .replace('http://', '') }}</td>
<td>{{ i.apikey.slice(0,5) }} [...] {{ i.apikey.slice(35,40) }}</td> <td>{{ i.apikey.slice(0,5) }} [...] {{ i.apikey.slice(35,40) }}</td>
<td> <td>
<span v-if="i.connected" class="misp-online"> Online</span> <span v-if="i.connected" class="misp-online tooltip" :data-tooltip="i.lastsync"> Online</span>
<span v-else class="misp-offline"> Offline</span> <span v-else class="misp-offline tooltip" :data-tooltip="i.lastsync"> Offline</span>
</td> </td>
<td><button class="btn btn-sm" v-on:click="delete_instance(i)">Delete</button></td> <td><button class="btn btn-sm" v-on:click="delete_instance(i)">Delete</button></td>
</tr> </tr>
@ -131,7 +131,10 @@ export default {
this.instances = [] this.instances = []
axios.get(`/api/misp/get_all`, { timeout: 10000, headers: {'X-Token': this.jwt} }) axios.get(`/api/misp/get_all`, { timeout: 10000, headers: {'X-Token': this.jwt} })
.then(response => { .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 this.loading = false
}) })
.catch(err => (console.log(err))) .catch(err => (console.log(err)))