Skip to content
This repository has been archived by the owner on Jan 12, 2024. It is now read-only.

Commit

Permalink
Feature/secure data version ux (#138)
Browse files Browse the repository at this point in the history
* working secure data version history tab for dashboard

* bump version for ux release
  • Loading branch information
fieldju committed Feb 18, 2018
1 parent 2c86075 commit a385382
Show file tree
Hide file tree
Showing 22 changed files with 679 additions and 41 deletions.
1 change: 1 addition & 0 deletions dashboard/app/actions/appActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ export function addBucketBtnClicked(categoryId) {
export function loadManageSDBPage(id, path, cerberusAuthToken) {
return function(dispatch) {
dispatch(mSDBActions.updateNavigatedPath(path, cerberusAuthToken))
dispatch(mSDBActions.resetToInitialState())
dispatch(mSDBActions.fetchSDBDataFromCMS(id, cerberusAuthToken))
hashHistory.push(`/manage-safe-deposit-box/${id}`)
}
Expand Down
15 changes: 12 additions & 3 deletions dashboard/app/actions/createSDBoxActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React from 'react'
import axios from 'axios'
import * as constants from '../constants/actions'
import * as cms from '../constants/cms'
import * as authActions from '../actions/authenticationActions'
import { hashHistory } from 'react-router'
import environmentService from 'EnvironmentService'
import * as messengerActions from '../actions/messengerActions'
import * as modalActions from '../actions/modalActions'
import * as appActions from '../actions/appActions'
import ApiError from '../components/ApiError/ApiError'
import * as humps from 'humps'

Expand All @@ -29,8 +30,10 @@ export function submitCreateNewSDB(data, token) {
})
.then(function(response) {
dispatch(modalActions.popModal())
dispatch(authActions.refreshAuth(token, `/manage-safe-deposit-box/${response.data.id}`))
dispatch(clearSecureData())
dispatch(resetVersionBrowserState())
dispatch(appActions.fetchSideBarData(token))
hashHistory.push(`/manage-safe-deposit-box/${response.data.id}`)
})
.catch(function (response) {
log.error('Failed to create new SDB', response)
Expand Down Expand Up @@ -61,6 +64,12 @@ export function resetSubmittingNewSDBRequest() {

export function clearSecureData() {
return {
type: constants.CLEAR_SECURE_DATA
type: constants.RESET_SDB_DATA
}
}

export function resetVersionBrowserState() {
return {
type: constants.RESET_VERSION_BROWSER_STATE
}
}
13 changes: 11 additions & 2 deletions dashboard/app/actions/manageSafetyDepositBoxActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import environmentService from 'EnvironmentService'
import * as humps from 'humps'
import * as actions from '../constants/actions'
import * as cms from '../constants/cms'
import * as appActions from '../actions/appActions'
import * as messengerActions from '../actions/messengerActions'
import * as authActions from '../actions/authenticationActions'
import { hashHistory } from 'react-router'
import * as modalActions from '../actions/modalActions'
import ApiError from '../components/ApiError/ApiError'
import ConfirmationBox from '../components/ConfirmationBox/ConfirmationBox'
Expand Down Expand Up @@ -280,7 +281,9 @@ export function deleteSDB(sdbId, token) {
.then((response) => {
log.debug("Deleted SDB", response)
dispatch(resetToInitialState())
dispatch(authActions.refreshAuth(token, `/`))
dispatch(resetVersionBrowserState())
dispatch(appActions.fetchSideBarData(token))
hashHistory.push('/')
})
.catch((response) => {
log.error("Failed to delete SDB", response)
Expand Down Expand Up @@ -355,3 +358,9 @@ export function navItemClicked(navItem) {
payload: navItem
}
}

export function resetVersionBrowserState() {
return {
type: actions.RESET_VERSION_BROWSER_STATE
}
}
4 changes: 2 additions & 2 deletions dashboard/app/actions/metadataActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function storeMetadata(metadata) {

export function updatePerPage(perPage) {
return {
type: actions.UPDATE_PER_PAGE,
type: actions.UPDATE_METADATA_PER_PAGE,
payload: {
perPage: perPage
}
Expand All @@ -54,7 +54,7 @@ export function updatePerPage(perPage) {

export function updatePageNumber(pageNumber) {
return {
type: actions.UPDATE_PAGE_NUMBER,
type: actions.UPDATE_METADATA_PAGE_NUMBER,
payload: {
pageNumber: pageNumber
}
Expand Down
131 changes: 131 additions & 0 deletions dashboard/app/actions/versionHistoryBrowserActions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import React from 'react'
import axios from 'axios'
import * as actions from '../constants/actions'
import * as messengerActions from '../actions/messengerActions'
import ApiError from '../components/ApiError/ApiError'

import log from 'logger'

export function fetchVersionDataForSdb(safeDepositBodId, token) {
return function(dispatch) {
return axios({
url: `/v1/sdb-secret-version-paths/${safeDepositBodId}`,
headers: {'X-Cerberus-Token': token},
timeout: 60 * 1000 // 1 minute
})
.then((response) => {
dispatch(updatePathsWithHistory(response.data))
})
.catch((response) => {
let msg = 'Failed to fetch version data for sdb'
log.error(msg, response)
dispatch(messengerActions.addNewMessage(<ApiError message={msg} response={response} />))
})
}
}

export function updatePathsWithHistory(paths) {
return {
type: actions.FETCHED_VERSION_DATA_FOR_SDB,
payload: paths
}
}

export function fetchPathVersionData(path, token, pageNumber, perPage) {
return function(dispatch) {
return axios({
url: `/v1/secret-versions/${path}`,
params: {
limit: perPage,
offset: Math.ceil(pageNumber * perPage)
},
headers: {'X-Cerberus-Token': token},
timeout: 60 * 1000 // 1 minute
})
.then((response) => {
dispatch(updateVersionDataForPath(path, response.data))
})
.catch((response) => {
let msg = 'Failed to fetch path version data'
log.error(msg, response)
dispatch(messengerActions.addNewMessage(<ApiError message={msg} response={response} />))
})
}
}

export function updateVersionDataForPath(path, data) {
return {
type: actions.FETCHED_VERSION_DATA_FOR_PATH,
payload: {
data: data,
path: path
}
}
}

export function handleBreadCrumbHomeClick() {
return {
type: actions.CLEAR_VERSION_PATH_SELECTED,
}
}


export function updatePerPage(perPage) {
return {
type: actions.UPDATE_VERSION_PATHS_PER_PAGE,
payload: {
perPage: perPage
}
}
}

export function updatePageNumber(pageNumber) {
return {
type: actions.UPDATE_VERSION_PATHS_PAGE_NUMBER,
payload: {
pageNumber: pageNumber
}
}
}

export function resetVersionBrowserState() {
return {
type: actions.RESET_VERSION_BROWSER_STATE
}
}

export function fetchVersionedSecureDataForPath(path, versionId, token) {
let request = {
url: `/v1/secret/${path}`,
headers: {'X-Cerberus-Token': token},
timeout: 60 * 1000 // 1 minute
}

if (versionId !== 'CURRENT') {
request['params'] = {
versionId: versionId
}
}

return function(dispatch) {
return axios(request)
.then((response) => {
dispatch(updateVersionedSecureDataForPath(versionId, response.data.data))
})
.catch((response) => {
let msg = 'Failed to fetch versioned secure data for path'
log.error(msg, response)
dispatch(messengerActions.addNewMessage(<ApiError message={msg} response={response} />))
})
}
}

export function updateVersionedSecureDataForPath(versionId, secureData) {
return {
type: actions.ADD_SECURE_DATA_FOR_VERSION,
payload: {
versionId: versionId,
secureData: secureData
}
}
}
4 changes: 4 additions & 0 deletions dashboard/app/assets/styles/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ body {
user-select: none;
}

.btn {
@extend .un-selectable;
}

.show-me-block {
display: block;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const fields = [
return {
cerberusAuthToken: state.auth.cerberusAuthToken,
sdbId: state.manageSafetyDepositBox.data.id,
sdbName: state.manageSafetyDepositBox.data.name,

initialValues: {
verifiedSdbName: '',
Expand All @@ -40,7 +41,8 @@ export default class DeleteSafeDepositBoxForm extends Component {
handleSubmit,
dispatch,
cerberusAuthToken,
sdbId
sdbId,
sdbName
} = this.props

return (
Expand All @@ -50,7 +52,8 @@ export default class DeleteSafeDepositBoxForm extends Component {
dispatch(modalActions.popModal())
})}>
<div id="form-description" className="ncss-brand">
<h3><span className="attention">ATTENTION:</span>Are you sure you want to delete this SDB?</h3>
<h3><span className="attention">ATTENTION:</span>Are you sure you want to delete this safe deposit box?</h3>
<h4>You are attempting to delete SDB with name: '{sdbName}'</h4>
<h4>Deleting a Safe Deposit Box is irreversible and will delete all data associated with this SDB including past versions of secure data.</h4>
</div>

Expand Down
19 changes: 19 additions & 0 deletions dashboard/app/components/Loader/Loader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react'
import { Component } from 'react'

export default class Loader extends Component {
render() {
return (
<div id='fountainG'>
<div id='fountainG_1' className='fountainG'></div>
<div id='fountainG_2' className='fountainG'></div>
<div id='fountainG_3' className='fountainG'></div>
<div id='fountainG_4' className='fountainG'></div>
<div id='fountainG_5' className='fountainG'></div>
<div id='fountainG_6' className='fountainG'></div>
<div id='fountainG_7' className='fountainG'></div>
<div id='fountainG_8' className='fountainG'></div>
</div>
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { connect } from 'react-redux'

import * as sdbMActions from '../../actions/manageSafetyDepositBoxActions'
import * as appActions from '../../actions/appActions'
import * as vActions from '../../actions/versionHistoryBrowserActions'
import SecureDataBrowser from '../SecureDataBrowser/SecureDataBrowser'
import SecureDataVersionsBrowser from '../SecureDataVersionsBrowser/SecureDataVersionsBrowser'
import SafeDepositBoxSettings from '../SafeDepositBoxSettings/SafeDepositBoxSettings'

import './SafeDepositBox.scss'
import './ManageSafeDepositBox.scss'

// connect to the store for the pieces we care about
@connect((state) => {
Expand All @@ -33,7 +34,7 @@ import './SafeDepositBox.scss'
nav: state.manageSafetyDepositBox.nav
}
})
export default class SafeDepositBox extends Component {
export default class ManageSafeDepositBox extends Component {

componentWillReceiveProps(nextProps) {
// Fetch and load SDB details based on id in uri
Expand Down Expand Up @@ -91,14 +92,13 @@ export default class SafeDepositBox extends Component {
className={"un-selectable nav-item secure-data" + (nav.secureDataSelected ? ' nav-item-selected' : '')}
onClick={() => { this.handleNavItemClicked('secureData')}}
>Secure Data</div>
{/* hide the version tab until implemented */}
{ false && <div
<div
className={"un-selectable nav-item versions" + (nav.secureDataVersionsSelected ? ' nav-item-selected' : '')}
onClick={() => {
dispatch(vActions.fetchVersionDataForSdb(sdbData.id, cerberusAuthToken))
this.handleNavItemClicked('secureDataVersions')
}}
>Secure Data Version History</div>
}
<div
className={"un-selectable nav-item setting" + (nav.sdbSettingsSelected ? ' nav-item-selected' : '')}
onClick={() => { this.handleNavItemClicked('sdbSettings')}}
Expand All @@ -116,7 +116,7 @@ export default class SafeDepositBox extends Component {
}

{nav.secureDataVersionsSelected &&
<SecureDataVersionsBrowser />
<SecureDataVersionsBrowser safeDepositBoxId={sdbData.id}/>
}

{nav.sdbSettingsSelected &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default class SDBMetadataList extends Component {
<div className="ncss h3">SDB Metadata</div>
<div className="ncss h4">Total SDBs: {metadata.total_sdbcount}</div>
{ paginationMenu(metadata, this.options, perPage, this.props.pageNumber, this.handlePerPageSelect, this.handlePageClick) }
<div className="matadata-listings">
<div className="metadata-listings">
{metadata['safe_deposit_box_metadata'].map((sdb, index) =>
<SDBMetadata sdbMetadata={sdb}
key={index}/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

.metadata-list-container {

padding: 20px;

.metadata-pagination-menu {

margin-top: 15px;
Expand Down Expand Up @@ -55,7 +57,7 @@
}
}

.matadata-listings {
.metadata-listings {
margin-top: 15px;
margin-bottom: 15px;
}
Expand Down
Loading

0 comments on commit a385382

Please sign in to comment.