google · berggren · Apr 12, 2019 · Mar 8, 2019 · Mar 12, 2019 · Mar 18, 2019
diff --git a/timesketch/api/v1/resources.py b/timesketch/api/v1/resources.py
@@ -165,24 +165,24 @@ class ResourceMixin(object):
         'updated_at': fields.DateTime
     }
 
-    sketch_fields = {
+    story_fields = {
         'id': fields.Integer,
-        'name': fields.String,
-        'description': fields.String,
+        'title': fields.String,
+        'content': fields.String,
         'user': fields.Nested(user_fields),
-        'timelines': fields.List(fields.Nested(timeline_fields)),
-        'active_timelines': fields.List(fields.Nested(timeline_fields)),
-        'status': fields.Nested(status_fields),
         'created_at': fields.DateTime,
         'updated_at': fields.DateTime
     }
 
-    story_fields = {
+    sketch_fields = {
         'id': fields.Integer,
-        'title': fields.String,
-        'content': fields.String,
+        'name': fields.String,
+        'description': fields.String,
         'user': fields.Nested(user_fields),
-        'sketch': fields.Nested(sketch_fields),
+        'timelines': fields.List(fields.Nested(timeline_fields)),
+        'stories': fields.List(fields.Nested(story_fields)),
+        'active_timelines': fields.List(fields.Nested(timeline_fields)),
+        'status': fields.Nested(status_fields),
         'created_at': fields.DateTime,
         'updated_at': fields.DateTime
     }
@@ -1173,9 +1173,12 @@ def post(self, sketch_id):
         """
         form = StoryForm.build(request)
         if form.validate_on_submit():
+            title = ''
+            if form.title.data:
+                title = form.title.data
             sketch = Sketch.query.get_with_acl(sketch_id)
             story = Story(
-                title='', content='', sketch=sketch, user=current_user)
+                title=title, content='', sketch=sketch, user=current_user)
             db_session.add(story)
             db_session.commit()
             return self.to_json(story, status_code=HTTP_STATUS_CODE_CREATED)

diff --git a/timesketch/frontend/dist/css/app.2334801b.css b/timesketch/frontend/dist/css/app.2334801b.css
diff --git a/timesketch/frontend/dist/css/app.83d39ae5.css b/timesketch/frontend/dist/css/app.83d39ae5.css
diff --git a/timesketch/frontend/dist/index.html b/timesketch/frontend/dist/index.html
@@ -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><title>Timesketch</title><link href=/dist/css/app.2334801b.css rel=preload as=style><link href=/dist/js/app.870b2c78.js rel=preload as=script><link href=/dist/js/chunk-vendors.3bf7e5ac.js rel=preload as=script><link href=/dist/css/app.2334801b.css rel=stylesheet></head><body><div id=app></div><script src=/dist/js/chunk-vendors.3bf7e5ac.js></script><script src=/dist/js/app.870b2c78.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><title>Timesketch</title><link href=/dist/css/app.83d39ae5.css rel=preload as=style><link href=/dist/js/app.f4fab0c0.js rel=preload as=script><link href=/dist/js/chunk-vendors.a477f4d9.js rel=preload as=script><link href=/dist/css/app.83d39ae5.css rel=stylesheet></head><body><div id=app></div><script src=/dist/js/chunk-vendors.a477f4d9.js></script><script src=/dist/js/app.f4fab0c0.js></script></body></html>
diff --git a/timesketch/frontend/dist/js/app.870b2c78.js b/timesketch/frontend/dist/js/app.870b2c78.js
diff --git a/timesketch/frontend/dist/js/app.870b2c78.js.map b/timesketch/frontend/dist/js/app.870b2c78.js.map
diff --git a/timesketch/frontend/dist/js/app.f4fab0c0.js b/timesketch/frontend/dist/js/app.f4fab0c0.js
diff --git a/timesketch/frontend/dist/js/app.f4fab0c0.js.map b/timesketch/frontend/dist/js/app.f4fab0c0.js.map
diff --git a/timesketch/frontend/dist/js/chunk-vendors.3bf7e5ac.js b/timesketch/frontend/dist/js/chunk-vendors.3bf7e5ac.js
diff --git a/timesketch/frontend/dist/js/chunk-vendors.3bf7e5ac.js.map b/timesketch/frontend/dist/js/chunk-vendors.3bf7e5ac.js.map
diff --git a/timesketch/frontend/dist/js/chunk-vendors.a477f4d9.js b/timesketch/frontend/dist/js/chunk-vendors.a477f4d9.js
diff --git a/timesketch/frontend/dist/js/chunk-vendors.a477f4d9.js.map b/timesketch/frontend/dist/js/chunk-vendors.a477f4d9.js.map
diff --git a/timesketch/frontend/package.json b/timesketch/frontend/package.json
@@ -13,6 +13,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "axios": "^0.18.0",
     "bulma": "^0.7.4",
+    "lodash": "^4.17.11",
+    "marked": "^0.6.1",
     "moment": "^2.24.0",
     "vue": "^2.6.6",
     "vue-moment": "^4.0.0",

diff --git a/timesketch/frontend/src/assets/main.scss b/timesketch/frontend/src/assets/main.scss
@@ -22,6 +22,10 @@ $section-padding: 15px 15px 0 15px;
 $tabs-link-active-border-bottom-color: hsl(0, 0%, 29%);
 $tabs-link-active-color: hsl(0, 0%, 21%);
 
+$message-header-background-color: rgba(229, 229, 229, 0.84);
+$message-header-color: #333333;
+$message-background-color: #f9f9f9;
+
 // Font Awesome
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

diff --git a/timesketch/frontend/src/components/AppNavbarSecondary.vue b/timesketch/frontend/src/components/AppNavbarSecondary.vue
@@ -31,10 +31,10 @@ limitations under the License.
             </router-link>
           </li>
           <li v-bind:class="{'is-active': currentPage === 'stories'}">
-            <a>
+            <router-link :to="{ name: 'SketchStory' }">
               <span class="icon is-small"><i class="fas fa-book" aria-hidden="true"></i></span>
               <span>Stories</span>
-            </a>
+            </router-link>
           </li>
         </ul>
       </div>

diff --git a/timesketch/frontend/src/components/HomeSketchList.vue b/timesketch/frontend/src/components/HomeSketchList.vue
@@ -42,7 +42,7 @@ export default {
   },
   created: function () {
     ApiClient.getSketchList().then((response) => {
-      this.$store.dispatch('resetState')
+      this.$store.commit('resetState')
       this.sketches = response.data.objects[0]
     }).catch((e) => {
       console.error(e)

diff --git a/timesketch/frontend/src/components/Sketch.vue b/timesketch/frontend/src/components/Sketch.vue
@@ -22,11 +22,7 @@ export default {
   name: 'ts-sketch',
   props: ['sketchId'],
   created: function () {
-    this.$store.dispatch('updateSketch', this.sketchId)
-      .then(result => {})
-      .catch(error => {
-        console.log('error: ', error)
-      })
+    this.$store.commit('updateSketch', this.sketchId)
   }
 }
 </script>

diff --git a/timesketch/frontend/src/components/SketchCreateViewForm.vue b/timesketch/frontend/src/components/SketchCreateViewForm.vue
@@ -0,0 +1,67 @@
+<!--
+Copyright 2019 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<template>
+  <form v-on:submit.prevent="submitForm">
+    <div class="field">
+      <label class="label">Name</label>
+      <div class="control">
+        <input v-model="viewName" class="input" type="text" required placeholder="Name your view" autofocus>
+      </div>
+    </div>
+    <div class="field">
+      <div class="control">
+        <input class="button is-success" type="submit" value="Save" v-on:click="toggleCreateViewModal">
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+import ApiClient from '../utils/RestApiClient'
+
+export default {
+  name: 'ts-home-sketch-create-form',
+  props: [
+    'sketchId',
+    'currentQueryString',
+    'currentQueryFilter'
+  ],
+  data () {
+    return {
+      viewName: ''
+    }
+  },
+  methods: {
+    clearFormData: function () {
+      this.viewName = ''
+    },
+    submitForm: function () {
+      ApiClient.createView(this.sketchId, this.viewName, this.currentQueryString, this.currentQueryFilter).then((response) => {
+        let newView = response.data.objects[0]
+        this.$store.state.meta.views.push(newView)
+        this.clearFormData()
+        this.$router.push({ name: 'SketchExplore', query: { view: newView.id } })
+      }).catch((e) => {})
+    },
+    toggleCreateViewModal: function () {
+      this.$emit('toggleCreateViewModal')
+    }
+  }
+}
+</script>
+
+<!-- CSS scoped to this component only -->
+<style scoped lang="scss"></style>
diff --git a/timesketch/frontend/src/components/SketchExplore.vue b/timesketch/frontend/src/components/SketchExplore.vue
@@ -17,25 +17,40 @@ limitations under the License.
   <div>
 
     <section class="section">
-      <div class="container is-fluid">
+      <div class="container">
         <ts-navbar-secondary currentAppContext="sketch" currentPage="explore"></ts-navbar-secondary>
       </div>
     </section>
 
     <section class="section">
-      <div class="container is-fluid">
+      <div class="container">
         <div class="card">
           <div class="card-content">
-            <ts-sketch-explore-search></ts-sketch-explore-search>
+            <ts-sketch-explore-search :sketchId="sketchId"></ts-sketch-explore-search>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" v-if="searchInProgress">
+      <div class="container">
+        <div class="card">
+          <div class="card-content">
+            <span class="icon">
+              <i class="fas fa-circle-notch fa-pulse"></i>
+            </span>
+            <span>Searching..</span>
           </div>
         </div>
       </div>
     </section>
 
     <section class="section" v-if="eventList.meta.es_time">
-      <div class="container is-fluid">
+      <div class="container" v-if="!searchInProgress">
         <div class="card">
           <div class="card-content">
+            <div v-if="totalTime">{{ totalHits }} events ({{ totalTime }}s)</div>
+            <div v-if="totalHits > 0" style="margin-top:20px;"></div>
             <ts-sketch-explore-event-list></ts-sketch-explore-event-list>
           </div>
         </div>
@@ -51,6 +66,7 @@ import TsSketchExploreEventList from './SketchExploreEventList'
 
 export default {
   name: 'ts-sketch-explore',
+  props: ['sketchId'],
   components: {
     TsSketchExploreSearch,
     TsSketchExploreEventList
@@ -64,6 +80,15 @@ export default {
     },
     eventList () {
       return this.$store.state.eventList
+    },
+    searchInProgress () {
+      return this.$store.state.searchInProgress
+    },
+    totalHits () {
+      return this.eventList.meta.es_total_count || 0
+    },
+    totalTime () {
+      return this.eventList.meta.es_time / 1000 || 0
     }
   }
 }

diff --git a/timesketch/frontend/src/components/SketchExploreEventList.vue b/timesketch/frontend/src/components/SketchExploreEventList.vue
@@ -15,10 +15,7 @@ limitations under the License.
 -->
 <template>
   <div>
-    <div v-if="totalTime">{{ totalHits }} events ({{ totalTime }}s)</div>
-    <div v-if="totalHits > 0" style="margin-top:20px;">
-      <ts-sketch-explore-event-list-item v-for="event in eventList.objects" :key="event._id" :event="event"></ts-sketch-explore-event-list-item>
-    </div>
+    <ts-sketch-explore-event-list-item v-for="event in eventList.objects" :key="event._id" :event="event"></ts-sketch-explore-event-list-item>
   </div>
 </template>
 
@@ -39,12 +36,6 @@ export default {
     },
     eventList () {
       return this.$store.state.eventList
-    },
-    totalHits () {
-      return this.eventList.meta.es_total_count || 0
-    },
-    totalTime () {
-      return this.eventList.meta.es_time / 1000 || 0
     }
   }
 }

diff --git a/timesketch/frontend/src/components/SketchExploreEventListItem.vue b/timesketch/frontend/src/components/SketchExploreEventListItem.vue
@@ -81,7 +81,7 @@ export default {
     },
     timelineName () {
       return this.timeline(this.event._index).name
-    },
+    }
   }
 }
 </script>
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><title>Timesketch</title><link href=/dist/css/app.2334801b.css rel=preload as=style><link href=/dist/js/app.870b2c78.js rel=preload as=script><link href=/dist/js/chunk-vendors.3bf7e5ac.js rel=preload as=script><link href=/dist/css/app.2334801b.css rel=stylesheet></head><body><div id=app></div><script src=/dist/js/chunk-vendors.3bf7e5ac.js></script><script src=/dist/js/app.870b2c78.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><title>Timesketch</title><link href=/dist/css/app.83d39ae5.css rel=preload as=style><link href=/dist/js/app.f4fab0c0.js rel=preload as=script><link href=/dist/js/chunk-vendors.a477f4d9.js rel=preload as=script><link href=/dist/css/app.83d39ae5.css rel=stylesheet></head><body><div id=app></div><script src=/dist/js/chunk-vendors.a477f4d9.js></script><script src=/dist/js/app.f4fab0c0.js></script></body></html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,7 +81,7 @@ export default { @@
         },
         timelineName () {
           return this.timeline(this.event._index).name
-        },
+        }
       }
     }
     </script>
@@ Expand Down @@