github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Cleaned Admin Dashboard

Browse Source
This commit is contained in:
ioedeveloper
2019-08-05 14:16:17 +01:00
parent 59468febba
commit beb9aa4f01
14 changed files with 1998 additions and 1342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2825
admin-dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
admin-dashboard/package.json
View File

@@ -68,7 +68,7 @@
},
"scripts": {
"lint": "eslint .",
"dev": "PORT=3100 react-scripts start",
"dev": "SET PORT=3100 && react-scripts start",
"build": "react-scripts build",
"jest": "jest src/test/puppeteer/index.test.js",
"test": "npm run lint",

72
admin-dashboard/src/actions/feedback.js
View File

@@ -1,72 +0,0 @@
import {
postApi
} from '../api';
import * as types from '../constants/feedback'
import errors from '../errors'
export const openFeedbackModal = function () {
return {
type: types.OPEN_FEEDBACK_MODAL
};
}
export const closeFeedbackModal = function () {
return {
type: types.CLOSE_FEEDBACK_MODAL
};
}
// Create a new project
export function createFeedbackRequest() {
return {
type: types.CREATE_FEEDBACK_REQUEST
};
}
export function createFeedbackError(error) {
return {
type: types.CREATE_FEEDBACK_FAILED,
payload: error
};
}
export function createFeedbackSuccess(project) {
return {
type: types.CREATE_FEEDBACK_SUCCESS,
payload: project
};
}
export const resetCreateFeedback = () => {
return {
type: types.CREATE_FEEDBACK_RESET,
};
};
// Calls the API to register a user.
export function createFeedback(projectId,values) {
return function (dispatch) {
var promise = postApi(`feedback/${projectId}`, values);
dispatch(createFeedbackRequest());
return promise.then(function (feedback) {
dispatch(createFeedbackSuccess(feedback));
return feedback;
}, function (error) {
if (error && error.response && error.response.data)
error = error.response.data;
if (error && error.data) {
error = error.data;
}
if(error && error.message){
error = error.message;
}
else{
error = 'Network Error';
}
dispatch(createFeedbackError(errors(error)));
});
};
}

2
admin-dashboard/src/components/Dashboard.js
View File

@@ -77,7 +77,7 @@ export class DashboardApp extends Component {
</div>
<TopNav />
</div>
</div>

110
admin-dashboard/src/components/FeedbackModal.js
View File

@@ -1,110 +0,0 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Component } from 'react';
import { createFeedback, closeFeedbackModal } from '../actions/feedback';
import { reduxForm, Field } from 'redux-form';
import { RenderTextArea } from './basic/RenderTextArea';
import { reset } from 'redux-form';
import PropTypes from 'prop-types';
export class FeedbackModal extends Component {
submitForm = (values) => {
const { reset } = this.props;
if (values.feedback) {
this.props.createFeedback(this.props.currentProject._id,values).then(function () {
}, function () {
});
if (window.location.href.indexOf('localhost') <= -1) {
this.context.mixpanel.track('Feedback Values', values);
}
this.props.closeFeedbackModal();
reset();
}
}
render() {
const { handleSubmit } = this.props;
return this.props.feedback.feedbackModalVisble ?
(<div className="db-FeedbackModal" style={{ position: 'absolute', right: '40px', top: '20px', zIndex: '999' }}>
<div className="db-FeedbackModal-background" />
<div className="db-FeedbackModal-content">
<div className="db-FeedbackModal-contentInner">
<div className="db-FeedbackModal-icon" />
<div className="db-FeedbackForm">
<form onSubmit={handleSubmit(this.submitForm)}>
<span>
<div className="db-FeedbackForm-step db-FeedbackForm-step--form" >
<Field component={RenderTextArea}
className="db-FeedbackForm-textarea"
placeholder="Feedback about this page?"
defaultValue={''}
name="feedback"
style={{ height: '100px' }}
/>
<span />
<div className="db-FeedbackForm-actions">
<button
className="bs-Button bs-DeprecatedButton db-FeedbackForm-cancel"
type="button"
onClick={() => this.props.closeFeedbackModal()}
>
<span>Cancel</span>
</button>
<button
className="bs-Button bs-DeprecatedButton db-FeedbackForm-submit bs-Button--blue"
id='feedback-button'
type="submit"
>
<span>Send feedback</span>
</button>
</div>
</div>
</span>
</form>
</div>
</div>
</div>
</div>
) : null;
}
}
FeedbackModal.displayName = 'FeedbackModal'
let FeedbackModalForm = reduxForm({
form: 'FeedbackModal', // a unique identifier for this form
})(FeedbackModal);
const mapStateToProps = state => ({
feedback: state.feedback,
currentProject : state.project.currentProject,
});
const mapDispatchToProps = dispatch => (
bindActionCreators({ createFeedback, closeFeedbackModal, reset }, dispatch)
);
FeedbackModal.contextTypes = {
mixpanel: PropTypes.object.isRequired
};
FeedbackModal.propTypes = {
createFeedback: PropTypes.func.isRequired,
closeFeedbackModal: PropTypes.func.isRequired,
reset: PropTypes.func.isRequired,
feedback: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
currentProject: PropTypes.object
}
export default connect(mapStateToProps, mapDispatchToProps)(FeedbackModalForm);

5
admin-dashboard/src/components/nav/SideNav.js
View File

@@ -21,6 +21,7 @@ class SideNav extends Component {
render() {
return (
<div className="db-World-scrollWrapper">
<div onKeyDown={this.handleKeyBoard} className="db-World-sideNavContainer">
<div className="db-SideNav-container Box-root Box-background--surface Flex-flex Flex-direction--column Padding-top--20 Padding-right--2">
<div className="Box-root Margin-bottom--20">
@@ -45,9 +46,10 @@ class SideNav extends Component {
whiteSpace: 'nowrap'
}}
>
<span class="Text-color--inherit Text-display--inline Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--noWrap">Admin Dashboard</span>
</div>
<div className="Box-root Margin-left--8">
<div className="db-AccountSwitcherX-chevron" />
{/* <div className="db-AccountSwitcherX-chevron" /> */}
</div>
</div>
</div>
@@ -82,6 +84,7 @@ class SideNav extends Component {
</div>
</div>
</div>
</div>
);
}
}

57
admin-dashboard/src/components/nav/TopNav.js
View File

@@ -2,10 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import FeedBackModal from '../FeedbackModal';
import { showProfileMenu } from '../../actions/profile';
import { openNotificationMenu } from '../../actions/notification';
import { openFeedbackModal, closeFeedbackModal } from '../../actions/feedback';
import ClickOutside from 'react-click-outside';
import { userSettings } from '../../actions/profile';
import { API_URL,User } from '../../config';
@@ -16,20 +14,6 @@ class TopContent extends Component {
this.props.userSettings();
}
showFeedbackModal =()=> {
this.props.openFeedbackModal();
if(window.location.href.indexOf('localhost') <= -1){
this.context.mixpanel.track('Feedback Modal Opened', {});
}
}
hideFeedbackModal =()=> {
this.props.closeFeedbackModal();
if(window.location.href.indexOf('localhost') <= -1){
this.context.mixpanel.track('Feedback Modal Closed', {});
}
}
showProfileMenu =()=> {
this.props.showProfileMenu();
if(window.location.href.indexOf('localhost') <= -1){
@@ -47,7 +31,6 @@ class TopContent extends Component {
handleKeyBoard = (e)=>{
switch(e.key){
case 'Escape':
this.hideFeedbackModal()
return true;
default:
return false;
@@ -74,45 +57,11 @@ class TopContent extends Component {
<div tabIndex="0" onKeyDown={this.handleKeyBoard} style={{zIndex:'2'}} className="db-World-topContent Box-root Box-background--surface Padding-vertical--20">
<div className="Box-root Flex-flex Flex-alignItems--center Flex-justifyContent--spaceBetween">
<ClickOutside onClickOutside={this.hideFeedbackModal}>
<FeedBackModal />
</ClickOutside>
<div className="db-SearchField db-SearchField--tokenizable">
<span />
</div>
<div className="Box-root Flex-flex Flex-alignItems--center Flex-direction--row Flex-justifyContent--flexStart">
<div className="Box-root Margin-right--16">
<div
id="feedback-div"
className="db-FeedbackInput-container Card-root Card-shadow--small"
onClick={this.showFeedbackModal}
>
<div className="db-FeedbackInput-box Box-root Box-background--offset Flex-flex Flex-alignItems--center Padding-horizontal--8 Padding-vertical--4">
<div className="Box-root Flex-flex Margin-right--8">
<span className="db-FeedbackInput-defaultIcon" />
</div>
<div
style={{
overflow: 'hidden',
textOveerflow: 'ellipsis',
whiteSpace: 'nowrap'
}}
>
<span className="Text-color--disabled Text-display--inline Text-fontSize--14 Text-fontWeight--regular Text-lineHeight--20 Text-typeface--base Text-wrap--wrap">
{(this.props.feedback.feedback.success || this.props.feedback.feedback.requesting) && (!this.props.feedback.feedback.error) ? <span>Thank you for your feedback.</span> : <span>Feedback about this page?</span>}
{
(this.props.feedback.feedback.error) ? <span>Sorry, Please try again.</span> : null
}
</span>
</div>
<span />
</div>
<span />
</div>
</div>
<div className="Box-root Flex-flex">
<div tabIndex="-1" style={{ outline: 'none',marginRight:'15px' }}>
@@ -158,22 +107,18 @@ const mapStateToProps = (state) => {
return {
profilePic,
feedback: state.feedback,
notifications : state.notifications.notifications
}
}
const mapDispatchToProps = dispatch => bindActionCreators(
{ showProfileMenu, openFeedbackModal, closeFeedbackModal, userSettings,openNotificationMenu }
{ showProfileMenu, userSettings,openNotificationMenu }
, dispatch)
TopContent.propTypes = {
userSettings: PropTypes.func.isRequired,
openFeedbackModal: PropTypes.func.isRequired,
closeFeedbackModal: PropTypes.func.isRequired,
showProfileMenu: PropTypes.func.isRequired,
openNotificationMenu : PropTypes.func.isRequired,
feedback: PropTypes.object.isRequired,
profilePic: PropTypes.oneOfType([
PropTypes.string,
PropTypes.oneOf([null,undefined])

8
admin-dashboard/src/constants/feedback.js
View File

@@ -1,8 +0,0 @@
export const OPEN_FEEDBACK_MODAL = 'OPEN_FEEDBACK_MODAL';
export const CLOSE_FEEDBACK_MODAL = 'CLOSE_FEEDBACK_MODAL';
// Create new project
export const CREATE_FEEDBACK_SUCCESS = 'feedback/CREATE_FEEDBACK_SUCCESS';
export const CREATE_FEEDBACK_FAILED = 'feedback/CREATE_FEEDBACK_FAILED';
export const CREATE_FEEDBACK_REQUEST = 'feedback/CREATE_FEEDBACK_REQUEST';
export const CREATE_FEEDBACK_RESET = 'feedback/CREATE_FEEDBACK_RESET';

59
admin-dashboard/src/pages/DashboardView.js
View File

@@ -1,59 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { destroy } from 'redux-form';
import Dashboard from '../components/Dashboard';
import PropTypes from 'prop-types';
class DashboardView extends Component {
componentDidMount() {
if(window.location.href.indexOf('localhost') <= -1){
this.context.mixpanel.track('Main page Loaded');
}
}
render() {
return (
<Dashboard ready={this.ready}>
<div className="db-World-contentPane Box-root Padding-bottom--48">
<div>
<div>
<div className="db-BackboneViewContainer">
<div className="dashboard-home-view react-view">
<div>
<div>
<span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Dashboard>
);
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ destroy }, dispatch)
}
const mapStateToProps = state => {
return {
};
}
DashboardView.contextTypes = {
mixpanel: PropTypes.object.isRequired
};
DashboardView.propTypes = {
}
DashboardView.displayName = 'DashboardView'
export default connect(mapStateToProps, mapDispatchToProps)(DashboardView);

134
admin-dashboard/src/pages/Users.js Normal file
View File

@@ -0,0 +1,134 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { destroy } from 'redux-form';
import Dashboard from '../components/Dashboard';
import PropTypes from 'prop-types';
class Users extends Component {
componentDidMount() {
if(window.location.href.indexOf('localhost') <= -1){
this.context.mixpanel.track('Main page Loaded');
}
}
render() {
return (
<Dashboard ready={this.ready}>
<div onKeyDown={this.handleKeyBoard} className="db-World-contentPane Box-root Padding-bottom--48">
<div>
<div>
<div className="db-BackboneViewContainer">
<div
className="customers-list-view react-view popover-container"
style={{ position: 'relative', overflow: 'visible' }}
>
<div className="bs-BIM">
<div className="Box-root Margin-bottom--12">
<div className="bs-ContentSection Card-root Card-shadow--medium">
<div className="Box-root">
<div className="ContentHeader Box-root Box-background--white Box-divider--surface-bottom-1 Flex-flex Flex-direction--column Padding-horizontal--20 Padding-vertical--16">
<div className="Box-root Flex-flex Flex-direction--row Flex-justifyContent--spaceBetween">
<div className="ContentHeader-center Box-root Flex-flex Flex-direction--column Flex-justifyContent--center">
<span className="ContentHeader-title Text-color--dark Text-display--inline Text-fontSize--20 Text-fontWeight--regular Text-lineHeight--28 Text-typeface--base Text-wrap--wrap">
<span style={{'textTransform':'capitalize'}}>Users</span>
</span>
<span style={{'textTransform':'lowercase'}} className="ContentHeader-description Text-color--inherit Text-display--inline Text-fontSize--14 Text-fontWeight--regular Text-lineHeight--20 Text-typeface--base Text-wrap--wrap">
<span>Here are all the members who belong to.</span>
</span>
</div>
<div className="ContentHeader-end Box-root Flex-flex Flex-alignItems--center Margin-left--16">
<div className="Box-root">
</div>
</div>
</div>
</div>
<div className="bs-ContentSection-content Box-root">
<div className="bs-ObjectList db-UserList">
<div className="bs-ObjectList-rows">
<header className="bs-ObjectList-row bs-ObjectList-row--header">
<div className="bs-ObjectList-cell">
User
</div>
<div className="bs-ObjectList-cell">
Projects
</div>
<div className="bs-ObjectList-cell">
Status
</div>
<div className="bs-ObjectList-cell"></div>
<div className="bs-ObjectList-cell"></div>
</header>
<div className="bs-ObjectList-row db-UserListRow db-UserListRow--withName">
<div className="bs-ObjectList-cell bs-u-v-middle">
<div className="bs-ObjectList-cell-row bs-ObjectList-copy bs-is-highlighted">{this.props.name}</div>
<div className="bs-ObjectList-row db-UserListRow db-UserListRow--withNamebs-ObjectList-cell-row bs-is-muted">
hello@fyipe.com
</div>
</div>
<div className="bs-ObjectList-cell bs-u-v-middle">
<div className="bs-ObjectList-cell-row">
Fyipe Project and 2 other
</div>
</div>
<div className="bs-ObjectList-cell bs-u-v-middle">
<div className="Badge Badge--color--green Box-root Flex-inlineFlex Flex-alignItems--center Padding-horizontal--8 Padding-vertical--2">
<span className="Badge-text Text-color--green Text-display--inline Text-fontSize--12 Text-fontWeight--bold Text-lineHeight--16 Text-typeface--upper Text-wrap--noWrap">
<span>
Online a few seconds ago
</span>
</span>
</div>
</div>
<div className="bs-ObjectList-cell bs-u-v-middle"></div>
<div className="bs-ObjectList-cell bs-u-right bs-u-shrink bs-u-v-middle Flex-alignContent--spaceBetween"><div>
<button
title="delete"
className="bs-Button bs-DeprecatedButton Margin-left--8"
type="button"
>
{<span>Remove</span>}
</button>
</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Dashboard>
);
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ destroy }, dispatch)
}
const mapStateToProps = state => {
return {
};
}
Users.contextTypes = {
mixpanel: PropTypes.object.isRequired
};
Users.propTypes = {
}
Users.displayName = 'Users'
export default connect(mapStateToProps, mapDispatchToProps)(Users);

4
admin-dashboard/src/pages/index.js
View File

@@ -1,7 +1,7 @@
import DashboardView from './DashboardView';
import Users from './Users';
import Profile from './Profile';
export default {
DashboardView,
Users,
Profile
}

54
admin-dashboard/src/reducers/feedback.js
View File

@@ -1,54 +0,0 @@
import { OPEN_FEEDBACK_MODAL, CLOSE_FEEDBACK_MODAL, CREATE_FEEDBACK_FAILED, CREATE_FEEDBACK_REQUEST, CREATE_FEEDBACK_SUCCESS } from '../constants/feedback'
const initialState = {
feedback:{
error:null,
requesting: false,
success:false
},
feedbackModalVisble:false
};
export default (state = initialState, action) => {
switch (action.type) {
case OPEN_FEEDBACK_MODAL:
return Object.assign({}, state, {
feedbackModalVisble: true
});
case CLOSE_FEEDBACK_MODAL:
return Object.assign({}, state, {
feedbackModalVisble: false
});
case CREATE_FEEDBACK_FAILED:
return Object.assign({}, state, {
feedback: {
requesting: false,
error: action.payload,
success: false,
},
});
case CREATE_FEEDBACK_SUCCESS:
return Object.assign({}, state, {
feedback: {
requesting: false,
success: true,
error: null
}
});
case CREATE_FEEDBACK_REQUEST:
return Object.assign({}, state, {
feedback: {
requesting: true,
error: null,
success: false,
},
});
default: return state;
}
}

2
admin-dashboard/src/reducers/index.js
View File

@@ -3,7 +3,6 @@ import { routerReducer } from 'react-router-redux';
import { reducer as formReducer } from 'redux-form';
import modal from './modal';
import profileSettings from './profile';
import feedback from './feedback';
import notifications from './notifications';
const appReducer = combineReducers({
@@ -11,7 +10,6 @@ const appReducer = combineReducers({
form: formReducer,
modal,
profileSettings,
feedback,
notifications,
});

6
admin-dashboard/src/routes.js
View File

@@ -1,7 +1,7 @@
import pages from './pages';
const {
DashboardView
Users
} = pages;
export const groups = [
@@ -10,10 +10,10 @@ export const groups = [
visible: true,
routes: [
{
title: 'Dashboard',
title: 'Users',
path: '/',
icon: 'atlas',
component: DashboardView,
component: Users,
visible: true,
subRoutes: [],
index: 1