Ori.livneh has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/180045

Change subject: xenon: gzip svgs; add custom header/footer + stylesheet
......................................................................

xenon: gzip svgs; add custom header/footer + stylesheet

* Generate .svgz files instead of .svg.
* Customize Apache index page using <http://adamwhitcroft.com/apaxy/>

Change-Id: If4cb6a4b630bc71c30a698103d05aaf77109ac57
---
A files/xenon/theme/footer.html
A files/xenon/theme/header.html
A files/xenon/theme/style.css
M manifests/role/xenon.pp
M modules/xenon/files/xenon-generate-svgs
M templates/apache/sites/xenon.erb
6 files changed, 173 insertions(+), 5 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/operations/puppet 
refs/changes/45/180045/1

diff --git a/files/xenon/theme/footer.html b/files/xenon/theme/footer.html
new file mode 100644
index 0000000..a42b930
--- /dev/null
+++ b/files/xenon/theme/footer.html
@@ -0,0 +1,11 @@
+       <div class="block">
+    To learn more about how to interpret flame graphs, see <a 
href="http://www.brendangregg.com/flamegraphs.html";>Brendan Gregg's page.</a>
+  </div>
+</div>
+
+<div class="footer">
+</div>
+<script>
+// grab the 2nd child and add the parent class. tr:nth-child(2)
+document.getElementsByTagName('tr')[1].className = 'parent';
+</script>
diff --git a/files/xenon/theme/header.html b/files/xenon/theme/header.html
new file mode 100644
index 0000000..3ccfc4d
--- /dev/null
+++ b/files/xenon/theme/header.html
@@ -0,0 +1,3 @@
+<div class="wrapper">
+  <h1>MediaWiki Flame Graphs</h1>
+  <p>These flame graphs visualize MediaWiki stack traces, sampled at 10-minute 
intervals, showing which code paths are most frequent.</p>
diff --git a/files/xenon/theme/style.css b/files/xenon/theme/style.css
new file mode 100644
index 0000000..ed37ff3
--- /dev/null
+++ b/files/xenon/theme/style.css
@@ -0,0 +1,126 @@
+/*------------------------------------*\
+    Apaxy
+    by @adamwhitcroft
+
+    Theme name: Apaxy
+    Theme author: @adamwhitcroft
+\*------------------------------------*/
+@import url('//fonts.googleapis.com/css?family=Open+Sans');
+/* Have to use @import for the font, as you can only specify a single 
stylesheet */
+* {
+       margin:0;
+       padding:0;
+       -webkit-box-sizing:border-box;
+          -moz-box-sizing:border-box;
+              box-sizing: border-box;
+}
+
+html {
+       min-height:100%;
+       border-top:10px solid #ECEEF1;
+       border-bottom:10px solid #ECEEF1;
+       color:#61666c;
+       font-weight:400;
+       font-size:1em;
+       font-family:'Open Sans', sans-serif;
+       line-height:2em;
+}
+body {
+       padding:20px;
+       -webkit-backface-visibility:hidden;
+}
+p {
+    padding: 10px 0;
+}
+
+code {
+       font-family:consolas,monospace; 
+}
+a {
+       color:#61666c;
+       text-decoration:none;
+}
+a:hover {
+       color:#2a2a2a;
+}
+/*------------------------------------*\
+    Wrapper
+\*------------------------------------*/
+.wrapper {
+       margin:0 auto;
+       padding-top:20px;
+       max-width:500px;
+}
+/*------------------------------------*\
+    Demo block
+\*------------------------------------*/
+.block {
+       font-size:.875em;
+       margin:20px 0;
+       padding:20px;
+       color:#9099A3;
+}
+/*------------------------------------*\
+    Table (directory listing)
+\*------------------------------------*/
+table {
+       width:100%;
+       border-collapse:collapse;
+       font-size:.875em;
+}
+tr {
+       outline:0;
+       border:0;
+}
+tr:hover td {
+       background:#f6f6f6;
+}
+th {
+       text-align:left;
+       font-size:.75em;
+       padding-right:20px;
+}
+/* 2nd Column: Filename */
+th + th {
+       width:65%;
+}
+/* 3rd Column: Last Modified */
+th + th + th {
+}
+/* 4th Column: Size */
+th + th + th + th {
+       width:5%;
+}
+tr td:first-of-type {
+       padding-left:10px;
+       padding-right:10px;
+}
+td {
+       padding:5px 0;
+       outline:0;
+       border:0;
+       border-bottom:1px solid #edf1f5;
+       vertical-align:middle;
+       text-align:left;
+       -webkit-transition:background 300ms ease;
+          -moz-transition:background 300ms ease;
+           -ms-transition:background 300ms ease;
+            -o-transition:background 300ms ease;
+               transition:background 300ms ease;
+}
+td a{
+       display: block;
+}
+tr.parent a[href^="/"] {
+       color:#9099A3;
+}
+       .parent a[href^="/"]:hover {
+               color:#2281d0;
+       }
+/*------------------------------------*\
+    Footer
+\*------------------------------------*/
+.footer {
+       text-align:center;
+       font-size:.75em;
+}
diff --git a/manifests/role/xenon.pp b/manifests/role/xenon.pp
index 2c25392..374433d 100644
--- a/manifests/role/xenon.pp
+++ b/manifests/role/xenon.pp
@@ -4,9 +4,11 @@
 # application servers, showing where time is spent.
 #
 class role::xenon {
+    include ::xenon
+
+    include ::apache::mod::mime
     include ::apache::mod::proxy
     include ::apache::mod::proxy_http
-    include ::xenon
 
     class { '::redis':
         maxmemory         => '1Mb',
@@ -16,6 +18,16 @@
 
     Service['redis'] ~> Service['xenon-log']
 
+    file { '/srv/xenon/theme':
+        ensure  => directory,
+        source  => 'puppet:///files/xenon/theme',
+        owner   => 'www-data',
+        group   => 'www-data',
+        mode    => 0755,
+        recurse => true,
+        before  => Apache::Site['xenon'],
+    }
+
     apache::site { 'xenon':
         content => template('apache/sites/xenon.erb'),
     }
diff --git a/modules/xenon/files/xenon-generate-svgs 
b/modules/xenon/files/xenon-generate-svgs
index 57a6d4f..524d0b3 100755
--- a/modules/xenon/files/xenon-generate-svgs
+++ b/modules/xenon/files/xenon-generate-svgs
@@ -2,10 +2,11 @@
 set +C  # OK to clobber out-of-date SVGs
 shopt -s globstar nullglob
 for log in /srv/xenon/**/*.log; do
-    svg="${log//log/svg}"
+    svg="${log//log/svg}z"
     period="$(basename "$(dirname "$log")")"
     time="$(basename "$log" ".log")"
     title="MediaWiki - ${period} - ${time/_/ }"
     mkdir -m0755 -p "$(dirname $svg)"
-    [ ! -f "$svg" -o "$svg" -ot "$log" ] && /usr/local/bin/flamegraph.pl 
--minwidth=2 --title="$title" "$log" > "$svg"
+    [ ! -f "$svg" -o "$svg" -ot "$log" ] && \
+        /usr/local/bin/flamegraph.pl --minwidth=2 --title="$title" "$log" | 
gzip -9 > "$svg"
 done
diff --git a/templates/apache/sites/xenon.erb b/templates/apache/sites/xenon.erb
index 2225bc2..ff952e4 100644
--- a/templates/apache/sites/xenon.erb
+++ b/templates/apache/sites/xenon.erb
@@ -9,10 +9,25 @@
         AllowOverride None
     </Directory>
 
-    <Directory /srv/xenon/svgs>
-        Options Indexes
+    <Directory /srv/xenon>
+        Options +Indexes
         AllowOverride None
         Order allow,deny
         allow from all
+
+        IndexOptions +Charset=UTF-8 +FancyIndexing +IgnoreCase +FoldersFirst 
+XHTML +HTMLTable +SuppressRules +SuppressDescription +NameWidth=* 
+IconsAreLinks
+        IndexHeadInsert "<meta name=\"viewport\" content=\"width=device-width, 
initial-scale=1\">"
+        IndexIgnore .htaccess /theme
+
+        AddIcon /xenon/theme/icons/blank.png ^^BLANKICON^^
+        AddIcon /xenon/theme/icons/folder.png ^^DIRECTORY^^
+        AddIcon /xenon/theme/icons/folder-home.png ..
+        AddIcon /xenon/theme/icons/draw.png .svg
+        AddIcon /xenon/theme/icons/doc.png .log
+        DefaultIcon /xenon/theme/icons/default.png
+
+        HeaderName /xenon/theme/header.html
+        ReadmeName /xenon/theme/footer.html
+        IndexStyleSheet "/xenon/theme/style.css"
     </Directory>
 </VirtualHost>

-- 
To view, visit https://gerrit.wikimedia.org/r/180045
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: If4cb6a4b630bc71c30a698103d05aaf77109ac57
Gerrit-PatchSet: 1
Gerrit-Project: operations/puppet
Gerrit-Branch: production
Gerrit-Owner: Ori.livneh <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to