[OCI] Add the icon of openpolicyagent artifact

1. add image
2. fix show ui clearly when dark
3. fix chinese words of replication name filter tooltip
Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -161,7 +161,7 @@
                 <clr-dg-cell class="truncated flex-max-width">
                     <div class="cell white-normal">
                         <img class="artifact-icon" [title]="artifact.type"
-                            [src]="artifact.type==='IMAGE'||artifact.type==='CHART'||artifact.type ==='CNAB'?'images/artifact-'+artifact.type.toLowerCase()+'.svg':'images/artifact-default.svg'" />
+                            [src]="artifact.showImage" />
                         &nbsp; &nbsp;
                         <a href="javascript:void(0)" class="max-width-100" (click)="goIntoArtifactSummaryPage(artifact)"
                             title="{{artifact.digest}}">
@@ -178,9 +178,6 @@
                                 {{'REPOSITORY.ARTIFACT_TOOTIP' | translate}}
                             </clr-tooltip-content>
                         </clr-tooltip>
-                        <span href="javascript:void(0)" *ngIf="!artifact.references">
-                            <clr-icon class="icon-folder" shape="file"></clr-icon>
-                        </span>
                     </div>
                 </clr-dg-cell>
                 <clr-dg-cell *ngIf="depth">

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -61,7 +61,7 @@ import {
 } from "../../../../../../lib/entities/shared.const";
 import { operateChanges, OperateInfo, OperationState } from "../../../../../../lib/components/operation/operate";
 import { errorHandler } from "../../../../../../lib/utils/shared/shared.utils";
-import { ArtifactFront as Artifact, mutipleFilter } from "../../../artifact/artifact";
+import { ArtifactFront as Artifact, mutipleFilter, artifactImages, ArtifactFront } from "../../../artifact/artifact";
 import { Project } from "../../../../project";
 import { ArtifactService as NewArtifactService } from "../../../../../../../ng-swagger-gen/services/artifact.service";
 import { ADDITIONS } from "../../../artifact/artifact-additions/models";
@@ -385,6 +385,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             })).subscribe(artifacts => {
               this.artifactList = artifacts;
               this.getArtifactAnnotationsArray(this.artifactList);
+              this.getArtifactIcon(this.artifactList);
             }, error => {
               this.errorHandlerService.error(error);
             });
@@ -414,6 +415,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             }
             this.artifactList = res.body;
             this.getArtifactAnnotationsArray(this.artifactList);
+            this.getArtifactIcon(this.artifactList);
           }, error => {
             // error
             this.errorHandlerService.error(error);
@@ -952,4 +954,13 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   get isFilterReadonly() {
     return this.filterByType === 'label.id' ? 'readonly' : null;
   }
+  getArtifactIcon(artifacts: ArtifactFront[]) {
+    for (const artifact of artifacts) {
+      if (artifactImages.some(image => image === artifact.type)) {
+        artifact.showImage = 'images/artifact-' + artifact.type.toLowerCase() + '.svg';
+      } else {
+        artifact.showImage = 'images/artifact-default.svg';
+      }
+    }
+  }
 }

src/portal/src/app/project/repository/artifact/artifact.ts

@@ -2,6 +2,7 @@ import { Artifact } from "../../../../../ng-swagger-gen/models/artifact";
 
 export interface ArtifactFront extends Artifact {
     annotationsArray?: string[];
+    showImage?: string;
 }
 
 export const mutipleFilter = [
@@ -47,3 +48,6 @@ export const mutipleFilter = [
       listItem: []
     },
   ];
+  export const artifactImages = [
+      'IMAGE', 'CHART', 'CNAB', 'OPENPOLICYAGENT'
+  ];

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -64,7 +64,7 @@
         "TIME_OUT": "网关超时"
     },
     "TOOLTIP": {
-        "NAME_FILTER": "过滤资源的名字。不填或者“”匹配所有资源；“library/”只匹配“library”下的资源。更多的匹配模式请参考用户手册。",
+        "NAME_FILTER": "过滤资源的名字。不填或者填写“**”匹配所有资源；“library/**”只匹配“library”下的资源。更多的匹配模式请参考用户手册。",
         "TAG_FILTER": "过滤资源的tag/version。不填或者“”匹配所有；“1.0*”只匹配以“1.0”开头的tag/version。",
         "LABEL_FILTER": "根据标签筛选资源。",
         "RESOURCE_FILTER": "过滤资源的类型。",

src/portal/src/images/artifact-openpolicyagent.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="92px" height="101px" viewBox="0 0 92 101" enable-background="new 0 0 92 101" xml:space="preserve">  <image id="image0" width="92" height="101" x="0" y="0"
+    href="data:image/png;base64,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
+aW9uADEwMaw6kY0AAAAASUVORK5CYII=" />
+</svg>

src/portal/src/lib/components/config/system/system-settings.component.html

@@ -97,7 +97,7 @@
                             <button id="show-add-modal-button" (click)="showAddModal=!showAddModal"
                                 class="btn btn-link">{{'CVE_WHITELIST.ADD'|translate}}</button>
                         </div>
-                        <div class="add-modal" *ngIf="showAddModal">
+                        <div class="add-modal add-modal-dark" *ngIf="showAddModal">
                             <clr-icon (click)="showAddModal=false" class="float-lg-right margin-top-4"
                                 shape="window-close"></clr-icon>
                             <div>

src/portal/src/lib/components/cron-schedule/cron-tooltip/cron-tooltip.component.html

@@ -1,53 +1,53 @@
-<table class="table table-noborder table-style">
+<table class="table table-noborder table-style table-tag">
-    <caption class="table-title">
+    <caption class="table-title tag-thead">
-      <span>
+      <span class="tag-header-color">
         {{ 'REPLICATION.CRON-TITLE' | translate }}              
       </span>
     </caption>
-    <thead>
+    <thead class="tag-thead">
         <tr>
-            <th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
+            <th class="tag-header-color">{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
-            <th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
+            <th class="tag-header-color">{{ 'REPLICATION.MANDATORY' | translate }}</th>
-            <th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
+            <th class="tag-header-color">{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
-            <th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
+            <th class="tag-header-color">{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
         </tr>
     </thead>
-    <tbody>
+    <tbody class="tag-tbody">
-        <tr>
+        <tr class="tag-tr">
-            <td>{{'REPLICATION.SECONDS' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.SECONDS' | translate}}</td>
-            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.YES' | translate}}</td>
-            <td>0-59</td>
+            <td class="tag-body-color">0-59</td>
-            <td>* / , -</td>
+            <td class="tag-body-color">* / , -</td>
         </tr>
-        <tr>
+        <tr class="tag-tr">
-            <td>{{'REPLICATION.MINUTES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.MINUTES' | translate}}</td>
-            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.YES' | translate}}</td>
-            <td>0-59</td>
+            <td class="tag-body-color">0-59</td>
-            <td>* / , -</td>
+            <td class="tag-body-color">* / , -</td>
         </tr>
-        <tr>
+        <tr class="tag-tr">
-            <td>{{'REPLICATION.HOURS' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.HOURS' | translate}}</td>
-            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.YES' | translate}}</td>
-            <td>0-23</td>
+            <td class="tag-body-color">0-23</td>
-            <td>* / , -</td>
+            <td class="tag-body-color">* / , -</td>
         </tr>
-        <tr>
+        <tr class="tag-tr">
-            <td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.DAY_MONTH' | translate}}</td>
-            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.YES' | translate}}</td>
-            <td>1-31</td>
+            <td class="tag-body-color">1-31</td>
-            <td>* / , - ?</td>
+            <td class="tag-body-color">* / , - ?</td>
         </tr>
-        <tr>
+        <tr class="tag-tr">
-            <td>{{'REPLICATION.MONTH' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.MONTH' | translate}}</td>
-            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.YES' | translate}}</td>
-            <td>1-12 or JAN-DEC</td>
+            <td class="tag-body-color">1-12 or JAN-DEC</td>
-            <td>* / , -</td>
+            <td class="tag-body-color">* / , -</td>
         </tr>
-        <tr>
+        <tr class="tag-tr">
-            <td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.DAY_WEEK' | translate}}</td>
-            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td class="tag-body-color">{{'REPLICATION.YES' | translate}}</td>
-            <td>0-6 or SUN-SAT</td>
+            <td class="tag-body-color">0-6 or SUN-SAT</td>
-            <td>* / , - ?</td>
+            <td class="tag-body-color">* / , - ?</td>
         </tr>
     </tbody>
 </table>

src/portal/src/lib/components/cron-schedule/cron-tooltip/cron-tooltip.component.scss

@@ -6,7 +6,6 @@
     .table-title {
         border-top-left-radius: 0.125rem;
         border-top-right-radius: 0.125rem;
-        background: #000;
         span {
            font-size: 16px;
         }