Timeline and Scenarios fixes + small UI fixes (#2808)

* UI polish * Remove transition between page loads * No hover on search input
google · Jul 4, 2023 · 525de66 · 525de66
1 parent d109ca3
commit 525de66
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 102 deletions.
diff --git a/timesketch/frontend-ng/src/App.vue b/timesketch/frontend-ng/src/App.vue
@@ -23,7 +23,7 @@ limitations under the License.
       </template>
     </v-snackbar>
 
-    <v-main>
+    <v-main class="notransition">
       <!-- Main view -->
       <router-view></router-view>
     </v-main>

diff --git a/timesketch/frontend-ng/src/assets/main.scss b/timesketch/frontend-ng/src/assets/main.scss
@@ -148,10 +148,18 @@ html {
   background-color: #f5f5f5;
 }
 
+.light-highlight-selected {
+  background-color: #e6e6e6;
+}
+
 .dark-highlight {
   background-color: #303030;
 }
 
+.dark-highlight-selected {
+  background-color: #383838;
+}
+
 .light-info-card {
   background-color: rgba(33, 150, 243, .1);
   color: #333;
@@ -183,3 +191,10 @@ html {
 .v-card--link:before {
   background: none;
 }
+
+.notransition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
diff --git a/timesketch/frontend-ng/src/components/Explore/TimelineChip.vue b/timesketch/frontend-ng/src/components/Explore/TimelineChip.vue
@@ -108,46 +108,37 @@ limitations under the License.
           @click="toggleTimeline()"
           :style="getTimelineStyle(timeline)"
           class="mr-2 mb-3 pr-1 timeline-chip"
-          :class="{failed: timelineFailed}"
+          :class="[{ failed: timelineFailed }, $vuetify.theme.dark ? 'dark-highlight' : 'light-highlight']"
           :ripple="!timelineFailed"
         >
           <div class="chip-content">
-
-            <v-icon v-if="timelineFailed" @click="dialogStatus = true" left color="red" size="x-large"> mdi-alert-circle-outline </v-icon>
-            <v-icon v-if="!timelineFailed" left :color="timelineChipColor" size="xx-large" class="ml-n3"> mdi-circle </v-icon>
+            <v-icon v-if="timelineFailed" @click="dialogStatus = true" left color="red" size="x-large">
+              mdi-alert-circle-outline
+            </v-icon>
+            <v-icon v-if="!timelineFailed" left :color="timelineChipColor" size="x-large"> mdi-circle </v-icon>
 
             <v-tooltip bottom :disabled="timeline.name.length < 30" open-delay="300">
               <template v-slot:activator="{ on: onTooltip, attrs }">
-                <span class="timeline-name-ellipsis" :class="{ disabled: !isSelected && timelineStatus === 'ready'}"
-                v-bind="attrs"
-                v-on="onTooltip"
-                >{{ timeline.name }}</span>
+                <span
+                  class="timeline-name-ellipsis"
+                  :class="{ disabled: !isSelected && timelineStatus === 'ready' }"
+                  v-bind="attrs"
+                  v-on="onTooltip"
+                  >{{ timeline.name }}</span
+                >
               </template>
               <span>{{ timeline.name }}</span>
             </v-tooltip>
 
             <span class="right">
-              <span
-                v-if="timelineStatus === 'processing'"
-                class="ml-3"
-              >
+              <span v-if="timelineStatus === 'processing'" class="ml-3">
                 <v-progress-circular small indeterminate color="grey" :size="20" :width="2"></v-progress-circular>
               </span>
 
-              <v-chip
-                v-if="!timelineFailed"
-                class="events-count"
-                :color="$vuetify.theme.dark ? 'grey' : '#fff'"
-                small
-              >
+              <span v-if="!timelineFailed" class="events-count" x-small>
                 {{ eventsCount | compactNumber }}
-              </v-chip>
-              <v-btn
-                class="ma-1"
-                small
-                icon
-                v-on="on"
-              >
+              </span>
+              <v-btn class="ma-1" x-small icon v-on="on">
                 <v-icon> mdi-dots-vertical </v-icon>
               </v-btn>
             </span>
@@ -406,14 +397,14 @@ export default {
       return 'mdi-alert-circle-outline'
     },
     timelineFailed() {
-      return this.timelineStatus === 'fail';
+      return this.timelineStatus === 'fail'
     },
     timelineChipColor() {
       if (!this.timeline.color.startsWith('#')) {
         return '#' + this.timeline.color
       }
       return this.timeline.color
-    }
+    },
   },
   methods: {
     rename() {
@@ -455,9 +446,10 @@ export default {
       this.$emit('save', this.timeline)
     }, 300),
     getTimelineStyle(timeline) {
-      const greyOut = (this.timelineStatus === 'ready' && !this.isSelected)
+      const greyOut = this.timelineStatus === 'ready' && !this.isSelected
       return {
-        opacity: greyOut ? '50%':'100%',
+        opacity: greyOut ? '50%' : '100%',
+        backgroundColor: this.$vuetify.theme.dark ? '#303030' : '#f5f5f5',
       }
     },
     fetchData() {
@@ -570,10 +562,8 @@ export default {
 
 <!-- CSS scoped to this component only -->
 <style scoped lang="scss">
-
 .timeline-chip {
-
-  .right{
+  .right {
     margin-left: auto;
   }
 
@@ -594,10 +584,8 @@ export default {
   opacity: 0;
 }
 
-.theme--dark {
-  .events-count {
-    color: black;
-  }
+.events-count {
+  font-size: 0.8em;
 }
 
 .disabled {

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/Graphs.vue b/timesketch/frontend-ng/src/components/LeftPanel/Graphs.vue
@@ -31,42 +31,46 @@ limitations under the License.
     </div>
 
     <v-expand-transition>
-      <div v-show="expanded" class="pb-2">
+      <div v-show="expanded">
         <!-- Saved graphs -->
-        <v-subheader>Saved Graphs</v-subheader>
-        <router-link
-          v-for="graph in savedGraphs"
-          :key="graph.id"
-          :to="{ name: 'Graph', query: { graph: graph.id } }"
-          style="cursor: pointer; font-size: 0.9em; text-decoration: none"
-        >
-          <v-row
-            no-gutters
-            @click="setSavedGraph(graph.id)"
-            class="pa-2 pl-5"
-            :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'"
+        <div v-show="savedGraphs.length">
+          <v-subheader>Saved Graphs</v-subheader>
+          <router-link
+            v-for="graph in savedGraphs"
+            :key="graph.id"
+            :to="{ name: 'Graph', query: { graph: graph.id } }"
+            style="cursor: pointer; font-size: 0.9em; text-decoration: none"
           >
-            <span :class="$vuetify.theme.dark ? 'dark-font' : 'light-font'">{{ graph.name }}</span>
-          </v-row>
-        </router-link>
+            <v-row
+              no-gutters
+              @click="setSavedGraph(graph.id)"
+              class="pa-2 pl-5"
+              :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'"
+            >
+              <span :class="$vuetify.theme.dark ? 'dark-font' : 'light-font'">{{ graph.name }}</span>
+            </v-row>
+          </router-link>
+        </div>
 
         <!-- Graph plugins -->
-        <v-subheader>Plugins</v-subheader>
-        <router-link
-          v-for="graph in graphs"
-          :key="graph.name"
-          :to="{ name: 'Graph', query: { plugin: graph.name } }"
-          style="cursor: pointer; font-size: 0.9em; text-decoration: none"
-        >
-          <v-row
-            no-gutters
-            @click="setGraphPlugin(graph.name)"
-            class="pa-2 pl-5"
-            :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'"
+        <div v-show="graphs.length">
+          <v-subheader>Plugins</v-subheader>
+          <router-link
+            v-for="graph in graphs"
+            :key="graph.name"
+            :to="{ name: 'Graph', query: { plugin: graph.name } }"
+            style="cursor: pointer; font-size: 0.9em; text-decoration: none"
           >
-            <span :class="$vuetify.theme.dark ? 'dark-font' : 'light-font'">{{ graph.display_name }}</span>
-          </v-row>
-        </router-link>
+            <v-row
+              no-gutters
+              @click="setGraphPlugin(graph.name)"
+              class="pa-2 pl-5"
+              :class="$vuetify.theme.dark ? 'dark-hover' : 'light-hover'"
+            >
+              <span :class="$vuetify.theme.dark ? 'dark-font' : 'light-font'">{{ graph.display_name }}</span>
+            </v-row>
+          </router-link>
+        </div>
       </div>
     </v-expand-transition>
     <v-divider></v-divider>

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/SavedSearches.vue b/timesketch/frontend-ng/src/components/LeftPanel/SavedSearches.vue
@@ -30,7 +30,7 @@ limitations under the License.
     </div>
 
     <v-expand-transition>
-      <div v-show="expanded" class="pb-2">
+      <div v-show="expanded && meta.views.length">
         <div
           v-for="savedSearch in meta.views"
           :key="savedSearch.name"

diff --git a/timesketch/frontend-ng/src/components/LeftPanel/SearchTemplateCompact.vue b/timesketch/frontend-ng/src/components/LeftPanel/SearchTemplateCompact.vue
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <template>
+  <v-chip small outlined @click="search(searchtemplate.query_string)">
+    {{ searchtemplate.name }}
+  </v-chip>
+  <!--
   <div>
     <v-row no-gutters>
       <div
@@ -29,6 +33,7 @@ limitations under the License.
       </div>
     </v-row>
   </div>
+  -->
 </template>
 
 <script>

diff --git a/timesketch/frontend-ng/src/components/Scenarios/Facet.vue b/timesketch/frontend-ng/src/components/Scenarios/Facet.vue
@@ -17,28 +17,34 @@ limitations under the License.
   <div>
     <v-row
       no-gutters
-      class="pa-3 pl-1"
+      class="pa-3"
       style="cursor: pointer"
       @click="toggleFacet()"
-      :class="[$vuetify.theme.dark ? 'dark-hover' : 'light-hover']"
+      :class="
+        $vuetify.theme.dark
+          ? expanded
+            ? 'dark-highlight'
+            : 'dark-hover'
+          : expanded
+          ? 'light-highlight'
+          : 'light-hover'
+      "
     >
       <v-col cols="1" class="pl-1">
         <v-icon v-if="!expanded">mdi-chevron-right</v-icon>
         <v-icon v-else>mdi-chevron-down</v-icon>
       </v-col>
-      <v-col cols="10">
+
+      <v-col cols="10" class="pl-1">
         <span style="font-size: 0.9em">
-          <span v-if="notStarted || isActive"
-            ><strong>{{ facet.display_name }}</strong></span
-          >
-          <span v-else>{{ facet.display_name }}</span>
+          {{ facet.display_name }}
         </span>
       </v-col>
 
       <v-col cols="1">
-        <div class="ml-1">
-          <small>{{ questionsWithConclusion.length }}/{{ facet.questions.length }} </small>
-        </div>
+        <v-chip style="padding-left: 8px" x-small :color="isResolved ? 'success' : ''" :outlined="!isResolved">
+          {{ questionsWithConclusion.length }}/{{ facet.questions.length }}
+        </v-chip>
       </v-col>
     </v-row>
 

diff --git a/timesketch/frontend-ng/src/components/Scenarios/Question.vue b/timesketch/frontend-ng/src/components/Scenarios/Question.vue
@@ -15,35 +15,59 @@ limitations under the License.
 -->
 <template>
   <div>
-    <div class="pl-6" @click="expanded = !expanded" style="cursor: pointer; font-size: 0.9em">
-      <div :class="[$vuetify.theme.dark ? 'dark-hover' : 'light-hover']" class="pa-2 mr-3" style="border-radius: 6px">
-        <strong v-if="!question.conclusions.length">{{ question.display_name }}</strong>
-        <span v-else>{{ question.display_name }}</span>
-      </div>
-    </div>
+    <v-row
+      no-gutters
+      class="pa-2 pl-5"
+      style="cursor: pointer; font-size: 0.9em"
+      @click="expanded = !expanded"
+      :class="
+        $vuetify.theme.dark
+          ? expanded
+            ? 'dark-highlight-selected'
+            : 'dark-hover'
+          : expanded
+          ? 'light-highlight-selected'
+          : 'light-hover'
+      "
+    >
+      <span>{{ question.display_name }}</span>
+    </v-row>
 
     <v-expand-transition>
-      <div v-show="expanded">
+      <div
+        v-show="expanded"
+        :class="
+          $vuetify.theme.dark
+            ? expanded
+              ? 'dark-highlight'
+              : 'dark-hover'
+            : expanded
+            ? 'light-highlight'
+            : 'light-hover'
+        "
+        class="pb-1"
+      >
         <!-- Query suggestions -->
-        <div class="pa-2 pl-9">
-          <v-icon x-small class="mr-1">mdi-magnify</v-icon>
-          <strong><small>Query suggestions</small></strong>
-          <div v-for="searchtemplate in searchTemplates" :key="searchtemplate.id" class="pa-1 mt-1">
-            <ts-search-template :searchtemplate="searchtemplate"></ts-search-template>
-          </div>
+        <div class="pt-2 pl-5">
+          <small>Suggested queries:</small>
+          <v-chip-group column>
+            <ts-search-template
+              v-for="searchtemplate in searchTemplates"
+              :key="searchtemplate.id"
+              :searchtemplate="searchtemplate"
+            ></ts-search-template>
+          </v-chip-group>
         </div>
 
         <!-- Conclusions -->
-        <div class="mb-3 pl-9">
-          <v-icon x-small class="mr-1">mdi-check-circle-outline</v-icon>
-          <strong><small>Conclusions</small></strong>
+        <div class="mb-3 pl-5">
           <v-sheet outlined rounded class="mt-2 mr-3" v-for="conclusion in question.conclusions" :key="conclusion.id">
             <ts-question-conclusion :question="question" :conclusion="conclusion"></ts-question-conclusion>
           </v-sheet>
         </div>
 
         <!-- Add new conclusion -->
-        <div v-if="!currentUserConclusion" style="font-size: 0.9em" class="pb-2 pl-9 mr-3">
+        <div v-if="!currentUserConclusion" style="font-size: 0.9em" class="pb-4 mr-3 pl-5">
           <v-textarea
             v-model="conclusionText"
             outlined
@@ -128,4 +152,10 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.dark-bg {
+  background-color: #303030;
+}
+.light-bg {
+  background-color: #f6f6f6;
+}
 </style>