-
Notifications
You must be signed in to change notification settings - Fork 589
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added necessary tooltips to icons in new frontend #2693 #2952
Changes from 10 commits
3fe62ac
7aa0c9a
b955a68
bd7fb63
e7f9f32
9131089
ff8c319
1fa8528
83f43ff
fe662dd
457d902
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!DOCTYPE html><html lang=en><head><meta name=csrf-token content="{{ csrf_token() }}"><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/dist/favicon.ico><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel=stylesheet><title>Timesketch</title><link href=/dist/css/chunk-vendors.3822f5cc.css rel=preload as=style><link href=/dist/css/login.5d50b378.css rel=preload as=style><link href=/dist/js/chunk-vendors.da6a3b0d.js rel=preload as=script><link href=/dist/js/login.fc00c6ee.js rel=preload as=script><link href=/dist/css/chunk-vendors.3822f5cc.css rel=stylesheet><link href=/dist/css/login.5d50b378.css rel=stylesheet></head><body><div class=card><div class=logo-container><div class=logo-image-container><img class=logo-image src=/dist/timesketch-color.png></div><div class=logo-text-container><div class=logo-text-header>timesketch</div><div class=logo-text-subheader>Digital Forensics Timeline Analysis</div></div></div><form method=post><input type=text class=input name=username placeholder=Username> <input type=password class=input name=password placeholder=Password> <button type=submit class=login-button>Sign in</button> {{ form.csrf_token }}</form></div><script src=/dist/js/chunk-vendors.da6a3b0d.js></script><script src=/dist/js/login.fc00c6ee.js></script></body></html> | ||
<!DOCTYPE html><html lang=en><head><meta name=csrf-token content="{{ csrf_token() }}"><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/dist/favicon.ico><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel=stylesheet><title>Timesketch</title><link href=/dist/css/chunk-vendors.3822f5cc.css rel=preload as=style><link href=/dist/css/login.5d50b378.css rel=preload as=style><link href=/dist/js/chunk-vendors.da6a3b0d.js rel=preload as=script><link href=/dist/js/login.fc00c6ee.js rel=preload as=script><link href=/dist/css/chunk-vendors.3822f5cc.css rel=stylesheet><link href=/dist/css/login.5d50b378.css rel=stylesheet></head><body><div class=card><div class=logo-container><div class=logo-image-container><img class=logo-image src=/dist/timesketch-color.png></div><div class=logo-text-container><div class=logo-text-header>timesketch</div><div class=logo-text-subheader></div>Timeline Analysis</div></div></div><form method=post><input type=text class=input name=username placeholder=Username> <input type=password class=input name=password placeholder=Password> <button type=submit class=login-button>Sign in</button> {{ form.csrf_token }}</form></div><script src=/dist/js/chunk-vendors.da6a3b0d.js></script><script src=/dist/js/login.fc00c6ee.js></script></body></html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,7 +17,7 @@ limitations under the License. | |
<span> | ||
<v-menu v-model="showMenu" offset-y transition="slide-y-transition"> | ||
<template v-slot:activator="{ on, attrs }"> | ||
<v-icon v-bind="attrs" v-on="on" class="ml-1">mdi-dots-vertical</v-icon> | ||
<v-icon title="Action Menu" v-bind="attrs" v-on="on" class="ml-1">mdi-dots-vertical</v-icon> | ||
jkppr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</template> | ||
<v-list dense class="mx-auto"> | ||
<v-list-item style="cursor: pointer" @click="copyEventUrlToClipboard()"> | ||
|
@@ -34,7 +34,7 @@ limitations under the License. | |
</v-list-item> | ||
<v-list-item style="cursor: pointer" @click="showContextWindow()"> | ||
<v-list-item-icon> | ||
<v-icon small>mdi-magnify-plus-outline</v-icon> | ||
<v-icon small>mdi-magnify-plus-outline</v-icon> <!--Add tooltip here? ()--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No, this entry has an explanation next to it. It does not need a tooltip therefore. |
||
</v-list-item-icon> | ||
<v-list-item-title>Context search</v-list-item-title> | ||
</v-list-item> | ||
|
jkppr marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -78,11 +78,17 @@ limitations under the License. | |||||
</span> | ||||||
|
||||||
<v-dialog v-model="saveSearchMenu" v-if="!disableSaveSearch" width="500"> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon v-bind="attrs" v-on="on"> | ||||||
<v-icon>mdi-content-save-outline</v-icon> | ||||||
</v-btn> | ||||||
<template v-slot:activator="{ on: dialog }"> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on: tooltip }"> | ||||||
<v-btn v-on="{ ...tooltip, ...dialog }" icon> | ||||||
<v-icon>mdi-content-save-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Save search</span> | ||||||
</v-tooltip> | ||||||
</template> | ||||||
|
||||||
<v-card class="pa-4"> | ||||||
<h3>Save Search</h3> | ||||||
<br /> | ||||||
|
@@ -104,17 +110,31 @@ limitations under the License. | |||||
</v-card> | ||||||
</v-dialog> | ||||||
|
||||||
<v-btn icon @click="showHistogram = !showHistogram" v-if="!disableHistogram"> | ||||||
<v-icon>mdi-chart-bar</v-icon> | ||||||
</v-btn> | ||||||
<template> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon @click="showHistogram = !showHistogram" v-if="!disableHistogram" v-bind="attrs" v-on="on"> | ||||||
<v-icon>mdi-chart-bar</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Show histogram</span> | ||||||
</v-tooltip> | ||||||
</template> | ||||||
|
||||||
|
||||||
<v-dialog v-model="columnDialog" v-if="!disableColumns" max-width="500px" scrollable> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon v-bind="attrs" v-on="on"> | ||||||
<v-icon>mdi-view-column-outline</v-icon> | ||||||
</v-btn> | ||||||
<template v-slot:activator="{ on: dialog }"> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on: tooltip }"> | ||||||
<v-btn icon v-bind="attrs" v-on="{ ...tooltip, ...dialog }"> | ||||||
<v-icon>mdi-view-column-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Select columns</span> | ||||||
</v-tooltip> | ||||||
Comment on lines
+126
to
+134
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This tooltip triggers the vue error:
|
||||||
</template> | ||||||
|
||||||
|
||||||
<v-card height="50vh"> | ||||||
<v-card-title>Select columns</v-card-title> | ||||||
|
||||||
|
@@ -163,11 +183,17 @@ limitations under the License. | |||||
|
||||||
<v-menu v-if="!disableSettings" offset-y :close-on-content-click="false"> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon v-bind="attrs" v-on="on"> | ||||||
<v-icon>mdi-dots-horizontal</v-icon> | ||||||
</v-btn> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on: tooltip }"> | ||||||
<v-btn icon v-bind="attrs" v-on="{ ...on, ...tooltip }"> | ||||||
<v-icon>mdi-dots-horizontal</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>More settings</span> | ||||||
</v-tooltip> | ||||||
</template> | ||||||
|
||||||
|
||||||
<v-card outlined max-width="475" class="mx-auto"> | ||||||
<v-list subheader two-line flat dense> | ||||||
<v-subheader>Density</v-subheader> | ||||||
|
@@ -248,7 +274,7 @@ limitations under the License. | |||||
<div v-else> | ||||||
<small class="mr-2">Actions:</small> | ||||||
<v-btn x-small outlined @click="toggleMultipleStars()"> | ||||||
<v-icon left color="amber">mdi-star</v-icon> | ||||||
<v-icon left color="amber">mdi-star</v-icon> <!--Add tooltip here? (star event)--> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No tooltip needed since there is an explanation next to it. |
||||||
Toggle star | ||||||
</v-btn> | ||||||
</div> | ||||||
|
@@ -315,16 +341,34 @@ limitations under the License. | |||||
|
||||||
<!-- Actions field --> | ||||||
<template v-slot:item.actions="{ item }"> | ||||||
<v-btn small icon @click="toggleStar(item)"> | ||||||
<v-icon v-if="item._source.label.includes('__ts_star')" color="amber">mdi-star</v-icon> | ||||||
<v-icon v-else>mdi-star-outline</v-icon> | ||||||
</v-btn> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on }"> | ||||||
<v-btn small icon @click="toggleStar(item)" v-on="on"> | ||||||
<v-icon v-if="item._source.label.includes('__ts_star')" color="amber">mdi-star</v-icon> | ||||||
<v-icon v-else>mdi-star-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Toggle star status</span> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
</v-tooltip> | ||||||
|
||||||
|
||||||
<!-- Tag menu --> | ||||||
<ts-event-tag-menu :event="item"></ts-event-tag-menu> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on }"> | ||||||
<ts-event-tag-menu :event="item" v-on="on"></ts-event-tag-menu> | ||||||
</template> | ||||||
<span>Event tag menu</span> | ||||||
</v-tooltip> | ||||||
Comment on lines
+356
to
+361
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This tooltip seems not to trigger for me while testing. I think it needs to be triggered in the |
||||||
|
||||||
|
||||||
<!-- Action sub-menu --> | ||||||
<ts-event-action-menu :event="item" @showContextWindow="showContextWindow($event)"></ts-event-action-menu> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on }"> | ||||||
<ts-event-action-menu :event="item" @showContextWindow="showContextWindow($event)" v-on="on"></ts-event-action-menu> | ||||||
</template> | ||||||
<span>Action sub-menu</span> | ||||||
</v-tooltip> | ||||||
Comment on lines
+365
to
+370
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems also not to trigger correctly. |
||||||
|
||||||
</template> | ||||||
|
||||||
<!-- Datetime field with action buttons --> | ||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No tooltip necessary in this file. |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No tooltip necessary in this file. |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -40,11 +40,14 @@ limitations under the License. | |||||
</span> | ||||||
<!-- Save graph dialog --> | ||||||
<v-dialog v-model="saveGraphDialog" width="500"> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon :disabled="!edgeQuery" v-bind="attrs" v-on="on" title="Save selected graph"> | ||||||
<v-icon>mdi-content-save-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon :disabled="!edgeQuery" v-bind="attrs" v-on="on"> | ||||||
<v-icon>mdi-content-save-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Save selected graph</span> | ||||||
</v-tooltip> | ||||||
<v-card class="pa-4"> | ||||||
<h3>Save selected elements</h3> | ||||||
<br /> | ||||||
|
@@ -65,9 +68,15 @@ limitations under the License. | |||||
</v-card> | ||||||
</v-dialog> | ||||||
|
||||||
<v-btn icon v-on:click="resizeCanvas()" :disabled="!currentGraph" title="Fit to canvas"> | ||||||
<v-icon>mdi-fit-to-page-outline</v-icon> | ||||||
</v-btn> | ||||||
<v-tooltip bottom> | ||||||
<template v-slot:activator="{ on }"> | ||||||
<v-btn icon v-on:click="resizeCanvas()" :disabled="!currentGraph" v-on="on" title="Fit to canvas"> | ||||||
<v-icon>mdi-fit-to-page-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Fit to Canvas</span> | ||||||
</v-tooltip> | ||||||
|
||||||
<!-- Graph settings menu --> | ||||||
<v-menu | ||||||
v-model="graphSettingsMenu" | ||||||
|
@@ -76,11 +85,15 @@ limitations under the License. | |||||
:close-on-click="true" | ||||||
content-class="menu-with-gap" | ||||||
> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon v-bind="attrs" v-on="on" :disabled="!currentGraph || !graphPluginName" title="Graph settings"> | ||||||
<v-icon> mdi-cog-outline </v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<v-tooltip top open-delay="500"> | ||||||
<template v-slot:activator="{ on, attrs }"> | ||||||
<v-btn icon :disabled="!currentGraph || !graphPluginName" v-bind="attrs" v-on="on"> | ||||||
<v-icon>mdi-cog-outline</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Graph Settings</span> | ||||||
</v-tooltip> | ||||||
|
||||||
|
||||||
<v-card class="pa-4 pt-5" width="600"> | ||||||
<h5>Layout type</h5> | ||||||
|
@@ -117,15 +130,22 @@ limitations under the License. | |||||
<i | ||||||
><small>Generated {{ currentGraphCache.updated_at | timeSince }}</small></i | ||||||
> | ||||||
<v-btn | ||||||
icon | ||||||
class="ml-1" | ||||||
title="Refresh graph" | ||||||
v-on:click="buildGraph({ name: currentGraph }, true)" | ||||||
:disabled="!currentGraph" | ||||||
> | ||||||
<v-icon>mdi-refresh</v-icon> | ||||||
</v-btn> | ||||||
<v-tooltip top open-delay="500"> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
<template v-slot:activator="{ on }"> | ||||||
<v-btn | ||||||
icon | ||||||
class="ml-1" | ||||||
title="Refresh graph" | ||||||
v-on:click="buildGraph({ name: currentGraph }, true)" | ||||||
:disabled="!currentGraph" | ||||||
v-on="on" | ||||||
> | ||||||
<v-icon>mdi-refresh</v-icon> | ||||||
</v-btn> | ||||||
</template> | ||||||
<span>Refresh graph</span> | ||||||
</v-tooltip> | ||||||
|
||||||
</div> | ||||||
</v-toolbar> | ||||||
</v-card> | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,7 +30,7 @@ limitations under the License. | |
:to="{ name: 'Analyze', params: { sketchId: sketch.id, analyzerTimelineId: undefined } }" | ||
@click.stop="" | ||
> | ||
<v-icon>mdi-plus</v-icon> | ||
<v-icon title="Analyze Timelines">mdi-plus</v-icon> <!--Add tooltip here? (Tooltip for the + icons in the left panel)--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is ok. Please remove the comments. |
||
</v-btn> | ||
<span class="float-right" style="margin-right: 3px"> | ||
<v-progress-circular | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,7 +21,7 @@ limitations under the License. | |
@click="expanded = !expanded" | ||
:class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'" | ||
> | ||
<span> <v-icon left>mdi-content-save-outline</v-icon> Saved Searches </span> | ||
<span> <v-icon left>mdi-content-save-outline</v-icon> Saved Searches </span> <!-- Add tooltip here? (Save search action)--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No tooltip necessary in this section. |
||
<span class="float-right" style="margin-right: 10px"> | ||
<small | ||
><strong>{{ meta.views.length }}</strong></small | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,7 +21,7 @@ limitations under the License. | |
@click="expanded = !expanded" | ||
:class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'" | ||
> | ||
<span> <v-icon left>mdi-tag-multiple-outline</v-icon> Tags </span> | ||
<span> <v-icon left>mdi-tag-multiple-outline</v-icon> Tags </span> <!--Add tooltip here? (tag event)--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need for tooltips here. |
||
|
||
<span class="float-right" style="margin-right: 10px"> | ||
<small | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -22,7 +22,7 @@ limitations under the License. | |
style="cursor: pointer; font-size: 0.9em" | ||
> | ||
<v-row no-gutters class="pa-2 pl-5" :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'"> | ||
<v-icon v-if="label.label === '__ts_star'" left small color="amber">mdi-star</v-icon> | ||
<v-icon v-if="label.label === '__ts_star'" left small color="amber">mdi-star</v-icon> <!--Add tooltip here? (star event)--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need for tooltips here. |
||
<v-icon v-if="label.label === '__ts_comment'" left small>mdi-comment-multiple-outline</v-icon> | ||
<span> | ||
{{ label.label | formatLabelText }} (<small | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,14 +21,15 @@ limitations under the License. | |
@click="expanded = !expanded" | ||
:class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'" | ||
> | ||
<span> <v-icon left>mdi-shield-search</v-icon> Threat Intelligence </span> | ||
<!-- Add tooltip here? (Icons in the Threat Intelligence feature) --> | ||
<span> <v-icon left>mdi-shield-search</v-icon> Threat Intelligence </span> | ||
Comment on lines
+24
to
+25
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes |
||
<v-btn | ||
icon | ||
class="float-right mt-n1 mr-n1" | ||
v-if="intelligenceData && !intelligenceData.length" | ||
@click="addIndicator()" | ||
> | ||
<v-icon>mdi-plus</v-icon> | ||
<v-icon title="Create New Indicator">mdi-plus</v-icon> | ||
</v-btn> | ||
<v-btn | ||
icon | ||
|
@@ -37,7 +38,7 @@ limitations under the License. | |
@click="addIndicator()" | ||
@click.stop="" | ||
> | ||
<v-icon>mdi-plus</v-icon> | ||
<v-icon title="Add Indicator">mdi-plus</v-icon> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This icon has the same functionality as the one above (line 32). It should have the same tooltip. |
||
</v-btn> | ||
<v-btn | ||
v-if="expanded && intelligenceData && intelligenceData.length" | ||
|
@@ -46,7 +47,7 @@ limitations under the License. | |
:to="{ name: 'Intelligence', params: { sketchId: sketch.id } }" | ||
@click.stop="" | ||
> | ||
<v-icon small>mdi-pencil</v-icon> | ||
<v-icon small title="Edit Indicator">mdi-pencil</v-icon> | ||
</v-btn> | ||
|
||
<span v-if="!expanded" class="float-right" style="margin-right: 10px"> | ||
|
@@ -92,7 +93,7 @@ limitations under the License. | |
|
||
<template v-slot:item.actions="{ item }"> | ||
<v-btn icon small @click="generateSearchQuery(item.ioc)"> | ||
<v-icon small>mdi-magnify</v-icon> | ||
<v-icon small title="Search">mdi-magnify</v-icon> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can this title be a bit more descriptive? e.g. "Search this indicator" Same for the other mdi-magnify "search" icons in this section. |
||
</v-btn> | ||
</template> | ||
</v-data-table> | ||
|
@@ -111,7 +112,7 @@ limitations under the License. | |
|
||
<template v-slot:item.actions="{ item }"> | ||
<v-btn icon small @click="generateSearchQuery(item.ioc)"> | ||
<v-icon small>mdi-magnify</v-icon> | ||
<v-icon small title="Search">mdi-magnify</v-icon> | ||
</v-btn> | ||
</template> | ||
</v-data-table> | ||
|
@@ -129,7 +130,7 @@ limitations under the License. | |
</template> | ||
<template v-slot:item.actions="{ item }"> | ||
<v-btn icon small @click="searchForIOC(item)"> | ||
<v-icon small>mdi-magnify</v-icon> | ||
<v-icon small title="Search">mdi-magnify</v-icon> | ||
</v-btn> | ||
</template> | ||
</v-data-table> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please keep your PR clean and only submit files that are needed for your changes. The
login.html
file is not needed for the tooltip adjustments and should be removed from the PR please.The Timesketch team builds a new UI on a regular basis to include all new changes.