Auto stash before merge of "master" and "origin/master"

This commit is contained in:
Dragos 2021-04-28 18:59:19 +03:00
parent 017c90ab02
commit ead7c9188b
14 changed files with 230 additions and 163 deletions

View File

@ -31,7 +31,7 @@
</ng-container>
<li class="dropdown-header">Deletion protection</li>
<li class="list-group-item ps-0 pb-0">
<li class="list-group-item ps-0 pb-0 mt-2 ms-2">
<div class="form-check form-switch">
<input class="form-check-input mt-0" type="checkbox" id="dp{{ instance.id }}" [(ngModel)]="instance.deletion_protection"
(change)="toggleDeletionProtection($event, instance)">

View File

@ -21,7 +21,7 @@
</ul>
</div>
<div class="form-check form-switch">
<div class="form-check form-switch mb-0">
<input class="form-check-input mt-0" type="checkbox" id="fw{{ instance.id }}" [(ngModel)]="instance.firewall_enabled"
(change)="toggleCloudFirewall($event, instance)">
<label class="form-check-label" for="fw{{ instance.id }}">Toggle cloud firewall</label>

View File

@ -43,3 +43,8 @@
{
font-size: 1rem;
}
.dropdown-menu b
{
font-weight: 400;
}

View File

@ -33,7 +33,7 @@
*ngIf="snapshot.state === 'created' && !snapshot.working">
<button class="btn btn-link text-success" tooltip="Start machine from this snapshot" container="body" placement="top" [adaptivePosition]="false"
(click)="restoreSnapshot(snapshot)">
<fa-icon icon="history" [fixedWidth]="true" size="sm"></fa-icon>
<fa-icon icon="undo" [fixedWidth]="true" size="sm"></fa-icon>
</button>
<button class="btn btn-link text-info" dropdownToggle

View File

@ -49,7 +49,7 @@
{
position: absolute;
left: .5rem;
top: 50%;
top: 51%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;

View File

@ -180,6 +180,7 @@ p
padding: .75rem .25rem;
color: #5a8cd8;
font-family: "Mukta", sans-serif;
font-size: 1.1rem;
text-transform: none;
}
}

View File

@ -93,7 +93,7 @@
[parentScroll]="scroller.window.document.getElementById('scrollingBlock')" [scrollThrottlingTime]="250">
<div *ngFor="let instance of scroller.viewPortItems; trackBy: trackByFunction; let index = index"
[ngClass]="showMachineDetails ? 'col-12 full-details' : 'col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12'"
[class.col-lg-6]="editorForm.get('fullDetailsTwoColumns').value" lazyLoad [lazyLoadDelay]="lazyLoadDelay"
[class.col-lg-6]="showMachineDetails && editorForm.get('fullDetailsTwoColumns').value" lazyLoad [lazyLoadDelay]="lazyLoadDelay"
[container]="scroller.element.nativeElement.getElementsByClassName('scrollable-content')[0]"
(canLoad)="instance.loading = false" (unload)="instance.loading = true"
(load)="loadInstanceDetails(instance)">
@ -154,6 +154,7 @@
[class.bg-danger]="instance.state === 'stopped'" [class.bg-success]="instance.state === 'running'"
(click)="showMachineHistory(instance)" tooltip="{{ 'dashboard.listItem.history' | translate }}"
container="body" placement="top" [adaptivePosition]="false">
<fa-icon icon="history" [fixedWidth]="true"></fa-icon>
{{ instance.state }}
</a>
@ -243,8 +244,7 @@
</ng-template>
<div class="card-body p-2 h-100">
<ul class="list-group list-group-flush list-info">
<li
class="list-group-item text-uppercase px-0 dns d-flex justify-content-between align-items-center"
<li class="list-group-item text-uppercase px-0 dns d-flex justify-content-between align-items-center"
*ngFor="let volume of instance.volumes">
<div class="text-truncate">
<fa-icon icon="database" [fixedWidth]="true" size="sm"></fa-icon>
@ -276,12 +276,15 @@
<div class="btn-group w-100 mb-3" dropdown>
<button class="btn btn-state-filter dropdown-toggle d-flex justify-content-between align-items-center"
dropdownToggle>
<span *ngIf="!editorForm.get(['filters', 'stateFilter']).value">{{ 'dashboard.list.anyState' | translate
}}</span>
<span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'running'">{{
'dashboard.listItem.stateRunning' | translate }}</span>
<span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'stopped'">{{
'dashboard.listItem.stateStopped' | translate }}</span>
<span *ngIf="!editorForm.get(['filters', 'stateFilter']).value">
{{ 'dashboard.list.anyState' | translate }}
</span>
<span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'running'">
{{ 'dashboard.listItem.stateRunning' | translate }}
</span>
<span *ngIf="editorForm.get(['filters', 'stateFilter']).value === 'stopped'">
{{ 'dashboard.listItem.stateStopped' | translate }}
</span>
</button>
<ul *dropdownMenu class="dropdown-menu dropdown-menu-state-filter" role="menu">
<li role="menuitem">
@ -313,8 +316,9 @@
<div class="dropdown-header">{{ 'dashboard.list.filterByDisk' | translate }}</div>
<ngx-slider class="mb-3" formControlName="diskFilter" [options]="diskFilterOptions"></ngx-slider>
<button class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">{{ 'dashboard.list.resetFilters' |
translate }}</button>
<button class="btn btn-outline-dark w-100 mt-3" (click)="clearFilters()">
{{ 'dashboard.list.resetFilters' | translate }}
</button>
</ng-container>
<div class="dropdown-divider"></div>
@ -343,40 +347,46 @@
<ul class="list-group list-group-flush" role="menu">
<li role="menuitem">
<button class="dropdown-item" (click)="renameMachine(instance)">
<fa-icon icon="pen" [fixedWidth]="true"></fa-icon>
<fa-icon icon="pen" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.rename' | translate }}
</button>
</li>
<li role="menuitem">
<button class="dropdown-item" (click)="showTagEditor(instance)">
<fa-icon icon="tags" [fixedWidth]="true"></fa-icon>
<fa-icon icon="tags" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.editTags' | translate }}
</button>
</li>
<li role="menuitem">
<button class="dropdown-item" (click)="showTagEditor(instance, true)">
<fa-icon icon="tags" [fixedWidth]="true"></fa-icon>
<fa-icon icon="tags" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.editMetadata' | translate }}
</button>
</li>
<li class="dropdown-divider"></li>
<li role="menuitem">
<button class="dropdown-item" (click)="createMachine(instance)">
<fa-icon icon="clone" [fixedWidth]="true"></fa-icon>
<fa-icon icon="clone" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.clone' | translate }}
</button>
</li>
<li role="menuitem">
<button class="dropdown-item" (click)="createImageFromMachine(instance)">
<fa-icon icon="layer-group" [fixedWidth]="true"></fa-icon>
<fa-icon icon="layer-group" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.createImage' | translate }}
</button>
</li>
<li class="dropdown-divider"></li>
<ng-container *ngIf="instance.state === 'running'">
<li role="menuitem">
<button class="dropdown-item" (click)="restartMachine(instance)">
<fa-icon icon="undo" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.restart' | translate }}
</button>
</li>
<li role="menuitem">
<button class="dropdown-item" (click)="stopMachine(instance)">
<fa-icon icon="stop" [fixedWidth]="true"></fa-icon>
<fa-icon icon="stop" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.stop' | translate }}
</button>
</li>
@ -384,7 +394,7 @@
</ng-container>
<li role="menuitem">
<button class="dropdown-item" (click)="deleteMachine(instance)">
<fa-icon icon="trash" [fixedWidth]="true"></fa-icon>
<fa-icon icon="trash" [fixedWidth]="true" size="sm"></fa-icon>
{{ 'dashboard.listItem.delete' | translate }}
</button>
</li>

View File

@ -1,162 +1,197 @@
:host {
:host
{
flex-direction: column;
overflow : hidden;
overflow: hidden;
}
.ips {
+.ips {
margin-left : .5rem;
.ips
{
+ .ips
{
margin-left: .5rem;
padding-left: .5rem;
border-left : 2px solid #2b3540;
border-left: 2px solid #2b3540;
}
}
.card {
border : 1px solid rgba(0, 0, 0, .5);
.card
{
border: 1px solid rgba(0, 0, 0, .5);
background-color: rgba(16, 21, 39, .5);
box-shadow : 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a;
transition : box-shadow .15s ease-out;
box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px #0b284b, 0 0 10px 3px #0e162a;
transition: box-shadow .15s ease-out;
&:hover {
&:hover
{
box-shadow: 0 0 0 2px #0b2b51, 0 0 2px 4px rgba(18, 203, 240, .4), 0 0 10px 3px #0e162a;
}
.card-title {
color : #ff9c07;
.card-title
{
color: #ff9c07;
margin-bottom: 0;
font-weight : bold;
font-weight: bold;
}
.card-body {
.card-body
{
background-color: rgba(16, 21, 39, .5);
max-height : 205px;
overflow : auto;
padding-top : .7rem !important;
max-height: 205px;
overflow: auto;
padding-top: .7rem !important;
}
.list-group-item {
.list-group-item
{
background: none;
span {
span
{
color: #8881ff;
}
b,
.strong {
color : #ff9c07;
.strong
{
color: #ff9c07;
font-weight: bold;
}
}
.btn-info,
.btn-outline-info {
font-size : 1rem;
.btn-outline-info
{
font-size: 1rem;
line-height: 1;
}
}
.card-info {
.card-info
{
background-color: rgba(16, 21, 39, .75);
display : flex;
flex-direction : column;
justify-content : space-between;
padding : .25rem .5rem .5rem;
height : 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: .25rem .5rem .5rem;
height: 170px;
}
.full-details .card-info {
.full-details .card-info
{
height: 240px;
}
@media (max-width: 576px) {
.card-info {
@media (max-width: 576px)
{
.card-info
{
height: auto;
}
}
.no-overflow-sm {
.no-overflow-sm
{
overflow: hidden;
}
@media (max-width: 992px) {
.no-overflow-sm {
@media (max-width: 992px)
{
.no-overflow-sm
{
overflow: visible;
}
}
.open .dropdown-toggle {}
.open .dropdown-toggle
{
}
.filters {
.filters
{
width: 240px;
}
.form-check-label {
.form-check-label
{
color: inherit;
}
.btn-toolbar .btn {
.badge {
padding : 0.1rem 0.35rem 0;
border : 1px solid transparent;
text-shadow: 0 0 3px rgb(255 255 255 / 25%);
.btn-toolbar .btn
{
.badge
{
padding: .1rem .35rem 0;
border: 1px solid transparent;
font-weight: 400;
font-size: 1.25rem;
&:first-letter {
&:first-letter
{
font-size: 1.2rem;
}
}
&:hover {
.badge {
border-color: #000;
&:hover
{
.badge
{
border-color: rgba(0,0,0,.25);
}
}
}
@keyframes flash {
@keyframes flash
{
from,
50%,
to {
from, 50%, to
{
opacity: 1;
}
25%,
75% {
25%, 75%
{
opacity: 0;
}
}
.flash {
animation-name : flash;
animation-duration : calc(.9s * 1.3);
.flash
{
animation-name: flash;
animation-duration: calc(.9s * 1.3);
animation-timing-function: ease-in-out;
}
.btn-state-filter:not(.btn-lg):not(.btn-sm) {
.btn-state-filter:not(.btn-lg):not(.btn-sm)
{
background-color: #11182b;
color : #ff9c07;
padding : .5rem 1rem;
color: #ff9c07;
padding: .5rem 1rem;
}
.open.show .btn-state-filter {
.open.show .btn-state-filter
{
border-radius: 1.25rem 1.25rem 0 0;
}
.dropdown-menu.dropdown-menu-state-filter {
background : #11182b;
color : #ff9c07;
width : 100%;
padding : 0;
.dropdown-menu.dropdown-menu-state-filter
{
background: #11182b;
color: #ff9c07;
width: 100%;
padding: 0;
border-radius: 0 0 .25rem .25rem;
.dropdown-item {
.dropdown-item
{
color: inherit;
&.active {
&.active
{
color: #0dcaf0;
}
&:hover {
&:hover
{
background-color: rgba(11, 172, 204, .2);
}
}
@ -164,6 +199,17 @@
.form-switch,
.form-switch input,
.form-switch label {
.form-switch label
{
cursor: pointer;
}
.dropdown-toggle b
{
font-weight: 400;
}
a.badge
{
text-decoration: none;
}

View File

@ -774,7 +774,7 @@ export class InstancesComponent implements OnInit, OnDestroy
instance.working = false;
});
instance.shouldLoadInfo = this.editorForm.get('showMachineDetails').value;
instance.shouldLoadInfo = true;
}
// ----------------------------------------------------------------------------------------------------------------

View File

@ -32,7 +32,8 @@ import
faTimes, faTrash, faUser, faUserTag, faTag, faUserLock, faLock, faPen, faCheckCircle, faPenNib, faPlus, faMinus, faAngleRight, faHandPointer,
faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent
faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
faUndo
} from '@fortawesome/free-solid-svg-icons';
import { faDocker } from '@fortawesome/free-brands-svg-icons';
@ -147,7 +148,8 @@ export class SharedModule
faTimes, faTrash, faUser, faUserTag, faTag, faUserLock, faLock, faPen, faCheckCircle, faPenNib, faPlus, faMinus, faAngleRight, faHandPointer,
faArrowsAlt, faTags, faEllipsisV, faHatWizard, faUserCog, faCircle, faAngleLeft, faExternalLinkAlt, faCheck, faPowerOff, faBars, faSpinner,
faStop, faPlay, faRedo, faMicrochip, faDesktop, faCopy, faSquare, faCheckSquare, faSave, faDatabase, faClone, faSearch, faHistory, faMask,
faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent
faCloud, faCloudUploadAlt, faEye, faFingerprint, faLink, faClipboard, faCoins, faArrowRight, faEllipsisH, faStar, faCommentAlt, faOutdent,
faUndo
);
}
}

View File

@ -2,7 +2,7 @@
{
border-radius: 2rem;
line-height: 1.2;
font-family: "Mukta", sans-serif;
font-family: "Bebas Neue", sans-serif;
text-transform: uppercase;
font-weight: 400;
@ -18,7 +18,7 @@
.btn:not(.btn-lg):not(.btn-sm)
{
font-size: 1.15rem;
font-size: 1.25rem;
padding: .375rem .5rem .3rem;
}
@ -34,10 +34,10 @@
.btn.btn-lg
{
font-size: 1.15rem;
font-size: 1.5rem;
padding-bottom: .35rem;
line-height: 1;
font-weight: 600;
font-weight: 400;
}
.btn-primary

View File

@ -2,8 +2,8 @@
{
text-transform: uppercase;
color: #0dcaf0;
font-family: "Varta", sans-serif;
font-size: 1.2rem;
font-family: "Bebas Neue", sans-serif;
font-size: 1.25rem;
vertical-align: middle;
}

View File

@ -29,7 +29,7 @@
h4
{
color: #3d5e8e;
font-family: "Varta", sans-serif;
font-family: "Bebas Neue", sans-serif;
}
}
}

View File

@ -116,7 +116,8 @@ body, div, virtual-scroller
background: none;
border-radius: 0;
border: none;
font-family: "Varta", sans-serif;
font-family: "Bebas Neue", sans-serif;
text-transform: uppercase;
text-align: center;
color: #0dcaf0;
width: 100%;
@ -138,6 +139,7 @@ body, div, virtual-scroller
.nav-tabs
{
border: none;
flex-wrap: nowrap;
}
.tab-content
@ -266,10 +268,11 @@ accordion
.dropdown-menu, .menu-popover, .menu-dropdown
{
background: linear-gradient(135deg, #1fd1f5 0%, #00c3ea 100%);
font-family: "Varta", sans-serif;
font-size: 1.2rem;
font-family: "Bebas Neue", sans-serif;
font-size: 1.25rem;
z-index: 1020;
max-height: 60vh;
max-height: 80vh;
max-width: 600px;
overflow: auto;
}
@ -472,7 +475,7 @@ accordion
{
thead
{
font-family: "Varta", sans-serif;
font-family: "Bebas Neue", sans-serif;
font-size: 1.2rem;
color: #A3A4B8;
}