New frontend (#848)

* Initial scaffolding of new frontend

* Make new frontend available via setting

* Make old frontend the default one

* Turn into SPA, add routes and store management. Some refactor.

* Add search

* Refactor view

* Make new UI off by default

Author: berggren

docker/timesketch-dev-compose.yml

@@ -23,6 +23,7 @@ services:
       - NEO4J_PORT=7474
       - TIMESKETCH_USER=dev
       - TIMESKETCH_PASSWORD=dev
+      - CHOKIDAR_USEPOLLING=true
     restart: always
     volumes:
       - ../:/usr/local/src/timesketch/

timesketch/__init__.py

@@ -36,6 +36,10 @@
 from timesketch.views.home import home_views
 from timesketch.views.sketch import sketch_views
 from timesketch.views.auth import auth_views
+from timesketch.views.spa import spa_views
+
+# Set to true to use the new Vue.js based frontend.
+USE_NEW_FRONTEND = False
 
 
 def create_app(config=None):
@@ -49,7 +53,18 @@ def create_app(config=None):
         Application object (instance of flask.Flask).
     """
     # Setup the Flask app and load the config.
-    app = Flask(__name__, template_folder='templates', static_folder='static')
+    template_folder = 'templates'
+    static_folder = 'static'
+
+    if USE_NEW_FRONTEND:
+        template_folder = 'frontend/dist'
+        static_folder = 'frontend/dist'
+
+    app = Flask(
+        __name__,
+        template_folder=template_folder,
+        static_folder=static_folder
+    )
 
     if not config:
         config = '/etc/timesketch.conf'
@@ -94,9 +109,12 @@ def create_app(config=None):
     # Register blueprints. Blueprints are a way to organize your Flask
     # Flask application. See this for more information:
     # http://flask.pocoo.org/docs/latest/blueprints/
-    app.register_blueprint(auth_views)
-    app.register_blueprint(home_views)
-    app.register_blueprint(sketch_views)
+    if USE_NEW_FRONTEND:
+        app.register_blueprint(spa_views)
+    else:
+        app.register_blueprint(auth_views)
+        app.register_blueprint(home_views)
+        app.register_blueprint(sketch_views)
 
     # Setup URL routes for the API.
     api_v1 = Api(app, prefix='/api/v1')

timesketch/api/v1/resources.py

@@ -345,7 +345,9 @@ def get(self, sketch_id):
         meta = dict(
             views=[{
                 'name': view.name,
-                'id': view.id
+                'id': view.id,
+                'created_at': view.created_at,
+                'updated_at': view.updated_at
             } for view in sketch.get_named_views],
             searchtemplates=[{
                 'name': searchtemplate.name,

timesketch/frontend/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

timesketch/frontend/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

timesketch/frontend/.eslintrc.js

@@ -0,0 +1,32 @@
+/*
+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.
+*/
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

timesketch/frontend/README.md

@@ -0,0 +1,34 @@
+# Timesketch web frontend
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Run your unit tests
+```
+yarn run test:unit
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

timesketch/frontend/babel.config.js

@@ -0,0 +1,20 @@
+/*
+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.
+*/
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

timesketch/frontend/dist/css/app.2334801b.css

@@ -0,0 +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>