Add view to handle the case when user doesn’t have access to stage
This commit is contained in:
parent
1a7cc190b7
commit
46d2b4307a
|
@ -76,12 +76,18 @@ $(() => {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
selectDefaultStage() {
|
selectDefaultStage() {
|
||||||
this.selectStage(this.state.stages.first());
|
const stage = this.state.stages.first();
|
||||||
|
this.selectStage(stage);
|
||||||
},
|
},
|
||||||
selectStage(stage) {
|
selectStage(stage) {
|
||||||
if (this.isLoadingStage) return;
|
if (this.isLoadingStage) return;
|
||||||
if (this.currentStage === stage) return;
|
if (this.currentStage === stage) return;
|
||||||
|
|
||||||
|
if (!stage.isUserAllowed) {
|
||||||
|
cycleAnalyticsStore.setActiveStage(stage);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.isLoadingStage = true;
|
this.isLoadingStage = true;
|
||||||
cycleAnalyticsStore.setStageEvents([]);
|
cycleAnalyticsStore.setStageEvents([]);
|
||||||
cycleAnalyticsStore.setActiveStage(stage);
|
cycleAnalyticsStore.setActiveStage(stage);
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
|
|
||||||
newData.stages.forEach((item) => {
|
newData.stages.forEach((item) => {
|
||||||
item.active = false;
|
item.active = false;
|
||||||
|
item.isUserAllowed = true; // This should come from server
|
||||||
item.component = `stage-${item.title.toLowerCase()}-component`;
|
item.component = `stage-${item.title.toLowerCase()}-component`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -247,7 +247,8 @@
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-empty {
|
.stage-empty,
|
||||||
|
.not-available {
|
||||||
color: $gl-text-color-light;
|
color: $gl-text-color-light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -410,22 +411,34 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-stage {
|
.empty-stage,
|
||||||
|
.no-access-stage {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 75%;
|
width: 75%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-top: 130px;
|
padding-top: 130px;
|
||||||
color: $gl-text-color-light;
|
color: $gl-text-color-light;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $gl-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-stage {
|
||||||
.icon-no-data {
|
.icon-no-data {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
width: 78px;
|
width: 78px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
h4 {
|
.no-access-stage {
|
||||||
color: $gl-text-color;
|
.icon-lock {
|
||||||
|
height: 36px;
|
||||||
|
width: 78px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.empty-stage-container
|
.empty-stage-container
|
||||||
.empty-stage
|
.empty-stage
|
||||||
.icon-no-data
|
.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.
|
%h4 We don’t have enough data to show this stage.
|
||||||
%p
|
%p
|
||||||
The test phase measures the median time to run the entire pipeline for that project.
|
The test phase measures the median time to run the entire pipeline for that project.
|
||||||
|
|
|
@ -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.
|
|
@ -72,15 +72,21 @@
|
||||||
.stage-name
|
.stage-name
|
||||||
{{ stage.title }}
|
{{ stage.title }}
|
||||||
.stage-median
|
.stage-median
|
||||||
%template{ "v-if" => "stage.value" }
|
%template{ "v-if" => "stage.isUserAllowed" }
|
||||||
{{ stage.value }}
|
%span{ "v-if" => "stage.value" }
|
||||||
%template{ "v-else" => true }
|
{{ stage.value }}
|
||||||
%span.stage-empty
|
%span.stage-empty{ "v-else" => true }
|
||||||
No enough data
|
No enough data
|
||||||
|
%template{ "v-else" => true }
|
||||||
|
%span.not-available
|
||||||
|
Not available
|
||||||
.section.stage-events
|
.section.stage-events
|
||||||
%template{ "v-if" => "isLoadingStage" }
|
%template{ "v-if" => "isLoadingStage" }
|
||||||
= icon("spinner spin", "v-show" => "isLoadingStage")
|
= icon("spinner spin")
|
||||||
%template{ "v-if" => "isEmptyStage && !isLoadingStage" }
|
%template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
|
||||||
= render partial: "empty_stage"
|
= render partial: "no_access"
|
||||||
%template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
|
%template{ "v-else" => true }
|
||||||
%component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
|
%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" }
|
||||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in New Issue