From 46d2b4307a3f9e3943205f1c7107c9a3abd6ac6c Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Sat, 19 Nov 2016 02:38:07 -0500 Subject: =?UTF-8?q?Add=20view=20to=20handle=20the=20case=20when=20user=20d?= =?UTF-8?q?oesn=E2=80=99t=20have=20access=20to=20stage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cycle_analytics/cycle_analytics_bundle.js | 8 ++++++- .../cycle_analytics/cycle_analytics_store.js.es6 | 1 + app/assets/stylesheets/pages/cycle_analytics.scss | 21 ++++++++++++++---- .../cycle_analytics/_empty_stage.html.haml | 2 +- .../projects/cycle_analytics/_no_access.html.haml | 7 ++++++ app/views/projects/cycle_analytics/show.html.haml | 24 +++++++++++++-------- app/views/shared/icons/_icon_lock.svg | 25 ++++++++++++++++++++++ 7 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 app/views/projects/cycle_analytics/_no_access.html.haml create mode 100644 app/views/shared/icons/_icon_lock.svg (limited to 'app') 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 @@ + + + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.1