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.

Sign up for GitHub

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

Adding multi analyzer result support #2894

Merged
merged 5 commits into from
Sep 15, 2023
Merged

Adding multi analyzer result support #2894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
320eb8f
* Porting multi analyzer results to the new UI
jkppr Sep 15, 2023
74d6390
Merge branch 'master' into 2747_ui_analyzer_multi_results
jkppr Sep 15, 2023
b76de9a
apply recommended review changes
jkppr Sep 15, 2023
a4c220d
linter & formatter
jkppr Sep 15, 2023
704c691
apply 2nd review recommendations
jkppr Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResult.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ limitations under the License.

<template>
<div>
<!-- TODO: issue #2565 -->
<!-- https://github.com/google/timesketch/issues/2565 -->
<v-row
no-gutters
class="pa-3 pl-1"
Expand Down
208 changes: 112 additions & 96 deletions timesketch/frontend-ng/src/components/LeftPanel/AnalyzerResultTimeline.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<template>
<div
:class="
$vuetify.theme.dark
? expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: expanded
? 'light-hover light-bg'
: 'light-hover'
"
>
<div :class="getHoverTheme">
<v-divider></v-divider>
<div
v-if="timeline.analysis_status === 'PENDING' || timeline.analysis_status === 'STARTED'"
class="pa-2 pl-3"
style="display: flex; align-items: center"
:class="
$vuetify.theme.dark
? expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: expanded
? 'light-hover light-bg'
: 'light-hover'
"
:class="getHoverTheme"
>
<v-icon class="mr-2" :color="'#' + timeline.color">mdi-circle</v-icon>
<span class="mr-2" style="color: grey">{{ timeline.name }}</span>
Expand All @@ -49,15 +31,7 @@ limitations under the License.
class="pa-2 pl-3"
style="cursor: pointer; display: flex; align-items: center"
@click="expanded = !expanded"
:class="
$vuetify.theme.dark
? expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: expanded
? 'light-hover light-bg'
: 'light-hover'
"
:class="getHoverTheme"
>
<v-icon class="mr-2" :color="'#' + timeline.color">mdi-circle</v-icon>
<span>{{ timeline.name }}</span>
Expand Down Expand Up @@ -94,46 +68,24 @@ limitations under the License.
</div>

<v-expand-transition>
<div
v-if="!isMultiAnalyzer"
v-show="expanded"
:class="
$vuetify.theme.dark
? expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: expanded
? 'light-hover light-bg'
: 'light-hover'
"
>
<v-simple-table v-if="checkAnalyzerOutput" dense class="ml-2">
<tbody
:class="
$vuetify.theme.dark
? expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: expanded
? 'light-hover light-bg'
: 'light-hover'
"
>
<div v-if="!isMultiAnalyzer" v-show="expanded" :class="getHoverTheme">
<v-simple-table v-if="checkAnalyzerOutput" dense class="ml-2 borderless">
<tbody :class="getHoverTheme">
<tr class="pr-3">
<td width="105" style="border: none">
<td width="105">
<strong>Summary:</strong>
</td>
<td style="border: none">
<td>
<span>
{{ resultSummary || 'loading...' }}
</span>
</td>
</tr>
<tr>
<td style="border: none">
<td>
<strong>Priority:</strong>
</td>
<td style="border: none">
<td>
<span>
{{ resultPriority || 'loading...' }}
</span>
Expand All @@ -157,18 +109,18 @@ limitations under the License.
</td>
</tr>
<tr>
<td style="border: none">
<td>
<strong>Last run:</strong>
</td>
<td style="border: none">
<span> {{ timeline.created_at }} UTC </span>
<td>
<span> {{ timelineCreated }} UTC </span>
</td>
</tr>
<tr>
<td width="80" style="border: none">
<strong>Status:</strong>
</td>
<td style="border: none">
<td>
<span>
{{ resultStatus || 'loading...' }}
</span>
Expand All @@ -180,7 +132,7 @@ limitations under the License.
</td>
</tr>
<tr v-for="(item, key) in getAnalyzerOutputMetaData" :key="key">
<td style="border: none">
<td>
<strong>{{ key }}:</strong>
</td>
<td style="border: none" v-if="key === 'Searches'">
Expand Down Expand Up @@ -245,42 +197,32 @@ limitations under the License.
</tr>
</tbody>
</v-simple-table>
<v-simple-table v-else dense class="ml-2">
<tbody
:class="
$vuetify.theme.dark
? expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: expanded
? 'light-hover light-bg'
: 'light-hover'
"
>
<v-simple-table v-else dense class="ml-2 borderless">
<tbody :class="getHoverTheme">
<tr class="pr-3">
<td width="80" style="border: none">
<strong v-if="timeline.analysis_status === 'ERROR'">Error:</strong>
<strong v-else>Summary:</strong>
</td>
<td style="border: none">
<td>
<span>
{{ timeline.verdict }}
{{ timelineResult.verdict }}
</span>
</td>
</tr>
<tr>
<td style="border: none">
<td>
<strong>Last run:</strong>
</td>
<td style="border: none">
<span> {{ timeline.created_at }} UTC </span>
<td>
<span> {{ timelineCreated }} UTC </span>
</td>
</tr>
<tr>
<td width="80" style="border: none">
<strong>Status:</strong>
</td>
<td style="border: none">
<td>
<span>
{{ timeline.analysis_status }}
</span>
Expand All @@ -289,12 +231,57 @@ limitations under the License.
</tbody>
</v-simple-table>
</div>
<div v-else v-show="expanded" class="ml-3 pb-1 mr-2">
<v-icon>mdi-alert-octagon-outline</v-icon>
<span class="ml-1">
Showing multi analyzer results is not supported in the new UI yet. Please visit the old UI to see these
results.
</span>
<div v-else v-show="expanded" :class="getHoverTheme">
<!-- TODO: iterate on multianalyzer timeline results -->
<v-simple-table dense class="ml-2 borderless">
<tbody :class="getHoverTheme">
<tr>
<td>
<strong>Type:</strong>
</td>
<td>
<span> Multi analyzer</span>
</td>
</tr>
<tr>
<td>
<strong>Last run:</strong>
</td>
<td>
<span> {{ timelineCreated }} UTC </span>
</td>
</tr>
<tr>
<td width="80" style="border: none">
<strong>Status:</strong>
</td>
<td>
<span>
{{ timeline.analysis_status }}
</span>
</td>
</tr>
<tr v-if="timeline.results.length !== 0">
<td colspan="2" style="border: none">
<strong>Results:</strong>
</td>
</tr>
</tbody>
</v-simple-table>
<v-data-iterator
:items="timeline.results"
:items-per-page="10"
:hide-default-footer="timeline.results.length < 10 ? true : false"
>
<template v-slot:default="props">
<div v-for="(analyzer, index) in props.items" :key="index">
<v-divider></v-divider>
<v-row no-gutters class="pa-1 pl-5">
<span>{{ analyzer.verdict }}</span>
</v-row>
</div>
</template>
</v-data-iterator>
</div>
</v-expand-transition>
</div>
Expand Down Expand Up @@ -332,22 +319,22 @@ export default {
verboseAnalyzerOutput: function () {
if (this.checkAnalyzerOutput) {
// this can return null
const parsed = JSON.parse(this.timeline.verdict)
const parsed = JSON.parse(this.timelineResult.verdict)
// normalize null to undefined
return parsed == null ? undefined : parsed;
return parsed == null ? undefined : parsed
}
return undefined
},
resultSummary: function() {
resultSummary: function () {
return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.result_summary
},
resultPriority: function() {
resultPriority: function () {
return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.result_priority
},
references: function() {
references: function () {
return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.references
},
resultStatus: function() {
resultStatus: function () {
return this.verboseAnalyzerOutput && this.verboseAnalyzerOutput.result_status
},
getAnalyzerOutputMetaData: function () {
Expand Down Expand Up @@ -418,12 +405,38 @@ export default {
},
checkAnalyzerOutput: function () {
try {
JSON.parse(this.timeline.verdict)
JSON.parse(this.timelineResult.verdict)
return true
} catch (e) {
return false
}
},
timelineFirstResult: function () {
return this.timeline && this.timeline.results.length > 0 && this.timeline.results[0]
? this.timeline.results[0]
: undefined
},
timelineCreated: function () {
const firstEntry = this.timelineFirstResult
if (!firstEntry) return '... invalid date'
const createdAt =
(firstEntry.created_at && firstEntry.created_at.split('.').length) > 0
? firstEntry.created_at.split('.')[0]
: '... invalid date'
return createdAt
},
timelineResult: function () {
return this.timelineFirstResult ? this.timelineFirstResult : '... no results found'
},
getHoverTheme: function () {
return this.$vuetify.theme.dark
? this.expanded
? 'dark-hover dark-bg'
: 'dark-hover'
: this.expanded
? 'light-hover light-bg'
: 'light-hover'
},
},
methods: {
setView: function (savedSearch) {
Expand All @@ -435,7 +448,7 @@ export default {
setSavedGraph(graphId) {
EventBus.$emit('setSavedGraph', graphId)
},
applySearch(searchQuery='', timelineId="_all") {
applySearch(searchQuery = '', timelineId = '_all') {
let eventData = {}
eventData.doSearch = true
eventData.queryString = searchQuery
Expand All @@ -449,7 +462,7 @@ export default {
}
EventBus.$emit('setQueryAndFilter', eventData)
},
applyFilterChip(term, termField='', termType='label', timelineId="_all") {
applyFilterChip(term, termField = '', termType = 'label', timelineId = '_all') {
let eventData = {}
eventData.doSearch = true
eventData.queryString = '*'
Expand Down Expand Up @@ -486,4 +499,7 @@ export default {
.light-bg {
background-color: #f6f6f6;
}
.borderless td {
border: none !important;
}
</style>
Loading