From 7abd8860f9130bf96db4d7523ac80c841d809c10 Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Fri, 2 Oct 2020 18:59:47 +0200
Subject: [PATCH] Add Account Settings

Summary:
1. Remove existing Options dialog
   a) move SSH Key to Account Settings
   b) continue using existing REST endpoint: users/${id}/sshpublickeys
2. support following (local) settings via Redux-store:
   a) showNotifications (do not disturb)
   b) notificationSnoozeDuration (do not disturb for)
3. add typing for user settings related entities
4. in Settings use data-driven 3-way diff for change detection.
   Change is detected by comparing current content of Redux store
   with user changes(draft values) and base values(store content
   before at the beginning of user settings updates)
---
 packaging/ovirt-web-ui.war/WEB-INF/web.xml    |   2 +
 src/actions/index.js                          |  17 +-
 src/actions/options.js                        | 107 +++++++-
 src/actions/types.js                          |  24 ++
 src/components/OptionsDialog/actions.js       |  35 ---
 src/components/OptionsDialog/constants.js     |   4 -
 src/components/OptionsDialog/index.js         | 122 ---------
 src/components/OptionsDialog/reducer.js       |  15 --
 src/components/OptionsDialog/sagas.js         |  27 --
 src/components/Pages/index.js                 |   6 +
 src/components/Settings/Settings.js           | 140 ++++++++++
 src/components/Settings/SettingsBase.js       |  83 ++++++
 src/components/Settings/SettingsToolbar.js    |  53 ++++
 src/components/Settings/index.js              |   2 +
 src/components/Settings/style.css             |  63 +++++
 src/components/Toolbar/index.js               |   3 +
 src/components/UserSettings/GlobalSettings.js | 255 ++++++++++++++++++
 src/components/UserSettings/index.js          |   1 +
 src/components/UserSettings/style.css         |   3 +
 src/components/VmsPageHeader/UserMenu.js      |   4 -
 src/components/VmsPageHeader/index.js         |  12 +
 src/config.js                                 |   1 +
 src/constants/index.js                        |  12 +
 src/constants/pages.js                        |   1 +
 src/intl/index.js                             |   7 +-
 src/intl/localeWithFullName.json              |  13 +
 src/intl/messages.js                          |  33 ++-
 src/intl/translated-messages.json             |   8 -
 src/ovirtapi/index.js                         |  38 ++-
 src/ovirtapi/types.js                         |  32 ++-
 src/reducers/config.js                        |   4 +
 src/reducers/index.js                         |   2 -
 src/reducers/options.js                       |  81 ++++--
 src/routes.js                                 |  37 ++-
 src/sagas/background-refresh.js               |   5 +
 src/sagas/index.js                            |   4 +-
 src/sagas/login.js                            |   6 +-
 src/sagas/options.js                          | 118 ++++++++
 38 files changed, 1122 insertions(+), 258 deletions(-)
 create mode 100644 src/actions/types.js
 delete mode 100644 src/components/OptionsDialog/actions.js
 delete mode 100644 src/components/OptionsDialog/constants.js
 delete mode 100644 src/components/OptionsDialog/index.js
 delete mode 100644 src/components/OptionsDialog/reducer.js
 delete mode 100644 src/components/OptionsDialog/sagas.js
 create mode 100644 src/components/Settings/Settings.js
 create mode 100644 src/components/Settings/SettingsBase.js
 create mode 100644 src/components/Settings/SettingsToolbar.js
 create mode 100644 src/components/Settings/index.js
 create mode 100644 src/components/Settings/style.css
 create mode 100644 src/components/UserSettings/GlobalSettings.js
 create mode 100644 src/components/UserSettings/index.js
 create mode 100644 src/components/UserSettings/style.css
 create mode 100644 src/intl/localeWithFullName.json
 create mode 100644 src/sagas/options.js

diff --git a/packaging/ovirt-web-ui.war/WEB-INF/web.xml b/packaging/ovirt-web-ui.war/WEB-INF/web.xml
index cbdcdfe4a7..b2b0a32765 100644
--- a/packaging/ovirt-web-ui.war/WEB-INF/web.xml
+++ b/packaging/ovirt-web-ui.war/WEB-INF/web.xml
@@ -83,6 +83,7 @@
         <servlet-name>logout</servlet-name>
         <servlet-class>org.ovirt.engine.core.aaa.servlet.SsoLogoutServlet</servlet-class>
     </servlet>
+
     <servlet-mapping>
         <servlet-name>logout</servlet-name>
         <url-pattern>/sso/logout</url-pattern>
@@ -124,6 +125,7 @@
         <servlet-name>index</servlet-name>
         <url-pattern>/vm/*</url-pattern>
         <url-pattern>/pool/*</url-pattern>
+        <url-pattern>/settings/*</url-pattern>
     </servlet-mapping>
 
     <!-- Default page to serve -->
diff --git a/src/actions/index.js b/src/actions/index.js
index dc51215272..5f921a54bc 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,10 +1,11 @@
-import AppConfiguration from '../config'
+import AppConfiguration from '_/config'
 import {
   APP_CONFIGURED,
   CHANGE_PAGE,
   CHECK_TOKEN_EXPIRED,
   GET_BY_PAGE,
   GET_OPTION,
+  GET_USER,
   GET_USER_GROUPS,
   MANUAL_REFRESH,
   SET_ADMINISTRATOR,
@@ -13,6 +14,7 @@ import {
   SET_DEFAULT_TIMEZONE,
   SET_USB_AUTOSHARE,
   SET_USB_FILTER,
+  SET_USER,
   SET_USER_FILTER_PERMISSION,
   SET_USER_GROUPS,
   SET_USER_SESSION_TIMEOUT_INTERVAL,
@@ -194,6 +196,19 @@ export function getUserGroups () {
   return { type: GET_USER_GROUPS }
 }
 
+export function setUser ({ user }) {
+  return {
+    type: SET_USER,
+    payload: {
+      user,
+    },
+  }
+}
+
+export function getUser () {
+  return { type: GET_USER }
+}
+
 export function setCpuTopologyOptions ({
   maxNumberOfSockets,
   maxNumberOfCores,
diff --git a/src/actions/options.js b/src/actions/options.js
index da4ae91ed3..cfa4cd553e 100644
--- a/src/actions/options.js
+++ b/src/actions/options.js
@@ -1,10 +1,24 @@
+// @flow
+
+import type { UserOptionsType, SshKeyType } from '_/ovirtapi/types'
+import type { LoadUserOptionsActionType, SaveGlobalOptionsActionType } from '_/actions/types'
+
 import {
   GET_CONSOLE_OPTIONS,
   SAVE_CONSOLE_OPTIONS,
   SET_CONSOLE_OPTIONS,
+  GET_SSH_KEY,
+  SAVE_GLOBAL_OPTIONS,
+  SAVE_SSH_KEY,
+  SET_SSH_KEY,
+  SET_OPTION,
+  LOAD_USER_OPTIONS,
+  LOAD_USER_OPTIONS_IN_PROGRESS,
+  LOAD_USER_OPTIONS_FINISHED,
+  PERSIST_OPTIONS,
 } from '_/constants'
 
-export function setConsoleOptions ({ vmId, options }) {
+export function setConsoleOptions ({ vmId, options }: Object): Object {
   return {
     type: SET_CONSOLE_OPTIONS,
     payload: {
@@ -14,7 +28,7 @@ export function setConsoleOptions ({ vmId, options }) {
   }
 }
 
-export function getConsoleOptions ({ vmId }) {
+export function getConsoleOptions ({ vmId }: Object): Object {
   return {
     type: GET_CONSOLE_OPTIONS,
     payload: {
@@ -23,7 +37,7 @@ export function getConsoleOptions ({ vmId }) {
   }
 }
 
-export function saveConsoleOptions ({ vmId, options }) {
+export function saveConsoleOptions ({ vmId, options }: Object): Object {
   return {
     type: SAVE_CONSOLE_OPTIONS,
     payload: {
@@ -32,3 +46,90 @@ export function saveConsoleOptions ({ vmId, options }) {
     },
   }
 }
+
+export function getSSHKey ({ userId }: Object): Object {
+  return {
+    type: GET_SSH_KEY,
+    payload: {
+      userId,
+    },
+  }
+}
+
+export function setSSHKey ({ key, id }: SshKeyType): Object {
+  return {
+    type: SET_SSH_KEY,
+    payload: {
+      key,
+      id,
+    },
+  }
+}
+
+export function setOption ({ key, value }: Object): Object {
+  return {
+    type: SET_OPTION,
+    payload: {
+      key,
+      value,
+    },
+  }
+}
+
+export function loadUserOptions (userOptions: UserOptionsType): LoadUserOptionsActionType {
+  return {
+    type: LOAD_USER_OPTIONS,
+    payload: {
+      userOptions,
+    },
+  }
+}
+
+export function loadingUserOptionsInProgress (): Object {
+  return {
+    type: LOAD_USER_OPTIONS_IN_PROGRESS,
+  }
+}
+
+export function loadingUserOptionsFinished (): Object {
+  return {
+    type: LOAD_USER_OPTIONS_FINISHED,
+  }
+}
+
+export function saveGlobalOptions ({ values: { sshKey, language, showNotifications, notificationSnoozeDuration, updateRate } = {} }: Object, { transactionId }: Object): SaveGlobalOptionsActionType {
+  return {
+    type: SAVE_GLOBAL_OPTIONS,
+    payload: {
+      sshKey,
+      language,
+      showNotifications,
+      notificationSnoozeDuration,
+      updateRate,
+    },
+    meta: {
+      transactionId,
+    },
+  }
+}
+
+export function saveSSHKey ({ key, userId, sshId }: Object): Object {
+  return {
+    type: SAVE_SSH_KEY,
+    payload: {
+      key,
+      userId,
+      sshId,
+    },
+  }
+}
+
+export function persistUserOptions ({ options, userId }: Object): Object {
+  return {
+    type: PERSIST_OPTIONS,
+    payload: {
+      options,
+      userId,
+    },
+  }
+}
diff --git a/src/actions/types.js b/src/actions/types.js
new file mode 100644
index 0000000000..9b863d3e29
--- /dev/null
+++ b/src/actions/types.js
@@ -0,0 +1,24 @@
+// @flow
+import * as C from '_/constants'
+import type { UserOptionsType } from '_/ovirtapi/types'
+
+export type LoadUserOptionsActionType = {
+  type: C.LOAD_USER_OPTIONS,
+  payload: {
+    userOptions: UserOptionsType
+  }
+}
+
+export type SaveGlobalOptionsActionType = {
+  type: C.SAVE_GLOBAL_OPTIONS,
+  payload: {|
+    updateRate?: number,
+    language?: string,
+    showNotifications?: boolean,
+    notificationSnoozeDuration?: number,
+    sshKey?: string
+  |},
+  meta: {|
+    transactionId: string
+  |}
+}
diff --git a/src/components/OptionsDialog/actions.js b/src/components/OptionsDialog/actions.js
deleted file mode 100644
index 318852942e..0000000000
--- a/src/components/OptionsDialog/actions.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { SET_SSH_KEY, GET_SSH_KEY, SAVE_SSH_KEY, SET_UNLOADED } from './constants'
-
-export function setSSHKey ({ key, id }) {
-  return {
-    type: SET_SSH_KEY,
-    payload: {
-      key,
-      id,
-    },
-  }
-}
-
-export function saveSSHKey ({ key, userId, sshId }) {
-  return {
-    type: SAVE_SSH_KEY,
-    payload: {
-      key,
-      userId,
-      sshId,
-    },
-  }
-}
-
-export function getSSHKey ({ userId }) {
-  return {
-    type: GET_SSH_KEY,
-    payload: {
-      userId,
-    },
-  }
-}
-
-export function setUnloaded () {
-  return { type: SET_UNLOADED }
-}
diff --git a/src/components/OptionsDialog/constants.js b/src/components/OptionsDialog/constants.js
deleted file mode 100644
index c7b52ef247..0000000000
--- a/src/components/OptionsDialog/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const GET_SSH_KEY = 'OPTIONS_DIALOG_HEADER_GET_SSH_KEY'
-export const SAVE_SSH_KEY = 'OPTIONS_DIALOG_HEADER_SAVE_SSH_KEY'
-export const SET_SSH_KEY = 'OPTIONS_DIALOG_HEADER_SET_SSH_KEY'
-export const SET_UNLOADED = 'OPTIONS_DIALOG_HEADER_SET_UNLOADED'
diff --git a/src/components/OptionsDialog/index.js b/src/components/OptionsDialog/index.js
deleted file mode 100644
index beef439759..0000000000
--- a/src/components/OptionsDialog/index.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-
-import { Modal } from 'patternfly-react'
-
-import FieldHelp from '../FieldHelp/index'
-
-import {
-  getSSHKey,
-  saveSSHKey,
-} from './actions'
-
-import { msg } from '_/intl'
-
-class OptionsDialog extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      sshKey: props.optionsDialog.get('sshKey') || '',
-      openModal: false,
-    }
-    this.onSSHKeyChange = this.onSSHKeyChange.bind(this)
-    this.onSaveClick = this.onSaveClick.bind(this)
-    this.handleModalOpen = this.handleModalOpen.bind(this)
-  }
-
-  handleModalOpen () {
-    if (this.props.userId) {
-      this.props.getSSH()
-    }
-    this.setState({ 'sshKey': 'Loading...', openModal: true })
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.optionsDialog.get('loaded')) {
-      this.setState({ 'sshKey': nextProps.optionsDialog.get('sshKey') })
-    }
-  }
-
-  onSSHKeyChange (event) {
-    this.setState({ sshKey: event.target.value })
-  }
-
-  onSaveClick () {
-    this.props.onSave({ key: this.state.sshKey, sshId: this.props.optionsDialog.get('sshId') })
-    this.setState({ openModal: false })
-  }
-
-  render () {
-    const { oVirtApiVersion } = this.props
-    const idPrefix = `optionsdialog`
-
-    let content = (
-      <form>
-        <div className='form-group'>
-          <FieldHelp content={msg.publicSSHKey()} text={msg.SSHKey()} />
-          <textarea
-            type='text'
-            className='form-control'
-            rows='7'
-            onChange={this.onSSHKeyChange}
-            value={this.state.sshKey || ''}
-            id={`${idPrefix}-sshkey`} />
-        </div>
-      </form>
-    )
-
-    if (!this.props.userId) {
-      const apiVersion = oVirtApiVersion && oVirtApiVersion.get('major')
-        ? `${oVirtApiVersion.get('major')}.${oVirtApiVersion.get('minor')}`
-        : 'unknown'
-
-      content = (
-        <div>
-          <p id={`${idPrefix}-lowversion`}>{msg.lowOVirtVersion({ apiVersion })}</p>
-        </div>
-      )
-    }
-    return (
-      <React.Fragment>
-        <a id='usermenu-options' href='#' onClick={this.handleModalOpen}>{msg.options()}</a>
-        { this.state.openModal &&
-          <Modal onHide={() => this.setState({ openModal: false })} show>
-            <Modal.Header>
-              <Modal.CloseButton onClick={() => this.setState({ openModal: false })} />
-              <Modal.Title id={`${idPrefix}-title`}>{msg.options()}</Modal.Title>
-            </Modal.Header>
-            <Modal.Body id={`${idPrefix}-body`}>
-              {content}
-            </Modal.Body>
-            <Modal.Footer>
-              {this.props.userId ? <button type='button' onClick={this.onSaveClick} className='btn btn-default' id={`${idPrefix}-button-save`}>{msg.save()}</button> : null}
-              <button onClick={() => this.setState({ openModal: false })} type='button' className='btn btn-danger' id={`${idPrefix}-button-cancel`}>
-                {msg.cancel()}
-              </button>
-            </Modal.Footer>
-          </Modal>
-        }
-      </React.Fragment>
-    )
-  }
-}
-
-OptionsDialog.propTypes = {
-  userId: PropTypes.string,
-  optionsDialog: PropTypes.object.isRequired,
-  oVirtApiVersion: PropTypes.object,
-  getSSH: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-}
-
-export default connect(
-  (state) => ({
-    optionsDialog: state.OptionsDialog,
-    oVirtApiVersion: state.config.get('oVirtApiVersion'),
-  }),
-  (dispatch, { userId }) => ({
-    getSSH: () => dispatch(getSSHKey({ userId })),
-    onSave: ({ key, sshId }) => dispatch(saveSSHKey({ key, userId, sshId })),
-  })
-)(OptionsDialog)
diff --git a/src/components/OptionsDialog/reducer.js b/src/components/OptionsDialog/reducer.js
deleted file mode 100644
index f72d9f0f7a..0000000000
--- a/src/components/OptionsDialog/reducer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Immutable from 'immutable'
-import { SET_SSH_KEY, SET_UNLOADED } from './constants'
-
-export function reducer (state, action) {
-  state = state || Immutable.fromJS({ sshKey: null, sshId: undefined, loaded: false })
-
-  switch (action.type) {
-    case SET_SSH_KEY:
-      return state.set('sshKey', action.payload.key).set('sshId', action.payload.id).set('loaded', true)
-    case SET_UNLOADED:
-      return state.set('loaded', false)
-    default:
-      return state
-  }
-}
diff --git a/src/components/OptionsDialog/sagas.js b/src/components/OptionsDialog/sagas.js
deleted file mode 100644
index 0fed882db3..0000000000
--- a/src/components/OptionsDialog/sagas.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { put, takeEvery } from 'redux-saga/effects'
-import { SAVE_SSH_KEY, GET_SSH_KEY } from './constants'
-import { setSSHKey, setUnloaded } from './actions'
-import { callExternalAction } from '_/sagas/utils'
-import Api from '_/ovirtapi'
-
-function* saveSSHKey (action) {
-  yield callExternalAction('saveSSHKey', Api.saveSSHKey, action)
-}
-
-function* getSSHKey (action) {
-  yield put(setUnloaded())
-  const result = yield callExternalAction('getSSHKey', Api.getSSHKey, action)
-  if (result.error) {
-    return
-  }
-  if (result.ssh_public_key && result.ssh_public_key.length > 0) {
-    yield put(setSSHKey(Api.SSHKeyToInternal({ sshKey: result.ssh_public_key[0] })))
-  } else {
-    yield put(setSSHKey(Api.SSHKeyToInternal({ sshKey: '' })))
-  }
-}
-
-export default [
-  takeEvery(SAVE_SSH_KEY, saveSSHKey),
-  takeEvery(GET_SSH_KEY, getSSHKey),
-]
diff --git a/src/components/Pages/index.js b/src/components/Pages/index.js
index 0ae5ce5ef1..87d0d12421 100644
--- a/src/components/Pages/index.js
+++ b/src/components/Pages/index.js
@@ -9,6 +9,7 @@ import VmsList from '../VmsList'
 import VmDetails from '../VmDetails'
 import VmConsole from '../VmConsole'
 import Handler404 from '_/Handler404'
+import { GlobalSettings } from '../UserSettings'
 
 /**
  * Route component (for PageRouter) to view the list of VMs and Pools
@@ -17,6 +18,10 @@ const VmsListPage = () => {
   return <VmsList />
 }
 
+const GlobalSettingsPage = () => {
+  return <GlobalSettings />
+}
+
 /**
  * Route component (for PageRouter) to view a VM's details
  */
@@ -105,4 +110,5 @@ export {
   VmConsolePageConnected as VmConsolePage,
   VmDetailsPageConnected as VmDetailsPage,
   VmsListPage,
+  GlobalSettingsPage,
 }
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
new file mode 100644
index 0000000000..daf81a01f3
--- /dev/null
+++ b/src/components/Settings/Settings.js
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import SettingsToolbar from './SettingsToolbar'
+import NavigationPrompt from 'react-router-navigation-prompt'
+import NavigationConfirmationModal from '../NavigationConfirmationModal'
+import CounterAlert from '_/components/CounterAlert'
+import { generateUnique } from '_/helpers'
+import { msg } from '_/intl'
+import style from './style.css'
+
+const changedInTheMeantime = ({ currentValues = {}, baseValues = {}, draftValues = {}, sentValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    currentValues[name] !== baseValues[name] && !(
+      // draft is the same as 3rd party change - no risk of losing data
+      currentValues[name] === draftValues[name] ||
+      // it's your own update but user modified draft in the meantime
+      currentValues[name] === sentValues[name]))
+}
+
+const pendingUserChanges = ({ currentValues = {}, draftValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    currentValues[name] !== draftValues[name] &&
+    draftValues[name] !== undefined
+  )
+}
+
+const changedInLastTransaction = ({ currentValues = {}, sentValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    currentValues[name] === sentValues[name] && currentValues[name] !== undefined)
+}
+
+const stillPending = ({ currentValues = {}, sentValues = {} }) => {
+  return Object.keys(currentValues).filter(name =>
+    sentValues[name] !== undefined &&
+      currentValues[name] !== sentValues[name])
+}
+
+const Settings = ({ draftValues, onSave, lastTransactionId, onCancel,
+  translatedLabels, baseValues, sentValues, currentValues,
+  resetBaseValues, children }) => {
+  const [transactionId, setTransactionId] = useState(null)
+
+  const handleSave = () => {
+    const saveFields = pendingUserChanges({ currentValues, draftValues }).reduce((acc, cur) => ({ ...acc, [cur]: draftValues[cur] }), {})
+    const id = generateUnique('Settings-save_')
+    setTransactionId(id)
+    onSave(saveFields, id)
+  }
+
+  const conflictingChanges = changedInTheMeantime({ currentValues, baseValues, draftValues, sentValues }).map(field => translatedLabels[field])
+  const pendingChanges = pendingUserChanges({ currentValues, draftValues })
+  const stillPendingAfterSave = stillPending({ currentValues, sentValues })
+  const changedInLastTrans = changedInLastTransaction({ currentValues, sentValues })
+
+  if (conflictingChanges.length) {
+    console.warn(`Store content changed while editing settings for fields: ${JSON.stringify(conflictingChanges)}`)
+  }
+
+  const fullSuccess = changedInLastTrans.length !== 0 &&
+   stillPendingAfterSave.length === 0 &&
+   transactionId === lastTransactionId
+  const completeFailure = changedInLastTrans.length === 0 &&
+   stillPendingAfterSave.length !== 0 &&
+   transactionId === lastTransactionId
+  const partialSuccess = changedInLastTrans.length !== 0 &&
+   stillPendingAfterSave.length !== 0 &&
+   transactionId === lastTransactionId
+
+  const [showFullSuccess, setShowFullSuccess] = useState(false)
+  const [showCompleteFailure, setShowCompleteFailure] = useState(false)
+  const [partialSave, setShowPartialSave] = useState({ show: false, fields: [] })
+
+  useEffect(() => {
+    const partialSaveState = {
+      show: partialSuccess,
+      fields: pendingChanges.map(e => <p key={translatedLabels[e]}>{translatedLabels[e]}</p>),
+    }
+    if (partialSaveState.show) { setShowPartialSave(partialSaveState) }
+    if (completeFailure) { setShowCompleteFailure(completeFailure) }
+    if (fullSuccess) { setShowFullSuccess(fullSuccess) }
+    if (fullSuccess || completeFailure || partialSuccess) {
+      // the transaction has finished - remove tracking id
+      setTransactionId(null)
+      // reset to new base level that contains last modifications
+      resetBaseValues()
+    }
+  }, [partialSuccess, completeFailure, fullSuccess, pendingChanges])
+
+  return <React.Fragment>
+    <NavigationPrompt when={(currentLocation, nextLocation) => !!pendingChanges.length}>
+      {({ isActive, onConfirm, onCancel }) => (
+        <NavigationConfirmationModal show={isActive} onYes={onConfirm} onNo={onCancel} />
+      )}
+    </NavigationPrompt>
+    <div className={showFullSuccess || partialSave.show || showCompleteFailure ? style['alert-container'] : null}>
+      { showFullSuccess &&
+        <CounterAlert
+          timeout={10}
+          title={msg.changesSavedSuccesfully()}
+          type='success'
+          onDismiss={() => setShowFullSuccess(false)}
+        />
+      }
+      { partialSave.show &&
+        <CounterAlert
+          timeout={10}
+          type='error'
+          title={<p>{msg.failedToSaveChangesToFields()}</p>}
+          onDismiss={() => setShowPartialSave({ show: false, fields: [] })} >
+          {partialSave.fields}
+        </CounterAlert>
+      }
+      { showCompleteFailure &&
+        <CounterAlert
+          timeout={10}
+          type='error'
+          title={msg.failedToSaveChanges()}
+          onDismiss={() => setShowCompleteFailure(false)}
+        />
+      }
+    </div>
+    <SettingsToolbar onSave={handleSave} onCancel={onCancel} enableSave={!!pendingChanges.length} />
+    {children}
+  </React.Fragment>
+}
+Settings.propTypes = {
+  draftValues: PropTypes.object.isRequired,
+  currentValues: PropTypes.object.isRequired,
+  baseValues: PropTypes.object.isRequired,
+  sentValues: PropTypes.object.isRequired,
+  translatedLabels: PropTypes.object.isRequired,
+  lastTransactionId: PropTypes.string,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  resetBaseValues: PropTypes.func.isRequired,
+}
+
+export default Settings
diff --git a/src/components/Settings/SettingsBase.js b/src/components/Settings/SettingsBase.js
new file mode 100644
index 0000000000..0675817945
--- /dev/null
+++ b/src/components/Settings/SettingsBase.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  Card,
+  Col,
+  ControlLabel,
+  FormGroup,
+} from 'patternfly-react'
+import { InfoTooltip } from '_/components/tooltips'
+
+import style from './style.css'
+
+const LabelCol = ({ children, tooltip, fieldPath, ...props }) => {
+  return <Col componentClass={ControlLabel} {...props}>
+    { children } { tooltip && <InfoTooltip tooltip={tooltip} id={`${fieldPath}-info-tooltip`} /> }
+  </Col>
+}
+LabelCol.propTypes = {
+  children: PropTypes.node.isRequired,
+  tooltip: PropTypes.string,
+  fieldPath: PropTypes.string,
+}
+
+const Item = ({ title, isActive, onClick }) => {
+  return <li className={`list-group-item ${isActive && 'active'}`}>
+    <a href='#' onClick={(e) => { e.preventDefault(); onClick() }}>
+      <span className='list-group-item-value'>{title}</span>
+      <div className='badge-container-pf' />
+    </a>
+  </li>
+}
+
+Item.propTypes = {
+  title: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+}
+
+const Section = ({ name, section }) => (
+  <React.Fragment>
+    <h3>
+      <a id={name} />
+      {section.title}
+      { section.tooltip && <InfoTooltip id={`${name}-info-tooltip`} tooltip={section.tooltip} /> }
+    </h3>
+    { section.fields.map((field) => (
+      <FormGroup key={field.title} className={style['settings-field']}>
+        <LabelCol fieldPath={`${name}-${field.title}`} tooltip={field.tooltip} sm={3} className={style['field-label']}>
+          { field.title }
+        </LabelCol>
+        <Col sm={9}>
+          {field.body}
+        </Col>
+      </FormGroup>
+    )) }
+  </React.Fragment>
+)
+
+Section.propTypes = {
+  name: PropTypes.string.isRequired,
+  section: PropTypes.object.isRequired,
+}
+
+const SettingsBase = ({ sections }) => {
+  const existingSections = Object.entries(sections).filter(([key, section]) => !!section)
+  return (
+    <div className={style['search-content-box']}>
+      { existingSections.map(([key, section]) => (
+        <Card key={key} className={style['main-content']}>
+          <div className={style['main-content-container']}>
+            <Section name={key} section={section} />
+          </div>
+        </Card>
+      ))
+      }
+    </div>
+  )
+}
+SettingsBase.propTypes = {
+  sections: PropTypes.object.isRequired,
+}
+
+export default SettingsBase
diff --git a/src/components/Settings/SettingsToolbar.js b/src/components/Settings/SettingsToolbar.js
new file mode 100644
index 0000000000..b8008f0800
--- /dev/null
+++ b/src/components/Settings/SettingsToolbar.js
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import { Toolbar } from 'patternfly-react'
+import { msg } from '_/intl'
+
+import style from './style.css'
+
+const SettingsToolbar = ({ onSave, onCancel, enableSave }) => {
+  const [container] = useState(document.createElement('div'))
+  useEffect(() => {
+    const root = document.getElementById('settings-toolbar')
+    if (root) {
+      root.appendChild(container)
+    }
+    return () => root && root.removeChild(container)
+  })
+
+  return ReactDOM.createPortal(
+    <Toolbar className={style['toolbar']}>
+      <Toolbar.RightContent>
+        <button
+          onClick={e => {
+            e.preventDefault()
+            onCancel()
+          }}
+          className='btn btn-default'
+        >
+          {msg.cancel()}
+        </button>
+        <button
+          disabled={!enableSave}
+          onClick={e => {
+            e.preventDefault()
+            onSave()
+          }}
+          className='btn btn-primary'
+        >
+          {msg.save()}
+        </button>
+      </Toolbar.RightContent>
+    </Toolbar>,
+    container
+  )
+}
+
+SettingsToolbar.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  enableSave: PropTypes.bool,
+}
+
+export default SettingsToolbar
diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js
new file mode 100644
index 0000000000..59a1266a5f
--- /dev/null
+++ b/src/components/Settings/index.js
@@ -0,0 +1,2 @@
+export { default as Settings } from './Settings'
+export { default as SettingsBase } from './SettingsBase'
diff --git a/src/components/Settings/style.css b/src/components/Settings/style.css
new file mode 100644
index 0000000000..c55cbc6944
--- /dev/null
+++ b/src/components/Settings/style.css
@@ -0,0 +1,63 @@
+.settings-box {
+    display: flex;
+    margin-top: 20px;
+}
+
+.navigation-content {
+    padding: 0;
+    margin-right: 30px;
+    display: table;
+}
+
+.search-content-box {
+    flex-grow: 1;
+    height: min-content;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.main-content {
+    margin-top: 20px;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.main-content-container {
+    display: grid;
+}
+
+.field-label {
+    text-align: right;
+}
+
+.settings-field {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    border-bottom: solid 1px #0000001f;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 0;
+}
+
+.alert-container {
+    position: absolute;
+    top: 5%;
+    left: 25%;
+    width: 50%;
+}
+
+.toolbar :global(.toolbar-pf.row) {
+    padding-bottom: 10px;
+    margin-left: 0;
+}
+
+.toolbar :global(.toolbar-pf-action-right) button {
+    margin-right: 10px;
+}
+
+:global(#settings-toolbar) {
+    margin-left: -20px;
+}
diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
index ba9afae5d8..596a1e68a0 100644
--- a/src/components/Toolbar/index.js
+++ b/src/components/Toolbar/index.js
@@ -73,8 +73,11 @@ const VmConsoleToolbarConnected = connect(
   })
 )(VmConsoleToolbar)
 
+const SettingsToolbar = () => <div id='settings-toolbar' />
+
 export {
   VmDetailToolbarConnected as VmDetailToolbar,
   VmConsoleToolbarConnected as VmConsoleToolbar,
   VmsListToolbar,
+  SettingsToolbar,
 }
diff --git a/src/components/UserSettings/GlobalSettings.js b/src/components/UserSettings/GlobalSettings.js
new file mode 100644
index 0000000000..28b79dc8f0
--- /dev/null
+++ b/src/components/UserSettings/GlobalSettings.js
@@ -0,0 +1,255 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { connect } from 'react-redux'
+import { push } from 'connected-react-router'
+import { saveGlobalOptions } from '_/actions'
+import { FormControl, Switch } from 'patternfly-react'
+import { msg } from '_/intl'
+import style from './style.css'
+
+import { Settings, SettingsBase } from '../Settings'
+import SelectBox from '../SelectBox'
+import moment from 'moment'
+
+class GlobalSettings extends Component {
+  dontDisturbList = [
+    {
+      id: 10,
+      value: moment.duration(10, 'minutes').humanize(),
+    },
+    {
+      id: 60,
+      value: moment.duration(1, 'hours').humanize(),
+    },
+    {
+      id: 60 * 24,
+      value: moment.duration(1, 'days').humanize(),
+    },
+    {
+      id: Number.MAX_SAFE_INTEGER,
+      value: msg.sessionDuration(),
+    },
+  ]
+
+  updateRateList = [
+    {
+      id: 30,
+      value: msg.every30Seconds(),
+    },
+    {
+      id: 60,
+      value: msg.everyMinute(),
+    },
+    {
+      id: 120,
+      value: msg.every2Minute(),
+    },
+    {
+      id: 300,
+      value: msg.every5Minute(),
+    },
+  ]
+
+  constructor (props) {
+    super(props)
+    /**
+     * Typical flow (happy path):
+     * 1. at the begining:
+     *    baseValues == draftValues == currentValues
+     * 2. after user edit:
+     *    baseValues == currentValues
+     *    BUT
+     *    baseValues != draftValues
+     * 3. after 'save' but before action finished:
+     *    baseValues == currentValues
+     *    AND
+     *    baseValue + sentValues == draftValues
+     * 4. successful 'save' triggers re-basing (back to step 1.)
+     */
+    this.state = {
+      // editable by the user (used by the widgets)
+      // represent the current state of user work
+      draftValues: {
+        ...props.currentValues,
+      },
+      // state before editing
+      // allows to detect changes by comparing values (baseValues - draftValues == changes)
+      // note that it's perfectly legal to have: baseValues != currentValues
+      // store can change i.e. after fetching data from the server
+      // or after some action i.e. 'do not disturb' expired
+      baseValues: {
+        ...props.currentValues,
+      },
+      // values submitted using 'save' action
+      // inlcude both remote(server and store) or local(store only)
+      sentValues: {},
+      // required for error handling: the case of partial success(only some fields saved)
+      // the alert shows the names of the fields that were NOT saved
+      translatedLabels: {
+        sshKey: msg.sshKey(),
+        language: msg.language(),
+        showNotifications: msg.dontDisturb(),
+        notificationSnoozeDuration: msg.dontDisturbFor(),
+        updateRate: msg.uiRefresh(),
+      },
+    }
+    this.handleCancel = this.handleCancel.bind(this)
+    this.buildSections = this.buildSections.bind(this)
+    this.saveOptions = this.saveOptions.bind(this)
+    this.resetBaseValues = this.resetBaseValues.bind(this)
+    this.onChange = this.onChange.bind(this)
+  }
+
+  resetBaseValues () {
+    const { currentValues } = this.props
+    this.setState({
+      sentValues: {},
+      baseValues: { ...currentValues },
+    })
+  }
+
+  saveOptions (values, transactionId) {
+    this.props.saveOptions(values, transactionId)
+    this.setState({
+      sentValues: { ...values },
+    })
+  }
+
+  handleCancel () {
+    this.props.goToMainPage()
+  }
+
+  onChange (field) {
+    return (value) => {
+      this.setState((state) => ({
+        draftValues: {
+          ...state.draftValues,
+          [field]: value,
+        },
+      }))
+    }
+  }
+
+  buildSections (onChange) {
+    const { draftValues, translatedLabels } = this.state
+    const { config } = this.props
+    const idPrefix = 'global-user-settings'
+    return {
+      general: {
+        title: msg.general(),
+        fields: [
+          {
+            title: msg.username(),
+            body: <span>{config.userName}</span>,
+          },
+          {
+            title: msg.email(),
+            body: <span>{config.email}</span>,
+          },
+          {
+            title: translatedLabels.sshKey,
+            tooltip: msg.sshKeyTooltip(),
+            body: (
+              <div className={style['half-width']}>
+                <FormControl
+                  id={`${idPrefix}-ssh-key`}
+                  componentClass='textarea'
+                  onChange={e => onChange('sshKey')(e.target.value)}
+                  value={draftValues.sshKey || ''}
+                  rows={8}
+                />
+              </div>
+            ),
+          },
+        ],
+      },
+      notifications: {
+        title: msg.notifications(),
+        tooltip: msg.notificationSettingsAffectAllNotifications(),
+        fields: [
+          {
+            title: translatedLabels.showNotifications,
+            body: (
+              <Switch
+                id={`${idPrefix}-dont-disturb`}
+                bsSize='normal'
+                title='normal'
+                value={!draftValues.showNotifications}
+                onChange={(e, dontDisturb) => {
+                  onChange('showNotifications')(!dontDisturb)
+                }}
+              />
+            ),
+          },
+          {
+            title: translatedLabels.notificationSnoozeDuration,
+            body: (
+              <div className={style['half-width']}>
+                <SelectBox
+                  id={`${idPrefix}-dont-disturb-for`}
+                  items={this.dontDisturbList}
+                  selected={draftValues.notificationSnoozeDuration}
+                  onChange={onChange('notificationSnoozeDuration')}
+                  disabled={draftValues.showNotifications}
+                />
+              </div>
+            ),
+          },
+        ],
+      },
+    }
+  }
+
+  render () {
+    const { lastTransactionId, currentValues } = this.props
+    const { draftValues, baseValues, sentValues, translatedLabels } = this.state
+
+    return (
+      <div className='container'>
+        <Settings
+          draftValues={draftValues}
+          baseValues={baseValues}
+          currentValues={currentValues}
+          sentValues={sentValues}
+          translatedLabels={translatedLabels}
+          lastTransactionId={lastTransactionId}
+          resetBaseValues={this.resetBaseValues}
+          onSave={this.saveOptions}
+          onCancel={this.handleCancel}
+        >
+          <SettingsBase sections={this.buildSections(this.onChange)} />
+        </Settings>
+      </div>
+    )
+  }
+}
+GlobalSettings.propTypes = {
+  currentValues: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+  lastTransactionId: PropTypes.string,
+  saveOptions: PropTypes.func.isRequired,
+  goToMainPage: PropTypes.func.isRequired,
+}
+
+export default connect(
+  ({ options, config }) => ({
+    config: {
+      userName: config.getIn(['user', 'name']),
+      email: config.getIn(['user', 'email']),
+    },
+    currentValues: {
+      sshKey: options.getIn(['ssh', 'key']),
+      language: options.getIn(['global', 'language']),
+      showNotifications: options.getIn(['global', 'showNotifications']),
+      notificationSnoozeDuration: options.getIn(['global', 'notificationSnoozeDuration']),
+      updateRate: options.getIn(['global', 'updateRate']),
+    },
+    lastTransactionId: options.getIn(['lastTransactions', 'global', 'transactionId'], ''),
+  }),
+
+  (dispatch) => ({
+    saveOptions: (values, transactionId) => dispatch(saveGlobalOptions({ values }, { transactionId })),
+    goToMainPage: () => dispatch(push('/')),
+  })
+)(GlobalSettings)
diff --git a/src/components/UserSettings/index.js b/src/components/UserSettings/index.js
new file mode 100644
index 0000000000..5df2867c77
--- /dev/null
+++ b/src/components/UserSettings/index.js
@@ -0,0 +1 @@
+export { default as GlobalSettings } from './GlobalSettings'
diff --git a/src/components/UserSettings/style.css b/src/components/UserSettings/style.css
new file mode 100644
index 0000000000..41ba692426
--- /dev/null
+++ b/src/components/UserSettings/style.css
@@ -0,0 +1,3 @@
+.half-width {
+    width: 50%;
+}
\ No newline at end of file
diff --git a/src/components/VmsPageHeader/UserMenu.js b/src/components/VmsPageHeader/UserMenu.js
index a6699989cf..a87796721a 100644
--- a/src/components/VmsPageHeader/UserMenu.js
+++ b/src/components/VmsPageHeader/UserMenu.js
@@ -6,7 +6,6 @@ import { logout } from '_/actions'
 
 import { msg } from '_/intl'
 import AboutDialog from '../About'
-import OptionsDialog from '../OptionsDialog'
 import { Tooltip } from '_/components/tooltips'
 
 const UserMenu = ({ config, onLogout }) => {
@@ -19,9 +18,6 @@ const UserMenu = ({ config, onLogout }) => {
         </a>
       </Tooltip>
       <ul className='dropdown-menu'>
-        <li>
-          <OptionsDialog userId={config.getIn(['user', 'id'])} />
-        </li>
         <li>
           <AboutDialog />
         </li>
diff --git a/src/components/VmsPageHeader/index.js b/src/components/VmsPageHeader/index.js
index 8b57496111..b1ff9848af 100644
--- a/src/components/VmsPageHeader/index.js
+++ b/src/components/VmsPageHeader/index.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { Icon } from 'patternfly-react'
 
 import VmUserMessages from '../VmUserMessages'
 import Bellicon from '../VmUserMessages/Bellicon'
@@ -32,6 +34,16 @@ const VmsPageHeader = ({ onRefresh }) => {
               </a>
             </Tooltip>
           </li>
+          <li>
+            <Tooltip id={`${idPrefix}-tooltip`} tooltip={msg.accountSettings()} placement='bottom'>
+              <Link to='/settings' className='nav-item-iconic'>
+                <Icon
+                  name='cog'
+                  type='fa'
+                />
+              </Link>
+            </Tooltip>
+          </li>
           <UserMenu />
           <Bellicon handleclick={() => setShow(!show)} />
         </ul>
diff --git a/src/config.js b/src/config.js
index 34b040e3c0..7c8d038c0c 100644
--- a/src/config.js
+++ b/src/config.js
@@ -12,6 +12,7 @@ const AppConfiguration = {
   applicationLogoutURL: '', // url to invalidate the user's SSO token ('' skips SSO token invalidation)
   pageLimit: 20,
   schedulerFixedDelayInSeconds: 60,
+  notificationSnoozeDurationInMinutes: 10,
 
   consoleClientResourcesURL: 'https://www.ovirt.org/documentation/admin-guide/virt/console-client-resources/',
   cockpitPort: '9090',
diff --git a/src/constants/index.js b/src/constants/index.js
index 14f99e3ee5..9f09f40121 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -21,6 +21,7 @@ export const DELAYED_REMOVE_ACTIVE_REQUEST = 'DELAYED_REMOVE_ACTIVE_REQUEST'
 export const DELETE_VM_NIC = 'DELETE_VM_NIC'
 export const DISMISS_USER_MSG = 'DISMISS_USER_MSG'
 export const DISMISS_EVENT = 'DISMISS_EVENT'
+export const DONT_DISTURB = 'DONT_DISTURB'
 export const DOWNLOAD_CONSOLE_VM = 'DOWNLOAD_CONSOLE_VM'
 export const EDIT_VM = 'EDIT_VM'
 export const EDIT_VM_DISK = 'EDIT_VM_DISK'
@@ -37,14 +38,19 @@ export const GET_BY_PAGE = 'GET_BY_PAGE'
 export const GET_CONSOLE_OPTIONS = 'GET_CONSOLE_OPTIONS'
 export const GET_ISO_FILES = 'GET_ISO_FILES'
 export const GET_OPTION = 'GET_OPTION'
+export const GET_SSH_KEY = 'GET_SSH_KEY'
 export const GET_POOL = 'GET_POOL'
 export const GET_POOLS = 'GET_POOLS'
 export const GET_RDP_VM = 'GET_RDP_VM'
 export const GET_ROLES = 'GET_ROLES'
+export const GET_USER = 'GET_USER'
 export const GET_USER_GROUPS = 'GET_USER_GROUPS'
 export const GET_VM = 'GET_VM'
 export const GET_VM_CDROM = 'GET_VM_CDROM'
 export const GET_VMS = 'GET_VMS'
+export const LOAD_USER_OPTIONS = 'LOAD_USER_OPTIONS'
+export const LOAD_USER_OPTIONS_FINISHED = 'LOAD_USER_OPTIONS_FINISHED'
+export const LOAD_USER_OPTIONS_IN_PROGRESS = 'LOAD_USER_OPTIONS_IN_PROGRESS'
 export const LOGIN = 'LOGIN'
 export const LOGIN_FAILED = 'LOGIN_FAILED'
 export const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL'
@@ -52,6 +58,7 @@ export const LOGOUT = 'LOGOUT'
 export const MANUAL_REFRESH = 'MANUAL_REFRESH'
 export const MAX_VM_MEMORY_FACTOR = 4 // see Edit VM flow; magic constant to stay aligned with Web Admin
 export const OPEN_CONSOLE_VM = 'OPEN_CONSOLE_VM'
+export const PERSIST_OPTIONS = 'PERSIST_OPTIONS'
 export const POOL_ACTION_IN_PROGRESS = 'POOL_ACTION_IN_PROGRESS'
 export const REDIRECT = 'REDIRECT'
 export const REFRESH_DATA = 'REFRESH_DATA'
@@ -70,6 +77,8 @@ export const REMOVE_VMS = 'REMOVE_VMS'
 export const RESTART_VM = 'RESTART_VM'
 export const SAVE_CONSOLE_OPTIONS = 'SAVE_CONSOLE_OPTIONS'
 export const SAVE_FILTERS = 'SAVE_FILTERS'
+export const SAVE_GLOBAL_OPTIONS = 'SAVE_GLOBAL_OPTIONS'
+export const SAVE_SSH_KEY = 'SAVE_SSH_KEY'
 export const SELECT_POOL_DETAIL = 'SELECT_POOL_DETAIL'
 export const SELECT_VM_DETAIL = 'SELECT_VM_DETAIL'
 export const SET_ADMINISTRATOR = 'SET_ADMINISTRATOR'
@@ -88,13 +97,16 @@ export const SET_DEFAULT_TIMEZONE = 'SET_DEFAULT_TIMEZONE'
 export const SET_FILTERS = 'SET_FILTERS'
 export const SET_HOSTS = 'SET_HOSTS'
 export const SET_OPERATING_SYSTEMS = 'SET_OPERATING_SYSTEMS'
+export const SET_OPTION = 'SET_OPTION'
 export const SET_OVIRT_API_VERSION = 'SET_OVIRT_API_VERSION'
 export const SET_ROLES = 'SET_ROLES'
+export const SET_SSH_KEY = 'SET_SSH_KEY'
 export const SET_STORAGE_DOMAIN_FILES = 'SET_STORAGE_DOMAIN_FILES'
 export const SET_STORAGE_DOMAINS = 'SET_STORAGE_DOMAINS'
 export const SET_TEMPLATES = 'SET_TEMPLATES'
 export const SET_USB_AUTOSHARE = 'SET_USB_AUTOSHARE'
 export const SET_USB_FILTER = 'SET_USB_FILTER'
+export const SET_USER = 'SET_USER'
 export const SET_USER_FILTER_PERMISSION = 'SET_USER_FILTER_PERMISSION'
 export const SET_USER_GROUPS = 'SET_USER_GROUPS'
 export const SET_USER_SESSION_TIMEOUT_INTERVAL = 'SET_USER_SESSION_TIMEOUT_INTERVAL'
diff --git a/src/constants/pages.js b/src/constants/pages.js
index e28e69fd12..ad2a897b9f 100644
--- a/src/constants/pages.js
+++ b/src/constants/pages.js
@@ -4,3 +4,4 @@ export const DETAIL_PAGE_TYPE = 'detailPage'
 export const LIST_PAGE_TYPE = 'listPage'
 export const NO_REFRESH_TYPE = 'noRefreshPage'
 export const EMPTY_VNIC_PROFILE_ID = ''
+export const SETTINGS_PAGE_TYPE = 'settingsPage'
diff --git a/src/intl/index.js b/src/intl/index.js
index 0af8cdbcab..634122fdc6 100644
--- a/src/intl/index.js
+++ b/src/intl/index.js
@@ -5,16 +5,13 @@ import { initIntl } from './initialize'
 
 import { messages, type MessageIdType, type MessageType } from './messages'
 import translatedMessages from './translated-messages.json'
+import localeWithFullName from './localeWithFullName.json'
 
 export const DEFAULT_LOCALE: string = 'en'
 
 export const DUMMY_LOCALE: string = 'aa' // NOTE: Used for development and testing
 
-export const BASE_LOCALE_SET: Set<string> = new Set([
-  DEFAULT_LOCALE,
-  'cs', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'pt-BR', 'zh-CN',
-])
-
+export const BASE_LOCALE_SET: Set<string> = new Set(Object.keys(localeWithFullName))
 /**
  * Currently selected locale
  */
diff --git a/src/intl/localeWithFullName.json b/src/intl/localeWithFullName.json
new file mode 100644
index 0000000000..ed25afc399
--- /dev/null
+++ b/src/intl/localeWithFullName.json
@@ -0,0 +1,13 @@
+{
+  "cs" : "Česky",
+  "de": "Deutsch - Deutschland",
+  "en":"U.S. English",
+  "es":"español - España",
+  "fr":"français - France",
+  "it":"italiano - Italia",
+  "ja":"日本語 - 日本",
+  "ko":"한국어 - 대한민국",
+  "pt-BR":"português do Brasil",
+  "zh-CN":"中文（简体） - 中国"
+}
+
diff --git a/src/intl/messages.js b/src/intl/messages.js
index 4901bb6b61..753a9b9b70 100644
--- a/src/intl/messages.js
+++ b/src/intl/messages.js
@@ -23,6 +23,7 @@ export const messages: { [messageId: string]: MessageType } = {
   aboutDialogDocumentationText: 'Documentation',
   aboutDialogReportIssuesLink: 'Please report issues on {link}',
   aboutDialogVersion: 'Version {version}',
+  accountSettings: 'Account Settings',
   actionFailed: '{action} failed',
   actionFeedbackShutdownVm: 'Request to shutdown VM - {VmName} has been received.',
   actionFeedbackRestartVm: 'Request to restart VM - {VmName} has been received.',
@@ -65,6 +66,10 @@ export const messages: { [messageId: string]: MessageType } = {
   cd: 'CD',
   cdCanOnlyChangeWhenVmRunning: 'CD can only be changed when the VM is running.',
   cdromBoot: 'CD-ROM',
+  changesSavedSuccesfully: {
+    message: 'Changes to settings saved succesfully!',
+    description: 'Message displayed when all user settings have been saved successfully',
+  },
   clear: 'Clear',
   clearAll: 'Clear all',
   clearAllFilters: 'Clear All Filters',
@@ -218,6 +223,8 @@ export const messages: { [messageId: string]: MessageType } = {
   disks: 'Disks',
   diskSizeHasToBeAPositiveInteger: 'Disk size has to be a positive integer.',
   displayAll: 'Display all',
+  dontDisturb: 'Do not disturb',
+  dontDisturbFor: 'Do not disturb for',
   downloadVirtManagerMSI: 'Download the MSI from virt-manager.org',
   downloadVVFile: 'Download VV File',
   downloadedSPICE: 'The VV file has been downloaded. Select the file to view the SPICE console on a desktop viewer.',
@@ -229,6 +236,7 @@ export const messages: { [messageId: string]: MessageType } = {
   editDisk: 'Edit Disk',
   editNic: 'Edit NIC',
   editVm: 'Edit the VM',
+  email: 'Email',
   empty: 'Empty',
   emptySnapshotDescription: 'Snapshot description is missing.',
   enterVmDescription: 'Enter VM Description (optional)',
@@ -317,6 +325,10 @@ export const messages: { [messageId: string]: MessageType } = {
     description: 'VM is not responding. One of states of a virtual machine. Other are e.g. Up, Down, Powering-Up',
   },
   errorWhileCreatingNewDisk: 'Error while creating new disk:',
+  every30Seconds: 'Every 30 seconds',
+  everyMinute: 'Every minute',
+  every2Minute: 'Every 2 minutes',
+  every5Minute: 'Every 5 minutes',
   failedToChangeVmIcon: 'Failed to change VM icon',
   failedToChangeVmIconToDefault: 'Failed to change VM icon to default',
   failedToGetVmConsole: 'Failed to get the VM console',
@@ -329,6 +341,14 @@ export const messages: { [messageId: string]: MessageType } = {
   failedToRetrieveVmDetails: 'Failed to retrieve VM details',
   failedToRetrieveVmDisks: 'Failed to retrieve VM disks',
   failedToRetrieveVmIcon: 'Failed to retrieve VM icon',
+  failedToSaveChangesToFields: {
+    message: 'Failed to save changes to:',
+    description: 'Some fields have not been saved. List of fields is displayed below in a horizontal list',
+  },
+  failedToSaveChanges: {
+    message: 'Failed to save changes to settings',
+    description: 'No fields have been saved',
+  },
   failedToShutdownVm: 'Failed to shutdown the VM',
   failedToStartVm: 'Failed to start the VM',
   failedToSuspendVm: 'Failed to suspend the VM',
@@ -339,6 +359,7 @@ export const messages: { [messageId: string]: MessageType } = {
   freeBrowsers: 'Free browsers:',
   fullScreen: 'Full Screen',
   fullyQualifiedDomainName: 'Fully Qualified Domain Name (FQDN) of the virtual machine. Please note, guest agent must be installed within the virtual machine to retrieve this value.',
+  general: 'General',
   gitHub: 'GitHub',
   globalErrorBoundaryTitle: 'Sorry, VM Portal is currently having some issues.',
   globalErrorBoundaryDescription: 'Please refresh the page or log out and log back in. If the issue persists, please report a bug on {bugUrl}',
@@ -369,6 +390,7 @@ export const messages: { [messageId: string]: MessageType } = {
   ipAddress: { message: 'IP Address', description: 'Label for IP addresses reported by VM guest agent' },
   isPersistMemorySnapshot: 'Content of the memory of the virtual machine is included in the snapshot.',
   itemDoesntExistOrDontHavePermissions: 'The item doesn\'t exist or you do not have the permissions to view it.',
+  language: 'Language',
   less: {
     message: 'less',
     description: 'more/less pair used to control collapsible long listing',
@@ -461,8 +483,9 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'This field is only available when the VM is running and the guest agent is installed and running.',
     description: 'Tooltip displayed next to \'notAvailable\' for fields that require the VM to be up and a running guest agent',
   },
-  notifications: 'Notifications',
   notEditableForPoolsOrPoolVms: 'Not editable for Pools or pool VMs.',
+  notifications: 'Notifications',
+  notificationSettingsAffectAllNotifications: 'Notification settings applied here affect all notifications.',
   noVmAvailable: 'No VM available.',
   noVmAvailableForLoggedUser: 'No VM is available for the logged user.',
   off: 'Off',
@@ -501,6 +524,8 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Refresh',
     description: 'Reload data from server',
   },
+  refreshInterval: 'Refresh Interval',
+  refreshIntervalTooltip: 'Interval at which each screen gets refreshed.',
   remoteViewerConnection: 'Remote Viewer Connection',
   remoteViewerAvailable: 'Remote Viewer is available for most operating systems. To install it, search for it in GNOME Software or run the following:',
   remove: 'Remove',
@@ -530,6 +555,7 @@ export const messages: { [messageId: string]: MessageType } = {
     message: 'Your session is about to timeout due to inactivity.',
     description: 'Primary message for SessionTimeout modal component',
   },
+  sessionDuration: 'session duration',
   shutdown: 'Shutdown',
   shutdownStatelessPoolVm: 'This virtual machine belongs to {poolName} and is stateless so any data that is currently attached to the virtual machine will be lost if it is shutdown. The virtual machine will be returned to {poolName} if shutdown.',
   shutdownVm: 'Shutdown the VM',
@@ -550,7 +576,8 @@ export const messages: { [messageId: string]: MessageType } = {
   snapshotsTooltip: 'VM snapshots.',
   sshAuthorizedKeys: 'SSH Authorized Keys',
   sshAuthorizedKeysTooltip: 'New line separated public SSH keys allowing for passwordless remote login.',
-  SSHKey: 'SSH Key',
+  sshKey: 'SSH Key',
+  sshKeyTooltip: 'This public key provides access to the guest serial console via SSH authentication.',
   spiceConsole: 'SPICE Console',
   startVmOnCreation: 'Start virtual machine on creation',
   state: 'State',
@@ -590,6 +617,7 @@ export const messages: { [messageId: string]: MessageType } = {
   totalMemoryVmWillBeEquippedWith: 'Total memory the virtual machine will be equipped with.',
   troubleWithFindingPage: 'We\'re having trouble finding that page.',
   typeOfWorkloadVmConfigurationIsOptimizedFor: 'Type of workload the virtual machine configuration is optimized for.',
+  uiRefresh: 'UI refresh',
   uniqueNameOfTheVirtualMachine: 'Unique name of the virtual machine.',
   unknown: {
     message: 'unknown',
@@ -655,6 +683,7 @@ export const messages: { [messageId: string]: MessageType } = {
   utilizationNoNetStats: 'Network utilization is not currently available for this VM.',
   useBrowserBelow: 'Please use one of the browsers below.',
   useCtrlAltEnd: 'Use Ctrl+Alt+End',
+  username: 'Username',
   usingRemoteViewer: 'Using a remote viewer relies on a downloaded .vv file.',
   vcpuTopology: 'VCPU Topology',
   viewAllVirtualMachines: 'View All Virtual Machines',
diff --git a/src/intl/translated-messages.json b/src/intl/translated-messages.json
index 3288aa801d..ada07378a4 100644
--- a/src/intl/translated-messages.json
+++ b/src/intl/translated-messages.json
@@ -1,6 +1,5 @@
 {
   "cs": {
-    "SSHKey": "SSH Klíč",
     "about": "O aplikaci",
     "actionFailed": "{action} se nezdařilo",
     "actualStateVmIsIn": "Skutečný stav virtuálního stroje.",
@@ -155,7 +154,6 @@
     "yes": "Ano"
   },
   "de": {
-    "SSHKey": "SSH-Schlüssel",
     "about": "Über",
     "aboutDialogDocumentationLink": "Weiter Informationen finden Sie unter {link}",
     "aboutDialogDocumentationText": "Dokumentation",
@@ -607,7 +605,6 @@
     "youHaveNoAllowedVnicProfiles": "Sie können NICs nicht erstellen oder bearbeiten, da Sie nicht die Berechtigung haben, vNIC-Profile im Data-Center der VM zu verwenden."
   },
   "es": {
-    "SSHKey": "Clave SSH",
     "about": "Acerca de",
     "aboutDialogDocumentationLink": "Para más información, consulte {link}.",
     "aboutDialogDocumentationText": "Documentación",
@@ -1059,7 +1056,6 @@
     "youHaveNoAllowedVnicProfiles": "No puede crear o editar las NIC porque no tiene permiso para usar ningún perfil vNIC en el centro de datos de la MV."
   },
   "fr": {
-    "SSHKey": "Clé SSH",
     "about": "À propos de",
     "aboutDialogDocumentationLink": "pour plus d'informations voir {link}",
     "aboutDialogDocumentationText": "Documentation",
@@ -1598,7 +1594,6 @@
     "yes": "Si"
   },
   "ja": {
-    "SSHKey": "ユーザーの公開鍵",
     "about": "バージョン情報",
     "aboutDialogDocumentationLink": "詳細は {link} を参照してください",
     "aboutDialogDocumentationText": "ドキュメント",
@@ -2050,7 +2045,6 @@
     "youHaveNoAllowedVnicProfiles": "仮想マシンのデータセンターで vNIC プロファイルを使用するパーミッションがないので、NIC を作成または編集することはできません。"
   },
   "ko": {
-    "SSHKey": "SSH 키 ",
     "about": "정보 ",
     "aboutDialogDocumentationLink": "자세한 내용은 {link}를 참조하십시오",
     "aboutDialogDocumentationText": "문서",
@@ -2502,7 +2496,6 @@
     "youHaveNoAllowedVnicProfiles": "가상 머신 데이터 센터에서 vNIC 프로파일을 사용할 수있는 권한이 없으므로 NIC를 만들거나 편집할 수 없습니다."
   },
   "pt-BR": {
-    "SSHKey": "Chave SSH",
     "about": "Sobre",
     "aboutDialogDocumentationLink": "Para mais informações, consulte {link}",
     "aboutDialogDocumentationText": "Documentação",
@@ -2954,7 +2947,6 @@
     "youHaveNoAllowedVnicProfiles": "Não é possível criar ou editar NICs porque você não tem permissão para usar perfis de vNIC no data center da MV."
   },
   "zh-CN": {
-    "SSHKey": "SSH 密钥",
     "about": "关于",
     "aboutDialogDocumentationLink": "更多信息 {link}",
     "aboutDialogDocumentationText": "文档",
diff --git a/src/ovirtapi/index.js b/src/ovirtapi/index.js
index 132abc43ba..a3119b3903 100644
--- a/src/ovirtapi/index.js
+++ b/src/ovirtapi/index.js
@@ -71,7 +71,10 @@ const OvirtApi = {
     assertLogin({ methodName: 'icon' })
     return httpGet({ url: `${AppConfiguration.applicationContext}/api/icons/${id}` })
   },
-
+  user ({ userId }: { userId: string }): Promise<Object> {
+    assertLogin({ methodName: 'user' })
+    return httpGet({ url: `${AppConfiguration.applicationContext}/api/users/${userId}` })
+  },
   groups ({ userId }: { userId: string }): Promise<Object> {
     assertLogin({ methodName: 'groups' })
     return httpGet({ url: `${AppConfiguration.applicationContext}/api/users/${userId}/groups` })
@@ -482,28 +485,53 @@ const OvirtApi = {
     assertLogin({ methodName: 'saveSSHKey' })
     const input = JSON.stringify({ content: key })
     if (sshId && key) {
-      // update existing key
+      /**
+       * Update existing key.
+       * Expected result: { user: <> , content: <>, id: <>, href: <> }
+       */
       return httpPut({
         url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys/${sshId}`,
         input,
       })
     } else if (sshId && !key) {
-      // delete existing key
+      /**
+       * Delete existing key.
+       * Expected result: { status: 'complete'}
+      */
       return httpDelete({
         url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys/${sshId}`,
         input: '',
       })
     } else {
-      // create new key
+      /**
+       * Create new key.
+       * Expected result from POST: { status: 'complete'}
+       *
+       * Since POST method does not return the newly created key/key_id we need to
+       * fetch it imemdiately after (successful) creation.
+       */
       return httpPost({
         url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys`,
         input,
-      })
+      }).then(() => OvirtApi.getSSHKey({ userId }))
     }
   },
+
   getSSHKey ({ userId }: { userId: string }): Promise<Object> {
     assertLogin({ methodName: 'getSSHKey' })
+    // Expected result from GET: { ssh_public_key : [ { user: <> , content: <>, id: <>, href: <> }]}
+    // return empty key if there are no keys
     return httpGet({ url: `${AppConfiguration.applicationContext}/api/users/${userId}/sshpublickeys` })
+      .then(({ ssh_public_key: [firstKey = {}] = [] }) => firstKey)
+  },
+
+  persistUserOptions ({ options, userId }: Object): Promise<Object> {
+    assertLogin({ methodName: 'persistUserOptions' })
+    const input = JSON.stringify(options)
+    return httpPut({
+      url: `${AppConfiguration.applicationContext}/api/users/${userId}`,
+      input,
+    })
   },
 
   /**
diff --git a/src/ovirtapi/types.js b/src/ovirtapi/types.js
index b5e0c275b8..12bb384bb0 100644
--- a/src/ovirtapi/types.js
+++ b/src/ovirtapi/types.js
@@ -2,7 +2,6 @@
 //
 // Types used in the API and the types used internal to the App.
 //
-
 export type ApiVmType = Object
 export type VmType = Object
 
@@ -149,7 +148,10 @@ export type ApiIconType = Object
 export type IconType = Object
 
 export type ApiSshKeyType = Object
-export type SshKeyType = Object
+export type SshKeyType = {
+  key: string,
+  id: string
+}
 
 export type ApiVmConsolesType = Object
 export type VmConsolesType = Object
@@ -157,6 +159,32 @@ export type VmConsolesType = Object
 export type ApiVmSessionsType = Object
 export type VmSessionsType = Object
 
+export type ApiUserType = Object
+
+export type GlobalUserSettingsType = {|
+  // merging logic assumes thee is no nested object
+  updateRate: number,
+  language: string,
+  showNotifications?: boolean,
+  notificationSnoozeDuration?: number
+|}
+
+export type UserOptionsType = {|
+  global: GlobalUserSettingsType,
+  ssh?: SshKeyType,
+  lastTransactions: { global?: { transactionId: string } },
+  consoleOptions: {[vmId: string]: { autoconnect?: boolean}},
+  loadingFinished: boolean
+|}
+
+export type UserType = {
+  userName: string,
+  lastName: string,
+  email: string,
+  principal: string,
+  receivedOptions?: Object
+}
+
 export type ApiPermissionType = {
   role: {
     id: string,
diff --git a/src/reducers/config.js b/src/reducers/config.js
index 84ad1792cd..63aa4e90ed 100644
--- a/src/reducers/config.js
+++ b/src/reducers/config.js
@@ -12,6 +12,7 @@ import {
   SET_OVIRT_API_VERSION,
   SET_USB_AUTOSHARE,
   SET_USB_FILTER,
+  SET_USER,
   SET_USER_FILTER_PERMISSION,
   SET_USER_GROUPS,
   SET_USER_SESSION_TIMEOUT_INTERVAL,
@@ -95,6 +96,9 @@ const config = actionReducer(initialState, {
   [SET_WEBSOCKET] (state, { payload: { websocket } }) {
     return state.set('websocket', Immutable.fromJS(websocket))
   },
+  [SET_USER] (state, { payload: { user } }) {
+    return state.mergeDeep({ user })
+  },
   [SET_USER_GROUPS] (state, { payload: { groups } }) {
     return state.set('userGroups', groups)
   },
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 1e14bf377a..17e2d573bc 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -17,7 +17,6 @@ import consoles from './consoles'
 import pendingTasks from './pendingTasks'
 import roles from './roles'
 
-import { reducer as OptionsDialog } from '../components/OptionsDialog/reducer'
 import NewDiskDialog from '../components/NewDiskDialog/reducers'
 
 export default combineReducers({
@@ -38,6 +37,5 @@ export default combineReducers({
   pendingTasks,
   roles,
 
-  OptionsDialog,
   NewDiskDialog,
 })
diff --git a/src/reducers/options.js b/src/reducers/options.js
index db0a343e37..28cd076c51 100644
--- a/src/reducers/options.js
+++ b/src/reducers/options.js
@@ -1,24 +1,75 @@
-import Immutable from 'immutable'
-import { SET_CONSOLE_OPTIONS } from '_/constants'
+// @flow
+
+import { fromJS } from 'immutable'
+
+import {
+  SET_CONSOLE_OPTIONS,
+  SET_SSH_KEY,
+  SET_OPTION,
+  LOAD_USER_OPTIONS,
+  LOAD_USER_OPTIONS_IN_PROGRESS,
+  LOAD_USER_OPTIONS_FINISHED,
+} from '_/constants'
 import { actionReducer } from './utils'
+import { locale } from '_/intl'
+import AppConfiguration from '_/config'
+import type { UserOptionsType } from '_/ovirtapi/types'
+import type { LoadUserOptionsActionType } from '_/actions/types'
 
-function setOptions ({ state, type, options }) {
-  const optionsObj = {}
-  optionsObj[type] = options
-  return state.mergeIn(['options'], optionsObj)
+const defaultOptions: UserOptionsType = {
+  global: {
+    updateRate: AppConfiguration.schedulerFixedDelayInSeconds,
+    language: locale,
+    showNotifications: true,
+    notificationSnoozeDuration: AppConfiguration.notificationSnoozeDurationInMinutes,
+  },
+  ssh: undefined,
+  lastTransactions: {},
+  consoleOptions: {},
+  loadingFinished: false,
 }
 
-const initialState = Immutable.fromJS({
-  options: {
-    consoleOptions: {}, // It contains vmId: { autoConnect: boolean }
-  },
-})
+const initialState = fromJS({ ...defaultOptions })
 
 const options = actionReducer(initialState, {
-  [SET_CONSOLE_OPTIONS] (state, { payload: { vmId, options } }) {
-    const optionsTemp = {}
-    optionsTemp[vmId] = options
-    return setOptions({ state, type: 'consoleOptions', options: optionsTemp })
+  [SET_CONSOLE_OPTIONS] (clientState: any, { payload: { vmId, options } }: any): any {
+    return clientState.setIn(['consoleOptions', vmId], options)
+  },
+  [LOAD_USER_OPTIONS_IN_PROGRESS]: (clientState: any, action: any) => {
+    return clientState.setIn(['loadingFinished'], false)
+  },
+  [LOAD_USER_OPTIONS_FINISHED]: (clientState: any, action: any) => {
+    return clientState.setIn(['loadingFinished'], true)
+  },
+  [LOAD_USER_OPTIONS]: (clientState: any, action: LoadUserOptionsActionType) => {
+    const serverState = fromJS(action.payload.userOptions || {})
+
+    const choosePrevIfNextUndefined = (prev, next, key) => {
+      return next === undefined ? prev : next
+    }
+
+    const merged = clientState.mergeWith((client, server, key) => {
+      if (key === 'global') {
+        // choose server property if it exists
+        // but fallback to client's defaults if missing
+        return client.mergeWith(choosePrevIfNextUndefined, server)
+      }
+
+      if (['ssh', 'lastTransactions', 'consoleOptions', 'loadingFinished'].includes(key)) {
+        return client
+      }
+
+      // overwrite all other properties
+      return server
+    }, serverState)
+
+    return merged
+  },
+  [SET_OPTION] (state: any, { payload: { key, value } }: any): any {
+    return state.setIn(key, fromJS(value))
+  },
+  [SET_SSH_KEY] (state: any, { payload: { key, id } }: any): any {
+    return state.setIn(['ssh'], fromJS({ key: key || '', id }))
   },
 })
 
diff --git a/src/routes.js b/src/routes.js
index 75272c26b5..b08167781d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,12 +1,29 @@
 import React from 'react'
 
-import { DETAIL_PAGE_TYPE, LIST_PAGE_TYPE, CONSOLE_PAGE_TYPE, NO_REFRESH_TYPE } from '_/constants'
-import { msg } from '_/intl'
-
 import PageRouter from './components/PageRouter'
+
 import Handler404 from './Handler404'
-import { VmDetailToolbar, VmConsoleToolbar, VmsListToolbar } from './components/Toolbar'
-import { VmDetailsPage, VmsListPage, VmConsolePage } from './components/Pages'
+import {
+  VmDetailToolbar,
+  VmConsoleToolbar,
+  VmsListToolbar,
+  SettingsToolbar,
+} from './components/Toolbar'
+import {
+  VmDetailsPage,
+  VmsListPage,
+  GlobalSettingsPage,
+  VmConsolePage,
+} from './components/Pages'
+
+import { msg } from '_/intl'
+import {
+  DETAIL_PAGE_TYPE,
+  LIST_PAGE_TYPE,
+  CONSOLE_PAGE_TYPE,
+  NO_REFRESH_TYPE,
+  SETTINGS_PAGE_TYPE,
+} from '_/constants'
 
 /**
  * Function get vms object, and return routes object
@@ -52,6 +69,16 @@ export default function getRoutes (vms) {
         ],
       },
 
+      {
+        path: '/settings',
+        exact: true,
+        title: msg.accountSettings(),
+        component: GlobalSettingsPage,
+        toolbars: SettingsToolbar,
+        isToolbarFullWidth: true,
+        type: SETTINGS_PAGE_TYPE,
+      },
+
       {
         title: '404',
         component: Handler404,
diff --git a/src/sagas/background-refresh.js b/src/sagas/background-refresh.js
index 7470bed4b4..10ac72d7f7 100644
--- a/src/sagas/background-refresh.js
+++ b/src/sagas/background-refresh.js
@@ -1,3 +1,7 @@
+import {
+  loadUserOptions,
+} from './options'
+
 import {
   all,
   call,
@@ -64,6 +68,7 @@ const pagesRefreshers = {
   [C.DETAIL_PAGE_TYPE]: refreshDetailPage,
   [C.CREATE_PAGE_TYPE]: refreshCreatePage,
   [C.CONSOLE_PAGE_TYPE]: refreshConsolePage,
+  [C.SETTINGS_PAGE_TYPE]: loadUserOptions,
 }
 
 function* getIdsByType (type) {
diff --git a/src/sagas/index.js b/src/sagas/index.js
index 09ed73c128..b03b3e2aae 100644
--- a/src/sagas/index.js
+++ b/src/sagas/index.js
@@ -12,10 +12,10 @@ import { push } from 'connected-react-router'
 import Api, { Transforms } from '_/ovirtapi'
 import { saveToLocalStorage } from '_/storage'
 
+import sagasOptions from './options'
 import sagasRefresh from './background-refresh'
 import sagasDisks from './disks'
 import sagasLogin from './login'
-import sagasOptionsDialog from '_/components/OptionsDialog/sagas'
 import sagasRoles from './roles'
 import sagasStorageDomains from './storageDomains'
 import sagasVmChanges from './vmChanges'
@@ -575,9 +575,9 @@ export function* rootSaga () {
 
     // Sagas from Components
     ...sagasDisks,
-    ...sagasOptionsDialog,
     ...sagasRoles,
     ...sagasStorageDomains,
+    ...sagasOptions,
     ...sagasVmChanges,
     ...sagasVmSnapshots,
   ])
diff --git a/src/sagas/login.js b/src/sagas/login.js
index 5bb89d47eb..6c409184a6 100644
--- a/src/sagas/login.js
+++ b/src/sagas/login.js
@@ -55,9 +55,12 @@ import { fetchRoles } from './roles'
 import { fetchServerConfiguredValues } from './server-configs'
 import { fetchDataCentersAndStorageDomains, fetchIsoFiles } from './storageDomains'
 import { loadIconsFromLocalStorage } from './osIcons'
-import { transformAndPermitVm } from './index'
+import {
+  transformAndPermitVm,
+} from './index'
 
 import { loadFromLocalStorage } from '_/storage'
+import { loadUserOptions } from './options'
 
 /**
  * Perform login checks, and if they pass, perform initial data loading
@@ -204,6 +207,7 @@ function* initialLoad () {
     call(fetchAllOS, getAllOperatingSystems()),
     call(fetchAllHosts, getAllHosts()),
     call(loadFilters),
+    call(loadUserOptions),
   ])
   console.log('\u2714 data loads with no prerequisites are complete')
   console.groupEnd('no data prerequisites')
diff --git a/src/sagas/options.js b/src/sagas/options.js
new file mode 100644
index 0000000000..85f79bb4b9
--- /dev/null
+++ b/src/sagas/options.js
@@ -0,0 +1,118 @@
+// @flow
+
+import Api from '_/ovirtapi'
+import { all, put, select, takeLatest, call } from 'redux-saga/effects'
+
+import * as A from '_/actions'
+import { callExternalAction } from './utils'
+
+import * as C from '_/constants'
+
+import type { SaveGlobalOptionsActionType } from '_/actions/types'
+
+/**
+ * Internal type to formalize result returned from
+ * saveSSHKey and saveRemoteOptions sagas.
+ */
+type ResultType = {
+  // list of field names submitted as changed
+  changes: Array<string>,
+  // true if no changes were detected
+  // all submitted values are the same as currently stored
+  sameAsCurrent: boolean,
+  // true if error was reported by ovirtapi query
+  error: boolean,
+  // query specific data packed into one object
+  data: Object
+}
+
+/**
+ * Simple mapper providing default values and type safety.
+ */
+function toResult ({ error = false, changes = [], sameAsCurrent = false, ...data }: Object = {}): ResultType {
+  return {
+    changes,
+    sameAsCurrent,
+    error,
+    data,
+  }
+}
+
+function* fetchSSHKey (action: Object): any {
+  const result = yield call(callExternalAction, 'getSSHKey', Api.getSSHKey, action)
+  if (result.error) {
+    return
+  }
+
+  yield put(A.setSSHKey(Api.SSHKeyToInternal({ sshKey: result })))
+}
+
+function* saveSSHKey ([ sshPropName, submittedKey ]: any): any | ResultType {
+  if (submittedKey === undefined) {
+    // check strictly for undefined
+    // it should be possible to clear ssh key by setting to empty string
+    return toResult()
+  }
+  const sshId = yield select((state) => state.options.getIn(['ssh', 'id']))
+  const currentKey = yield select((state) => state.options.getIn(['ssh', 'key']))
+  if (currentKey === submittedKey) {
+    return toResult({ changes: [sshPropName], sameAsCurrent: true })
+  }
+  const userId = yield select((state) => state.config.getIn(['user', 'id']))
+  const result = yield call(
+    callExternalAction,
+    'saveSSHKey',
+    Api.saveSSHKey,
+    A.saveSSHKey({ sshId, key: submittedKey, userId }),
+    true)
+
+  return toResult({ ...result, changes: [sshPropName] })
+}
+
+/**
+ * Required to delay destructive side effects of user option changes.
+ * Effect should wait until 'finish' event was dispatched.
+ * Primary use case is page reload after locale change.
+ */
+function withLoadingUserOptions (delegateGenerator: (any) => Generator<any, any, any>): any {
+  return function* (action: any): any {
+    yield put(A.loadingUserOptionsInProgress())
+    try {
+      yield call(delegateGenerator, action)
+    } finally {
+      yield put(A.loadingUserOptionsFinished())
+    }
+  }
+}
+
+function* saveGlobalOptions ({ payload: { sshKey, showNotifications, notificationSnoozeDuration }, meta: { transactionId } }: SaveGlobalOptionsActionType): Generator<any, any, any> {
+  const { ssh } = yield all({
+    ssh: call(saveSSHKey, ...Object.entries({ sshKey })),
+  })
+
+  if (!ssh.error && ssh.changes.length && !ssh.sameAsCurrent) {
+    yield put(A.setSSHKey(Api.SSHKeyToInternal({ sshKey: ssh.data })))
+  }
+
+  if (showNotifications !== undefined || notificationSnoozeDuration !== undefined) {
+
+  }
+
+  yield put(
+    A.setOption(
+      { key: ['lastTransactions', 'global'], value: { transactionId } },
+    ),
+  )
+}
+
+export function* loadUserOptions (): any {
+  const userId = yield select(state => state.config.getIn(['user', 'id']))
+  yield put(A.getSSHKey({ userId }))
+  yield put(A.loadingUserOptionsFinished())
+}
+
+export default [
+  takeLatest(C.SAVE_SSH_KEY, saveSSHKey),
+  takeLatest(C.SAVE_GLOBAL_OPTIONS, withLoadingUserOptions(saveGlobalOptions)),
+  takeLatest(C.GET_SSH_KEY, fetchSSHKey),
+]