docs: Updates to screencasts & sharing docs

docs/sources/features/datasources/elasticsearch.md

@@ -92,7 +92,7 @@ The Elasticsearch datasource supports two types of queries you can use to fill t
 <br>
 ## Annotations
 
-[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
+[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
 queries via the Dashboard menu / Annotations view. Grafana can query any Elasticsearch index
 for annotation events.
 

docs/sources/features/datasources/graphite.md

@@ -89,7 +89,7 @@ You can also create nested variables that use other variables in their definitio
 
 ## Annotations
 
-[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
+[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
 queries via the Dashboard menu / Annotations view.
 
 Graphite supports two ways to query annotations. A regular metric query, for this you use the `Graphite query` textbox. A Graphite events query, use the `Graphite event tags` textbox,

docs/sources/features/datasources/influxdb.md

@@ -122,7 +122,7 @@ SHOW TAG VALUES WITH KEY = "hostname"  WHERE region =~ /$region/
 
 ## Annotations
 
-[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
+[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
 queries via the Dashboard menu / Annotations view.
 
 An example query:

docs/sources/features/datasources/prometheus.md

@@ -84,7 +84,7 @@ Which means you have to use `=~` instead of `=` in your Prometheus queries. For
 
 ## Annotations
 
-[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
+[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation
 queries via the Dashboard menu / Annotations view.
 
 Prometheus supports two ways to query annotations.

docs/sources/reference/sharing.md

@@ -22,7 +22,7 @@ A dashboard snapshot is an instant way to share an interactive dashboard publicl
 (metric, template and annotation) and panel links, leaving only the visible metric data and series names embedded into your dashboard. Dashboard
 snapshots can be accessed by anyone who has the link and can reach the URL.
 
-![](/img/docs/v2/dashboard_snapshot_dialog.png)
+![](/img/docs/v4/share_panel_modal.png)
 
 ### Publish snapshots
 You can publish snapshots to you local instance or to [snapshot.raintank.io](http://snapshot.raintank.io). The later is a free service
@@ -42,8 +42,8 @@ You can embed a panel using an iframe on another web site. This tab will show yo
 Example:
 
 ```html
-<iframe src="http://snapshot.raintank.io/dashboard/solo/snapshot/UtvRYDv650fHOV2jV5QlAQhLnNOhB5ZN?panelId=4&fullscreen&from=1427385145990&to=1427388745990" width="650" height="300" frameborder="0"></iframe>
+<iframe src="https://snapshot.raintank.io/dashboard-solo/snapshot/y7zwi2bZ7FcoTlB93WN7yWO4aMiz3pZb?from=1493369923321&to=1493377123321&panelId=4" width="650" height="300" frameborder="0"></iframe>
 ```
 
 Below there should be an interactive Grafana graph embedded in an iframe:
-<iframe src="https://snapshot.raintank.io/dashboard-solo/snapshot/4IKyWYNEQll1B9FXcN3RIgx4M2VGgU8d?panelId=4&fullscreen" width="650" height="300" frameborder="0"></iframe>
+<iframe src="https://snapshot.raintank.io/dashboard-solo/snapshot/y7zwi2bZ7FcoTlB93WN7yWO4aMiz3pZb?from=1493369923321&to=1493377123321&panelId=4" width="650" height="300" frameborder="0"></iframe>

docs/sources/tutorials/screencasts.md

@@ -9,58 +9,116 @@ weight = 10
 
 # Screencasts
 
-
-{{< screencast src="https://www.youtube.com/embed/sKNZMtoSHN4?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-
-### Episode 7 - Beginners guide to building dashboards
-
-For newer users of Grafana, this screencast will familiarize you with the general UI and teach you how to build your first Dashboard.
-
-<div class="clearfix"></div>
-
-{{< screencast src="https://www.youtube.com/embed/9ZCMVNxUf6s?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-
-### Episode 6 - Adding data sources, users & organizations
-
-Now that Grafana has been installed, learn about adding data sources and get a closer look at adding and managing Users and Organizations.
-
-<div class="clearfix"></div>
-
-{{< screencast src="https://www.youtube.com/embed/E-gMFv85FE8?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-
-### Episode 5 - Installation & Configuration on Red Hat / CentOS
-
-This screencasts shows how to get Grafana 2.0 installed and configured quickly on RPM-based Linux operating systems.
-
-<div class="clearfix"></div>
-{{< screencast src="https://www.youtube.com/embed/JY22EBOR9hQ?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-
-### Episode 4 - Installation & Configuration on Ubuntu / Debian
-
-Learn how to easily install the dependencies and packages to get Grafana 2.0 up and running on Ubuntu or Debian in just a few minutes.
-
-<div class="clearfix"></div>
-
-{{< screencast src="https://www.youtube.com/embed/FC13uhFRsVw?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-
-### Episode 3 - Whats New In Grafana 2.0
-
-This screencast highlights many of the great new features that were included in the Grafana 2.0 release.
-
-<div class="clearfix"></div>
-
-{{< screencast src="//www.youtube.com/embed/FhNUrueWwOk?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-### Episode 2 - Templated Graphite Queries
-
-The screencast focuses on Templating with the Graphite Data Source. Learn how to make dynamic and adaptable Dashboards for your Graphite metrics.
-
-<div class="clearfix"></div>
-
-{{< screencast src="//www.youtube.com/embed/mgcJPREl3CU?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}}
-### Episode 1 - Building Graphite Queries
-
-Learn how the Graphite Query Editor works, and how to use different graphing functions. There's also an introduction to graph display settings.
-
-<div class="clearfix"></div>
-
+<div class="video-card-container">
+  <figure class="video-card">
+    <a href="https://youtu.be/iUj6DwfBh88?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/iUj6DwfBh88?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+        #10 Dashboard Discovery & Sharing
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/d6KicssNzxM?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/d6KicssNzxM?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+        #9 Using Elasticsearch in Grafana
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/1kJyQKgk_oY?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/1kJyQKgk_oY?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+        #8 What's new in Grafana 3.0
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/sKNZMtoSHN4?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/sKNZMtoSHN4?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+        #7 Beginners guide to building dashboards
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/9ZCMVNxUf6s?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/9ZCMVNxUf6s?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+        #6 Adding data sources, users & orgs.
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/E-gMFv84FE8?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/E-gMFv84FE8?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+       #5 Install & Setup on Redhat / Centos
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/JY22EBOR9hQ?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/JY22EBOR9hQ?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+       #4 Install & Setup on Ubuntu / Debian
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/FC13uhFRsVw?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/FC13uhFRsVw?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+       #3 Whats New In Grafana 2.0
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/FhNUrueWwOk?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/FhNUrueWwOk?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+       #2 Templated Graphite Queries
+       </a>
+    </figcaption>
+  </figure>
+  <figure class="video-card">
+    <a href="https://youtu.be/mgcJPREl3CU?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+      <img src="/img/docs/v4/screencast_generic.png">
+      <i class="fa fa-play"></i>
+    </a>
+    <figcaption>
+       <a href="https://youtu.be/mgcJPREl3CU?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" target="_blank" rel="noopener noreferrer">
+       #1 Building Graphite Queries
+       </a>
+    </figcaption>
+  </figure>
+</div>