Change the default icon of an asset type in WSO2 G-Reg 5.3.0

By: අසදි on 12:56 AM

WSO2 G-Reg 5.3.0 is the latest release version of Governance Registry product.

In a vanilla pack all the thumbnails are rendered to be default to an unique color and the first letter of the asset name.

But if someone wants to customize this thumbnail here are the steps.

In this post I will explain how to change the thumbnail of a particular asset type, namely I will take 'reserservice' type as an example.

Let's say we want to change all the occurrences of thumbnails of 'restservice' type to a custom image icon shown below.

api-thumbnail.png

Let's start with copying desired thumbnail icon to following location where <asset-type> refers to the interested type.

[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/<asset-type>/themes/default/imgs/

Ex: I have added api_thumbnail.png into
[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/imgs/

Consider Details page of an asset. By default it looks like below image.

To change the thumbnail of this page to the custom image refer the newly added image from

[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/view-asset-top-common-container.hbs file. 
If you already don't have view-asset-top-common-container.hbs in location take a copy of 
[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/app/greg-publisher-defaults/themes/default/partials/view-asset-top-common-container.hbs
into
[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/view-asset-top-common-container.hbs 

It is default to below

<div class="ast-name-icon">{{this.nameToChar}}</div>

Change it to

<div class="ast-name-icon">
     <img alt="thumbnail" class="square-element img-thumbnail" src='{{url ""}}/extensions/assets/restservice/themes/default/imgs/api_thumbnail.png'>
</div>

And change the style configurations to align the custom image nicely. I have removed  style="background: {{this.uniqueColor}}" from parent div as well.

Now
[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/view-asset-top-common-container.hbs looks like below.

{{#with assets}}

    <div class="well asset-well">

        <div class="container-fluid">

            <div class="row">

                <div class="col-lg-12">

                    <div class="pull-left ast-img setbgcolor" title="{{name}}">

                        <span class="ast-type-icon" title="{{this.singularLabel}}">

                            <i class="{{icon}} fw-lg"></i>

                        </span>

                        <!--div class="ast-name-icon">{{this.nameToChar}}</div-->

                        <div class="ast-name-icon">

                            <img alt="thumbnail" class="square-element img-thumbnail" src='{{url ""}}/extensions/assets/restservice/themes/default/imgs/api_thumbnail.png'>

                        </div>

                    </div>

                    <div class="asset-details-right">

                        <h4>{{name}}</h4>

                        {{#if version}}

                            <p>Version : {{version}}</p>

                        {{/if}}

                        {{#if lifecycleState}}

                        <p>{{lifecycle}} : {{lifecycleState}}</p>

                        {{/if}}

                        <div class="well-description">{{tables.0.fields.createdtime.value}}</div>

                    </div>

                 </div>

            </div>

        </div>

    </div>

{{/with}}

When you refresh the details page, the thumbnail should be changes as in below image. make sure to refresh the browser cache if the change is not appearing.

Now consider overriding the default thumbnail in ‘Edit’ page which is default rendered as below.

Same as in the previous step, now edit the
[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/update_asset.hbs

After changing it should look like below.

{{#with assets}}

    <div class="well asset-well">

        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="pull-left ast-img setbgcolor" title="{{name}}">
                        <span class="ast-type-icon" title="{{this.singularLabel}}">
                            <i class="fw fw-rest-service fw-lg"></i>
                        </span>
                        <!--div class="ast-name-icon">{{this.nameToChar}}</div-->
                        <div class="ast-name-icon">
                            <img alt="thumbnail" class="square-element img-thumbnail" src='{{url ""}}/extensions/assets/restservice/themes/default/imgs/api_thumbnail.png'>
                        </div>
                    </div>
                    <div class="asset-details-right">
                        <h4>{{name}}</h4>
                        {{#if version}}
                            <p>Version : {{version}}</p>
                        {{/if}}
                        {{#if lifecycleState}}
                            <p>{{lifecycle}} : {{lifecycleState}}</p>
                        {{/if}}
                        <div class="well-description">{{tables.0.fields.createdtime.value}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{/with}}


{{> update_form .}}

When you refresh the browser Edit page of the asset will get rendered with below change.

To override the default thumbnail in asset Listing page, you need to edit 

[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/list_assets_table_body.hbs

To override the default thumbnail in asset listing page.

[HOME]/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/list_assets_table_body.hbs

After changing it should look like below.

{{#each .}}

    <div class="ctrl-wr-asset">

        <div class="itm-ast">

            <a id="{{this.id}}" class="ast-img" href='{{url ""}}/assets/{{type}}/details/{{this.id}}' title="{{this.attributes.overview_name}}">

                <div class="ast-img setbgcolor" >

                    <span class="ast-type-icon" title="{{this.singularLabel}}">

                        <i class="fw fw-rest-service fw-lg"></i>

                    </span>

                    <!--div class="ast-name-icon">{{this.nameToChar}}</div-->

                    <div class="ast-name-icon">

                        <img alt="thumbnail" class="square-element img-thumbnail" src='{{url ""}}/extensions/assets/restservice/themes/default/imgs/api_thumbnail.png'>

                    </div>

                </div>

            </a>

            <div class="ast-desc">

                <a href='{{url ""}}/assets/{{type}}/details/{{this.id}}'>

                    <h3 class="ast-name" title="{{this.attributes.overview_name}}">{{this.attributes.overview_name}}</h3>

                </a>

                {{#if this.attributes.overview_version}}

                    <span class="ast-ver">V{{this.attributes.overview_version}} </span>

                {{/if}}

                <span class="ast-published">{{this.attributes.overview_namespace}}</span>

                {{#if this.currentLCStateDurationColour}}

                    <span class="lifecycle-state">

                    <small>

                        <div class="colorbar" Title="Current Lifecycle State Duration: {{this.currentLCStateDuration}}"

                             style="background-color: {{this.currentLCStateDurationColour}}"></div>

                        <i class="icon-circle lc-state-{{this.currentLCStateDuration}}"></i> {{this.lifecycleState}}

                    </small></span>

                {{else}}

                    {{#if this.lifecycleState}}

                        <span class="lifecycle-state"><small><i

                                class="icon-circle lc-state-{{this.lifecycleState}}"></i> {{this.lifecycleState}}

                        </small></span>

                    {{/if}}

                {{/if}}

            </div>

            <br class="c-both" />

        </div><br class="c-both" />

    </div>

{{/each}}

Refreshing restservices 'Listing' page, restservice thumbnails should be changes as below.

To see the same behavior in Store side for restservices,

First copy the desired image to 

[HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/imgs/api_thumbnail.png

Then edit 
[HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/partials/default-thumbnail.hbs
to refer to the custom image. If
[HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/partials/default-thumbnail.hbs 
is not available default in this location, take a copy from 
[HOME]/repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults/themes/store/partials/default-thumbnail.hbs

After edit the file it should look like below.

<div class="ast-img setbgcolor" data-toggle="tooltip" title="{{name}}">
    <span class="ast-type-icon"  title="{{this.singularLabel}}">
      <i class="fw fw-rest-service fw-lg"></i>
      </span>
    <!--div class="ast-name-icon">{{this.nameToChar}}</div-->
    <div class="ast-name-icon">
        <img alt="thumbnail" class="square-element img-thumbnail" src='{{url ""}}/extensions/assets/restservice/themes/store/imgs/api_thumbnail.png'>
    </div>

</div>