mpana/sc-portal
Archived
1
0
Fork 0
Code Issues 15 Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/app/instances/instance-info/instance-info.component.html
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)">

2
app/src/app/instances/instance-networks/instance-networks.component.html
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>

5
app/src/app/instances/instance-networks/instance-networks.component.scss
View File

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

2
app/src/app/instances/instance-snapshots/instance-snapshots.component.html
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

2
app/src/app/instances/instance-snapshots/instance-snapshots.component.scss
View File

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

1
app/src/app/instances/instance-wizard/instance-wizard.component.scss
View File

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

46
app/src/app/instances/instances.component.html
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>

186
app/src/app/instances/instances.component.scss
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;
}

2
app/src/app/instances/instances.component.ts
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;
}
// ----------------------------------------------------------------------------------------------------------------

6
app/src/app/shared.module.ts
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
);
}
}

8
app/src/styles/_buttons.scss
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

4
app/src/styles/_forms.scss
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;
}

2
app/src/styles/_modal.scss
View File

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

13
app/src/styles/styles.scss
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;
}