Skip to content

A
atlas
Commit 4952a560 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3453: UI: show shell icon in entity detail page if status is incomplete

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent 503a572d
Showing with 64 additions and 6 deletions
dashboardv2/public/css/scss/theme.scss
...@@ -511,3 +511,28 @@ hr[size="10"] { ...@@ -511,3 +511,28 @@ hr[size="10"] {
} }
} }
} }
.entityDetail {
.isIncomplete {
&.show {
img {
opacity: .2;
animation: blink 2.5s infinite;
}
i.fa.fa-refresh {
display: block;
}
}
i.fa.fa-refresh {
display: none;
text-align: center;
font-size: 20px;
top: 0;
position: absolute;
z-index: 999;
left: calc(50% - 8px);
}
}
}
\ No newline at end of file
dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<div class="entityDetail form-horizontal col-sm-12"> <div class="entityDetail form-horizontal col-sm-12">
<h1 class="title row"> <h1 class="title row isIncomplete">
<div data-id="entityIcon" class="entity-icon-box"></div> <div data-id="entityIcon" class="entity-icon-box position-relative"></div>
<span data-id="title"></span> <span data-id="title"></span>
</h1> {{#if entityUpdate}} </h1> {{#if entityUpdate}}
<div data-id="editButtonContainer" class="pull-right"></div> <div data-id="editButtonContainer" class="pull-right"></div>
......
dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -193,7 +193,10 @@ define(['require', ...@@ -193,7 +193,10 @@ define(['require',
} else { } else {
this.ui.entityIcon.removeClass('disabled'); this.ui.entityIcon.removeClass('disabled');
} }
this.ui.entityIcon.attr('title', _.escape(collectionJSON.typeName)).html('<img src="' + Utils.getEntityIconPath({ entityData: entityData }) + '"/>').find("img").on('error', function() { if (collectionJSON.isIncomplete === true) {
this.$(".isIncomplete").addClass("show");
}
this.ui.entityIcon.attr('title', _.escape(collectionJSON.typeName)).html('<img src="' + Utils.getEntityIconPath({ entityData: entityData }) + '"/><i class="fa fa-refresh fa-spin-custom"></i>').find("img").on('error', function() {
this.src = Utils.getEntityIconPath({ entityData: entityData, errorUrl: this.src }); this.src = Utils.getEntityIconPath({ entityData: entityData, errorUrl: this.src });
}); });
} else { } else {
......
dashboardv3/public/css/scss/theme.scss
...@@ -691,3 +691,28 @@ hr[size="10"] { ...@@ -691,3 +691,28 @@ hr[size="10"] {
.tooltip.bottom .tooltip-arrow { .tooltip.bottom .tooltip-arrow {
border-bottom-color: #000; border-bottom-color: #000;
} }
.entityDetail {
.isIncomplete {
&.show {
img {
opacity: .2;
animation: blink 2.5s infinite;
}
i.fa.fa-refresh {
display: block;
}
}
i.fa.fa-refresh {
display: none;
text-align: center;
font-size: 20px;
top: 0;
position: absolute;
z-index: 1;
left: calc(50% - 8px);
}
}
}
\ No newline at end of file
dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
</div> </div>
<div class="entityDetail form-horizontal col-sm-12"> <div class="entityDetail form-horizontal col-sm-12">
<h1 class="title"> <h1 class="title isIncomplete">
<div data-id="entityIcon" class="entity-icon-box"></div> <div data-id="entityIcon" class="entity-icon-box position-relative"></div>
<span data-id="title"></span> <span data-id="title"></span>
</h1> {{#if entityUpdate}} </h1> {{#if entityUpdate}}
<div data-id="editButtonContainer" class="pull-right"></div> <div data-id="editButtonContainer" class="pull-right"></div>
......
dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
...@@ -198,7 +198,10 @@ define(['require', ...@@ -198,7 +198,10 @@ define(['require',
} else { } else {
this.ui.entityIcon.removeClass('disabled'); this.ui.entityIcon.removeClass('disabled');
} }
this.ui.entityIcon.attr('title', _.escape(collectionJSON.typeName)).html('<img src="' + Utils.getEntityIconPath({ entityData: entityData }) + '"/>').find("img").on('error', function() { if (collectionJSON.isIncomplete === true) {
this.$(".isIncomplete").addClass("show");
}
this.ui.entityIcon.attr('title', _.escape(collectionJSON.typeName)).html('<img src="' + Utils.getEntityIconPath({ entityData: entityData }) + '"/><i class="fa fa-refresh fa-spin-custom"></i>').find("img").on('error', function() {
this.src = Utils.getEntityIconPath({ entityData: entityData, errorUrl: this.src }); this.src = Utils.getEntityIconPath({ entityData: entityData, errorUrl: this.src });
}); });
} else { } else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment