diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2016-11-19 10:38:07 +0300 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2016-11-21 21:57:11 +0300 |
commit | 46d2b4307a3f9e3943205f1c7107c9a3abd6ac6c (patch) | |
tree | 981a4e767e8e5602a6ce789b339ca2e13d7ff372 /app | |
parent | 1a7cc190b734731f936c9aa067bf5ac2d46ef2c6 (diff) |
Add view to handle the case when user doesn’t have access to stage
Diffstat (limited to 'app')
7 files changed, 73 insertions, 15 deletions
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index bb67dd429e2..0a20708dee9 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -76,12 +76,18 @@ $(() => { }); }, selectDefaultStage() { - this.selectStage(this.state.stages.first()); + const stage = this.state.stages.first(); + this.selectStage(stage); }, selectStage(stage) { if (this.isLoadingStage) return; if (this.currentStage === stage) return; + if (!stage.isUserAllowed) { + cycleAnalyticsStore.setActiveStage(stage); + return; + } + this.isLoadingStage = true; cycleAnalyticsStore.setStageEvents([]); cycleAnalyticsStore.setActiveStage(stage); diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 index 64c24f71b87..b4815338622 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 @@ -25,6 +25,7 @@ newData.stages.forEach((item) => { item.active = false; + item.isUserAllowed = true; // This should come from server item.component = `stage-${item.title.toLowerCase()}-component`; }); diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index b6796511f49..b85f1076427 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -247,7 +247,8 @@ padding-left: 16px; } - .stage-empty { + .stage-empty, + .not-available { color: $gl-text-color-light; } } @@ -410,22 +411,34 @@ } } - .empty-stage { + .empty-stage, + .no-access-stage { text-align: center; width: 75%; margin: 0 auto; padding-top: 130px; color: $gl-text-color-light; + h4 { + color: $gl-text-color; + } + } + + .empty-stage { .icon-no-data { height: 36px; width: 78px; display: inline-block; margin-bottom: 20px; } + } - h4 { - color: $gl-text-color; + .no-access-stage { + .icon-lock { + height: 36px; + width: 78px; + display: inline-block; + margin-bottom: 20px; } } } diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml index f839ec9c018..06c42bff576 100644 --- a/app/views/projects/cycle_analytics/_empty_stage.html.haml +++ b/app/views/projects/cycle_analytics/_empty_stage.html.haml @@ -1,7 +1,7 @@ .empty-stage-container .empty-stage .icon-no-data - = render "shared/icons/icon_no_data.svg" + = custom_icon ('icon_no_data') %h4 We don’t have enough data to show this stage. %p The test phase measures the median time to run the entire pipeline for that project. diff --git a/app/views/projects/cycle_analytics/_no_access.html.haml b/app/views/projects/cycle_analytics/_no_access.html.haml new file mode 100644 index 00000000000..eb8df59748b --- /dev/null +++ b/app/views/projects/cycle_analytics/_no_access.html.haml @@ -0,0 +1,7 @@ +.no-access-stage-container + .no-access-stage + .icon-lock + = custom_icon ('icon_lock') + %h4 You need permission. + %p + Want to see the data? Please ask administer for access. diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 50255fe7a29..da9823e78fe 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -72,15 +72,21 @@ .stage-name {{ stage.title }} .stage-median - %template{ "v-if" => "stage.value" } - {{ stage.value }} - %template{ "v-else" => true } - %span.stage-empty + %template{ "v-if" => "stage.isUserAllowed" } + %span{ "v-if" => "stage.value" } + {{ stage.value }} + %span.stage-empty{ "v-else" => true } No enough data + %template{ "v-else" => true } + %span.not-available + Not available .section.stage-events %template{ "v-if" => "isLoadingStage" } - = icon("spinner spin", "v-show" => "isLoadingStage") - %template{ "v-if" => "isEmptyStage && !isLoadingStage" } - = render partial: "empty_stage" - %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" } - %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" } + = icon("spinner spin") + %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" } + = render partial: "no_access" + %template{ "v-else" => true } + %template{ "v-if" => "isEmptyStage && !isLoadingStage" } + = render partial: "empty_stage" + %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" } + %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" } diff --git a/app/views/shared/icons/_icon_lock.svg b/app/views/shared/icons/_icon_lock.svg new file mode 100644 index 00000000000..6ec671a76ed --- /dev/null +++ b/app/views/shared/icons/_icon_lock.svg @@ -0,0 +1,25 @@ +<svg width="46px" height="54px" viewBox="227 0 46 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch --> + <desc>Created with Sketch.</desc> + <defs> + <rect id="path-1" x="0" y="20" width="46" height="34" rx="8"></rect> + <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="46" height="34" fill="white"> + <use xlink:href="#path-1"></use> + </mask> + <path d="M29,16 C29,8.2680135 22.7319865,2 15,2 C7.2680135,2 1,8.2680135 1,16" id="path-3"></path> + <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="28" height="14" fill="white"> + <use xlink:href="#path-3"></use> + </mask> + </defs> + <g id="locker" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(227.000000, 0.000000)"> + <g id="Group-8"> + <use id="Rectangle-14" stroke="#B5A7DD" mask="url(#mask-2)" stroke-width="6" xlink:href="#path-1"></use> + <g id="Group-7" transform="translate(8.000000, 0.000000)"> + <use id="Oval-3" stroke="#B5A7DD" mask="url(#mask-4)" stroke-width="6" xlink:href="#path-3"></use> + <rect id="Rectangle-13" fill="#B5A7DD" x="1" y="16" width="3" height="6"></rect> + <rect id="Rectangle-13-Copy" fill="#B5A7DD" x="26" y="16" width="3" height="6"></rect> + </g> + <path d="M25,37.4648712 C26.1956027,36.7732524 27,35.4805647 27,34 C27,31.790861 25.209139,30 23,30 C20.790861,30 19,31.790861 19,34 C19,35.4805647 19.8043973,36.7732524 21,37.4648712 L21,41.0026083 C21,42.1041422 21.8954305,43 23,43 C24.1122704,43 25,42.1057373 25,41.0026083 L25,37.4648712 Z" id="Combined-Shape" fill="#6B4FBB"></path> + </g> + </g> +</svg> |