Support subpath for serving frontend (#2149)

google · Feb 17, 2022 · b099d1a · b099d1a
1 parent 043703a
commit b099d1a
Show file tree

Hide file tree

Showing 16 changed files with 32 additions and 17 deletions.
diff --git a/timesketch/app.py b/timesketch/app.py
@@ -38,19 +38,27 @@
 from timesketch.views.spa import spa_views
 
 
-def create_app(config=None):
+def create_app(config=None, v2=False):
     """Create the Flask app instance that is used throughout the application.
 
     Args:
         config: Path to configuration file as a string or an object with config
         directives.
+        v2: Temporary flag to indicate to serve the new UI.
+            TODO: Remove this when the old UI has been deprecated.
 
     Returns:
         Application object (instance of flask.Flask).
     """
     template_folder = 'frontend/dist'
     static_folder = 'frontend/dist'
 
+    # Serve the new UI.
+    # This is still experimental and will be broken and have missing features.
+    if v2:
+        template_folder = 'frontend-ng/dist'
+        static_folder = 'frontend-ng/dist'
+
     app = Flask(
         __name__,
         template_folder=template_folder,

diff --git a/timesketch/frontend-ng/dist/index.html b/timesketch/frontend-ng/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><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel=stylesheet><link href=https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css rel=stylesheet><title>Timesketch</title><link href=/dist/css/chunk-common.f47dd3bf.css rel=preload as=style><link href=/dist/css/chunk-vendors.b6cc05e8.css rel=preload as=style><link href=/dist/js/chunk-common.caa84f87.js rel=preload as=script><link href=/dist/js/chunk-vendors.8e9f2573.js rel=preload as=script><link href=/dist/js/index.de6f02a3.js rel=preload as=script><link href=/dist/css/chunk-vendors.b6cc05e8.css rel=stylesheet><link href=/dist/css/chunk-common.f47dd3bf.css rel=stylesheet></head><body><div id=app></div><script src=/dist/js/chunk-vendors.8e9f2573.js></script><script src=/dist/js/chunk-common.caa84f87.js></script><script src=/dist/js/index.de6f02a3.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=/v2/dist/favicon.ico><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel=stylesheet><link href=https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css rel=stylesheet><title>Timesketch</title><link href=/v2/dist/css/chunk-common.f47dd3bf.css rel=preload as=style><link href=/v2/dist/css/chunk-vendors.b6cc05e8.css rel=preload as=style><link href=/v2/dist/js/chunk-common.1ec683c2.js rel=preload as=script><link href=/v2/dist/js/chunk-vendors.8e9f2573.js rel=preload as=script><link href=/v2/dist/js/index.4004e0e9.js rel=preload as=script><link href=/v2/dist/css/chunk-vendors.b6cc05e8.css rel=stylesheet><link href=/v2/dist/css/chunk-common.f47dd3bf.css rel=stylesheet></head><body><div id=app></div><script src=/v2/dist/js/chunk-vendors.8e9f2573.js></script><script src=/v2/dist/js/chunk-common.1ec683c2.js></script><script src=/v2/dist/js/index.4004e0e9.js></script></body></html>
diff --git a/timesketch/frontend-ng/dist/js/chunk-common.1ec683c2.js b/timesketch/frontend-ng/dist/js/chunk-common.1ec683c2.js
diff --git a/timesketch/frontend-ng/dist/js/chunk-common.1ec683c2.js.map b/timesketch/frontend-ng/dist/js/chunk-common.1ec683c2.js.map
diff --git a/timesketch/frontend-ng/dist/js/chunk-common.caa84f87.js b/timesketch/frontend-ng/dist/js/chunk-common.caa84f87.js
diff --git a/timesketch/frontend-ng/dist/js/chunk-common.caa84f87.js.map b/timesketch/frontend-ng/dist/js/chunk-common.caa84f87.js.map
diff --git a/...tch/frontend-ng/dist/js/index.de6f02a3.js → ...tch/frontend-ng/dist/js/index.4004e0e9.js b/...tch/frontend-ng/dist/js/index.de6f02a3.js → ...tch/frontend-ng/dist/js/index.4004e0e9.js
diff --git a/...frontend-ng/dist/js/index.de6f02a3.js.map → ...frontend-ng/dist/js/index.4004e0e9.js.map b/...frontend-ng/dist/js/index.de6f02a3.js.map → ...frontend-ng/dist/js/index.4004e0e9.js.map
diff --git a/...tch/frontend-ng/dist/js/login.858dbba5.js → ...tch/frontend-ng/dist/js/login.a6eb9619.js b/...tch/frontend-ng/dist/js/login.858dbba5.js → ...tch/frontend-ng/dist/js/login.a6eb9619.js
diff --git a/...frontend-ng/dist/js/login.858dbba5.js.map → ...frontend-ng/dist/js/login.a6eb9619.js.map b/...frontend-ng/dist/js/login.858dbba5.js.map → ...frontend-ng/dist/js/login.a6eb9619.js.map
diff --git a/timesketch/frontend-ng/dist/login.html b/timesketch/frontend-ng/dist/login.html
@@ -1,4 +1,4 @@
-<!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><style>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=/v2/dist/favicon.ico><title>Timesketch</title><style>html,
         body {
             display: flex;
             height: 100%;
@@ -15,4 +15,4 @@
         .card-content {
             justify-content: center;
             align-items: center;
-        }</style><link href=/dist/css/chunk-common.f47dd3bf.css rel=preload as=style><link href=/dist/css/chunk-vendors.b6cc05e8.css rel=preload as=style><link href=/dist/js/chunk-common.caa84f87.js rel=preload as=script><link href=/dist/js/chunk-vendors.8e9f2573.js rel=preload as=script><link href=/dist/js/login.858dbba5.js rel=preload as=script><link href=/dist/css/chunk-vendors.b6cc05e8.css rel=stylesheet><link href=/dist/css/chunk-common.f47dd3bf.css rel=stylesheet></head><body class=login-page><div class=columns><div class=column><div class="card is-wide has-text-centered"><div class=card-content><div class=content><div><img src=/dist/timesketch-color.png style=width:40px;><div style="font-size: 1.5em;">time<b>sketch</b></div><div style="font-size: 0.8em;">Digital Forensic Timeline Analysis</div></div><br><form method=post style="width:50%;margin-left: auto; margin-right: auto;"><div class=field><div class=control><input type=text class=input name=username placeholder=Username style=text-align:center;></div></div><div class=field><div class=control><input type=password class=input name=password placeholder=Password style=text-align:center;></div></div><div class=field><div class="control has-text-centered"><button type=submit class="button is-rounded is-wide is-info" style=width:100%;>Sign in</button></div></div>{{ form.csrf_token }}</form></div></div></div></div></div><script src=/dist/js/chunk-vendors.8e9f2573.js></script><script src=/dist/js/chunk-common.caa84f87.js></script><script src=/dist/js/login.858dbba5.js></script></body></html>
+        }</style><link href=/v2/dist/css/chunk-common.f47dd3bf.css rel=preload as=style><link href=/v2/dist/css/chunk-vendors.b6cc05e8.css rel=preload as=style><link href=/v2/dist/js/chunk-common.1ec683c2.js rel=preload as=script><link href=/v2/dist/js/chunk-vendors.8e9f2573.js rel=preload as=script><link href=/v2/dist/js/login.a6eb9619.js rel=preload as=script><link href=/v2/dist/css/chunk-vendors.b6cc05e8.css rel=stylesheet><link href=/v2/dist/css/chunk-common.f47dd3bf.css rel=stylesheet></head><body class=login-page><div class=columns><div class=column><div class="card is-wide has-text-centered"><div class=card-content><div class=content><div><img src=/v2/dist/timesketch-color.png style=width:40px;><div style="font-size: 1.5em;">time<b>sketch</b></div><div style="font-size: 0.8em;">Digital Forensic Timeline Analysis</div></div><br><form method=post style="width:50%;margin-left: auto; margin-right: auto;"><div class=field><div class=control><input type=text class=input name=username placeholder=Username style=text-align:center;></div></div><div class=field><div class=control><input type=password class=input name=password placeholder=Password style=text-align:center;></div></div><div class=field><div class="control has-text-centered"><button type=submit class="button is-rounded is-wide is-info" style=width:100%;>Sign in</button></div></div>{{ form.csrf_token }}</form></div></div></div></div></div><script src=/v2/dist/js/chunk-vendors.8e9f2573.js></script><script src=/v2/dist/js/chunk-common.1ec683c2.js></script><script src=/v2/dist/js/login.a6eb9619.js></script></body></html>
diff --git a/timesketch/frontend-ng/src/App.vue b/timesketch/frontend-ng/src/App.vue
@@ -23,6 +23,8 @@ limitations under the License.
       </span>
       <v-spacer></v-spacer>
 
+      <v-btn small depressed v-on:click="switchUI"> Use the old UI </v-btn>
+
       <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
           <v-btn icon v-on:click="toggleTheme" v-bind="attrs" v-on="on">
@@ -71,6 +73,9 @@ export default {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
       localStorage.setItem('isDarkTheme', this.$vuetify.theme.dark.toString())
     },
+    switchUI: function () {
+      window.location.href = window.location.href.replace('/v2/', '/')
+    },
   },
   mounted() {
     const isDark = localStorage.getItem('isDarkTheme')

diff --git a/timesketch/frontend-ng/src/router.js b/timesketch/frontend-ng/src/router.js
@@ -52,5 +52,6 @@ const routes = [
 
 export default new VueRouter({
   mode: 'history',
+  base: process.env.NODE_ENV === 'development' ? '/' : '/v2/',
   routes,
 })
diff --git a/timesketch/frontend-ng/src/utils/RestApiClient.js b/timesketch/frontend-ng/src/utils/RestApiClient.js
@@ -17,7 +17,7 @@ import axios from 'axios'
 import { SnackbarProgrammatic as Snackbar } from 'buefy'
 
 const RestApiClient = axios.create({
-  baseURL: '/api/v1',
+  baseURL: process.env.NODE_ENV === 'development' ? '/api/v1' : '/v2/api/v1',
   headers: {
     common: {
       'X-CSRFToken': document.getElementsByTagName('meta')[0]['content'],
@@ -26,7 +26,7 @@ const RestApiClient = axios.create({
 })
 
 const RestApiBlobClient = axios.create({
-  baseURL: '/api/v1',
+  baseURL: process.env.NODE_ENV === 'development' ? '/api/v1' : '/v2/api/v1',
   responseType: 'blob',
   headers: {
     common: {

diff --git a/timesketch/frontend-ng/vue.config.js b/timesketch/frontend-ng/vue.config.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 module.exports = {
   lintOnSave: false,
-  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/dist/',
-  configureWebpack: config => {
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/v2/dist/',
+  configureWebpack: (config) => {
     config.watchOptions = {
       aggregateTimeout: 500,
       poll: 1000,

diff --git a/timesketch/wsgi.py b/timesketch/wsgi.py
@@ -44,6 +44,7 @@
 
 configure_logger()
 application = create_app()
+application_v2 = create_app(v2=True)
 
 # Setup metrics endpoint.
 if os.environ.get('prometheus_multiproc_dir'):