Skip to content

Commit

Permalink
feat(core): implement categorized navigation (#5063)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anotherchrisberry
anotherchrisberry committed Mar 26, 2018
1 parent 7c2079e commit 9d59e04
Show file tree
Hide file tree
Showing 27 changed files with 711 additions and 466 deletions.
84 changes: 29 additions & 55 deletions app/scripts/modules/core/src/application/ApplicationComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
import { ApplicationRefresher } from 'core/application/nav/ApplicationRefresher';
import { ApplicationHeader } from 'core/application/nav/ApplicationHeader';
import * as React from 'react';
import { BindAll } from 'lodash-decorators';
import { UIView } from '@uirouter/react';

import { Application } from 'core/application';
import { NgReact, ReactInjector } from 'core/reactShims';
import { ReactInjector } from 'core/reactShims';
import { DebugWindow } from 'core/utils/consoleDebug';

import { ApplicationIcon } from './ApplicationIcon';
import './application.less';
import { PagerDutyButton } from './nav/PagerDutyButton';

export interface IApplicationComponentProps {
app: Application;
}

export interface IApplicationComponentState {
compactHeader: boolean;
}

@BindAll()
export class ApplicationComponent extends React.Component<IApplicationComponentProps, IApplicationComponentState> {
export class ApplicationComponent extends React.Component<IApplicationComponentProps> {

constructor(props: IApplicationComponentProps) {
super(props);
const { app } = props;
this.state = this.parseState(props);
if (props.app.notFound) {
this.mountApplication(props.app);
}

public componentWillUnmount(): void {
this.unmountApplication(this.props.app);
}

public componentWillReceiveProps(nextProps: IApplicationComponentProps): void {
this.unmountApplication(this.props.app);
this.mountApplication(nextProps.app);
}

private mountApplication(app: Application) {
if (app.notFound) {
ReactInjector.recentHistoryService.removeLastItem('applications');
return;
}
Expand All @@ -35,56 +40,25 @@ export class ApplicationComponent extends React.Component<IApplicationComponentP
app.enableAutoRefresh();
}

private parseState(props: IApplicationComponentProps): IApplicationComponentState {
return {
compactHeader: props.app.name.length > 20,
};
}

public componentWillUnmount(): void {
if (!this.props.app.notFound) {
DebugWindow.application = undefined;
this.props.app.disableAutoRefresh();
private unmountApplication(app: Application) {
if (app.notFound) {
return;
}
}

public pageApplicationOwner(): void {
ReactInjector.pagerDutyWriter.pageApplicationOwnerModal(this.props.app);
DebugWindow.application = undefined;
app.disableAutoRefresh();
}

public render() {
const { ApplicationNav, ApplicationNavSecondary } = NgReact;

const NotFound = this.props.app.notFound ? (
<div>
<h2 className="text-center">Application Not Found</h2>
<p className="text-center" style={{ marginBottom: '20px' }}>Please check your URL - we can't find any data for <em>{this.props.app.name}</em>.</p>
</div>
) : null;

const Found = !this.props.app.notFound ? (
<h2>
<ApplicationIcon app={this.props.app} />
<span className="application-name">{this.props.app.name}</span>
<ApplicationRefresher app={this.props.app}/>
</h2>
) : null;

const { app } = this.props;
return (
<div className="application">
<div className={`page-header ${this.state.compactHeader ? 'compact-header' : ''}`}>
{NotFound}
<div className="container application-header">
{Found}
<div className="application-navigation">
<ApplicationNav application={this.props.app}/>
<div className="header-right">
<ApplicationNavSecondary application={this.props.app}/>
<PagerDutyButton app={this.props.app}/>
</div>
</div>
{!app.notFound && <ApplicationHeader app={app} />}
{app.notFound && (
<div>
<h2 className="text-center">Application Not Found</h2>
<p className="text-center" style={{ marginBottom: '20px' }}>Please check your URL - we can't find any data for <em>{app.name}</em>.</p>
</div>
</div>
)}
<div className="container scrollable-columns">
<UIView className="secondary-panel" name="insight"/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/modules/core/src/application/ApplicationIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ export interface IApplicationIconProps extends IOverridableProps {
@Overridable('applicationIcon')
export class ApplicationIcon extends React.Component<IApplicationIconProps> {
public render() {
return <i className="far fa-window-maximize"/>;
return <i className="application-header-icon far fa-window-maximize"/>;
}
}
96 changes: 0 additions & 96 deletions app/scripts/modules/core/src/application/application.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,102 +7,6 @@
overflow-y: hidden;
}

.compactH2() {
float: left;
font-size: 160%;
min-width: 120px;
margin-right: 30px;
margin-top: 15px;
.fa-window-maximize, .glyphicon-equalizer {
width: 28px;
height: 28px;
line-height: 24px;
font-size: 14px;
}
}

.compactPageButton() {
margin-top: 16px;
}

.compactHeaderPadding() {
padding: 0 10px;
}

.compact-header .application-header {
.compactHeaderPadding();
.page-button {
.compactPageButton();
}
h2 {
.compactH2();
}
}

.application-header {
margin-top: 0;
margin-bottom: 0;
display: flex;
flex: 0 0 auto;
align-items: stretch;
flex-wrap: wrap;
padding: 15px 15px 0;
z-index: 5;
border: 0;
@media (max-width: 1400px) {
.compactHeaderPadding();
}
.header-right {
flex: 1 1 auto;
text-align: right;
}
.application-name {
margin-right: 10px;
}
.page-button {
display: inline-block;
margin-top: 15px;
@media (min-width: 708px) and (max-width: 1400px) {
.compactPageButton();
}
.btn-danger {
background-color: var(--color-danger);
border-color: transparent;
padding: 0 5px;
font-size: 14px;
}
}
.application-navigation {
display: flex;
flex: 1 0 auto;
}
h2 {
min-width: 200px;
margin-right: 50px;
font-weight: 700;
display: flex;
flex: 0 0 auto;
.fa-window-maximize, .glyphicon-equalizer {
.encircled;
margin-right: 5px;
width: 36px;
height: 36px;
line-height: 32px;
font-size: 16px;
margin-left: 0;
}
@media (min-width: 708px) and (max-width: 1400px) {
.compactH2();
}

a {
font-size: 75%;
display: inline-block;
margin-right: 20px;
}
}
}

.glyphicon-cloud {
top: 4px;
}
Expand Down
4 changes: 0 additions & 4 deletions app/scripts/modules/core/src/application/application.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { PAGER_DUTY_MODULE } from 'core/pagerDuty/pagerDuty.module';

import './applicationSearchResultType';
import './nav/defaultCategories';
import { APPLICATION_NAV_COMPONENT } from './nav/applicationNav.component';
import { APPLICATION_NAV_SECONDARY_COMPONENT } from './nav/applicationNavSecondary.component';
import { APPLICATION_STATE_PROVIDER } from './application.state.provider';
import { APPLICATIONS_STATE_PROVIDER } from './applications.state.provider';
import { PERMISSIONS_CONFIGURER_COMPONENT } from './modal/permissionsConfigurer.component';
Expand All @@ -19,8 +17,6 @@ module(APPLICATION_MODULE, [
require('./modal/createApplication.modal.controller.js').name,
require('./modal/platformHealthOverride.directive').name,
require('./config/appConfig.dataSource').name,
APPLICATION_NAV_COMPONENT,
APPLICATION_NAV_SECONDARY_COMPONENT,
PAGER_DUTY_MODULE,
PERMISSIONS_CONFIGURER_COMPONENT,
UPSERT_APPLICATION_HELP,
Expand Down
Loading

0 comments on commit 9d59e04

Please sign in to comment.