3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
19 import React from 'react';
20 import { Link } from 'react-router';
21 import Utils from 'utils/utils.js';
22 import Crouton from 'react-crouton';
23 import 'style/common.scss';
25 //Temporary, until api server is on same port as webserver
26 import rw from 'utils/rw.js';
28 var API_SERVER = rw.getSearchParams(window.location).api_server;
29 var UPLOAD_SERVER = rw.getSearchParams(window.location).upload_server;
32 // Internal classes/functions
35 class LogoutAppMenuItem extends React.Component {
37 Utils.clearAuthentication();
43 <a onClick={this.handleLogout}>
54 // Exported classes and functions
59 * Skyquake Nav Component. Provides navigation functionality between all plugins
61 export default class skyquakeNav extends React.Component {
65 this.state.validateErrorEvent = 0;
66 this.state.validateErrorMsg = '';
68 validateError = (msg) => {
70 validateErrorEvent: true,
74 validateReset = () => {
76 validateErrorEvent: false
79 returnCrouton = () => {
82 message={this.state.validateErrorMsg}
84 hidden={!(this.state.validateErrorEvent && this.state.validateErrorMsg)}
85 onDismiss={this.validateReset}
92 {this.returnCrouton()}
93 <nav className="skyquakeNav">
94 {buildNav.call(this, this.props.nav, this.props.currentPlugin)}
102 skyquakeNav.defaultProps = {
106 * Returns a React Component
107 * @param {object} link Information about the nav link
108 * @param {string} link.route Hash route that the SPA should resolve
109 * @param {string} link.name Link name to be displayed
110 * @param {number} index index of current array item
111 * @return {object} component A React LI Component
113 //This should be extended to also make use of internal/external links and determine if the link should refer to an outside plugin or itself.
114 export function buildNavListItem (k, link, index) {
116 if (link.type == 'external') {
117 this.hasSubNav[k] = true;
120 {returnLinkItem(link)}
128 * Builds a link to a React Router route or a new plugin route.
129 * @param {object} link Routing information from nav object.
130 * @return {object} component returns a react component that links to a new route.
132 export function returnLinkItem(link) {
134 let route = link.route;
135 if(link.isExternal) {
137 <a href={route}>{link.label}</a>
140 if(link.path && link.path.replace(' ', '') != '') {
145 query[link.query] = '';
161 * Constructs nav for each plugin, along with available subnavs
162 * @param {array} nav List returned from /nav endpoint.
163 * @return {array} List of constructed nav element for each plugin
165 export function buildNav(nav, currentPlugin) {
167 let navListHTML = [];
168 let secondaryNav = [];
171 let secondaryNavHTML = (
172 <div className="secondaryNav" key="secondaryNav">
174 <LogoutAppMenuItem />
178 if (nav.hasOwnProperty(k)) {
179 self.hasSubNav[k] = false;
181 let navClass = "app";
182 let routes = nav[k].routes;
184 //Primary plugin title and link to dashboard.
188 route = routes[0].isExternal ? '/' + k + '/index.html?api_server=' + API_SERVER + '' + '&upload_server=' + UPLOAD_SERVER + '' : '';
190 route = routes[0].isExternal ? '/' + k + '/' : '';
192 let dashboardLink = returnLinkItem({
193 isExternal: routes[0].isExternal,
194 pluginName: nav[k].pluginName,
195 label: nav[k].label || k,
198 if (nav[k].pluginName == currentPlugin) {
199 navClass += " active";
201 NavList = nav[k].routes.map(buildNavListItem.bind(self, k));
202 navItem.priority = nav[k].priority;
203 navItem.order = nav[k].order;
205 <div key={k} className={navClass}>
206 <h2>{dashboardLink} {self.hasSubNav[k] ? <span className="oi" data-glyph="caret-bottom"></span> : ''}</h2>
207 <ul className="menu">
214 navList.push(navItem)
217 //Sorts nav items by order and returns only the markup
218 navListHTML = navList.sort((a,b) => a.order - b.order).map(function(n) {
219 if((n.priority < 2)){
222 secondaryNav.push(n.html);
225 navListHTML.push(secondaryNavHTML);