Skip to content
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

Closed
wants to merge 11 commits into from
2 changes: 1 addition & 1 deletion timesketch/frontend-ng/dist/login.html
Copy link
Collaborator

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.

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
Expand Up @@ -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()">
Expand All @@ -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? ()-->
Copy link
Collaborator

Choose a reason for hiding this comment

The 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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ limitations under the License.
>
<!-- Copy event value -->
<v-btn icon x-small style="cursor: pointer" @click="copyToClipboard(value)" v-show="key == c_key">
<v-icon small>mdi-content-copy</v-icon>
<v-icon small title="Copy">mdi-content-copy</v-icon>
jkppr marked this conversation as resolved.
Show resolved Hide resolved
</v-btn>

<!-- XML prettify dialog -->
Expand Down
86 changes: 65 additions & 21 deletions timesketch/frontend-ng/src/components/Explore/EventList.vue
jkppr marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tooltip triggers the vue error:

Vue warn]: Property or method "attrs" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <TsEventList> at src/components/Explore/EventList.vue

</template>


<v-card height="50vh">
<v-card-title>Select columns</v-card-title>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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)-->
Copy link
Collaborator

Choose a reason for hiding this comment

The 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>
Expand Down Expand Up @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<span>Toggle star status</span>
<span>Toggle star</span>

</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
Copy link
Collaborator

Choose a reason for hiding this comment

The 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 EventTagMenu.vue component instead.



<!-- 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
Copy link
Collaborator

Choose a reason for hiding this comment

The 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 -->
Expand Down
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand Up @@ -16,8 +16,8 @@ limitations under the License.
<template>
<v-menu v-model="showMenu" offset-x :close-on-content-click="false">
<template v-slot:activator="{ on, attrs }">
<v-icon v-if="assignedTags.length > 0" v-bind="attrs" v-on="on" class="ml-1">mdi-tag-plus</v-icon>
<v-icon v-else v-bind="attrs" v-on="on" class="ml-1">mdi-tag-plus-outline</v-icon>
<v-icon v-if="assignedTags.length > 0" v-bind="attrs" v-on="on" class="ml-1">mdi-tag-plus</v-icon>
<v-icon v-else v-bind="attrs" v-on="on" class="ml-1">mdi-tag-plus-outline</v-icon> <!--Add tooltip here? (tag event)-->
</template>

<v-card min-width="500px" class="mx-auto" max-width="500px" min-height="260px">
Expand Down
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand Up @@ -19,7 +19,7 @@ limitations under the License.
:color="tagColor(tag).color"
:text-color="tagColor(tag).textColor"
>
<v-icon v-if="tag in tagConfig" left small>{{ tagConfig[tag].label }}</v-icon>
<v-icon v-if="tag in tagConfig" left small>{{ tagConfig[tag].label }}</v-icon> <!--Add tooltip here? (star event)-->
{{ tag }}
</v-chip>
</span>
Expand Down
64 changes: 42 additions & 22 deletions timesketch/frontend-ng/src/components/Graph/Cytoscape.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<v-tooltip top open-delay="500">
<v-tooltip bottom open-delay="500">

<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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)-->
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)-->
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ limitations under the License.
:to="{ name: 'SigmaNewRule', params: { sketchId: sketch.id } }"
@click.stop=""
>
<v-icon>mdi-plus</v-icon>
<v-icon title="Create New Sigma Rule">mdi-plus</v-icon>
</v-btn>
<span v-if="!expanded" class="float-right" style="margin-right: 3px">
<v-progress-circular v-if="isLoading" :size="24" :width="1" indeterminate></v-progress-circular>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ limitations under the License.
@click="createStory()"
@click.stop=""
>
<v-icon>mdi-plus</v-icon>
<v-icon title="Create New Story">mdi-plus</v-icon>
</v-btn>

<span v-if="!expanded" class="float-right" style="margin-right: 10px">
Expand Down
2 changes: 1 addition & 1 deletion timesketch/frontend-ng/src/components/LeftPanel/Tags.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)-->
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)-->
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand Down
15 changes: 8 additions & 7 deletions timesketch/frontend-ng/src/components/LeftPanel/ThreatIntel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The 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
Expand All @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The 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"
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The 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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading