You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by hs...@apache.org on 2022/07/14 10:20:15 UTC

[incubator-datalab] branch feat/DATALAB-2883/view-additional-info-about-images updated (bed5a6f6f -> 3779cb43e)

This is an automated email from the ASF dual-hosted git repository.

hshpak pushed a change to branch feat/DATALAB-2883/view-additional-info-about-images
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git


    from bed5a6f6f swaped action in action menu
     add b83ee4c3a change the way info about libraries added from images
     add df453e80a Merge pull request #1590 from apache/DATALAB-2872
     add 8d42fff70 renamed shareImageModalComponent
     add 8da6501ee Merge pull request #1591 from apache/feat/DATALAB-2883/view-additional-info-about-images
     add f53b44b6a [DATALAB-2888]: renewed version of jupyterlab
     add 373375255 Merge pull request #1592 from a1expol/develop
     add 7b15ec11a fixed condition for disable recreate btn
     add c86f219c4 Merge pull request #1593 from apache/fix/DATALAB-2842/button-visibility-of-edge-node-recreation
     add feb2575a7 [DATALAB-2890] superset version update changes
     add 4a404e40e [DATALAB-2890] superset version update changes
     add 7378bb2ae Merge pull request #1597 from apache/DATALAB-2890
     add f2114816e [DATALAB-2887] fixed syntax mistake in Dockerfile_jupyterlab
     add 8a7073ac5 Merge pull request #1596 from a1expol/develop
     add 8de8e7aab [DATALAB-2887]: Renewed version of jupyter
     add a8141a4d2 Merge branch 'DATALAB-2887' into DATALAB-2887
     add d4111460d Merge pull request #1594 from OleksandrRepnikov/DATALAB-2887
     add 1e7fb74b4 Merge pull request #1598 from apache/DATALAB-2887
     new c7bdbab65 [DATALAB-2883] finished modal info window about images
     new 3779cb43e Merge branch 'feat/DATALAB-2883/view-additional-info-about-images' of github.com:apache/incubator-datalab into feat/DATALAB-2883/view-additional-info-about-images

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../src/general/conf/datalab.ini                   |   8 +-
 .../src/general/files/aws/jupyter_description.json |   4 +-
 .../general/files/aws/jupyterlab_description.json  |   4 +-
 .../general/files/azure/jupyter_description.json   |   4 +-
 .../files/azure/jupyterlab_description.json        |   4 +-
 .../general/files/gcp/jupyter-gpu_description.json |   2 +-
 .../src/general/files/gcp/jupyter_description.json |   4 +-
 .../general/files/gcp/jupyterlab_description.json  |   4 +-
 .../src/general/lib/os/fab.py                      |  25 ++--
 .../src/general/scripts/os/superset_start.py       |   4 +-
 .../templates/os/debian/superset-notebook.service  |   2 +-
 .../src/jupyterlab/Dockerfile_jupyterlab           |  10 +-
 .../src/superset/templates/docker-compose.yml      | 148 ++++++++++++++++-----
 .../src/superset/templates/docker-init.sh          |  58 ++++++--
 .../templates/keycloak_security_manager.py         |  71 ++++++++++
 .../src/superset/templates/requirements-extra.txt  |   1 +
 .../src/superset/templates/superset_config.py      | 103 ++++++++++----
 .../backendapi/dao/ImageExploratoryDAO.java        |   2 +-
 .../backendapi/dao/ImageExploratoryDAOImpl.java    |  14 +-
 .../backendapi/domain/NotebookTemplate.java        |   6 +-
 .../service/impl/ExploratoryServiceImpl.java       |   6 +-
 .../project-list/project-list.component.html       |   2 +-
 .../webapp/src/app/core/util/checkEndpointList.ts  |   3 +-
 .../src/app/resources/images/images.component.ts   |   2 +-
 24 files changed, 371 insertions(+), 120 deletions(-)
 create mode 100644 infrastructure-provisioning/src/superset/templates/keycloak_security_manager.py


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org


[incubator-datalab] 01/02: [DATALAB-2883] finished modal info window about images

Posted by hs...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hshpak pushed a commit to branch feat/DATALAB-2883/view-additional-info-about-images
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git

commit c7bdbab65a84229d85123abfc907431451b30121
Author: Hennadii_Shpak <bo...@gmail.com>
AuthorDate: Fri Jul 8 13:00:11 2022 +0300

    [DATALAB-2883] finished modal info window about images
    
    [DATALAB-2883] finished modal info window about images
---
 .../pipes/library-name-normalize/index.ts}         | 15 ++--
 .../library-name-normalize.pipe.ts}                | 29 ++++----
 .../pipes/truncate-text-pipe/truncate-text.pipe.ts |  8 +--
 .../webapp/src/app/core/util/sortUtils.ts          |  2 +-
 .../detail-dialog/detail-dialog.component.html     | 68 +++++++++---------
 .../detail-dialog/detail-dialog.component.ts       | 10 +--
 .../image-detail-dialog.component.html             | 83 ++++++++++++++++++++++
 .../image-detail-dialog.component.scss}            | 56 +++++++++++----
 .../image-detail-dialog.component.ts               | 50 +++++++++++++
 .../image-detail-dialog.module.ts}                 | 23 ++++--
 .../library-info-modal.component.html}             | 22 ++----
 .../library-info-modal.component.scss}             | 20 +-----
 .../library-info-modal.component.ts}               | 29 ++++----
 .../library-info-modal.module.ts}                  | 15 ++--
 .../share-image/share-image-dialog.component.html} |  0
 .../share-image/share-image-dialog.component.scss} |  0
 .../share-image/share-image-dialog.component.ts}   | 15 ++--
 .../share-image/share-image-dialog.module.ts}      | 12 ++--
 .../src/app/resources/images/images.component.html | 24 +++----
 .../src/app/resources/images/images.component.ts   | 26 +++----
 .../src/app/resources/images/images.model.ts       | 23 ++++++
 .../webapp/src/app/resources/resources.module.ts   |  8 ++-
 .../src/main/resources/webapp/src/styles.scss      |  9 +++
 23 files changed, 365 insertions(+), 182 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/library-name-normalize/index.ts
similarity index 72%
copy from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
copy to services/self-service/src/main/resources/webapp/src/app/core/pipes/library-name-normalize/index.ts
index c1ad6ee09..48f7e5a22 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/library-name-normalize/index.ts
@@ -19,15 +19,12 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ShareImageModalComponent } from './share-image-modal.component';
-import { NotificationDialogComponent } from '../notification-dialog';
-
-
+import { LibraryNameNormalizePipe } from './library-name-normalize.pipe';
 
 @NgModule({
-  declarations: [ ShareImageModalComponent ],
-  imports: [ CommonModule ],
-  entryComponents: [ShareImageModalComponent],
-  exports: [ ShareImageModalComponent ]
+  imports: [CommonModule],
+  declarations: [LibraryNameNormalizePipe],
+  exports: [LibraryNameNormalizePipe]
 })
-export class ShareImageModule { }
+
+export class LibraryNameNormalizePipeModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/library-name-normalize/library-name-normalize.pipe.ts
similarity index 66%
copy from services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
copy to services/self-service/src/main/resources/webapp/src/app/core/pipes/library-name-normalize/library-name-normalize.pipe.ts
index f497deecc..3782c3a8e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/library-name-normalize/library-name-normalize.pipe.ts
@@ -17,20 +17,23 @@
  * under the License.
  */
 
-import { Pipe, PipeTransform } from "@angular/core";
+import {Pipe, PipeTransform} from '@angular/core';
 
-const MAX_SYMBOLS_COUNT = 255;
+const  libNameList = {
+  os_pkg: 'Apt/Yum',
+  pip3: 'Python 3',
+  r_pkg: 'R packages',
+  java: 'Java',
+  others: 'Others'
+};
 
-@Pipe({
-    name: 'truncateTextPipe'
-})
-export class TruncateTextPipe implements PipeTransform {
-    transform(text: string, limit: number = MAX_SYMBOLS_COUNT): string {
-        if (!text) {
-            return ''
-        }
-        return text.length > limit 
-            ? `${text.substring(0, limit)}...`
-            : text
+@Pipe({name: 'libNameNormalize'})
+
+export class LibraryNameNormalizePipe implements PipeTransform {
+  transform(libGroupName: string): string {
+    if (!libGroupName) {
+      return '';
     }
+    return libNameList[libGroupName];
+  }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
index f497deecc..28ddf9e3d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Pipe, PipeTransform } from "@angular/core";
+import { Pipe, PipeTransform } from '@angular/core';
 
 const MAX_SYMBOLS_COUNT = 255;
 
@@ -27,10 +27,10 @@ const MAX_SYMBOLS_COUNT = 255;
 export class TruncateTextPipe implements PipeTransform {
     transform(text: string, limit: number = MAX_SYMBOLS_COUNT): string {
         if (!text) {
-            return ''
+            return '';
         }
-        return text.length > limit 
+        return text.length > limit
             ? `${text.substring(0, limit)}...`
-            : text
+            : text;
     }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts
index fa220dacf..9e06ec163 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/sortUtils.ts
@@ -56,7 +56,7 @@ export class SortUtils {
   }
 
   public static flatDeep(arr, d = 1) {
-    return d > 0 
+    return d > 0
       ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? this.flatDeep(val, d - 1) : val), [])
       : arr.slice();
   }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
index 3397676b2..80c11d635 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html
@@ -68,15 +68,15 @@
           <!--              </a>-->
           <!--            </p> -->
             <ng-container *ngFor="let item of notebook.exploratory_urls">
-              <span 
-                class="d-none" 
-                *ngIf="item.description.toLowerCase() === 'ungit' 
+              <span
+                class="d-none"
+                *ngIf="item.description.toLowerCase() === 'ungit'
                   && notebook.exploratory_urls[0].description.toLowerCase().indexOf('zeppelin') !== -1; else ungit"
               ></span>
               <ng-template #ungit>
                 <p (mouseleave)="hideCopyIcon()">
                   <span class="description">{{item.description}}: &nbsp;</span>
-                  <a 
+                  <a
                     (mouseover)="showCopyIcon(item.description)"
                     (click)="logAction(notebook.name, item.description)"
                     class="ellipsis none-select resources-url" matTooltip="{{item.url}}"
@@ -87,11 +87,11 @@
                   >
                     &nbsp;{{item.url | truncateTextPipe: urlMaxLength}}
                   </a>
-                  <span 
-                    (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()" 
-                    *ngIf="isCopyIconVissible[item.description]" 
-                    [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'" 
-                    matTooltipPosition="above" 
+                  <span
+                    (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()"
+                    *ngIf="isCopyIconVissible[item.description]"
+                    [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'"
+                    matTooltipPosition="above"
                     class="copy-icon-wrapper"
                   >
                     <span  class="link-icon" (click)="copyLink(item.url)" >
@@ -105,22 +105,22 @@
         </div>
         <div class="scroll-box" id="scrolling" *ngIf="data.type === 'resource'">
           <div class="detail-info" *ngIf="!notebook.error_message">
-            <p>Edge Node IP Address {{notebook.node_ip}}</p>
+            <p>Edge Node IP Address {{notebook.node_ip}}  </p>
             <p *ngIf="notebook.status === 'running'">Up time {{upTimeInHours}} hour(s) since
               {{notebook.time ? (notebook.time | longDate) : "not specified."}}
             </p>
             <p *ngIf="notebook.url?.length">Open following URL(s) in your browser to access this box:</p>
             <div class="links_block">
               <ng-container *ngFor="let item of notebook.url">
-                <span 
-                  class="d-none" 
-                  *ngIf="item.description.toLowerCase() === 'ungit' 
+                <span
+                  class="d-none"
+                  *ngIf="item.description.toLowerCase() === 'ungit'
                     && notebook.template_name.toLowerCase().indexOf('zeppelin ') !== -1; else ungit"
                 ></span>
                 <ng-template #ungit>
                   <p (mouseleave)="hideCopyIcon()">
                     <span class="description">{{item.description}}: &nbsp;</span>
-                    <a 
+                    <a
                       (mouseover)="showCopyIcon(item.description)"
                       (click)="logAction(notebook.name, item.description)"
                       class="ellipsis none-select resources-url" matTooltip="{{item.url}}"
@@ -131,11 +131,11 @@
                     >
                       &nbsp;{{item.url | truncateTextPipe: urlMaxLength}}
                     </a>
-                    <span 
-                      (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()" 
-                      *ngIf="isCopyIconVissible[item.description]" 
-                      [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'" 
-                      matTooltipPosition="above" 
+                    <span
+                      (click)="logAction(notebook.name, item.description, 'Copy');$event.stopPropagation()"
+                      *ngIf="isCopyIconVissible[item.description]"
+                      [matTooltip]="isCopied ? 'Copy ' + item.description + ' url': 'Copied'"
+                      matTooltipPosition="above"
                       class="copy-icon-wrapper"
                     >
                       <span  class="link-icon" (click)="copyLink(item.url)" >
@@ -199,7 +199,7 @@
               <!--                 [ngClass]="{'not-allow': !this.bucketStatus['view'] || !thisdata.buckets.length}"-->
               <!--                (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus['view'] && thisdata.buckets.length)"-->
               <!--              >-->
-              <span 
+              <span
                 class="description open-bucket"
                 [matTooltip]="!this.bucketStatus['view']
                   ? 'You have not permission to open bucket'
@@ -209,8 +209,8 @@
                 [matTooltipClass]="'full-size-tooltip'"
                 [ngClass]="{'not-allow': !this.bucketStatus['view'] || !this.data.buckets.length}"
                 (click)="bucketBrowser(
-                  notebook.cloud_provider !== 'azure' ? notebook.bucket_name : notebook.account_name + '.' + notebook.bucket_name, 
-                  notebook.endpoint, 
+                  notebook.cloud_provider !== 'azure' ? notebook.bucket_name : notebook.account_name + '.' + notebook.bucket_name,
+                  notebook.endpoint,
                   this.bucketStatus['view'] && this.data.buckets.length
                 )"
               >
@@ -265,10 +265,10 @@
                           </p> -->
           </div>
 
-          <div 
-            class="checkbox-group" 
+          <div
+            class="checkbox-group"
             *ngIf="notebook.image !== 'docker.datalab-zeppelin'; else not_support"
-            [hidden]="notebook.status !== 'running' || notebook.image === 'docker.datalab-superset' 
+            [hidden]="notebook.status !== 'running' || notebook.image === 'docker.datalab-superset'
               || notebook.image === 'docker.datalab-jupyterlab'"
           >
             <label>
@@ -277,15 +277,15 @@
             <div class="checkbox-group">
               <form [formGroup]="configurationForm" novalidate>
                 <div class="config-details" *ngIf="configuration?.nativeElement['checked'] || false">
-                  <textarea 
-                    formControlName="configuration_parameters" 
+                  <textarea
+                    formControlName="configuration_parameters"
                     id="config"
-                    placeholder="Cluster configuration template, JSON" 
+                    placeholder="Cluster configuration template, JSON"
                     data-gramm_editor="false"
                   ></textarea>
-                  <span 
+                  <span
                     class="danger_color"
-                    *ngIf="!configurationForm.controls.configuration_parameters.valid 
+                    *ngIf="!configurationForm.controls.configuration_parameters.valid
                       && configurationForm.controls['configuration_parameters'].dirty"
                   >
                     Configuration parameters is not in a valid format
@@ -320,10 +320,10 @@
             <div *ngFor="let url of odahu.url" class="odahu-links">
               <div class="odahu-link">
                 <span class="description">{{url.description }}: &nbsp;</span>
-                <a 
-                  class="ellipsis" 
-                  matTooltip="{{ url.url}}" 
-                  matTooltipPosition="above" 
+                <a
+                  class="ellipsis"
+                  matTooltip="{{ url.url}}"
+                  matTooltipPosition="above"
                   href="{{ url.url}}"
                   target="_blank"
                 >
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
index 15845a6b2..c855f765a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts
@@ -151,10 +151,10 @@ export class DetailDialogComponent implements OnInit {
     bucketName = this.isBucketAllowed ? bucketName : this.data.buckets[0].children[0].name;
     // bucketName = 'ofuks-1304-pr2-local-bucket';
     this.dialog.open(BucketBrowserComponent, { data:
-      { 
-        bucket: bucketName, 
-        endpoint: endpoint, 
-        bucketStatus: this.bucketStatus, 
+      {
+        bucket: bucketName,
+        endpoint: endpoint,
+        bucketStatus: this.bucketStatus,
         buckets: this.data.buckets
       },
       panelClass: 'modal-fullscreen' }
@@ -164,7 +164,7 @@ export class DetailDialogComponent implements OnInit {
   public showCopyIcon(element) {
     this.isCopyIconVissible[element] = true;
   }
-  
+
   public hideCopyIcon() {
     for (const key in this.isCopyIconVissible) {
       this.isCopyIconVissible[key] = false;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.html
new file mode 100644
index 000000000..70262a064
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.html
@@ -0,0 +1,83 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one
+  ~ or more contributor license agreements.  See the NOTICE file
+  ~ distributed with this work for additional information
+  ~ regarding copyright ownership.  The ASF licenses this file
+  ~ to you under the Apache License, Version 2.0 (the
+  ~ "License"); you may not use this file except in compliance
+  ~ with the License.  You may obtain a copy of the License at
+  ~
+  ~   http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing,
+  ~ software distributed under the License is distributed on an
+  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  ~ KIND, either express or implied.  See the License for the
+  ~ specific language governing permissions and limitations
+  ~ under the License.
+  -->
+
+<div class="detail-dialog" id="dialog-box">
+  <header class="dialog-header header-white">
+    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
+  </header>
+
+  <div>
+    <table class="detail-header">
+      <tr>
+        <td>{{ data.image.name }}</td>
+        <td>{{ data.image.project }}</td>
+        <td>{{ data.image.instanceName }}</td>
+        <td>
+            <span class="status" [ngClass]="data.image.status.toLowerCase()">
+              {{ data.image.status | titlecase }}
+            </span>
+        </td>
+      </tr>
+    </table>
+
+    <div class="content-box">
+      <div *ngIf="data.image.description" class="image__description--wrapper">
+        <p
+          [matTooltip]="data.image.description"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="data.image.description.length < maxDescriptionLength"
+          class="image__description">
+          {{ data.image.description | truncateTextPipe : maxDescriptionLength}}
+        </p>
+      </div>
+
+      <div class="image__template--wrapper">
+        <span class="modal-row__item modal-row__item--title">Template name</span>
+        <span class="modal-row__item">{{ data.image.application }}</span>
+      </div>
+
+      <div class="image__libraries--wrapper">
+        <span class="modal-row__item modal-row__item--title">Installed libraries` groups</span>
+        <div class="language__wrapper modal-row__item">
+          <div *ngIf="data.image.libraries.length; else notAvailable">
+            <div *ngFor="let library of data.image.libraries" class="library__wrapper">
+              <span>{{library.group | libNameNormalize}}</span>
+              <i (click)="onLibraryInfo(library)" class="material-icons library__info">info</i>
+            </div>
+          </div>
+          <ng-template #notAvailable>
+            <span class="no-libraries">No additional libraries installed</span>
+          </ng-template>
+        </div>
+      </div>
+      <div class="image__provider--wrapper">
+        <span class="modal-row__item modal-row__item--title">Provider</span>
+        <span class="modal-row__item">{{ data.image.cloudProvider }}</span>
+      </div>
+      <div class="image__creation-date--wrapper">
+        <span class="modal-row__item modal-row__item--title">Creation date</span>
+        <span class="modal-row__item">{{data.image.timestamp | localDate : 'short'}} </span>
+      </div>
+      <div class="image__creator--wrapper">
+        <span class="modal-row__item modal-row__item--title">Creator</span>
+        <span class="modal-row__item">{{ data.image.user }}</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.scss
similarity index 59%
copy from services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.scss
index f497deecc..c73b2d111 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.scss
@@ -17,20 +17,46 @@
  * under the License.
  */
 
-import { Pipe, PipeTransform } from "@angular/core";
-
-const MAX_SYMBOLS_COUNT = 255;
-
-@Pipe({
-    name: 'truncateTextPipe'
-})
-export class TruncateTextPipe implements PipeTransform {
-    transform(text: string, limit: number = MAX_SYMBOLS_COUNT): string {
-        if (!text) {
-            return ''
-        }
-        return text.length > limit 
-            ? `${text.substring(0, limit)}...`
-            : text
+.image__description {
+  font-size: 12px;
+  text-align: justify;
+}
+
+.content-box > div {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+.content-box > div {
+  &:not(:last-child) {
+    border-bottom: 1px solid #edf1f5;
+  }
+}
+
+.modal-row__item {
+  width: 50%;
+
+  &--title {
+    font-weight: 500;
+  }
+}
+
+.library {
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+      margin-bottom: 10px;
     }
+  }
+
+  &__info {
+    cursor: pointer;
+  }
+}
+
+.no-libraries {
+  color: rgba(113, 138, 165, 0.5);
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.ts
new file mode 100644
index 000000000..2659ee7d0
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.component.ts
@@ -0,0 +1,50 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, Inject, OnInit } from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {Library, ModalData} from '../../images';
+import {LibraryInfoModalComponent} from '../library-info-modal/library-info-modal.component';
+
+@Component({
+  selector: 'datalab-image-detail-dialog',
+  templateUrl: './image-detail-dialog.component.html',
+  styleUrls: [
+    './image-detail-dialog.component.scss',
+    '../detail-dialog/detail-dialog.component.scss'
+  ]
+})
+
+export class ImageDetailDialogComponent {
+  maxDescriptionLength: number = 170;
+  constructor(
+    public dialogRef: MatDialogRef<ImageDetailDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ModalData,
+    private dialog: MatDialog,
+  ) { }
+
+  onLibraryInfo(library: Library): void {
+    this.dialog.open(LibraryInfoModalComponent, {
+      data: {
+        library
+      },
+      panelClass: 'library-dialog-container'
+    });
+  }
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.module.ts
similarity index 55%
copy from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.module.ts
index c1ad6ee09..44a9cbc6c 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-detail-dialog/image-detail-dialog.module.ts
@@ -19,15 +19,24 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ShareImageModalComponent } from './share-image-modal.component';
-import { NotificationDialogComponent } from '../notification-dialog';
+import { ImageDetailDialogComponent } from './image-detail-dialog.component';
+import { TruncateTextPipeModule } from '../../../core/pipes/truncate-text-pipe';
+import {LocalDatePipeModule} from '../../../core/pipes/local-date-pipe';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {LibraryNameNormalizePipeModule} from '../../../core/pipes/library-name-normalize';
 
 
 
 @NgModule({
-  declarations: [ ShareImageModalComponent ],
-  imports: [ CommonModule ],
-  entryComponents: [ShareImageModalComponent],
-  exports: [ ShareImageModalComponent ]
+  declarations: [ ImageDetailDialogComponent ],
+    imports: [
+        CommonModule,
+        TruncateTextPipeModule,
+        LocalDatePipeModule,
+        MatTooltipModule,
+        LibraryNameNormalizePipeModule
+    ],
+  exports: [ ImageDetailDialogComponent ],
+  entryComponents: [ ImageDetailDialogComponent ]
 })
-export class ShareImageModule { }
+export class ImageDetailDialogModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.html
similarity index 61%
copy from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.html
copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.html
index a6f1d1e2a..df0e9e5c1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.html
@@ -17,23 +17,15 @@
   ~ under the License.
   -->
 
-<div id="dialog-box">
+<div class="detail-dialog" id="dialog-box">
   <header class="dialog-header">
-    <h4 class="modal-title">Share Image: <span>{{imageName}}</span></h4>
+    <h1 class="modal__title">Installed libraries</h1>
     <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
   </header>
-  <section class="content">
-    <p class="description">
-      The image will be shared with all current Regular Users on the project with all the data and code.
-    </p>
-    <p class="question center">
-      Do you want proceed?
-    </p>
-    <div class="text-center m-top-30 m-bott-10">
-      <button type="button" class="butt mat-raised-button" (click)="dialogRef.close()">No</button>
-      <button type="button" class="butt butt-success mat-raised-button"
-              (click)="onShare()">Yes
-      </button>
+
+  <div class="content-box">
+    <div class="library__wrapper" *ngFor="let library of data.library.add_pkgs">
+      <span>{{library}}</span>
     </div>
-  </section>
+  </div>
 </div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.scss
similarity index 65%
copy from services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.scss
index f497deecc..e7e365b0f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.scss
@@ -1,4 +1,4 @@
-/*
+/*!
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -17,20 +17,6 @@
  * under the License.
  */
 
-import { Pipe, PipeTransform } from "@angular/core";
-
-const MAX_SYMBOLS_COUNT = 255;
-
-@Pipe({
-    name: 'truncateTextPipe'
-})
-export class TruncateTextPipe implements PipeTransform {
-    transform(text: string, limit: number = MAX_SYMBOLS_COUNT): string {
-        if (!text) {
-            return ''
-        }
-        return text.length > limit 
-            ? `${text.substring(0, limit)}...`
-            : text
-    }
+.modal__title {
+  font-size: 12px;
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.ts
similarity index 60%
copy from services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.ts
index f497deecc..e6c8d2c1e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/truncate-text-pipe/truncate-text.pipe.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.component.ts
@@ -17,20 +17,21 @@
  * under the License.
  */
 
-import { Pipe, PipeTransform } from "@angular/core";
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
-const MAX_SYMBOLS_COUNT = 255;
-
-@Pipe({
-    name: 'truncateTextPipe'
+@Component({
+  selector: 'datalab-library-info-modal',
+  templateUrl: './library-info-modal.component.html',
+  styleUrls: [
+    './library-info-modal.component.scss',
+    '../detail-dialog/detail-dialog.component.scss'
+  ]
 })
-export class TruncateTextPipe implements PipeTransform {
-    transform(text: string, limit: number = MAX_SYMBOLS_COUNT): string {
-        if (!text) {
-            return ''
-        }
-        return text.length > limit 
-            ? `${text.substring(0, limit)}...`
-            : text
-    }
+export class LibraryInfoModalComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<LibraryInfoModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) { }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.module.ts
similarity index 73%
copy from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.module.ts
index c1ad6ee09..80cd1f853 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/library-info-modal/library-info-modal.module.ts
@@ -19,15 +19,16 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ShareImageModalComponent } from './share-image-modal.component';
-import { NotificationDialogComponent } from '../notification-dialog';
+import {LibraryInfoModalComponent} from './library-info-modal.component';
 
 
 
 @NgModule({
-  declarations: [ ShareImageModalComponent ],
-  imports: [ CommonModule ],
-  entryComponents: [ShareImageModalComponent],
-  exports: [ ShareImageModalComponent ]
+  declarations: [LibraryInfoModalComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [LibraryInfoModalComponent],
+  entryComponents: [LibraryInfoModalComponent]
 })
-export class ShareImageModule { }
+export class LibraryInfoModalModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.html
similarity index 100%
rename from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.html
rename to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.html
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.scss
similarity index 100%
rename from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.scss
rename to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.scss
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.ts
similarity index 77%
rename from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.ts
rename to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.ts
index 64cebf43f..25bd72c62 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image-modal.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.component.ts
@@ -19,23 +19,22 @@
 
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ImagesService } from '../../../resources/images/images.service';
+import { ImagesService } from '../../images/images.service';
 import { UserImagesPageService } from '../../../core/services';
-import { Toaster_Message } from '../../../resources/images';
+import { ModalData, Toaster_Message } from '../../images';
 import { ToastrService } from 'ngx-toastr';
-import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'datalab-share-image',
-  templateUrl: './share-image-modal.component.html',
-  styleUrls: ['./share-image-modal.component.scss']
+  templateUrl: './share-image-dialog.component.html',
+  styleUrls: ['./share-image-dialog.component.scss']
 })
-export class ShareImageModalComponent {
+export class ShareImageDialogComponent {
   imageName!: string;
 
   constructor(
-    public dialogRef: MatDialogRef<ShareImageModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialogRef: MatDialogRef<ShareImageDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ModalData,
     private imagesService: ImagesService,
     private userImagesPageService: UserImagesPageService,
     private toastr: ToastrService,
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.module.ts
similarity index 73%
rename from services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
rename to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.module.ts
index c1ad6ee09..158aa0d09 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/share-image/share-image.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/share-image/share-image-dialog.module.ts
@@ -19,15 +19,15 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ShareImageModalComponent } from './share-image-modal.component';
-import { NotificationDialogComponent } from '../notification-dialog';
+import { ShareImageDialogComponent } from './share-image-dialog.component';
+import { NotificationDialogComponent } from '../../../shared/modal-dialog/notification-dialog';
 
 
 
 @NgModule({
-  declarations: [ ShareImageModalComponent ],
+  declarations: [ ShareImageDialogComponent ],
   imports: [ CommonModule ],
-  entryComponents: [ShareImageModalComponent],
-  exports: [ ShareImageModalComponent ]
+  entryComponents: [ShareImageDialogComponent],
+  exports: [ ShareImageDialogComponent ]
 })
-export class ShareImageModule { }
+export class ShareImageDialogModule { }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html
index 9f85994d0..2340e9765 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html
@@ -227,22 +227,13 @@
       <td mat-cell *matCellDef="let element" class="settings actions-col">
 
         <div class="button--wrapper">
-          <span class="currency_details" >
-                <i class="material-icons">help_outline</i>
-              </span>
+          <span class="currency_details" (click)="onImageInfo(element)">
+            <i class="material-icons">help_outline</i>
+          </span>
           <span #settings class="actions" (click)="actions.toggle($event, settings)"></span>
         </div>
         <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
           <ul class="list-unstyled">
-            <li
-              matTooltip="Unable to terminate notebook because at least one compute is in progress"
-              matTooltipPosition="above"
-            >
-              <button class="action-button__share">
-                <i class="material-icons">phonelink_off</i>
-                <span>Terminate</span>
-              </button>
-            </li>
             <li [matTooltip]="element.status !== 'CREATED' && 'The image cannot be shared because it is not in the &quot;Created&quot; status'
                   || userName !== element.user && 'Images may be shared by creators only'"
                 matTooltipPosition="above"
@@ -257,6 +248,15 @@
                 <span>Share</span>
               </button>
             </li>
+            <li
+              matTooltip="Unable to terminate notebook because at least one compute is in progress"
+              matTooltipPosition="above"
+            >
+              <button class="action-button__share">
+                <i class="material-icons">phonelink_off</i>
+                <span>Terminate</span>
+              </button>
+            </li>
           </ul>
         </bubble-up>
       </td>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts
index e24612800..47fb5b64e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts
@@ -23,13 +23,14 @@ import { ToastrService } from 'ngx-toastr';
 
 import { GeneralEnvironmentStatus } from '../../administration/management/management.model';
 import { HealthStatusService, UserImagesPageService } from '../../core/services';
-import { ImageModel, ProjectModel, ShareImageAllUsersParams } from './images.model';
+import { ImageModel, ProjectModel } from './images.model';
 import { Image_Table_Column_Headers, Image_Table_Titles, Localstorage_Key, Shared_Status, Toaster_Message } from './images.config';
 import { MatDialog } from '@angular/material/dialog';
-import { ShareImageModalComponent } from '../../shared/modal-dialog/share-image/share-image-modal.component';
+import { ShareImageDialogComponent } from '../exploratory/share-image/share-image-dialog.component';
 import { Observable } from 'rxjs';
 import { ImagesService } from './images.service';
 import { ProgressBarService } from '../../core/services/progress-bar.service';
+import { ImageDetailDialogComponent } from '../exploratory/image-detail-dialog/image-detail-dialog.component';
 
 @Component({
   selector: 'datalab-images',
@@ -105,8 +106,17 @@ export class ImagesComponent implements OnInit {
     this.activeProjectName = '';
   }
 
+  onImageInfo(image: ImageModel): void {
+    this.dialog.open(ImageDetailDialogComponent, {
+      data: {
+        image
+      },
+      panelClass: 'modal-md'
+    });
+  }
+
   onShare(image: ImageModel): void {
-    this.dialog.open(ShareImageModalComponent, {
+    this.dialog.open(ShareImageDialogComponent, {
       data: {
         image
       },
@@ -159,16 +169,6 @@ export class ImagesComponent implements OnInit {
     this.userName = localStorage.getItem(Localstorage_Key.userName);
   }
 
-  private shareImageAllUsers(image: ImageModel): Observable<ProjectModel[]> {
-    const shareParams: ShareImageAllUsersParams = {
-      imageName: image.name,
-      projectName: image.project,
-      endpoint: image.endpoint
-    };
-
-    return this.userImagesPageService.shareImageAllUsers(shareParams);
-  }
-
   get isProjectsMoreThanOne(): boolean {
     return this.projectList.length > 1;
   }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts
index 8c0735950..24ce705bc 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts
@@ -17,6 +17,9 @@ export interface ImageModel {
   status: 'created' | 'creating' | 'terminated' | 'terminating' | 'failed';
   user: string;
   isSelected?: boolean;
+  libraries: Library[];
+  computationalLibraries: Library[];
+  clusterConfig: ClusterConfig;
 }
 
 export interface ShareImageAllUsersParams {
@@ -24,3 +27,23 @@ export interface ShareImageAllUsersParams {
   projectName: string;
   endpoint: string;
 }
+
+export interface ModalData {
+  image: ImageModel;
+}
+
+export interface Library {
+  add_pkgs: string[];
+  available_versions: string[];
+  error_message: string;
+  group: string;
+  name: string;
+  status: string;
+  version: string;
+}
+
+export interface ClusterConfig {
+  Classification: string;
+  Properties: Record<string, any>;
+  Configurations: any[];
+}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
index 885328fc2..931e037d6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
@@ -36,7 +36,9 @@ import {CheckboxModule} from '../shared/checkbox';
 import {BubbleModule} from '../shared';
 import { CapitalizeFirstLetterPipeModule } from '../core/pipes';
 import { LocalDatePipeModule } from '../core/pipes/local-date-pipe';
-import { ShareImageModule } from '../shared/modal-dialog/share-image/share-image.module';
+import { ShareImageDialogModule } from './exploratory/share-image/share-image-dialog.module';
+import { ImageDetailDialogModule } from './exploratory/image-detail-dialog/image-detail-dialog.module';
+import {LibraryInfoModalModule} from './exploratory/library-info-modal/library-info-modal.module';
 
 @NgModule({
   imports: [
@@ -53,7 +55,9 @@ import { ShareImageModule } from '../shared/modal-dialog/share-image/share-image
     BubbleModule,
     CapitalizeFirstLetterPipeModule,
     LocalDatePipeModule,
-    ShareImageModule
+    ShareImageDialogModule,
+    ImageDetailDialogModule,
+    LibraryInfoModalModule,
   ],
   declarations: [
     ResourcesComponent,
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index 5bc005390..cd4e9d727 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -572,3 +572,12 @@ ace_scrollbar {
 .timezone-mat-select {
   max-width: 350px !important;
 }
+
+.library-dialog-container .mat-dialog-container {
+  width: 300px;
+  max-height: 210px;
+}
+
+.library-dialog-container ::-webkit-scrollbar {
+  width: 3px !important;
+}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org


[incubator-datalab] 02/02: Merge branch 'feat/DATALAB-2883/view-additional-info-about-images' of github.com:apache/incubator-datalab into feat/DATALAB-2883/view-additional-info-about-images

Posted by hs...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hshpak pushed a commit to branch feat/DATALAB-2883/view-additional-info-about-images
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git

commit 3779cb43ec26465563b56f54f9e9f784c4e78585
Merge: c7bdbab65 bed5a6f6f
Author: Hennadii_Shpak <bo...@gmail.com>
AuthorDate: Thu Jul 14 13:19:34 2022 +0300

    Merge branch 'feat/DATALAB-2883/view-additional-info-about-images' of github.com:apache/incubator-datalab into feat/DATALAB-2883/view-additional-info-about-images



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org