IGNITE-7172 Added examples on queries page.
Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/156e1676 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/156e1676 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/156e1676 Branch: refs/heads/ignite-zk-ce Commit: 156e1676ca7923458ca7aac8e7f5d5fec82f42a0 Parents: 4ce5fe2 Author: Dmitriy Shabalin <[email protected]> Authored: Tue Dec 12 21:05:37 2017 +0700 Committer: Andrey Novikov <[email protected]> Committed: Tue Dec 12 21:05:37 2017 +0700 ---------------------------------------------------------------------- .../app/components/page-queries/style.scss | 51 ++++++++++++++++++++ .../components/page-queries/template.tpl.pug | 27 ++++++++++- .../app/directives/information/information.pug | 2 +- .../app/directives/information/information.scss | 5 +- .../frontend/public/images/icons/attention.svg | 3 ++ .../frontend/public/images/icons/index.js | 1 + 6 files changed, 85 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/156e1676/modules/web-console/frontend/app/components/page-queries/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/style.scss b/modules/web-console/frontend/app/components/page-queries/style.scss index 70136fd..1f315e8 100644 --- a/modules/web-console/frontend/app/components/page-queries/style.scss +++ b/modules/web-console/frontend/app/components/page-queries/style.scss @@ -33,4 +33,55 @@ page-queries { .affix + .block-information { margin-top: 90px; } + + .block-information { + padding: 18px 10px 18px 36px; + + [ng-transclude] { + display: flex; + } + + [ignite-icon] { + top: 18px; + left: 14px; + width: 14px; + } + + ul { + min-width: 300px; + } + + .example { + flex-basis: 100%; + + .group { + background: white; + + .group-legend { + label { + @import "public/stylesheets/variables.scss"; + + font-size: 12px; + color: $gray-light; + background: none; + padding-left: 0; + } + } + + .group-content { + height: 66px; + + margin: 0; + padding: 5px 0; + + overflow: hidden; + } + } + } + + .sql-editor { + width: 100%; + margin: 0; + } + } } http://git-wip-us.apache.org/repos/asf/ignite/blob/156e1676/modules/web-console/frontend/app/components/page-queries/template.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/page-queries/template.tpl.pug b/modules/web-console/frontend/app/components/page-queries/template.tpl.pug index b2173f7..ce5ab73 100644 --- a/modules/web-console/frontend/app/components/page-queries/template.tpl.pug +++ b/modules/web-console/frontend/app/components/page-queries/template.tpl.pug @@ -364,12 +364,37 @@ mixin paragraph-query .row(ng-if='notebook' bs-affix style='margin-bottom: 20px;') +notebook-rename - ignite-information(data-title='With query notebook you can' style='margin-bottom: 30px') + -var example = `CREATE TABLE Person(ID INTEGER PRIMARY KEY, NAME VARCHAR(100));\nINSERT INTO Person(ID, NAME) VALUES (1, "Ed"), (2, "Ann"), (3, "Emma");\nSELECT * FROM Person;`; + + ignite-information( + data-title='With query notebook you can' + style='margin-bottom: 30px' + ng-init=`example = '${example}'` + ) ul li Create any number of queries li Execute and explain SQL queries li Execute scan queries li View data in tabular form and as charts + .example + .group + .group-legend + label Examples: + .group-content + .sql-editor(ignite-ace='{\ + onLoad: aceInit({}),\ + theme: "chrome",\ + mode: "sql",\ + require: ["ace/ext/language_tools"],\ + showGutter: false,\ + advanced: {\ + enableSnippets: false,\ + enableBasicAutocompletion: true,\ + enableLiveAutocompletion: true\ + }}' + ng-model='example' + readonly='true' + ) div(ng-if='notebookLoadFailed' style='text-align: center') +notebook-error http://git-wip-us.apache.org/repos/asf/ignite/blob/156e1676/modules/web-console/frontend/app/directives/information/information.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/directives/information/information.pug b/modules/web-console/frontend/app/directives/information/information.pug index b805d4a..aa4d0e9 100644 --- a/modules/web-console/frontend/app/directives/information/information.pug +++ b/modules/web-console/frontend/app/directives/information/information.pug @@ -15,6 +15,6 @@ limitations under the License. .block-information - span.icon.fa.fa-info-circle(ng-if='title') + svg(ignite-icon='attention' ng-if='title') h3(ng-if='title') {{::title}} div(ng-transclude='') http://git-wip-us.apache.org/repos/asf/ignite/blob/156e1676/modules/web-console/frontend/app/directives/information/information.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/directives/information/information.scss b/modules/web-console/frontend/app/directives/information/information.scss index 39f3c05..1992e13 100644 --- a/modules/web-console/frontend/app/directives/information/information.scss +++ b/modules/web-console/frontend/app/directives/information/information.scss @@ -30,12 +30,13 @@ $ignite-block-information-icon: #4a6785; margin: 20px 0; padding: 10px 10px 0 30px; + font-family: Roboto; + > h3 { - font-weight: bold; margin-bottom: 10px; } - > .icon { + > [ignite-icon] { cursor: default; color: $ignite-block-information-icon; http://git-wip-us.apache.org/repos/asf/ignite/blob/156e1676/modules/web-console/frontend/public/images/icons/attention.svg ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/images/icons/attention.svg b/modules/web-console/frontend/public/images/icons/attention.svg new file mode 100644 index 0000000..cd8a3a1 --- /dev/null +++ b/modules/web-console/frontend/public/images/icons/attention.svg @@ -0,0 +1,3 @@ +<svg id='attention-icon' xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 14 14"> + <path fill="currentColor" fill-rule="evenodd" d="M6.3 9.1h1.4v1.4H6.3V9.1zm0-5.6h1.4v4.2H6.3V3.5zM6.993 0A6.997 6.997 0 0 0 0 7c0 3.864 3.129 7 6.993 7A7.004 7.004 0 0 0 14 7c0-3.864-3.136-7-7.007-7zM7 12.6A5.598 5.598 0 0 1 1.4 7c0-3.094 2.506-5.6 5.6-5.6s5.6 2.506 5.6 5.6-2.506 5.6-5.6 5.6z"/> +</svg> http://git-wip-us.apache.org/repos/asf/ignite/blob/156e1676/modules/web-console/frontend/public/images/icons/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/images/icons/index.js b/modules/web-console/frontend/public/images/icons/index.js index 5ca6307..2d0f649 100644 --- a/modules/web-console/frontend/public/images/icons/index.js +++ b/modules/web-console/frontend/public/images/icons/index.js @@ -27,3 +27,4 @@ export refresh from './refresh.svg'; export sort from './sort.svg'; export info from './info.svg'; export connectedClusters from './connectedClusters.svg'; +export attention from './attention.svg';
