home.mako 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. ## Licensed to Cloudera, Inc. under one
  2. ## or more contributor license agreements. See the NOTICE file
  3. ## distributed with this work for additional information
  4. ## regarding copyright ownership. Cloudera, Inc. licenses this file
  5. ## to you under the Apache License, Version 2.0 (the
  6. ## "License"); you may not use this file except in compliance
  7. ## with the License. You may obtain a copy of the License at
  8. ##
  9. ## http://www.apache.org/licenses/LICENSE-2.0
  10. ##
  11. ## Unless required by applicable law or agreed to in writing, software
  12. ## distributed under the License is distributed on an "AS IS" BASIS,
  13. ## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. ## See the License for the specific language governing permissions and
  15. ## limitations under the License.
  16. <%!
  17. from desktop.views import commonheader, commonfooter, commonshare, _ko
  18. from django.utils.translation import ugettext as _
  19. use_new_home = False
  20. try:
  21. from beeswax.conf import USE_NEW_EDITOR
  22. use_new_home = USE_NEW_EDITOR.get()
  23. except:
  24. pass
  25. %>
  26. ${ commonheader(_('Welcome Home'), "home", user) | n,unicode }
  27. <style type="text/css">
  28. .sidebar-nav {
  29. margin-bottom: 10px;
  30. }
  31. .sidebar-nav img {
  32. margin-right: 6px;
  33. }
  34. .sidebar-nav .dropdown-menu a {
  35. padding-left: 6px;
  36. }
  37. .tag {
  38. float: left;
  39. margin-right: 6px;
  40. margin-bottom: 4px;
  41. }
  42. .tag-counter {
  43. margin-top: 3px;
  44. margin-right: 4px;
  45. }
  46. .toggle-tag, .document-tags-modal-checkbox, .tags-modal-checkbox {
  47. cursor: pointer;
  48. }
  49. .badge-left {
  50. border-radius: 9px 0px 0px 9px;
  51. padding-right: 5px;
  52. font-weight: normal;
  53. }
  54. .badge-right {
  55. border-radius: 0px 9px 9px 0px;
  56. padding-left: 5px;
  57. }
  58. .badge-right:hover {
  59. background-color: #b94a48;
  60. }
  61. .airy li {
  62. margin-bottom: 6px;
  63. }
  64. .white {
  65. padding: 9px 18px;
  66. margin-top: 1px;
  67. overflow: hidden;
  68. font-size: 14px;
  69. line-height: 1.4;
  70. color: #737373;
  71. text-overflow: ellipsis;
  72. }
  73. </style>
  74. <div class="navbar navbar-inverse navbar-fixed-top nokids">
  75. <div class="navbar-inner">
  76. <div class="container-fluid">
  77. <div class="nav-collapse">
  78. <ul class="nav">
  79. <li class="currentApp">
  80. <a href="${ url('desktop.views.home') }">
  81. <img src="${ static('desktop/art/home.png') }" class="app-icon" />
  82. ${ _('My documents') }
  83. </a>
  84. </li>
  85. </ul>
  86. </div>
  87. % if use_new_home:
  88. <div class="nav-collapse pull-right">
  89. <ul class="nav">
  90. <li class="currentApp">
  91. <a href="${ url('desktop.views.home2') }">
  92. <img src="${ static('desktop/art/home.png') }" class="app-icon" />
  93. ${ _('New Home') }
  94. </a>
  95. </li>
  96. </ul>
  97. </div>
  98. % endif
  99. </div>
  100. </div>
  101. </div>
  102. <div id='documentList' class="container-fluid">
  103. <div class="row-fluid">
  104. <div class="span2">
  105. <div class="sidebar-nav">
  106. <ul class="nav nav-list">
  107. <li class="nav-header">${_('Actions')}</li>
  108. <li class="dropdown">
  109. <a href="#" data-toggle="dropdown"><i class="fa fa-plus-circle"></i> ${_('New document')}</a>
  110. <ul class="dropdown-menu" role="menu">
  111. % if 'beeswax' in apps:
  112. <li><a href="${ url('beeswax:index') }"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon"/> ${_('Hive Query')}</a></li>
  113. % endif
  114. % if 'impala' in apps:
  115. <li><a href="${ url('impala:index') }"><img src="${ static(apps['impala'].icon_path) }" class="app-icon"/> ${_('Impala Query')}</a></li>
  116. % endif
  117. % if 'pig' in apps:
  118. <li><a href="${ url('pig:index') }"><img src="${ static(apps['pig'].icon_path) }" class="app-icon"/> ${_('Pig Script')}</a></li>
  119. % endif
  120. % if 'spark' in apps:
  121. <li><a href="${ url('notebook:index') }"><img src="${ static(apps['spark'].icon_path) }" class="app-icon"/> ${_('Spark Job')}</a></li>
  122. % endif
  123. % if 'oozie' in apps:
  124. <li class="dropdown-submenu">
  125. <a href="#"><img src="${ static(apps['oozie'].icon_path) }" class="app-icon"/> ${_('Oozie Scheduler')}</a>
  126. <ul class="dropdown-menu">
  127. <li><a href="${ url('oozie:new_workflow') }"><img src="${ static('oozie/art/icon_oozie_workflow_48.png') }" class="app-icon"/> ${_('Workflow')}</a></li>
  128. <li><a href="${ url('oozie:new_coordinator') }"><img src="${ static('oozie/art/icon_oozie_coordinator_48.png') }" class="app-icon"/> ${_('Coordinator')}</a></li>
  129. <li><a href="${ url('oozie:new_bundle') }"><img src="${ static('oozie/art/icon_oozie_bundle_48.png') }" class="app-icon"/> ${_('Bundle')}</a></li>
  130. </ul>
  131. </li>
  132. % endif
  133. </ul>
  134. </li>
  135. <!-- ko template: { name: 'tag-template', data: trash } -->
  136. <!-- /ko -->
  137. <li class="nav-header tag-mine-header">
  138. ${_('My Projects')}
  139. <div class="edit-tags" style="display: inline;cursor: pointer;margin-left: 6px">
  140. <i class="fa fa-plus-circle" data-bind="click: addTag" title="${ _('Create project') }" rel="tooltip" data-placement="right"></i>
  141. <i class="fa fa-minus-circle" data-bind="click: removeTag, visible: $root.selectedTag().hasOwnProperty('owner') && $root.selectedTag().owner() == '${user}' && $root.selectedTag().name() != 'history' && $root.selectedTag().name() != 'trash' && $root.selectedTag().name() != 'default'"
  142. title="${ _('Remove selected project') }" rel="tooltip" data-placement="right"></i>
  143. </div>
  144. </li>
  145. <!-- ko template: { name: 'tag-template', foreach: myTags } -->
  146. <!-- /ko -->
  147. <li data-bind="visible: myTags().length == 0">
  148. <a href="javascript:void(0)" class="edit-tags" style="line-height:24px" data-bind="click: addTag">
  149. <i class="fa fa-plus-circle"></i> ${_('You currently own no projects. Click here to add one now!')}
  150. </a>
  151. </li>
  152. <li class="nav-header tag-shared-header">
  153. ${_('Shared with me')}
  154. </li>
  155. <!-- ko template: { name: 'shared-tag-template', foreach: sharedTags } -->
  156. <!-- /ko -->
  157. <li data-bind="visible: sharedTags().length == 0">
  158. <a href="javascript:void(0)" style="line-height:24px"><i class="fa fa-plus-circle"></i> ${_('There are currently no projects shared with you.')}
  159. </a>
  160. </li>
  161. </ul>
  162. </div>
  163. </div>
  164. <div class="span10">
  165. <div class="card card-home" style="margin-top: 0">
  166. <input id="searchInput" type="text" placeholder="Search for name, description, etc..." class="input-xlarge search-query" style="margin-left: 20px;margin-top: 5px">
  167. ##<h2 class="card-heading simple">${_('My Documents')}</h2>
  168. <div class="card-body">
  169. <p>
  170. <table id="documents" class="table table-striped table-condensed" data-bind="visible: documents().length > 0">
  171. <thead>
  172. <tr>
  173. <th style="width: 26px">&nbsp;</th>
  174. <th style="width: 200px">${_('Name')}</th>
  175. <th>${_('Description')}</th>
  176. <th style="width: 150px">${_('Last Modified')}</th>
  177. <th style="width: 80px; text-align: center">${_('Project')}</th>
  178. <th style="width: 40px">${_('Sharing')}</th>
  179. </tr>
  180. </thead>
  181. <tbody data-bind="template: { name: 'document-template', foreach: renderableDocuments}">
  182. </tbody>
  183. <tfoot data-bind="visible: documents().length > 0">
  184. <tr>
  185. <td colspan="7">
  186. <div class="pull-right" style="margin-top: 10px" data-bind="visible: hasPrevious() || hasNext()">
  187. <span>${_('Page')} <input type="number" class="input-mini" style="text-align: center" data-bind="value: page"> ${_('of')} <span data-bind="text: totalPages"></span></span>
  188. </div>
  189. <div class="pagination">
  190. <ul>
  191. <li><a data-bind="click: previousPage, visible: hasPrevious">${_('Previous')}</a></li>
  192. <li><a data-bind="click: nextPage, visible: hasNext">${_('Next')}</a></li>
  193. </ul>
  194. </div>
  195. </td>
  196. </tr>
  197. </tfoot>
  198. </table>
  199. <div data-bind="visible: documents().length == 0">
  200. <h4 style="color: #777; margin-bottom: 30px">${_('There are currently no documents in this project or tag.')}</h4>
  201. </div>
  202. </p>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div id="documentMoveModal" class="modal fade hide">
  208. <div class="modal-header">
  209. <a href="#" class="close" data-dismiss="modal">&times;</a>
  210. <h3>${_('Move to a project')}</h3>
  211. </div>
  212. <div class="modal-body">
  213. <p>
  214. ${_('Select the project you want to move this document to')}
  215. <ul class="unstyled">
  216. <!-- ko foreach: myTags -->
  217. <li>
  218. <a href="javascript:void(0)" style="padding-left: 4px" data-bind="click: moveDocFinal">
  219. <i class="fa fa-tag"></i> <span data-bind="text: name"></span>
  220. </a>
  221. </li>
  222. <!-- /ko -->
  223. </ul>
  224. </p>
  225. </div>
  226. <div class="modal-footer">
  227. <a class="btn" data-dismiss="modal">${_('Cancel')}</a>
  228. </div>
  229. </div>
  230. </div>
  231. <script type="text/html" id="tag-template">
  232. <li data-bind="click: $root.filterDocs, css: {'active': $root.selectedTag().id == id}">
  233. <a href="javascript:void(0)" style="padding-right: 4px">
  234. <i data-bind="css: {'fa': true, 'fa-trash-o':name() == 'trash', 'fa-clock-o': name() == 'history', 'fa-tag': name() != 'trash' && name() != 'history'}"></i> <span data-bind="html: name"></span>
  235. <span class="badge pull-right tag-counter" data-bind="text: docs().length"></span>
  236. </a>
  237. </li>
  238. </script>
  239. <script type="text/html" id="shared-tag-template">
  240. <li class="white">
  241. <i class="fa fa-user"></i> <span data-bind="text: name"></span>
  242. </li>
  243. <!-- ko foreach: projects-->
  244. <li data-bind="click: $root.filterDocs, css: {'active': $root.selectedTag().id == id}">
  245. <a href="javascript:void(0)" style="padding-right: 4px">
  246. &nbsp;&nbsp;&nbsp;<i class="fa fa-tag"></i> <span data-bind="html: name"></span> <span class="badge pull-right tag-counter" data-bind="text: docs().length"></span>
  247. </a>
  248. </li>
  249. <!-- /ko -->
  250. </script>
  251. <script type="text/html" id="document-template">
  252. <tr>
  253. <td style="width: 26px"><img data-bind="attr: { src: icon }" class="app-icon"></td>
  254. <td><a data-bind="attr: { href: url }, html: name"></a></td>
  255. <td data-bind="html: description"></td>
  256. <td data-bind="text: lastModified"></td>
  257. <td style="text-align: center; white-space: nowrap">
  258. <a href="javascript:void(0)" rel="tooltip" data-placement="left" data-bind="click: moveDoc, attr: {'data-original-title': '${ _ko("Change project for") } '+name}" style="padding-left:8px; padding-right: 8px">
  259. <span data-bind="foreach: tags">
  260. <!-- ko if: name != 'trash'-->
  261. <span class="badge" data-bind="html: name"></span>
  262. <!-- /ko -->
  263. </span>
  264. </a>
  265. </td>
  266. <td style="width: 40px; text-align: center">
  267. <a class="share-link" rel="tooltip" data-placement="left" style="padding-left:10px; padding-right: 10px" data-bind="click: shareDoc, attr: {'data-original-title': '${ _ko("Share") } '+name}, visible: isMine , css: {'baseShared': true, 'isShared': perms.read.users.length + perms.read.groups.length + perms.write.users.length + perms.write.groups.length > 0}">
  268. <i class="fa fa-users"></i>
  269. </a>
  270. <i class="fa fa-ban" style="padding-left:8px; padding-right: 8px" data-bind="visible: !isMine"></i>
  271. </td>
  272. </tr>
  273. </script>
  274. <div id="addTagModal" class="modal hide fade">
  275. <form class="form-inline form-padding-fix" onsubmit="javascript:{return false;}">
  276. <div class="modal-header">
  277. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  278. <h3>${_('Create project')}</h3>
  279. </div>
  280. <div class="modal-body">
  281. <p>
  282. <label>
  283. ${_('Project name')} <input id="tagsNew" type="text" class="input-xlarge">
  284. </label>
  285. </p>
  286. </div>
  287. <div class="modal-footer">
  288. <div id="saveProjectAlert" class="alert-message error hide" style="position: absolute; left: 78px;">
  289. <span class="label label-important"></span>
  290. </div>
  291. <a href="#" data-dismiss="modal" class="btn">${_('Cancel')}</a>
  292. <a id="tagsNewBtn" href="#" class="btn btn-primary disable-feedback">${ _('Add') }</a>
  293. </div>
  294. </form>
  295. </div>
  296. <div id="removeTagModal" class="modal hide fade">
  297. <div class="modal-header">
  298. <a href="#" class="close" data-dismiss="modal">&times;</a>
  299. <h3>${_('Confirm Delete')}</h3>
  300. </div>
  301. <div class="modal-body">
  302. <p>${_('Are you sure you want to delete the project')} <strong><span data-bind="text: selectedTagForDelete().name"></span></strong>? ${_('All its documents will be moved to the default tag.')}</p>
  303. </div>
  304. <div class="modal-footer">
  305. <a class="btn" data-dismiss="modal">${_('No')}</a>
  306. <a id="tagRemoveBtn" class="pointer btn btn-danger disable-feedback">${_('Yes')}</a>
  307. </div>
  308. </div>
  309. ${ commonshare() | n,unicode }
  310. <script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
  311. <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
  312. <script src="${ static('desktop/ext/js/knockout-mapping.min.js') }" type="text/javascript" charset="utf-8"></script>
  313. <script src="${ static('desktop/js/home.vm.js') }"></script>
  314. <script src="${ static('desktop/js/share.vm.js') }"></script>
  315. <script type="text/javascript" charset="utf-8">
  316. var viewModel, shareViewModel, JSON_USERS_GROUPS;
  317. var JSON_TAGS = ${ json_tags | n,unicode };
  318. var JSON_DOCS = ${ json_documents | n,unicode };
  319. $(document).ready(function () {
  320. viewModel = new HomeViewModel(JSON_TAGS, JSON_DOCS);
  321. ko.applyBindings(viewModel, $('#documentList')[0]);
  322. shareViewModel = initSharing("#documentShareModal", viewModel.updateDoc);
  323. var selectedUserOrGroup, map, dropdown = null;
  324. viewModel.selectedTag.subscribe(function (value) {
  325. $("#searchInput").val("");
  326. $.totalStorage("hueHomeSelectedTag", value.id());
  327. });
  328. function getFirstAvailableDoc() {
  329. var _found = null;
  330. JSON_TAGS.mine.forEach(function(tag){
  331. if (_found == null && tag.docs.length > 0){
  332. _found = tag.id;
  333. }
  334. });
  335. JSON_TAGS.notmine.forEach(function(tag){
  336. tag.projects.forEach(function(project){
  337. if (_found == null && project.docs.length > 0){
  338. _found = project.id;
  339. }
  340. });
  341. });
  342. if (_found != null){
  343. return viewModel.getTagById(_found);
  344. }
  345. return viewModel.history();
  346. }
  347. if ($.totalStorage("hueHomeSelectedTag") != null) {
  348. var _preselectedTag = viewModel.getTagById($.totalStorage("hueHomeSelectedTag"));
  349. if (_preselectedTag != null) {
  350. viewModel.filterDocs(_preselectedTag);
  351. }
  352. }
  353. else {
  354. viewModel.filterDocs(getFirstAvailableDoc());
  355. }
  356. $("#searchInput").jHueDelayedInput(function () {
  357. viewModel.searchDocs($("#searchInput").val());
  358. });
  359. $("#tagsNewBtn").on("click", function () {
  360. var tag_name = $("#tagsNew").val();
  361. if ($.trim(tag_name) == "") {
  362. $("#saveProjectAlert span").text("${_('File name is required.')}");
  363. $("#saveProjectAlert").show();
  364. $("#tagsNew").addClass("fieldError");
  365. resetPrimaryButtonsStatus(); // Globally available
  366. return false;
  367. }
  368. $.post("/desktop/api/tag/add_tag", {
  369. name: tag_name
  370. }, function (data) {
  371. if (data.status == -1) {
  372. $("#saveProjectAlert span").text("${_('project name already exists')}");
  373. $("#saveProjectAlert").show();
  374. resetPrimaryButtonsStatus(); //globally available
  375. }
  376. else {
  377. data.name = hueUtils.htmlEncode(data.name);
  378. viewModel.createTag(data);
  379. $("#tagsNew").val("");
  380. $(document).trigger("info", "${_('Project created')}");
  381. $("#addTagModal").modal("hide");
  382. }
  383. }).fail(function (xhr, textStatus, errorThrown) {
  384. $(document).trigger("error", "${_("There was an error processing your action: ")}" + xhr.responseText); // reserved name, duplicate etc
  385. });
  386. });
  387. $("#tagRemoveBtn").on("click", function(){
  388. removeTagFinal();
  389. });
  390. $("a[rel='tooltip']").tooltip();
  391. });
  392. function addTag() {
  393. $("#tagsNew").val('');
  394. $("#addTagModal").modal("show");
  395. $("#saveProjectAlert").hide();
  396. }
  397. function removeTag() {
  398. viewModel.selectedTagForDelete(viewModel.selectedTag());
  399. $("#removeTagModal").modal("show");
  400. }
  401. function removeTagFinal() {
  402. var tag = viewModel.selectedTagForDelete();
  403. $.post("/desktop/api/tag/remove_tag", {
  404. tag_id: tag.id()
  405. }, function (response) {
  406. if (response != null) {
  407. if (response.status == 0) {
  408. $(document).trigger("info", response.message);
  409. $("#removeTagModal").modal("hide");
  410. viewModel.deleteTag(tag);
  411. viewModel.filterDocs(viewModel.history());
  412. }
  413. else {
  414. $(document).trigger("error", "${_("There was an error processing your action: ")}" + response.message);
  415. }
  416. }
  417. }).fail(function (response) {
  418. $(document).trigger("error", "${_("There was an error processing your action: ")}" + response.responseText);
  419. });
  420. }
  421. function shareDoc(doc) {
  422. shareViewModel.selectedDoc(doc);
  423. openShareModal();
  424. }
  425. function moveDoc(doc) {
  426. shareViewModel.selectedDoc(doc);
  427. $("#documentMoveModal").modal("show");
  428. }
  429. function moveDocFinal(tag) {
  430. $.post("/desktop/api/doc/update_tags", {
  431. data: JSON.stringify({
  432. doc_id: shareViewModel.selectedDoc().id,
  433. tag_ids: [tag.id()]
  434. })
  435. }, function (response) {
  436. if (response != null) {
  437. if (response.status != 0) {
  438. $(document).trigger("error", "${_("There was an error processing your action: ")}" + response.message);
  439. }
  440. else {
  441. $(document).trigger("info", "${ _("Project updated successfully.") }");
  442. viewModel.updateDoc(response.doc);
  443. }
  444. }
  445. $("#documentMoveModal").modal("hide");
  446. }).fail(function (response) {
  447. $(document).trigger("error", "${_("There was an error processing your action: ")}" + response.responseText);
  448. });
  449. }
  450. </script>
  451. <style type="text/css">
  452. .tourSteps {
  453. min-height: 150px;
  454. }
  455. </style>
  456. <script src="${ static('desktop/ext/js/routie-0.3.0.min.js') }" type="text/javascript" charset="utf-8"></script>
  457. <script type="text/javascript" charset="utf-8">
  458. $(document).ready(function(){
  459. var currentStep = "tourStep1";
  460. routie({
  461. "tourStep1":function () {
  462. showStep("tourStep1");
  463. },
  464. "tourStep2":function () {
  465. showStep("tourStep2");
  466. },
  467. "tourStep3":function () {
  468. showStep("tourStep3");
  469. }
  470. });
  471. function showStep(step) {
  472. currentStep = step;
  473. $("a.tourStep").parent().removeClass("active");
  474. $("a.tourStep[href=#" + step + "]").parent().addClass("active");
  475. if (step == "tourStep3") {
  476. $("#tourLastStep").parent().addClass("active");
  477. }
  478. $(".tourStepDetails").hide();
  479. $("#" + step).show();
  480. }
  481. if ($.totalStorage("jHueTourHideModal") == null || $.totalStorage("jHueTourHideModal") == false) {
  482. $("#jHueTourModal").modal();
  483. $.totalStorage("jHueTourHideModal", true);
  484. $("#jHueTourModalChk").attr("checked", "checked");
  485. $("#jHueTourModalChk").on("change", function () {
  486. $.totalStorage("jHueTourHideModal", $(this).is(":checked"));
  487. });
  488. $("#jHueTourModalClose").on("click", function () {
  489. $("#jHueTourFlag").click();
  490. $("#jHueTourModal").modal("hide");
  491. });
  492. }
  493. });
  494. </script>
  495. <div id="jHueTourModal" class="modal hide fade" tabindex="-1">
  496. <div class="modal-header">
  497. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  498. <h3>${_('Did you know?')}</h3>
  499. </div>
  500. <div class="modal-body">
  501. <div class="row-fluid">
  502. <div id="properties" class="section">
  503. <ul class="nav nav-tabs" style="margin-bottom: 0">
  504. <li class="active"><a href="#tourStep1" class="tourStep">${ _('Step 1:') } ${ _('Add data') }</a></li>
  505. <li><a href="#tourStep2" class="tourStep">${ _('Step 2:') } ${ _('Query data') }</a></li>
  506. <li><a id="tourLastStep" href="#tourStep3" class="tourStep">${ _('Step 3:') } ${_('Do more!') }</a></li>
  507. </ul>
  508. </div>
  509. <div class="tourSteps">
  510. <div id="tourStep1" class="tourStepDetails">
  511. <div class="pull-left" style="color: #DDDDDD;font-size: 116px;margin: 10px; margin-right: 20px"><i class="fa fa-download"></i></div>
  512. <div style="margin: 40px">
  513. <p>
  514. ${ _('With') } <span class="badge badge-info"><i class="fa fa-file"></i> File Browser</span>
  515. ${ _('and the apps in the') } <span class="badge badge-info">Data Browsers <b class="caret"></b></span> ${ _('section, upload, view your data and create tables.') }
  516. </p>
  517. <p>
  518. ${ _('Pre-installed samples are also already there.') }
  519. </p>
  520. </div>
  521. </div>
  522. <div id="tourStep2" class="tourStepDetails hide">
  523. <div class="pull-left" style="color: #DDDDDD;font-size: 116px;margin: 10px; margin-right: 20px"><i class="fa fa-search"></i></div>
  524. <div style="margin: 40px">
  525. <p>
  526. ${ _('Then query and visualize the data with the') } <span class="badge badge-info">Query Editors <b class="caret"></b></span>
  527. ${ _('and') } <span class="badge badge-info">Search <b class="caret"></b></span>
  528. </p>
  529. </div>
  530. </div>
  531. <div id="tourStep3" class="tourStepDetails hide">
  532. <div class="pull-left" style="color: #DDDDDD;font-size: 116px;margin: 10px; margin-right: 20px"><i class="fa fa-flag-checkered"></i></div>
  533. <div style="margin: 40px">
  534. % if tours_and_tutorials:
  535. <p>
  536. ${ _('Tours were created to guide you around.') }
  537. ${ _('You can see the list of tours by clicking on the checkered flag icon') } <span class="badge badge-info"><i class="fa fa-flag-checkered"></i></span>
  538. ${ ('at the top right of this page.') }
  539. </p>
  540. % endif
  541. <p>
  542. ${ _('Additional documentation is available at') } <a href="http://learn.gethue.com">learn.gethue.com</a>.
  543. </p>
  544. </div>
  545. </div>
  546. </div>
  547. </div>
  548. <div class="modal-footer">
  549. <label class="checkbox" style="float:left"><input id="jHueTourModalChk" type="checkbox" />${_('Do not show this dialog again')}</label>
  550. <a id="jHueTourModalClose" href="#" class="btn btn-primary disable-feedback">${_('Got it, prof!')}</a>
  551. </div>
  552. </div>
  553. ${ commonfooter(request, messages) | n,unicode }