Skip to content
Snippets Groups Projects
Commit 6d5a8c66 authored by Tom Robinson's avatar Tom Robinson
Browse files

Add server error graphic

parent 67d3ff4b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/css/query_builder.css
+ 2
− 2
View file @ 6d5a8c66
......@@ -256,8 +256,8 @@
.QueryError-image--serverError {
width: 120px;
height: 120px;
background-image: url('/app/img/stopwatch.svg');
height: 148px;
background-image: url('/app/img/blown_up.svg');
}
.QueryError-image--timeout {
......
frontend/src/query_builder/QueryVisualization.jsx
+ 2
− 2
View file @ 6d5a8c66
......@@ -179,7 +179,7 @@ export default class QueryVisualization extends Component {
if (result.duration > 15*1000) {
viz = (
<div className="QueryError flex full align-center">
<div className="QueryError-image QueryError-image--serverError"></div>
<div className="QueryError-image QueryError-image--timeout"></div>
<div className="QueryError-message text-centered">
<h1 className="text-bold">Your question took too long</h1>
<p className="QueryError-messageText">We didn't get an answer back from your database in time, so we had to stop. You can try again in a minute, or if the problem persists, you can email an admin to let them know.</p>
......@@ -190,7 +190,7 @@ export default class QueryVisualization extends Component {
} else {
viz = (
<div className="QueryError flex full align-center">
<div className="QueryError-image QueryError-image--timeout"></div>
<div className="QueryError-image QueryError-image--serverError"></div>
<div className="QueryError-message text-centered">
<h1 className="text-bold">We're experiencing server issues</h1>
<p className="QueryError-messageText">Try refreshing the page after waiting a minute or two. If the problem persists we'd recommend you contact an admin.</p>
......
resources/frontend_client/app/img/blown_up.svg
+ 16
− 18
View file @ 6d5a8c66
<svg width="120px" height="148px" viewBox="0 0 120 148" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Artboard-21-Copy-3" sketch:type="MSArtboardGroup">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(1.000000, 10.000000)">
<g id="Oval-776-+-Oval-776-Copy-3" sketch:type="MSShapeGroup">
<path d="M52.6096525,55.9994765 C48.1333921,59.1737307 42.8873524,61 37.2784303,61 C33.7116856,61 30.2916818,60.2615008 27.1230503,58.9074907 L27.1230503,58.9074907 C13.3987552,57.7380562 2.25849349,45.6146653 3.33622019e-14,29.9399525 L1.57512892e-14,29.9399525 C0.113656896,29.9423675 0.227609022,29.943581 0.341844219,29.943581 C9.07044331,29.943581 16.146371,22.8584253 16.146371,14.1184428 C16.146371,13.4386914 16.1035691,12.76895 16.0205168,12.1117733 C21.1542088,9.89076902 24.7285756,5.93844301 27.1005122,0.822665534 C27.41412,9.15257595 30.008807,16.6688306 33.6830247,20.4808699 C33.629865,21.3388573 33.6028233,22.2052971 33.6028233,23.0791108 C33.6028233,37.9785153 41.4648536,50.7340673 52.6096525,55.9994765 L52.6096525,55.9994765 Z" id="Oval-776" stroke="#E9E9E9" stroke-width="3" fill="#F8F8F8"></path>
<path d="M45.1096525,52.8001224 C41.7394892,55.190009 37.7897614,56.5650018 33.5668204,56.5650018 C30.8814288,56.5650018 28.306518,56.0089879 25.9208647,54.9895577 L25.9208647,54.9895577 C15.5878833,54.1090939 7.2004131,44.9814285 5.5,33.1799834 L5.5,33.1799834 C5.58557194,33.1818017 5.67136616,33.1827153 5.75737351,33.1827153 C12.3291101,33.1827153 17.6565552,27.8483224 17.6565552,21.2680153 C17.6565552,20.7562325 17.6243298,20.2519862 17.5618,19.7571998 C21.4269415,18.0850122 24.1180718,15.1093176 25.9038958,11.2576638 C26.1400102,17.5292288 28.0935425,23.1881948 30.8598502,26.058268 C30.8198264,26.7042442 30.7994667,27.3565842 30.7994667,28.0144759 C30.7994667,39.2321937 36.7187662,48.8358112 45.1096525,52.8001224 L45.1096525,52.8001224 Z" id="Oval-776-Copy-3" fill="#FFFFFF"></path>
<path d="M31.1100006,43.7757643 C29.52658,44.8986166 27.6708597,45.5446364 25.6867742,45.5446364 C24.4250833,45.5446364 23.2153001,45.2834016 22.0944367,44.8044376 L22.0944367,44.8044376 C17.2396405,44.3907649 13.2989136,40.1022684 12.5,34.5575366 L12.5,34.5575366 C12.5402047,34.5583908 12.5805138,34.5588201 12.6209231,34.5588201 C15.7085548,34.5588201 18.2115749,32.0525357 18.2115749,28.9608772 C18.2115749,28.7204237 18.1964343,28.4835111 18.1670556,28.2510432 C19.9830344,27.4653909 21.2474215,26.0673055 22.0864641,24.2576638 C22.197399,27.2042645 23.1152367,29.8630447 24.4149449,31.2115055 C24.3961403,31.5150077 24.3865746,31.8214998 24.3865746,32.1306004 C24.3865746,37.4010767 27.1676687,41.9131922 31.1100006,43.7757643 L31.1100006,43.7757643 Z" id="Oval-776-Copy-4" fill="#E9E9E9"></path>
</g>
<path d="M19.2841248,31.9149982 C19.3232907,31.8999387 19.3629725,31.8860236 19.4031394,31.8733018 L55.7339534,20.3664524 C56.5565494,20.1059163 57.3302416,20.0791346 58.0053306,20.2495982 L58.0053296,20.2495944 L58,19.8329993 L101.799388,46.6835381 C102.73861,47.2593138 103.5,48.6151547 103.5,49.7226147 L103.5,124.896528 C103.5,125.999188 102.746291,126.4037 101.82335,125.80445 L63.5,100.921769 L63.5,135.898083 C63.5,136.999884 62.7617422,137.396409 61.8410504,136.777016 L18.1589496,107.389982 C17.242737,106.773602 16.4884237,105.38062 16.4740217,104.269262 L15.5259783,31.111596 C15.5116309,30.0044495 16.2157843,29.6380887 17.1107713,30.3022277 L19.2841248,31.9149982 Z" id="Rectangle-450-Copy-3" stroke="#E3E3E3" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M61,52.1041951 C61,49.3442817 63.1370811,47.768412 65.771535,48.5838439 L100.228465,59.2491582 C102.863711,60.0648353 105,62.9678623 105,65.7233373 L105,134.895805 C105,137.655718 102.862919,139.231588 100.228465,138.416156 L65.771535,127.750842 C63.136289,126.935165 61,124.032138 61,121.276663 L61,52.1041951 Z" id="Rectangle-450-Copy" stroke="#E3E3E3" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(83.000000, 93.500000) scale(-1, 1) translate(-83.000000, -93.500000) "></path>
<path d="M69,124.251043 C69,123.145898 69.8529484,121.965684 70.8920362,121.619321 L95.6079638,113.380679 C96.6529065,113.032364 97.5,113.650099 97.5,114.751043 L97.5,113.748957 C97.5,114.854102 96.6470516,116.034316 95.6079638,116.380679 L70.8920362,124.619321 C69.8470935,124.967636 69,124.349901 69,123.248957 L69,124.251043 Z" id="Rectangle-455-Copy-3" fill="#F0F0F0" sketch:type="MSShapeGroup"></path>
<path d="M70,117.534493 C70,116.429347 70.8529484,115.249133 71.8920362,114.902771 L96.6079638,106.664128 C97.6529065,106.315814 98.5,106.933548 98.5,108.034493 L98.5,107.032406 C98.5,108.137552 97.6470516,109.317765 96.6079638,109.664128 L71.8920362,117.902771 C70.8470935,118.251085 70,117.63335 70,116.532406 L70,117.534493 Z" id="Rectangle-455-Copy-5" fill="#F0F0F0" sketch:type="MSShapeGroup"></path>
<path d="M70,110.534493 C70,109.429347 70.8529484,108.249133 71.8920362,107.902771 L96.6079638,99.664128 C97.6529065,99.3158138 98.5,99.9335482 98.5,101.034493 L98.5,100.032406 C98.5,101.137552 97.6470516,102.317765 96.6079638,102.664128 L71.8920362,110.902771 C70.8470935,111.251085 70,110.63335 70,109.532406 L70,110.534493 Z" id="Rectangle-455-Copy-6" fill="#F0F0F0" sketch:type="MSShapeGroup"></path>
<path d="M68.75,74.2144638 C68.75,73.1110469 69.5925489,71.935701 70.6495281,71.5833747 L98.3504719,62.3497267 C99.3995523,62.0000332 100.25,62.6148113 100.25,63.7144638 L100.25,65.7186376 C100.25,66.8220545 99.4074511,67.9974003 98.3504719,68.3497267 L70.6495281,77.5833747 C69.6004477,77.9330681 68.75,77.3182901 68.75,76.2186376 L68.75,74.2144638 Z" id="Rectangle-455-Copy-4" fill="#E5E5E5" sketch:type="MSShapeGroup"></path>
<path d="M70.0358587,75.5248252 C68.221129,74.268474 68.4551668,72.6909289 70.5511774,72.0037123 L96.3037505,63.5602458 C96.8263496,63.3889018 97.6125842,63.5076256 98.0664063,63.8300781 L116.25,76.75 L86.25,86.75 L70.0358587,75.5248252 Z" id="Rectangle-454" stroke="#E3E3E3" stroke-width="2" fill="#F9F9F9" sketch:type="MSShapeGroup"></path>
<path d="M87,87.0048815 C87,85.897616 87.8529484,84.7156839 88.8920362,84.3693213 L113.607964,76.1306787 C114.652907,75.7823645 115.5,76.3938998 115.5,77.5048815 L115.5,78.4951185 C115.5,79.602384 114.647052,80.7843161 113.607964,81.1306787 L88.8920362,89.3693213 C87.8470935,89.7176355 87,89.1061002 87,87.9951185 L87,87.0048815 Z" id="Rectangle-455" stroke="#E3E3E3" stroke-width="2" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<svg width="120px" height="148px" viewBox="0 0 120 148" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 10.000000)">
<g>
<path d="M52.6096525,55.9994765 C48.1333921,59.1737307 42.8873524,61 37.2784303,61 C33.7116856,61 30.2916818,60.2615008 27.1230503,58.9074907 L27.1230503,58.9074907 C13.3987552,57.7380562 2.25849349,45.6146653 3.33622019e-14,29.9399525 L1.57512892e-14,29.9399525 C0.113656896,29.9423675 0.227609022,29.943581 0.341844219,29.943581 C9.07044331,29.943581 16.146371,22.8584253 16.146371,14.1184428 C16.146371,13.4386914 16.1035691,12.76895 16.0205168,12.1117733 C21.1542088,9.89076902 24.7285756,5.93844301 27.1005122,0.822665534 C27.41412,9.15257595 30.008807,16.6688306 33.6830247,20.4808699 C33.629865,21.3388573 33.6028233,22.2052971 33.6028233,23.0791108 C33.6028233,37.9785153 41.4648536,50.7340673 52.6096525,55.9994765 L52.6096525,55.9994765 Z" stroke="#E9E9E9" stroke-width="3" fill="#F8F8F8"></path>
<path d="M45.1096525,52.8001224 C41.7394892,55.190009 37.7897614,56.5650018 33.5668204,56.5650018 C30.8814288,56.5650018 28.306518,56.0089879 25.9208647,54.9895577 L25.9208647,54.9895577 C15.5878833,54.1090939 7.2004131,44.9814285 5.5,33.1799834 L5.5,33.1799834 C5.58557194,33.1818017 5.67136616,33.1827153 5.75737351,33.1827153 C12.3291101,33.1827153 17.6565552,27.8483224 17.6565552,21.2680153 C17.6565552,20.7562325 17.6243298,20.2519862 17.5618,19.7571998 C21.4269415,18.0850122 24.1180718,15.1093176 25.9038958,11.2576638 C26.1400102,17.5292288 28.0935425,23.1881948 30.8598502,26.058268 C30.8198264,26.7042442 30.7994667,27.3565842 30.7994667,28.0144759 C30.7994667,39.2321937 36.7187662,48.8358112 45.1096525,52.8001224 L45.1096525,52.8001224 Z" fill="#FFFFFF"></path>
<path d="M31.1100006,43.7757643 C29.52658,44.8986166 27.6708597,45.5446364 25.6867742,45.5446364 C24.4250833,45.5446364 23.2153001,45.2834016 22.0944367,44.8044376 L22.0944367,44.8044376 C17.2396405,44.3907649 13.2989136,40.1022684 12.5,34.5575366 L12.5,34.5575366 C12.5402047,34.5583908 12.5805138,34.5588201 12.6209231,34.5588201 C15.7085548,34.5588201 18.2115749,32.0525357 18.2115749,28.9608772 C18.2115749,28.7204237 18.1964343,28.4835111 18.1670556,28.2510432 C19.9830344,27.4653909 21.2474215,26.0673055 22.0864641,24.2576638 C22.197399,27.2042645 23.1152367,29.8630447 24.4149449,31.2115055 C24.3961403,31.5150077 24.3865746,31.8214998 24.3865746,32.1306004 C24.3865746,37.4010767 27.1676687,41.9131922 31.1100006,43.7757643 L31.1100006,43.7757643 Z" fill="#E9E9E9"></path>
</g>
<path d="M22,60.6361939 C22,59.4146586 22.9823189,58.3902607 24.214074,58.3474417 L62.9357979,57.0013755 C64.1585971,56.9588678 65.1498718,57.9067208 65.1498718,59.1361939 L65.1498718,57.7126233 C65.1498718,58.9341586 64.167553,59.9585565 62.9357979,60.0013755 L24.214074,61.3474417 C22.9912747,61.3899493 22,60.4420964 22,59.2126233 L22,60.6361939 Z" id="Rectangle-462" fill="#F5F5F5" sketch:type="MSShapeGroup" transform="translate(43.574936, 59.212204) rotate(-146.000000) translate(-43.574936, -59.212204) "></path>
<path d="M19.2841248,31.9149982 C19.3232907,31.8999387 19.3629725,31.8860236 19.4031394,31.8733018 L55.7339534,20.3664524 C56.5565494,20.1059163 57.3302416,20.0791346 58.0053306,20.2495982 L58.0053296,20.2495944 L58,19.8329993 L101.799388,46.6835381 C102.73861,47.2593138 103.5,48.6151547 103.5,49.7226147 L103.5,124.896528 C103.5,125.999188 102.746291,126.4037 101.82335,125.80445 L63.5,100.921769 L63.5,135.898083 C63.5,136.999884 62.7617422,137.396409 61.8410504,136.777016 L18.1589496,107.389982 C17.242737,106.773602 16.4884237,105.38062 16.4740217,104.269262 L15.5259783,31.111596 C15.5116309,30.0044495 16.2157843,29.6380887 17.1107713,30.3022277 L19.2841248,31.9149982 Z" stroke="#E3E3E3" stroke-width="2" fill="#FFFFFF"></path>
<path d="M61,52.1041951 C61,49.3442817 63.1370811,47.768412 65.771535,48.5838439 L100.228465,59.2491582 C102.863711,60.0648353 105,62.9678623 105,65.7233373 L105,134.895805 C105,137.655718 102.862919,139.231588 100.228465,138.416156 L65.771535,127.750842 C63.136289,126.935165 61,124.032138 61,121.276663 L61,52.1041951 Z" stroke="#E3E3E3" stroke-width="2" fill="#FFFFFF" transform="translate(83.000000, 93.500000) scale(-1, 1) translate(-83.000000, -93.500000) "></path>
<path d="M69,124.251043 C69,123.145898 69.8529484,121.965684 70.8920362,121.619321 L95.6079638,113.380679 C96.6529065,113.032364 97.5,113.650099 97.5,114.751043 L97.5,113.748957 C97.5,114.854102 96.6470516,116.034316 95.6079638,116.380679 L70.8920362,124.619321 C69.8470935,124.967636 69,124.349901 69,123.248957 L69,124.251043 Z" fill="#F0F0F0"></path>
<path d="M70,117.534493 C70,116.429347 70.8529484,115.249133 71.8920362,114.902771 L96.6079638,106.664128 C97.6529065,106.315814 98.5,106.933548 98.5,108.034493 L98.5,107.032406 C98.5,108.137552 97.6470516,109.317765 96.6079638,109.664128 L71.8920362,117.902771 C70.8470935,118.251085 70,117.63335 70,116.532406 L70,117.534493 Z" fill="#F0F0F0"></path>
<path d="M70,110.534493 C70,109.429347 70.8529484,108.249133 71.8920362,107.902771 L96.6079638,99.664128 C97.6529065,99.3158138 98.5,99.9335482 98.5,101.034493 L98.5,100.032406 C98.5,101.137552 97.6470516,102.317765 96.6079638,102.664128 L71.8920362,110.902771 C70.8470935,111.251085 70,110.63335 70,109.532406 L70,110.534493 Z" fill="#F0F0F0"></path>
<path d="M68.75,74.2144638 C68.75,73.1110469 69.5925489,71.935701 70.6495281,71.5833747 L98.3504719,62.3497267 C99.3995523,62.0000332 100.25,62.6148113 100.25,63.7144638 L100.25,65.7186376 C100.25,66.8220545 99.4074511,67.9974003 98.3504719,68.3497267 L70.6495281,77.5833747 C69.6004477,77.9330681 68.75,77.3182901 68.75,76.2186376 L68.75,74.2144638 Z" fill="#E5E5E5"></path>
<path d="M70.0358587,75.5248252 C68.221129,74.268474 68.4551668,72.6909289 70.5511774,72.0037123 L96.3037505,63.5602458 C96.8263496,63.3889018 97.6125842,63.5076256 98.0664063,63.8300781 L116.25,76.75 L86.25,86.75 L70.0358587,75.5248252 Z" stroke="#E3E3E3" stroke-width="2" fill="#F9F9F9"></path>
<path d="M87,87.0048815 C87,85.897616 87.8529484,84.7156839 88.8920362,84.3693213 L113.607964,76.1306787 C114.652907,75.7823645 115.5,76.3938998 115.5,77.5048815 L115.5,78.4951185 C115.5,79.602384 114.647052,80.7843161 113.607964,81.1306787 L88.8920362,89.3693213 C87.8470935,89.7176355 87,89.1061002 87,87.9951185 L87,87.0048815 Z" stroke="#E3E3E3" stroke-width="2" fill="#FFFFFF"></path>
</g>
<path d="M22,60.6361939 C22,59.4146586 22.9823189,58.3902607 24.214074,58.3474417 L62.9357979,57.0013755 C64.1585971,56.9588678 65.1498718,57.9067208 65.1498718,59.1361939 L65.1498718,57.7126233 C65.1498718,58.9341586 64.167553,59.9585565 62.9357979,60.0013755 L24.214074,61.3474417 C22.9912747,61.3899493 22,60.4420964 22,59.2126233 L22,60.6361939 Z" fill="#F5F5F5" transform="translate(43.574936, 59.212204) rotate(-146.000000) translate(-43.574936, -59.212204) "></path>
</g>
</svg>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment