Merge pull request #2925 from pengpengshui/master

fix bugs
2024-06-30 16:55:07 +02:00 · 2017-08-01 13:12:24 +08:00 · 2017-08-01 13:12:24 +08:00 · 373acba9fa
commit 373acba9fa
parent aabfc9de6b 87b0f3460e
9 changed files with 62 additions and 24 deletions
--- a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.template.ts
+++ b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.template.ts
@ -6,9 +6,7 @@ export const JOB_LOG_VIEWER_TEMPLATE: string = `
        <span class="spinner spinner-md"></span>
      </div>
      <pre [hidden]="onGoing">
-        <code>
-          {{log}}
-        </code>
+<code>{{log}}</code>
      </pre>
    </div>
    <div class="modal-footer">
--- a/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts
+++ b/src/ui_ng/lib/src/job-log-viewer/job-log-viewer.component.ts
@ -11,7 +11,7 @@
 // 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, Input } from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';

 import { JOB_LOG_VIEWER_TEMPLATE, JOB_LOG_VIEWER_STYLES } from './job-log-viewer.component.template';
 import { JobLogService } from '../service/index';
@ -23,7 +23,8 @@ const supportSet: string[] = ["replication", "scan"];
@Component({
    selector: 'job-log-viewer',
    template: JOB_LOG_VIEWER_TEMPLATE,
-    styles: [JOB_LOG_VIEWER_STYLES]
+    styles: [JOB_LOG_VIEWER_STYLES],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })

 export class JobLogViewerComponent {
@ -53,7 +54,8 @@ export class JobLogViewerComponent {

    constructor(
        private jobLogService: JobLogService,
-        private errorHandler: ErrorHandler
+        private errorHandler: ErrorHandler,
+        private ref: ChangeDetectorRef
    ) { }

    open(jobId: number | string): void {
@ -78,5 +80,8 @@ export class JobLogViewerComponent {
                this.onGoing = false;
                this.errorHandler.error(error);
            });
+
+        let hnd = setInterval(()=>this.ref.markForCheck(), 100);
+        setTimeout(()=>clearInterval(hnd), 2000);
    }
 }
--- a/src/ui_ng/lib/src/tag/tag-detail.component.css.ts
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.css.ts
@ -106,4 +106,10 @@ export const TAG_DETAIL_STYLES: string = `
    margin-left: 6px;
    font-weight: 500;
 }
+.tip-icon-medium {
+    color: orange;
+}
+.tip-icon-low{
+    color:yellow;
+}
 `;
--- a/src/ui_ng/lib/src/tag/tag-detail.component.html.ts
+++ b/src/ui_ng/lib/src/tag/tag-detail.component.html.ts
@ -44,7 +44,7 @@ export const TAG_DETAIL_HTML: string = `
                            <clr-icon shape="error" size="24" class="is-error"></clr-icon>
                        </div>
                        <div class="second-row">
-                            <clr-icon shape="exclamation-triangle" size="24" class="is-warning"></clr-icon>
+                            <clr-icon shape="exclamation-triangle" size="24" class="tip-icon-medium"></clr-icon>
                        </div>
                    </div>
                    <div class="second-column">
@ -53,10 +53,10 @@ export const TAG_DETAIL_HTML: string = `
                    </div>
                    <div class="third-column">
                        <div>
-                            <clr-icon shape="play" size="20" class="is-warning rotate-90"></clr-icon>
+                            <clr-icon shape="play" size="20" class="tip-icon-low rotate-90"></clr-icon>
                        </div>
                        <div class="second-row">
-                            <clr-icon shape="help" size="20"></clr-icon>
+                            <clr-icon shape="help" size="18" style="margin-left: 2px;"></clr-icon>
                        </div>
                    </div>
                    <div class="fourth-column">
--- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts
+++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts
@ -43,13 +43,13 @@ export const SCANNING_STYLES: string = `
    margin-left: -4px;
 }
 .bar-block-high {
-    background-color: red;
+    background-color: #e62700;
 }
 .bar-block-medium {
-    background-color: yellow;
+    background-color: orange;
 }
 .bar-block-low {
-    background-color: orange;
+    background-color: yellow;
 }
 .bar-block-none {
    background-color: green;
@ -84,7 +84,24 @@ export const SCANNING_STYLES: string = `
 .refresh-btn:hover {
    color: #007CBB;
 }
-.tip-icon-low {
+
+.label.label-medium{
+      background-color: #ffe4a9;
+    border: 1px solid orange;
    color: orange;
 }
+.tip-icon-medium {
+    color: orange;
+}
+.label.label-low{
+    background: rgba(251, 255, 0, 0.38);
+    color: #c5c50b;
+    border: 1px solid #e6e63f;
+}
+.tip-icon-low {
+    color: yellow;
+}
+.font-color-green{
+    color:green;
+}
 `; 
--- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts
+++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts
@ -16,15 +16,15 @@ export const TIP_COMPONENT_HTML: string = `
                    <span>{{highCount}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }}</span>
                </div>
                <div *ngIf="hasMedium" class="bar-summary-item">
-                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="is-warning" size="22"></clr-icon>
+                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="tip-icon-medium" size="22"></clr-icon>
                    <span>{{mediumCount}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }}</span>
                </div>
                <div *ngIf="hasLow" class="bar-summary-item">
-                    <clr-icon shape="info-circle" class="tip-icon-low" size="24"></clr-icon>
+                    <clr-icon shape="play" class="tip-icon-low rotate-90" size="20"></clr-icon>
                    <span>{{lowCount}} {{'VULNERABILITY.SEVERITY.LOW' | translate }}</span>
                </div>
                <div *ngIf="hasUnknown" class="bar-summary-item">
-                    <clr-icon shape="help" size="20"></clr-icon>
+                    <clr-icon shape="help" size="18" style="margin-left: 3px;"></clr-icon>
                    <span>{{unknownCount}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}</span>
                </div>
                <div *ngIf="hasNone" class="bar-summary-item">
@ -64,14 +64,19 @@ export const GRID_COMPONENT_HTML: string = `
            <clr-dg-cell>{{res.id}}</clr-dg-cell>
            <clr-dg-cell [ngSwitch]="res.severity">
              <span *ngSwitchCase="5" class="label label-danger">{{severityText(res.severity) | translate}}</span>
-              <span *ngSwitchCase="4" class="label label-warning">{{severityText(res.severity) | translate}}</span>
-              <span *ngSwitchCase="3" class="label label-success">{{severityText(res.severity) | translate}}</span>
-              <span *ngSwitchCase="1" class="label label-info">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="4" class="label label-medium">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="3" class="label label-low">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="1" class="label">{{severityText(res.severity) | translate}}</span>
              <span *ngSwitchDefault>{{severityText(res.severity) | translate}}</span>
            </clr-dg-cell>
            <clr-dg-cell>{{res.package}}</clr-dg-cell>
            <clr-dg-cell>{{res.version}}</clr-dg-cell>
-            <clr-dg-cell>{{res.fixedVersion}}</clr-dg-cell>
+            <clr-dg-cell>
+                 <div *ngIf="res.fixedVersion; else elseBlock">
+                    <clr-icon shape="wrench" class="is-success" size="20"></clr-icon>&nbsp;<span class="font-color-green">{{res.fixedVersion}}</span>
+                 </div>
+                <ng-template #elseBlock>{{res.fixedVersion}}</ng-template>
+            </clr-dg-cell>
            <clr-dg-row-detail *clrIfExpanded>
            {{'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate}}: {{res.description}}
            </clr-dg-row-detail>
--- a/src/ui_ng/src/app/shared/gauge/gauge.component.css
+++ b/src/ui_ng/src/app/shared/gauge/gauge.component.css
@ -167,7 +167,7 @@
    text-align: center;
    margin-top: 3px;
    position: relative;
-    bottom: -2px;
+    bottom: 12px;
 }

 .esxc-gauge-small .esxc-title .esxc-bar-title {
--- a/src/ui_ng/src/app/shared/statictics/statistics.component.css
+++ b/src/ui_ng/src/app/shared/statictics/statistics.component.css
@ -44,8 +44,8 @@
 .statistic-item-divider {
    height: 54px;
    display: inline-block;
-    width: 1px;
-    background-color: #ccc;
+    width: 2px;
+    background-color: #bdbdbd;
    opacity: 0.55;
    margin-left: 4px;
    margin-right: 12px;
--- a/src/ui_ng/src/styles.css
+++ b/src/ui_ng/src/styles.css
@ -39,4 +39,11 @@
 }
 .modal-header{
     padding: 0;
- }
+ }
+.rotate-90 {
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}