Improve local js,css development

Making changes to js,css can be painful with a packaged jar since a compilation is needed to repackage any new changes. This change allows for the paths to the static resources to be configured at runtime. While developing locally, you can then set the prefix to bypass the jar and the browser will resolve it on your local filesystem. Author: @franklinhu Fixes #112 URL: #112
openzipkin · Aug 14, 2012 · 4fc612b · 4fc612b
1 parent 90f6772
commit 4fc612b
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 31 deletions.
diff --git a/zipkin-finatra/config/web-dev.scala b/zipkin-finatra/config/web-dev.scala
@@ -14,13 +14,28 @@
 * limitations under the License.
 */
 
-import com.twitter.zipkin.config.ZipkinWebConfig
+import com.twitter.zipkin.config.{CssConfig, JsConfig, ZipkinWebConfig}
 import com.twitter.zipkin.config.zookeeper.ZooKeeperConfig
 import java.net.InetSocketAddress
 
 new ZipkinWebConfig {
   rootUrl = "http://localhost:" + serverPort + "/"
 
+  /**
+   * Making changes to js/css can be painful with a packaged jar since a compilation is needed to
+   * repackage any new changes. `resourcePathPrefix` can be hacked to point to the directory
+   * on your local file system so the browser resolves it outside of the jar. Example:
+   *
+   * `val resourcePathPrefix = "file:///Users/username/path/to/zipkin-finatra/src/main/resources/public"`
+   */
+  val resourcePathPrefix = "/public"
+  jsConfig = new JsConfig {
+    override val pathPrefix = resourcePathPrefix
+  }
+  cssConfig = new CssConfig {
+    override val pathPrefix = resourcePathPrefix
+  }
+
   def zkConfig = new ZooKeeperConfig {
     servers = List("localhost:3003")
   }

diff --git a/zipkin-finatra/src/main/resources/templates/layouts/application.mustache b/zipkin-finatra/src/main/resources/templates/layouts/application.mustache
@@ -1,38 +1,14 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
-      <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" media="screen" rel="stylesheet" />
-      <link href="/public/css/bootstrap.css" media="screen" rel="stylesheet" />
-      <link href="/public/css/bootstrap-responsive.css" media="screen" rel="stylesheet" />
-      <link href="/public/css/datepicker.css" media="screen" rel="stylesheet" />
-      <link href="/public/css/application.css" media="screen" rel="stylesheet" />
+      {{#stylesheets}}
+      <link href="{{.}}" media="screen" rel="stylesheet" />
+      {{/stylesheets}}
 
-      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+      {{#javascripts}}
+      <script type="text/javascript" src="{{.}}"></script>
+      {{/javascripts}}
 
-      <script type="text/javascript" src="/public/js/bootstrap.js"></script>
-      <script type="text/javascript" src="/public/js/datepicker.js"></script>
-      <script type="text/javascript" src="/public/js/d3-2.9.1.js"></script>
-      <script type="text/javascript" src="/public/js/hogan-2.0.0.js"></script>
-
-      <script type="text/javascript" src="/public/js/zipkin.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-node.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-span.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-tree.js"></script>
-
-      <script type="text/javascript" src="/public/js/zipkin-annotation.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-config.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-filter-span.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-kv-annotation.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-lazy-tree.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-onebox.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-trace-dependency.js"></script>
-      <script type="text/javascript" src="/public/js/zipkin-trace-summary.js"></script>
-
-      <script type="text/javascript" src="/public/js/application.js"></script>
-      <script type="text/javascript" src="/public/js/application-index.js"></script>
-      <script type="text/javascript" src="/public/js/application-show.js"></script>
-      <script type="text/javascript" src="/public/js/application-static.js"></script>
       <script>
         var root_url="{{rootUrl}}";
       </script>

diff --git a/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/CssConfig.scala b/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/CssConfig.scala
@@ -0,0 +1,31 @@
+/*
+* Copyright 2012 Twitter Inc.
+*
+* 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.
+*/
+package com.twitter.zipkin.config
+
+class CssConfig extends StaticResourceConfig {
+  val resourceType = "css"
+
+  val remoteResources = Seq(
+    "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"
+  )
+
+  val localResources = Seq(
+    "bootstrap.css",
+    "bootstrap-responsive.css",
+    "datepicker.css",
+    "application.css"
+  )
+}
diff --git a/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/JsConfig.scala b/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/JsConfig.scala
@@ -0,0 +1,50 @@
+/*
+* Copyright 2012 Twitter Inc.
+*
+* 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.
+*/
+package com.twitter.zipkin.config
+
+class JsConfig extends StaticResourceConfig {
+  val resourceType = "js"
+
+  lazy val remoteResources = Seq(
+    "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
+    "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"
+  )
+
+  lazy val localResources = Seq(
+    "bootstrap.js",
+    "datepicker.js",
+    "d3-2.9.1.js",
+    "hogan-2.0.0.js",
+
+    "zipkin.js",
+    "zipkin-node.js",
+    "zipkin-span.js",
+    "zipkin-tree.js",
+    "zipkin-annotation.js",
+    "zipkin-config.js",
+    "zipkin-filter-span.js",
+    "zipkin-kv-annotation.js",
+    "zipkin-lazy-tree.js",
+    "zipkin-onebox.js",
+    "zipkin-trace-dependency.js",
+    "zipkin-trace-summary.js",
+
+    "application.js",
+    "application-index.js",
+    "application-show.js",
+    "application-static.js"
+  )
+}
diff --git a/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/StaticResourceConfig.scala b/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/StaticResourceConfig.scala
@@ -0,0 +1,31 @@
+/*
+* Copyright 2012 Twitter Inc.
+*
+* 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.
+*/
+package com.twitter.zipkin.config
+
+trait StaticResourceConfig {
+  val pathPrefix: String = "/public"
+
+  val resourceType: String
+
+  val remoteResources: Seq[String]
+
+  val localResources: Seq[String]
+
+  lazy val resources = remoteResources ++
+    localResources.map { r =>
+      "%s/%s/%s".format(pathPrefix, resourceType, r)
+    }
+}
diff --git a/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/ZipkinWebConfig.scala b/zipkin-finatra/src/main/scala/com/twitter/zipkin/config/ZipkinWebConfig.scala
@@ -29,6 +29,9 @@ trait ZipkinWebConfig extends ZipkinConfig[ZipkinWeb] {
     "templates" -> "text/plain"
   )
 
+  var jsConfig = new JsConfig
+  var cssConfig = new CssConfig
+
   def zkConfig: ZooKeeperConfig
 
   def zkClientConfig = new ZooKeeperClientConfig {

diff --git a/zipkin-finatra/src/main/scala/com/twitter/zipkin/web/App.scala b/zipkin-finatra/src/main/scala/com/twitter/zipkin/web/App.scala
@@ -262,6 +262,8 @@ class App(config: ZipkinWebConfig, client: gen.ZipkinQuery.FinagledClient) exten
     val template = "templates/layouts/application.mustache"
     val rootUrl = config.rootUrl
     val innerView: View = v
+    val javascripts = config.jsConfig.resources
+    val stylesheets = config.cssConfig.resources
     lazy val body = innerView.render
   }
 }