Add additional fields to SDB admin summary page. (#9)

* Adds and re-styles additional fields to the SDB admin summary page. * remove log statement in actions * paginate admin summary stats page * Style Admin metadata page. * Add path to sdb metadata listing page * Update file and variable names to match each other.. * Fix typo in placeholder. * Fix pagination bug in admin summary.
Nike-Inc · Jan 23, 2017 · 22d369e · 22d369e
1 parent 707cba3
commit 22d369e
Show file tree

Hide file tree

Showing 18 changed files with 601 additions and 132 deletions.
diff --git a/app/actions/metadataActions.js b/app/actions/metadataActions.js
@@ -0,0 +1,62 @@
+import * as actions from '../constants/actions'
+import axios from 'axios'
+import ApiError from '../components/ApiError/ApiError'
+import environmentService from 'EnvironmentService'
+import * as cms from '../constants/cms'
+import * as messengerActions from '../actions/messengerActions'
+import { getLogger } from 'logger'
+var log = getLogger('metadata')
+
+export function fetchMetadata(token, pageNumber, perPage) {
+    return function(dispatch) {
+        return axios({
+            url: environmentService.getDomain() + cms.RETRIEVE_METADATA,
+            params: {
+                limit: perPage,
+                offset: Math.ceil(pageNumber * perPage)
+            },
+            headers: {'X-Vault-Token': token},
+            timeout: 10000
+        })
+        .then(function (response) {
+            let metadata = response.data
+            if (metadata) {
+                dispatch(storeMetadata(metadata))
+                window.scrollTo(0, 0)
+            } else {
+                log.warn("Metadata was null or undefined")
+            }
+        })
+        .catch(function (response) {
+            log.error('Failed to get metadata', response)
+            dispatch(messengerActions.addNewMessage(<ApiError message="Failed to retrieve metadata" response={response} />))
+        })
+    }
+}
+
+function storeMetadata(metadata) {
+    return {
+        type: actions.STORE_METADATA,
+        payload: {
+            metadata: metadata
+        }
+    }
+}
+
+export function updatePerPage(perPage) {
+    return {
+        type: actions.UPDATE_PER_PAGE,
+        payload: {
+            perPage: perPage
+        }
+    }
+}
+
+export function updatePageNumber(pageNumber) {
+    return {
+        type: actions.UPDATE_PAGE_NUMBER,
+        payload: {
+            pageNumber: pageNumber
+        }
+    }
+}
diff --git a/app/actions/statsActions.js b/app/actions/statsActions.js
diff --git a/app/components/Header/Header.js b/app/components/Header/Header.js
@@ -60,7 +60,7 @@ class UserBox extends Component {
                 <div id='u-b-context-menu' className={this.props.displayUserContextMenu ? 'show-me-block' : 'hide-me'}
                      onMouseEnter={this.handleMouseClickUserName}
                      onMouseLeave={this.handleMouseLeaveUserMenuContext} >
-                    {isAdmin && <div className='context-menu-button' onClick={() => {hashHistory.push('/admin/stats')}}>SDB Summary</div>}
+                    {isAdmin && <div className='context-menu-button' onClick={() => {hashHistory.push('/admin/sdb-metadata')}}>SDB Summary</div>}
                     <div className='context-menu-button' onClick={this.handleMouseClickLogout}>Logout</div>
                 </div>
             </div>

diff --git a/app/components/SDBDescriptionField/SDBDescriptionField.js b/app/components/SDBDescriptionField/SDBDescriptionField.js
@@ -17,7 +17,7 @@ export default class SDBDescriptionField extends Component {
                 <div className={((description.touched && description.error) ? 'ncss-textarea-container error' : 'ncss-textarea-container')}>
                     <label className='ncss-label'>Description</label>
                             <textarea className='ncss-textarea pt2-sm pr4-sm pb2-sm pl4-sm'
-                                      placeholder='Enter a description for you Bucket'
+                                      placeholder='Enter a description for your Bucket'
                                       maxLength={`${cms.SDB_DESC_MAX_LENGTH}`}
                                 {...description} />
                     {description.touched && description.error && <div className='ncss-error-msg'>{description.error}</div>}

diff --git a/app/components/SDBMetadata/SDBMetadata.js b/app/components/SDBMetadata/SDBMetadata.js
@@ -0,0 +1,80 @@
+import React from 'react'
+import {Component} from 'react'
+import './SDBMetadata.scss'
+
+
+export default class SDBMetadata extends Component {
+
+    render() {
+        const {sdbMetadata} = this.props
+
+        return (
+            <div className="sdb-metadata-container">
+                <div className="sdb-metadata">
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Name:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.name}</div>
+                    </div>
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Vault Path:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.path}</div>
+                    </div>
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Owner:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.owner}</div>
+                    </div>
+                </div>
+                <div className="sdb-metadata">
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Created By:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.created_by}</div>
+                    </div>
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Created:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.created_ts}</div>
+                    </div>
+                </div>
+                <div className="sdb-metadata">
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Last Updated By:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.last_updated_by}</div>
+                    </div>
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Last Updated:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.last_updated_ts}</div>
+                    </div>
+                </div>
+                <div className="sdb-metadata">
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">Description:</div>
+                        <div className="sdb-metadata-value">{sdbMetadata.description}</div>
+                    </div>
+                </div>
+                <div className="sdb-metadata">
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">User Group Permissions:</div>
+                        <div className="sdb-metadata-value">
+                            { getPermissionsAsString(sdbMetadata.user_group_permissions) }
+                        </div>
+                    </div>
+                </div>
+                <div className="sdb-metadata">
+                    <div className="sdb-metadata-kv">
+                        <div className="sdb-metadata-label ncss-brand">IAM Role Permissions:</div>
+                        <div className="sdb-metadata-value">
+                            { getPermissionsAsString(sdbMetadata.iam_role_permissions) }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+const getPermissionsAsString = (permissions) => {
+    let string = Object.keys(permissions).map((key) => {
+        return `${key}: ${permissions[key]}`
+    }).join("\n")
+
+    return string ? string : "No permissions defined"
+}
diff --git a/app/components/SDBMetadata/SDBMetadata.scss b/app/components/SDBMetadata/SDBMetadata.scss
@@ -0,0 +1,28 @@
+@import '../../assets/styles/common.scss';
+
+.sdb-metadata-container {
+  background-color: $snkrs_off_white;
+  margin-bottom: 10px;
+  padding: 10px;
+
+  .sdb-metadata {
+    display: flex;
+
+    .sdb-metadata-kv {
+      padding-right: 3px;
+      display: flex;
+
+      .sdb-metadata-label {
+        padding-right: 5px;
+        font-size: 16px;
+      }
+
+      .sdb-metadata-value {
+        white-space: pre;
+        margin-top: 3px;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+
diff --git a/app/components/SDBMetadataList/SDBMetadataList.js b/app/components/SDBMetadataList/SDBMetadataList.js
@@ -0,0 +1,108 @@
+import React from 'react'
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import * as metadataActions from '../../actions/metadataActions'
+import ReactPaginate from 'react-paginate'
+import Select from 'react-select'
+import SDBMetadata from '../SDBMetadata/SDBMetadata'
+
+import './SDBMetadataList.scss'
+
+@connect((state) => {
+    return {
+        vaultToken: state.auth.vaultToken,
+        metadata: state.metadata.metadata,
+        perPage: state.metadata.perPage,
+        pageNumber: state.metadata.pageNumber
+    }
+})
+
+export default class SDBMetadataList extends Component {
+
+    options = [
+        { value: 10, label: '10' },
+        { value: 50, label: '50' },
+        { value: 100, label: '100' },
+        { value: 1000, label: '1000' }
+    ]
+
+    componentDidMount() {
+        this.props.dispatch(metadataActions.fetchMetadata(this.props.vaultToken, this.props.pageNumber, this.props.perPage))
+    }
+
+    handlePageClick = (data) => {
+        let pageNumber = data.selected;
+
+        this.props.dispatch(metadataActions.updatePageNumber(pageNumber));
+        this.props.dispatch(metadataActions.fetchMetadata(this.props.vaultToken, pageNumber, this.props.perPage));
+    };
+
+    handlePerPageSelect = (selected) => {
+        let perPage = selected.value;
+        let pageNumber = 0; // default back to the first page
+
+        this.props.dispatch(metadataActions.updatePerPage(perPage));
+        this.props.dispatch(metadataActions.updatePageNumber(pageNumber))
+        this.props.dispatch(metadataActions.fetchMetadata(this.props.vaultToken, pageNumber, perPage));
+    };
+
+    render() {
+        const {metadata, perPage} = this.props
+
+        if (metadata['safe_deposit_box_meta_data'] == undefined) {
+            return(
+                <div>
+                    NO METADATA
+                </div>
+            )
+        }
+
+        return (
+            <div className="metadata-list-container">
+                <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">
+                    {metadata['safe_deposit_box_meta_data'].map((sdb, index) =>
+                        <SDBMetadata sdbMetadata={sdb}
+                                     key={index}/>
+                    )}
+                </div>
+                { paginationMenu(metadata, this.options, perPage, this.props.pageNumber, this.handlePerPageSelect, this.handlePageClick) }
+            </div>
+        )
+    }
+}
+
+const paginationMenu = (metadata, options, perPage, pageNumber, handlePerPageSelect, handlePageClick) => {
+    return (
+      <div className="metadata-pagination-menu ncss-brand">
+          <ReactPaginate pageCount={Math.ceil(metadata.total_sdbcount / perPage)}
+                         pageRangeDisplayed={3}
+                         marginPagesDisplayed={1}
+                         previousLabel={"Prev"}
+                         nextLabel={"Next"}
+                         onPageChange={handlePageClick}
+                         forcePage={pageNumber}
+                         containerClassName={"metadata-pagination"}
+                         previousClassName={"metadata-previous-btn"}
+                         nextClassName={"metadata-next-btn"}
+                         previousLinkClassName={"ncss-btn-black ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm"}
+                         nextLinkClassName={"ncss-btn-black ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm "}
+                         pageClassName={"page-btn"}
+                         breakClassName={"page-btn ncss-btn-light-grey disabled ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm"}
+                         pageLinkClassName={"ncss-btn-light-grey ncss-brand pt2-sm pr5-sm pb2-sm pl5-sm"}
+                         activeClassName={"metadata-active"}
+          />
+          <Select
+            className={'metadata-pagination-per-page-selector'}
+            onChange = { handlePerPageSelect }
+            value={ perPage }
+            placeholder="Show Per Page"
+            options={options}
+            searchable={false}
+            clearable={false} />
+      </div>
+    )
+}
+