feat(vm-logs): settings (#1401)

* feat(vm-logs): realtime logs (#1358) * feat(vm-logs): VM logs plugin (#1330) * vm logs mock * vm logs * feat(vm-logs): show vm logs * vm logs * add tests * fix action name * fix selector name * fix monospace text in column header * feat(vm-logs): replace show logs icon button with text button * feat(vm-logs): keyword filtering * feat(vm-logs): save vm log keywords in query params * feat(vm-logs): filter by dates * feat(vm-logs): filter by dates * v1.10.1 * fix tests * fix version * fix package.json * sort by timestamp * fix timestamp * feat(vm-logs): filter vms by account * refactor date picker label * refactor labels * refactor labels * fix IE * feat(vm-logs): newest first (#1346) * vm logs mock * vm logs * feat(vm-logs): show vm logs * vm logs * add tests * fix action name * fix selector name * fix monospace text in column header * feat(vm-logs): replace show logs icon button with text button * feat(vm-logs): keyword filtering * feat(vm-logs): save vm log keywords in query params * feat(vm-logs): filter by dates * feat(vm-logs): filter by dates * v1.10.1 * fix tests * fix version * fix package.json * sort by timestamp * fix timestamp * feat(vm-logs): filter vms by account * refactor date picker label * refactor labels * refactor labels * fix IE * feat(vm-logs): newest first sorting * add types * add types * fix newest first * fix typings * fix typings * fix typings * feat(vm-logs): log files (#1351) * feat(vm-logs): log files * feat(vm-logs): log files * code style * feat(vm-logs): realtime logs * feat(vm-logs): disable auto update on show logs click * VM logs (#1362) * refactor(vm): get rid of BaseModel for VM model (#1180) PR close #1104 * build(code-coverage): enable source-maps by default (#1347) This is a workaround to fix code coverage mapping * Update README.md * Create version * Update README.md * Update README.md * feat(navigation): rework navigation menu (#1333) PR close #1235 * feat(config-validation): add config validators (#1309) * feat(config-validation): add config validators * revert security group template interface * add more validation * remove allowReorderingSidenav validation, use uniqueItems * Update vm-colors.scheme.json * style: update app code style (#1359) * Add prettier * Prettier formatted * Work in progress * Fix tsc errors and lint errors * Ann few more rules and changes to codebase * Add precommit hook * Run prettier on entire codebase * Run prettier * Fix lint error * fix bug about grouping * Fix bugs * Remove unused files * fix(misc): semantic errors * fix(lint) * Vm logs (#1363) * refactor(vm): get rid of BaseModel for VM model (#1180) PR close #1104 * build(code-coverage): enable source-maps by default (#1347) This is a workaround to fix code coverage mapping * Update README.md * Create version * Update README.md * Update README.md * feat(navigation): rework navigation menu (#1333) PR close #1235 * feat(config-validation): add config validators (#1309) * feat(config-validation): add config validators * revert security group template interface * add more validation * remove allowReorderingSidenav validation, use uniqueItems * Update vm-colors.scheme.json * style: update app code style (#1359) * Add prettier * Prettier formatted * Work in progress * Fix tsc errors and lint errors * Ann few more rules and changes to codebase * Add precommit hook * Run prettier on entire codebase * Run prettier * Fix lint error * fix bug about grouping * Fix bugs * Remove unused files * fix(misc): semantic errors * fix(lint) * update to master * vm logs * vm logs * simplify nav menu reducer * Update virtual-machines-subroutes.ts * Update accounts-subroutes.ts * nav menu * fix current route is not defined * remove view logs from context menu * fix event emitter names * feat(vm-logs): disable date and time pickers in autoupdate mode * feat(vm-logs): replace keywords with search (#1397) * add vm logs settings * feat(vm-logs): scroll (#1399) * docs: LogView Plugin description corrected * fix(config): remove outdated config properties (#1365) * feat(vm-logs): scroll * fix merge conflict * fix tests * fix autoscroll refresh * move selector * use settings values in vm logs * feat(vm-logs): real time button position (#1387) * feat(vm-logs): VM logs plugin (#1330) * vm logs mock * vm logs * feat(vm-logs): show vm logs * vm logs * add tests * fix action name * fix selector name * fix monospace text in column header * feat(vm-logs): replace show logs icon button with text button * feat(vm-logs): keyword filtering * feat(vm-logs): save vm log keywords in query params * feat(vm-logs): filter by dates * feat(vm-logs): filter by dates * v1.10.1 * fix tests * fix version * fix package.json * sort by timestamp * fix timestamp * feat(vm-logs): filter vms by account * refactor date picker label * refactor labels * refactor labels * fix IE * feat(vm-logs): newest first (#1346) * vm logs mock * vm logs * feat(vm-logs): show vm logs * vm logs * add tests * fix action name * fix selector name * fix monospace text in column header * feat(vm-logs): replace show logs icon button with text button * feat(vm-logs): keyword filtering * feat(vm-logs): save vm log keywords in query params * feat(vm-logs): filter by dates * feat(vm-logs): filter by dates * v1.10.1 * fix tests * fix version * fix package.json * sort by timestamp * fix timestamp * feat(vm-logs): filter vms by account * refactor date picker label * refactor labels * refactor labels * fix IE * feat(vm-logs): newest first sorting * add types * add types * fix newest first * fix typings * fix typings * fix typings * feat(vm-logs): log files (#1351) * feat(vm-logs): log files * feat(vm-logs): log files * code style * feat(vm-logs): realtime logs * feat(vm-logs): disable auto update on show logs click * VM logs (#1362) * refactor(vm): get rid of BaseModel for VM model (#1180) PR close #1104 * build(code-coverage): enable source-maps by default (#1347) This is a workaround to fix code coverage mapping * Update README.md * Create version * Update README.md * Update README.md * feat(navigation): rework navigation menu (#1333) PR close #1235 * feat(config-validation): add config validators (#1309) * feat(config-validation): add config validators * revert security group template interface * add more validation * remove allowReorderingSidenav validation, use uniqueItems * Update vm-colors.scheme.json * style: update app code style (#1359) * Add prettier * Prettier formatted * Work in progress * Fix tsc errors and lint errors * Ann few more rules and changes to codebase * Add precommit hook * Run prettier on entire codebase * Run prettier * Fix lint error * fix bug about grouping * Fix bugs * Remove unused files * fix(misc): semantic errors * fix(lint) * Vm logs (#1363) * refactor(vm): get rid of BaseModel for VM model (#1180) PR close #1104 * build(code-coverage): enable source-maps by default (#1347) This is a workaround to fix code coverage mapping * Update README.md * Create version * Update README.md * Update README.md * feat(navigation): rework navigation menu (#1333) PR close #1235 * feat(config-validation): add config validators (#1309) * feat(config-validation): add config validators * revert security group template interface * add more validation * remove allowReorderingSidenav validation, use uniqueItems * Update vm-colors.scheme.json * style: update app code style (#1359) * Add prettier * Prettier formatted * Work in progress * Fix tsc errors and lint errors * Ann few more rules and changes to codebase * Add precommit hook * Run prettier on entire codebase * Run prettier * Fix lint error * fix bug about grouping * Fix bugs * Remove unused files * fix(misc): semantic errors * fix(lint) * update to master * vm logs * vm logs * simplify nav menu reducer * Update virtual-machines-subroutes.ts * Update accounts-subroutes.ts * nav menu * fix current route is not defined * remove view logs from context menu * fix event emitter names * feat(vm-logs): real time button position * remove unused import * add resize observer polyfill * change settings name * review fixes
bwsw · Nov 8, 2018 · 0d5e805 · 0d5e805
1 parent 7469c4f
commit 0d5e805
Show file tree

Hide file tree

Showing 39 changed files with 474 additions and 82 deletions.
diff --git a/src/app/core/config/default-configuration.ts b/src/app/core/config/default-configuration.ts
@@ -111,6 +111,8 @@ export const nonCustomizableProperties: Readonly<NonCustomizableConfig> = {
     },
   },
   keyboardLayoutForVms: 'us',
+  vmLogsShowLastMessages: 1000,
+  vmLogsShowLastMinutes: 1,
 };
 
 export const defaultConfig: Readonly<Config> = {

diff --git a/src/app/root-store/config/config.selectors.ts b/src/app/root-store/config/config.selectors.ts
@@ -31,6 +31,8 @@ export const getDefaultUserTags = createSelector(
           { key: userTagKeys.timeFormat, value: config.defaultTimeFormat },
           { key: userTagKeys.theme, value: config.defaultTheme },
           { key: userTagKeys.keyboardLayoutForVms, value: config.keyboardLayoutForVms },
+          { key: userTagKeys.vmLogsShowLastMessages, value: `${config.vmLogsShowLastMessages}` },
+          { key: userTagKeys.vmLogsShowLastMinutes, value: `${config.vmLogsShowLastMinutes}` },
         ]
       : [];
   },

diff --git a/src/app/root-store/server-data/user-tags/user-tags.actions.ts b/src/app/root-store/server-data/user-tags/user-tags.actions.ts
@@ -55,6 +55,14 @@ export enum UserTagsActionTypes {
   UpdateKeyboardLayoutForVmsSuccess = '[Resource tags API] Update "csui.user.vm-keyboard-layout" tag success',
   UpdateKeyboardLayoutForVmsError = '[Resource tags API] Update "csui.user.vm-keyboard-layout" tag error',
 
+  UpdateVmLogsShowLastMessages = '[Settings Page] Update "csui.user.vm-logs-show-last-messages" tag',
+  UpdateVmLogsShowLastMessagesSuccess = '[Resource tags API] Update "csui.user.vm-logs-show-last-messages" tag success',
+  UpdateVmLogsShowLastMessagesError = '[Resource tags API] Update "csui.user.vm-logs-show-last-messages" tag error',
+
+  UpdateVmLogsShowLastMinutes = '[Settings Page] Update "csui.user.vm-logs-show-last-minutes" tag',
+  UpdateVmLogsShowLastMinutesSuccess = '[Resource tags API] Update "csui.user.vm-logs-show-last-minutes" tag success',
+  UpdateVmLogsShowLastMinutesError = '[Resource tags API] Update "csui.user.vm-logs-show-last-minutes" tag error',
+
   SetSPFAVM = '[Dialog] Set "csui.user.save-password-for-all-vms" tag',
   SetSPFAVMSuccess = '[Resource tags API] Set "csui.user.save-password-for-all-vms" tag success',
   SetSPFAVMError = '[Resource tags API] Set "csui.user.save-password-for-all-vms" tag error',
@@ -316,6 +324,46 @@ export class UpdateKeyboardLayoutForVmsError implements Action {
   constructor(readonly payload: { error: Error }) {}
 }
 
+// VM Logs show last messages
+
+export class UpdateVmLogsShowLastMessages implements Action {
+  readonly type = UserTagsActionTypes.UpdateVmLogsShowLastMessages;
+
+  constructor(readonly payload: { value: number }) {}
+}
+
+export class UpdateVmLogsShowLastMessagesSuccess implements Action {
+  readonly type = UserTagsActionTypes.UpdateVmLogsShowLastMessagesSuccess;
+
+  constructor(readonly payload: { key: string; value: string }) {}
+}
+
+export class UpdateVmLogsShowLastMessagesError implements Action {
+  readonly type = UserTagsActionTypes.UpdateVmLogsShowLastMessagesError;
+
+  constructor(readonly payload: { error: Error }) {}
+}
+
+// VM Logs show last minutes
+
+export class UpdateVmLogsShowLastMinutes implements Action {
+  readonly type = UserTagsActionTypes.UpdateVmLogsShowLastMinutes;
+
+  constructor(readonly payload: { value: number }) {}
+}
+
+export class UpdateVmLogsShowLastMinutesSuccess implements Action {
+  readonly type = UserTagsActionTypes.UpdateVmLogsShowLastMinutesSuccess;
+
+  constructor(readonly payload: { key: string; value: string }) {}
+}
+
+export class UpdateVmLogsShowLastMinutesError implements Action {
+  readonly type = UserTagsActionTypes.UpdateVmLogsShowLastMinutesError;
+
+  constructor(readonly payload: { error: Error }) {}
+}
+
 // Save password for all VMs
 
 export class SetSavePasswordForAllVMs implements Action {
@@ -399,6 +447,12 @@ export type UserTagsActionsUnion =
   | UpdateKeyboardLayoutForVms
   | UpdateKeyboardLayoutForVmsSuccess
   | UpdateKeyboardLayoutForVmsError
+  | UpdateVmLogsShowLastMessages
+  | UpdateVmLogsShowLastMessagesSuccess
+  | UpdateVmLogsShowLastMessagesError
+  | UpdateVmLogsShowLastMinutes
+  | UpdateVmLogsShowLastMinutesSuccess
+  | UpdateVmLogsShowLastMinutesError
   | SetSavePasswordForAllVMs
   | SetSavePasswordForAllVMsSuccess
   | SetSavePasswordForAllVMsError

diff --git a/src/app/root-store/server-data/user-tags/user-tags.effects.ts b/src/app/root-store/server-data/user-tags/user-tags.effects.ts
@@ -48,6 +48,12 @@ import {
   UpdateTimeFormat,
   UpdateTimeFormatError,
   UpdateTimeFormatSuccess,
+  UpdateVmLogsShowLastMessages,
+  UpdateVmLogsShowLastMessagesError,
+  UpdateVmLogsShowLastMessagesSuccess,
+  UpdateVmLogsShowLastMinutes,
+  UpdateVmLogsShowLastMinutesError,
+  UpdateVmLogsShowLastMinutesSuccess,
   UserTagsActionTypes,
 } from './user-tags.actions';
 import { TagService } from '../../../shared/services/tags/tag.service';
@@ -261,6 +267,32 @@ export class UserTagsEffects {
     }),
   );
 
+  @Effect()
+  updateVmLogsShowLastMessages$: Observable<Action> = this.actions$.pipe(
+    ofType<UpdateVmLogsShowLastMessages>(UserTagsActionTypes.UpdateVmLogsShowLastMessages),
+    map(action => `${action.payload.value}`),
+    mergeMap((value: string) => {
+      const key = userTagKeys.vmLogsShowLastMessages;
+      return this.upsertTag(key, value).pipe(
+        map(() => new UpdateVmLogsShowLastMessagesSuccess({ key, value })),
+        catchError(error => of(new UpdateVmLogsShowLastMessagesError({ error }))),
+      );
+    }),
+  );
+
+  @Effect()
+  updateVmLogsShowLastMinutes$: Observable<Action> = this.actions$.pipe(
+    ofType<UpdateVmLogsShowLastMinutes>(UserTagsActionTypes.UpdateVmLogsShowLastMinutes),
+    map(action => `${action.payload.value}`),
+    mergeMap((value: string) => {
+      const key = userTagKeys.vmLogsShowLastMinutes;
+      return this.upsertTag(key, value).pipe(
+        map(() => new UpdateVmLogsShowLastMinutesSuccess({ key, value })),
+        catchError(error => of(new UpdateVmLogsShowLastMinutesError({ error }))),
+      );
+    }),
+  );
+
   @Effect({ dispatch: false })
   updateCustomServiceOfferingParams$: Observable<any> = this.actions$.pipe(
     ofType<UpdateCustomServiceOfferingParams>(

diff --git a/src/app/root-store/server-data/user-tags/user-tags.reducer.ts b/src/app/root-store/server-data/user-tags/user-tags.reducer.ts
@@ -62,6 +62,8 @@ export function reducer(state = initialState, action: UserTagsActionsUnion): Use
     case UserTagsActionTypes.UpdateThemeSuccess:
     case UserTagsActionTypes.SetSPFAVMSuccess:
     case UserTagsActionTypes.UpdateKeyboardLayoutForVmsSuccess:
+    case UserTagsActionTypes.UpdateVmLogsShowLastMessagesSuccess:
+    case UserTagsActionTypes.UpdateVmLogsShowLastMinutesSuccess:
     case UserTagsActionTypes.IncrementLastVMIdSuccess: {
       const update: Update<Tag> = { id: action.payload.key, changes: action.payload };
       return adapter.updateOne(update, state);

diff --git a/src/app/root-store/server-data/user-tags/user-tags.selectors.ts b/src/app/root-store/server-data/user-tags/user-tags.selectors.ts
@@ -55,7 +55,7 @@ export const getIsSavePasswordForVMs = createSelector(
 
 export const getFirstDayOfWeek = createSelector(
   getUserTagsEntities,
-  (entities): DayOfWeek => +entities[userTagKeys.firstDayOfWeek].value as DayOfWeek,
+  (entities): DayOfWeek => Number(entities[userTagKeys.firstDayOfWeek].value) as DayOfWeek,
 );
 
 export const getInterfaceLanguage = createSelector(
@@ -65,12 +65,12 @@ export const getInterfaceLanguage = createSelector(
 
 export const getLastVMId = createSelector(
   getUserTagsEntities,
-  (entities): number => +entities[userTagKeys.lastVMId].value,
+  (entities): number => Number(entities[userTagKeys.lastVMId].value),
 );
 
 export const getSessionTimeout = createSelector(
   getUserTagsEntities,
-  (entities): number => +entities[userTagKeys.sessionTimeout].value,
+  (entities): number => Number(entities[userTagKeys.sessionTimeout].value),
 );
 
 export const getIsShowSystemTags = createSelector(
@@ -102,3 +102,13 @@ export const getKeyboardLayout = createSelector(
   getUserTagsEntities,
   (entities): KeyboardLayout => entities[userTagKeys.keyboardLayoutForVms].value as KeyboardLayout,
 );
+
+export const getVmLogsShowLastMessages = createSelector(
+  getUserTagsEntities,
+  (entities): number => Number(entities[userTagKeys.vmLogsShowLastMessages].value),
+);
+
+export const getVmLogsShowLastMinutes = createSelector(
+  getUserTagsEntities,
+  (entities): number => Number(entities[userTagKeys.vmLogsShowLastMinutes].value),
+);
diff --git a/src/app/root-store/server-data/user-tags/user-tags.state.ts b/src/app/root-store/server-data/user-tags/user-tags.state.ts
@@ -29,43 +29,45 @@ const initialIds = [
   userTagKeys.showSystemTags,
   userTagKeys.timeFormat,
   userTagKeys.theme,
+  userTagKeys.vmLogsShowLastMessages,
+  userTagKeys.vmLogsShowLastMinutes,
 ];
 
 const initialEntities = {
   [userTagKeys.askToCreateVM]: {
     key: userTagKeys.askToCreateVM,
-    value: defaultConfig.askToCreateVM.toString(),
+    value: String(defaultConfig.askToCreateVM),
   },
   [userTagKeys.askToCreateVolume]: {
     key: userTagKeys.askToCreateVolume,
-    value: defaultConfig.askToCreateVolume.toString(),
+    value: String(defaultConfig.askToCreateVolume),
   },
   [userTagKeys.savePasswordForAllVMs]: {
     key: userTagKeys.savePasswordForAllVMs,
     value:
       defaultConfig.savePasswordForAllVMs === null
         ? null
-        : defaultConfig.savePasswordForAllVMs.toString(),
+        : String(defaultConfig.savePasswordForAllVMs),
   },
   [userTagKeys.firstDayOfWeek]: {
     key: userTagKeys.firstDayOfWeek,
-    value: defaultConfig.defaultFirstDayOfWeek.toString(),
+    value: String(defaultConfig.defaultFirstDayOfWeek),
   },
   [userTagKeys.lang]: {
     key: userTagKeys.lang,
     value: defaultConfig.defaultInterfaceLanguage,
   },
   [userTagKeys.lastVMId]: {
     key: userTagKeys.lastVMId,
-    value: defaultConfig.lastVMId.toString(),
+    value: String(defaultConfig.lastVMId),
   },
   [userTagKeys.sessionTimeout]: {
     key: userTagKeys.sessionTimeout,
-    value: defaultConfig.sessionTimeout.toString(),
+    value: String(defaultConfig.sessionTimeout),
   },
   [userTagKeys.showSystemTags]: {
     key: userTagKeys.showSystemTags,
-    value: defaultConfig.showSystemTags.toString(),
+    value: String(defaultConfig.showSystemTags),
   },
   [userTagKeys.timeFormat]: {
     key: userTagKeys.timeFormat,
@@ -79,6 +81,14 @@ const initialEntities = {
     key: userTagKeys.keyboardLayoutForVms,
     value: defaultConfig.keyboardLayoutForVms,
   },
+  [userTagKeys.vmLogsShowLastMessages]: {
+    key: userTagKeys.vmLogsShowLastMessages,
+    value: String(defaultConfig.vmLogsShowLastMessages),
+  },
+  [userTagKeys.vmLogsShowLastMinutes]: {
+    key: userTagKeys.vmLogsShowLastMinutes,
+    value: String(defaultConfig.vmLogsShowLastMinutes),
+  },
 };
 
 export const initialState: UserTagsState = adapter.getInitialState({

diff --git a/src/app/settings/components/index.ts b/src/app/settings/components/index.ts
@@ -1,7 +1,12 @@
-export * from './secuirity-settings/security-settings.component';
+export * from './security-settings/security-settings.component';
 export * from './api-settings/api-settings.component';
 export * from './interface-settings/interface-settings.component';
 export * from './theme-selector/theme-selector.component';
 export * from './password-update-form/password-update-form.component';
 export * from './session-timeout/session-timeout.component';
 export * from './vm-settings/vm-settings.component';
+export * from './security-settings/security-settings.component';
+export * from './update-button-field/update-button-field-group.component';
+export * from './vm-logs-settings/vm-logs-messages/vm-logs-messages.component';
+export * from './vm-logs-settings/vm-logs-minutes/vm-logs-minutes.component';
+export * from './vm-logs-settings/vm-logs-settings.component';
diff --git a/src/app/settings/components/password-update-form/password-update-form.component.html b/src/app/settings/components/password-update-form/password-update-form.component.html
@@ -1,31 +1,29 @@
 <h3 class="no-margin">{{ 'SETTINGS.SECURITY.CHANGE_PASSWORD' | translate }}</h3>
 <form [formGroup]="passwordForm" (ngSubmit)="onPasswordChange()">
+  <cs-update-button-field-group>
+    <mat-form-field>
+      <input
+        matInput
+        formControlName="password"
+        type="password"
+        [placeholder]="'SETTINGS.SECURITY.NEW_PASSWORD' | translate"
+        [errorStateMatcher]="errorStateMatcher"
+      >
+    </mat-form-field>
 
-  <mat-form-field>
-    <input
-      matInput
-      formControlName="password"
-      type="password"
-      [placeholder]="'SETTINGS.SECURITY.NEW_PASSWORD' | translate"
-      [errorStateMatcher]="errorStateMatcher"
-    >
-  </mat-form-field>
+    <mat-form-field>
+      <input
+        matInput
+        formControlName="passwordRepeat"
+        type="password"
+        [placeholder]="'SETTINGS.SECURITY.REPEAT_PASSWORD' | translate"
+        [errorStateMatcher]="errorStateMatcher"
+      >
+      <mat-error>{{ 'SETTINGS.SECURITY.PASSWORD_DOES_NOT_MATCH' | translate }}</mat-error>
+    </mat-form-field>
 
-  <mat-form-field>
-    <input
-      matInput
-      formControlName="passwordRepeat"
-      type="password"
-      [placeholder]="'SETTINGS.SECURITY.REPEAT_PASSWORD' | translate"
-      [errorStateMatcher]="errorStateMatcher"
-    >
-    <mat-error>{{ 'SETTINGS.SECURITY.PASSWORD_DOES_NOT_MATCH' | translate }}</mat-error>
-  </mat-form-field>
-
-  <div class="update-button">
     <button mat-button type="submit" [disabled]="!passwordForm.valid">
       {{ 'COMMON.UPDATE' | translate }}
     </button>
-  </div>
-
+  </cs-update-button-field-group>
 </form>
diff --git a/src/app/settings/components/password-update-form/password-update-form.component.ts b/src/app/settings/components/password-update-form/password-update-form.component.ts
@@ -29,7 +29,7 @@ export class PasswordErrorStateMatcher implements ErrorStateMatcher {
   selector: 'cs-password-update-form',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './password-update-form.component.html',
-  styleUrls: ['./password-update-form.component.scss'],
+  styleUrls: ['../../styles/settings-section.scss'],
 })
 export class PasswordUpdateFormComponent {
   // Workaround for resetting form state. https://github.com/angular/material2/issues/4190

diff --git a/...settings/security-settings.component.html → ...settings/security-settings.component.html b/...settings/security-settings.component.html → ...settings/security-settings.component.html
diff --git a/...settings/security-settings.component.scss → ...settings/security-settings.component.scss b/...settings/security-settings.component.scss → ...settings/security-settings.component.scss
diff --git a/...y-settings/security-settings.component.ts → ...y-settings/security-settings.component.ts b/...y-settings/security-settings.component.ts → ...y-settings/security-settings.component.ts
diff --git a/src/app/settings/components/session-timeout/session-timeout.component.html b/src/app/settings/components/session-timeout/session-timeout.component.html
@@ -1,25 +1,26 @@
 <h3 class="no-margin nowrap">{{ 'SETTINGS.SECURITY.SESSION_TIMEOUT' | translate }}</h3>
-<mat-form-field>
-  <input
-    #timeoutField
-    matInput
-    type="number"
-    [value]="sessionTimeout"
-    min="0"
-    csMinValue="0"
-    [max]="maxSessionTimeout"
-    [csMaxValue]="maxSessionTimeout"
-    step="1"
-    required
-  >
-</mat-form-field>
 
-<div class="update-button">
+<cs-update-button-field-group>
+  <mat-form-field>
+    <input
+      #timeoutField
+      matInput
+      type="number"
+      [value]="sessionTimeout"
+      min="0"
+      csMinValue="0"
+      [max]="maxSessionTimeout"
+      [csMaxValue]="maxSessionTimeout"
+      step="1"
+      required
+    >
+  </mat-form-field>
+
   <button
     mat-button
     [disabled]="sessionTimeout == +timeoutField.value"
     (click)="updateSessionTimeout.emit(+timeoutField.value)"
   >
     {{ 'COMMON.UPDATE' | translate }}
   </button>
-</div>
+</cs-update-button-field-group>
diff --git a/src/app/settings/components/session-timeout/session-timeout.component.scss b/src/app/settings/components/session-timeout/session-timeout.component.scss
diff --git a/src/app/settings/components/session-timeout/session-timeout.component.ts b/src/app/settings/components/session-timeout/session-timeout.component.ts
@@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
   selector: 'cs-session-timeout',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'session-timeout.component.html',
-  styleUrls: ['./session-timeout.component.scss'],
+  styleUrls: ['../../styles/settings-section.scss'],
 })
 export class SessionTimeoutComponent {
   @Input()

diff --git a/src/app/settings/components/update-button-field/update-button-field-group.component.html b/src/app/settings/components/update-button-field/update-button-field-group.component.html
@@ -0,0 +1,5 @@
+<ng-content select="mat-form-field"></ng-content>
+
+<div class="update-button">
+  <ng-content select="button"></ng-content>
+</div>