updated error page html+css, added ds_store to ignore (#9285)

.gitignore

@@ -25,6 +25,7 @@ public/css/*.min.css
 .idea/
 *.iml
 *.tmp
+.DS_Store
 .vscode/
 
 /data/*

public/app/partials/error.html

@@ -4,8 +4,52 @@
 
   <div class="page-header">
     <h1>
-			Page not found (404)
-		</h1>
+		Page not found (404)
+	</h1>
+	</div>
+	<div class="error-row">
+		<div class="dash-row-menu-grip"><i class="fa fa-ellipsis-v"></i></div>
+		<div class="panel-container error-row">
+			<div class="error-column graph-box">
+				<div class="error-row">
+					<div class="error-column error-space-between graph-percentage">
+						<p>100%</p>
+						<p>80%</p>
+						<p>60%</p>
+						<p>40%</p>
+						<p>20%</p>
+						<p>0%</p>
+					</div>
+					<div class="error-column image-box">
+						<img src="public/img/graph404.svg" width="100%">
+						<div class="error-row error-space-between">
+							<p class="graph-text">Then</p>
+							<p class="graph-text">Now</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="error-column info-box">
+				<div class="error-row current-box">
+					<p class="current-text">current</p>
+				</div>
+				<div class="error-row" style="flex: 1">
+					<i class="fa fa-minus error-minus"></i>
+					<div class="error-column error-space-between">
+						<div class="error-row error-space-between">
+							<p>Chance your are one the page your'e looking for.</p>
+							<p class="left-margin">0%</p>
+						</div>
+						<div>
+							<h3>Sorry for the inconvenience</h3>
+							<p>Please go back to your <a href="#" class="error-link">home dashboard</a> and try again.</p>
+							<p>If the error persists, seek help att the <a href="#" class="error-link">community site</a>.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<span class="resize-panel-handle icon-gf icon-gf-grabber" style="cursor: default"></span>
+		</div>
 	</div>
 
 </div>

public/img/graph404.svg

@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500" viewBox="0 0 800 500">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #7d7d7d;
+        stroke-width: 1px;
+        opacity: 0.4;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: #7eb26d;
+      }
+
+      .cls-2 {
+        stroke-width: 3px;
+      }
+
+      .cls-3 {
+        fill: #7eb26d;
+        stroke-width: 3.221px;
+        opacity: 0.2;
+      }
+    </style>
+  </defs>
+  <image id="Lager_1" data-name="Lager 1" width="800" height="500" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAH0AQAAAADtO3TVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAHdElNRQfhCQ8OGxT9zSJNAAAAxUlEQVR42u3NMQEAAAwCIPuX1hTbBQVIH0QikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikVwZyReYD18j2sEAAAAASUVORK5CYII="/>
+  <path id="Form_3" data-name="Form 3" class="cls-1" d="M0,2V500H800"/>
+  <path id="Form_4" data-name="Form 4" class="cls-1" d="M160,2V500"/>
+  <path id="Form_5" data-name="Form 5" class="cls-1" d="M320,1V500"/>
+  <path id="Form_6" data-name="Form 6" class="cls-1" d="M480,1V500"/>
+  <path id="Form_7" data-name="Form 7" class="cls-1" d="M640,2V500"/>
+  <path id="Form_8" data-name="Form 8" class="cls-1" d="M0,100H801"/>
+  <path id="Form_9" data-name="Form 9" class="cls-1" d="M0,200H801"/>
+  <path id="Form_10" data-name="Form 10" class="cls-1" d="M0,300H798"/>
+  <path id="Form_11" data-name="Form 11" class="cls-1" d="M0,400H800"/>
+  <path id="Form_12" data-name="Form 12" class="cls-2" d="M0,0C0,299.762,320.7,500,800,500"/>
+  <path id="Form_12_kopiera" data-name="Form 12 kopiera" class="cls-3" d="M800,500C320.7,500,0,299.762,0,0,0-234.869,0,500,0,500H800Z"/>
+</svg>

public/sass/_grafana.scss

@@ -89,6 +89,6 @@
 @import "pages/plugins";
 @import "pages/signup";
 @import "pages/styleguide";
-
+@import "pages/errorpage";
 @import "old_responsive";
 @import "components/view_states.scss";

public/sass/pages/_errorpage.scss

@@ -0,0 +1,60 @@
+
+//
+// Layout
+//
+
+.error-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.error-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.error-space-between {justify-content: space-between;}
+
+.graph-box {
+    width: 62%;
+    padding: 2rem 1rem;
+}
+
+.info-box {
+    width: 38%;
+    padding: 2rem 1rem 6rem;
+}
+
+.graph-percentage {padding: 0 0 1.5rem;}
+
+.image-box {padding: .5rem}
+
+.left-margin{padding: 0 0 0 5rem;}
+
+.current-box {justify-content: flex-end;}
+
+//
+// Text
+//
+
+.current-text {
+    color: $blue;
+    font-weight: bold;
+    line-height: 1rem;
+}
+
+.error-link {color: $yellow;}
+
+.error-minus {
+    color: #7eb26d;
+    padding: 0 .5rem;
+    line-height: 1.5rem;
+}
+
+.graph-percentage p {
+    text-align: right;
+    margin: 0;
+    line-height: 1rem;
+}
+
+.graph-text {margin: 0;}

public/views/500.html

@@ -15,10 +15,22 @@
       <div class="page-header">
         <h1>Server side error :(</h1>
       </div>
-      <h4>[[.Title]]</h4>
-      [[if .ErrorMsg]]
-        <pre>[[.ErrorMsg]]</pre>
-      [[end]]
+      <div class="panel-container" style="padding: 2rem">
+        <div class="alert">
+          <div class="alert-icon"><i class="fa fa-exclamation-triangle"></i></div>
+					<div class="alert-body">
+						<div class="alert-title">[[.Title]]</div>
+						<div class="alert-text">
+              [[if .ErrorMsg]]
+                <pre>[[.ErrorMsg]]</pre>
+              [[end]]
+            </div>
+					</div>
+        </div>
+        <div style="padding: 2rem 0 0">
+          <p>Check the Grafana server logs for the detailed error message.</p>
+        </div>
+      </div>
     </div>
   </body>
 </html>