#28 update to master

bwsw · Jun 26, 2017 · 8612a18 · 8612a18
2 parents 978172e + 8459ae0
commit 8612a18
Show file tree

Hide file tree

Showing 114 changed files with 2,083 additions and 858 deletions.
diff --git a/.build/run.sh b/.build/run.sh
@@ -6,7 +6,7 @@ if [ -z "$DEPLOY_PORT" ]; then
 fi
 
 if [ -n "$CONFIG_PATH" ]; then
-  export CONFIG_MOUNT="-v ${CONFIG_PATH}:/config";
+  export CONFIG_MOUNT="-v ${CONFIG_PATH}:/var/www/dist/config/config.json";
 else
   export CONFIG_MOUNT="";
 fi

diff --git a/.build/startup.sh b/.build/startup.sh
@@ -9,11 +9,6 @@ if [ -n "$BASE_HREF" ]; then
     sed -i -e 's#"/"#'"$BASE_HREF"'#g' /var/www/dist/index.html
 fi
 
-# load config
-if [ -e '/config/config.json' ]; then
-    mkdir -p /var/www/dist/config && cp /config/config.json /var/www/dist/config
-fi
-
 # check if API is available
 if [ -z $API_BACKEND_URL ]; then
     echo "No API backend address specified"

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at info@bw-sw.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 Table of Contents
 =================
 
-   * [Cloudstack UI](#cloudstack-ui)
+   * [CloudStack-UI](#cloudstack-ui)
       * [Project Story](#project-story)
       * [Implementation Details](#implementation-details)
       * [Features Supported](#features-supported)
@@ -27,19 +27,19 @@ Table of Contents
       * [How to Contribute](#how-to-contribute)
       * [License](#license)
 
-# Cloudstack UI
+# CloudStack-UI
 
-Cloudstack UI is a project whose purpose is to develop an easy-to-use, light, and user friendly frontend interface for the [Apache Cloudstack](http://cloudstack.apache.org/) virtualization management system. Apache Cloudstack itself is a great product which is used very widely, but its frontend is developed for administrators (from our point of view), not for end cloud users. Some of the interactions are not straightforward and unnatural to an average user and require quite a long time to adapt. Other reasons to develop are connected with a lack of functions like virtual machine statistics & charting, sophisticated resource accounting, and application management. These are in our long-term TODO list.
+CloudStack-UI is a project whose purpose is to develop an easy-to-use, light, and user friendly frontend interface for the [Apache CloudStack](http://cloudstack.apache.org/) virtualization management system. Apache CloudStack itself is a great product which is used very widely, but its frontend is developed for administrators (from our point of view), not for end cloud users. Some of the interactions are not straightforward and unnatural to an average user and require quite a long time to adapt. Other reasons to develop are connected with a lack of functions like virtual machine statistics & charting, sophisticated resource accounting, and application management. These are in our long-term TODO list.
 
 ## Project Story
 
-At [Bitworks Software](https://bitworks.software/), we run an ACS public cloud for 3 years (actually we still run CS 4.3 cloud in production) and we found that average users who are familiar with Digital Ocean, Amazon AWS, and other VPS management systems feel uncomfortable with original Cloudstack UI and make a lot of operational mistakes. That’s why we decided to implement a convenient and neat end-user facing UI covering regular activities, which are important for day-to-day VM management.
+At [Bitworks Software](https://bitworks.software/), we run an ACS public cloud for 3 years (actually we still run CS 4.3 cloud in production) and we found that average users who are familiar with Digital Ocean, Amazon AWS, and other VPS management systems feel uncomfortable with original CloudStack UI and make a lot of operational mistakes. That’s why we decided to implement a convenient and neat end-user facing UI covering regular activities, which are important for day-to-day VM management.
 
 The project is developed by Bitworks Software Frontend Division within the educational marathon, which has the purpose to incorporate our new team members and show them our standard frontend development instrument.
 
 ## Implementation Details
 
-* Designed compatible with [Apache Cloudstack](http://cloudstack.apache.org/) 4.9 and hasn't tested for the previous versions of CS
+* Designed compatible with [Apache CloudStack](http://cloudstack.apache.org/) 4.9 and hasn't tested for the previous versions of CS
 * Powered by [Angular 2](https://angular.io/) and [Google Material Design Lite](https://getmdl.io/)
 * Tested and works fine in next modern browsers
    * Google Chrome 56.0.2924.76
@@ -53,13 +53,13 @@ Since we designed the product from the perspective of well-known use cases, whic
 
 So, what is supported:
 
-* Basic Cloudstack zones with virtual router
+* Basic CloudStack zones with virtual router
 * Security groups
 * KVM Hypervisor
 * Security group templates
 * Multiple zones
-* Cloudstack Account Domains
-* Virtual machine standard operations supported by Apache Cloudstack
+* CloudStackAccount Domains
+* Virtual machine standard operations supported by Apache CloudStack
 * Root and Data disks management
 * Ad-hoc snapshots for disks
 * Affinity groups management
@@ -74,7 +74,7 @@ So, what is supported:
 
 ## Features Yet Unsupported
 
-We intensively use features like projects in our own Cloudstack cloud to manage resources dedicated to project groups, etc. but generic users don’t need them, so we don’t support the following features yet:
+We intensively use features like projects in our own CloudStackcloud to manage resources dedicated to project groups, etc. but generic users don’t need them, so we don’t support the following features yet:
 
 * Advanced Zones
 * Hypervisors other than KVM have not been tested
@@ -100,7 +100,7 @@ We intensively use features like projects in our own Cloudstack cloud to manage
 
 #### Login view
 
-Just a simple login screen. Nothing really new. But it has a nice preloader which can be used to brand it for specific company. By default it shows Apache Cloudstack banner.
+Just a simple login screen. Nothing really new. But it has a nice preloader which can be used to brand it for specific company. By default it shows Apache CloudStack banner.
 
 <a href="https://raw.githubusercontent.com/bwsw/cloudstack-ui/master/screens/loginView.png" target="_blank">![Login screen](./screens/loginView_mini.png)</a>
 
@@ -168,17 +168,17 @@ docker run -d -p 80:80 --name cloudstack-ui \
            -e API_BACKEND_URL=http://link/to/api/endpoint \
            -e CONSOLE_BACKEND_URL=http://link/to/console/endpoint \
            -e BASE_HREF=base_href \
-           -v /my/config/path:/config \
+           -v /path/to/config.json:/var/www/dist/config/config.json \
            bwsw/cloudstack-ui
 ```
 
-`http://link/to/api/endpoint` - URL of Cloudstack API endpoint (e.g. http://host:8080/client/api)
+`http://link/to/api/endpoint` - URL of CloudStackAPI endpoint (e.g. http://host:8080/client/api)
 
-`http://link/to/console/endpoint` - URL of Cloudstack console endpoint (e.g. http://host:8080/client/console)
+`http://link/to/console/endpoint` - URL of CloudStackconsole endpoint (e.g. http://host:8080/client/console)
 
 `base_href` - custom base URL (optional, defaults to "/")
 
-`/my/config/path` - path to a directory with a custom configuration file named config.json (optional)
+`/path/to/config.json` - path to a custom configuration file named config.json (optional)
 
 ### Assisting object cleanup container
 
@@ -190,6 +190,12 @@ Download and start [bwsw/cloudstack-ui-cleaner](https://hub.docker.com/r/bwsw/cl
 
 You can customize the application by providing your own configuration file (example link).
 
+### Default domain URL
+
+Domain URL used to fill the 'Domain' field in the login form
+
+    "defaultDomain": "domain"
+
 ### securityGroupTemplates:
 
 Predefined templates for security groups. You can define your own security groups that will be available for all users by default. Format:

diff --git a/_config.yml b/_config.yml
@@ -1,3 +1,3 @@
 theme: jekyll-theme-cayman
-title: Cloudstack-UI
-description: Modern and lightweight management panel for Apache Cloudstack
+title: CloudStack-UI
+description: Modern and lightweight management panel for Apache CloudStack
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -0,0 +1,20 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+.page-header {
+    background-color: #1dafec;
+    background-image: url("/cloudstack-ui/assets/images/cs-bg.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 500px;
+}
+
+.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: normal;
+    color: #1dafec;
+}
diff --git a/assets/images/cs-bg-logo.png b/assets/images/cs-bg-logo.png
diff --git a/assets/images/cs-bg.png b/assets/images/cs-bg.png
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -24,7 +24,7 @@
     </mdl-layout-title>
     <nav #navigationBar class="mdl-navigation">
       <a
-        (click)="componentSelected(mainLayout)"
+        (click)="linkClick('/instances')"
         class="mdl-navigation__link link-container"
         routerLink="/instances"
         [class.link-hover-light]="isLightTheme"
@@ -36,7 +36,7 @@
       </a>
 
       <a
-        (click)="componentSelected(mainLayout)"
+        (click)="linkClick('/spare-drives')"
         class="mdl-navigation__link link-container"
         routerLink="/spare-drives"
         [class.link-hover-light]="isLightTheme"
@@ -48,7 +48,7 @@
       </a>
 
       <a
-        (click)="componentSelected(mainLayout)"
+        (click)="linkClick('/templates')"
         class="mdl-navigation__link link-container"
         routerLink="/templates"
         [class.link-hover-light]="isLightTheme"
@@ -60,8 +60,8 @@
       </a>
 
       <a
+        (click)="linkClick('/sg-templates')"
         *ngIf="!disableSecurityGroups"
-        (click)="componentSelected(mainLayout)"
         class="mdl-navigation__link link-container"
         routerLink="/sg-templates"
         [class.link-hover-light]="isLightTheme"
@@ -73,7 +73,7 @@
       </a>
 
       <a
-        (click)="componentSelected(mainLayout)"
+        (click)="linkClick('/events')"
         class="mdl-navigation__link link-container"
         routerLink="/events"
         [class.link-hover-light]="isLightTheme"
@@ -85,7 +85,7 @@
       </a>
 
       <a
-        (click)="componentSelected(mainLayout)"
+        (click)="linkClick('/ssh-keys')"
         class="mdl-navigation__link link-container"
         routerLink="/ssh-keys"
         [class.link-hover-light]="isLightTheme"
@@ -97,7 +97,7 @@
       </a>
 
       <a
-        (click)="componentSelected(mainLayout)"
+        (click)="linkClick('/settings')"
         class="mdl-navigation__link link-container"
         routerLink="/settings"
         [class.link-hover-light]="isLightTheme"
@@ -109,9 +109,8 @@
       </a>
 
       <a
-        (click)="componentSelected(mainLayout)"
-        routerLink="/logout"
         class="mdl-navigation__link link-container"
+        routerLink="/logout"
         [class.link-hover-light]="isLightTheme"
         [class.link-hover-dark]="!isLightTheme"
         [routerLinkActive]="linkActiveStyle"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -46,8 +46,12 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.title = this.auth.name;
   }
 
-  public componentSelected(mainLayout: MdlLayoutComponent): void {
-    mainLayout.closeDrawerOnSmallScreens();
+  public linkClick(routerLink: string): void {
+    if (routerLink === this.routerUtilsService.getRouteWithoutQueryParams()) {
+      this.router.navigate(['reload'], {
+        queryParamsHandling: 'preserve'
+      });
+    }
   }
 
   public ngOnInit(): void {
@@ -139,7 +143,7 @@ export class AppComponent implements OnInit, AfterViewInit {
       switch (e.status) {
         case 401:
           this.notification.message('NOT_LOGGED_IN');
-          const route = this.routerUtilsService.routeWithoutQueryParams;
+          const route = this.routerUtilsService.getRouteWithoutQueryParams();
           if (route !== '/login' && route !== '/logout') {
             this.router.navigate(['/logout'], this.routerUtilsService.getRedirectionQueryParams());
           }

diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -7,6 +7,7 @@ import { SgTemplateListComponent } from './security-group/sg-template-list/sg-te
 import { SettingsComponent } from './settings/settings.component';
 import { AuthGuard, LoginGuard } from './shared/services';
 import { SshKeysPageComponent } from './ssh-keys/ssh-keys-page.component';
+import { ReloadComponent } from './shared/components/reload/reload.component';
 
 
 export const routes: Routes = [
@@ -19,6 +20,10 @@ export const routes: Routes = [
     path: 'logout',
     component: LogoutComponent
   },
+  {
+    path: 'reload',
+    component: ReloadComponent
+  },
   {
     path: 'sg-templates',
     component: SgTemplateListComponent,

diff --git a/src/app/auth/login.component.html b/src/app/auth/login.component.html
@@ -1,4 +1,4 @@
-<div class="flex-container">
+<div class="flex-container" *ngIf="!loading">
   <img class="logo" src="img/cloudstack_logo.png">
   <div class="login mdl-color--white" mdl-shadow="2">
     <form (ngSubmit)="onSubmit()" #loginForm="ngForm" novalidate>
@@ -7,7 +7,9 @@
           required
           type="text"
           [label]="'USERNAME' | translate"
+          floating-label
           name="username"
+          [error-msg]="'LOGIN_FORM.USERNAME_REQUIRED' | translate"
           #user="ngModel"
           [(ngModel)]="username"
           [class.is-invalid]="user.invalid && !user.pristine"
@@ -18,21 +20,47 @@
           required
           type="password"
           [label]="'PASSWORD' | translate"
+          floating-label
           name="password"
+          [error-msg]="'LOGIN_FORM.PASSWORD_REQUIRED' | translate"
           #pass="ngModel"
           [(ngModel)]="password"
           [class.is-invalid]="pass.invalid && !pass.pristine"
         >
         </mdl-textfield>
+        <br/>
+        <mdl-textfield
+          *ngIf="showDomain"
+          type="text"
+          [label]="'DOMAIN' | translate"
+          floating-label
+          name="domain"
+          #domainField="ngModel"
+          [(ngModel)]="domain"
+          [class.is-invalid]="domainField.invalid && !domainField.pristine"
+        >
+        </mdl-textfield>
       </div>
       <div class="mdl-dialog__actions">
         <button
           mdl-colored="primary"
           mdl-button
           mdl-ripple
           type="submit"
-          [disabled]="!loginForm.valid"
+          [disabled]="(pass.invalid && !pass.pristine) || (user.invalid && !user.pristine)"
         >{{ 'LOGIN' | translate }}</button>
+        <button
+          class="options-button"
+          mdl-button-type="icon"
+          mdl-button
+          mdl-ripple
+          type="button"
+          [mdl-tooltip]="(showDomain ? 'LOGIN_FORM.HIDE_ADVANCED' : 'LOGIN_FORM.SHOW_ADVANCED') | translate"
+          mdl-tooltip-position="top"
+          (click)="toggleDomain()"
+        >
+          <mdl-icon [class.domains-visible]="showDomain">settings</mdl-icon>
+        </button>
       </div>
     </form>
   </div>

diff --git a/src/app/auth/login.component.scss b/src/app/auth/login.component.scss
@@ -15,3 +15,12 @@
 .login {
   max-width: 100%;
 }
+
+.options-button {
+  margin-right: auto;
+  height: 32px;
+
+  .domains-visible {
+    color: rgba(0,0,0,.26) !important;
+  }
+}