-
Notifications
You must be signed in to change notification settings - Fork 902
/
ApplicationComponent.tsx
94 lines (80 loc) · 2.9 KB
/
ApplicationComponent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import { ApplicationRefresher } from 'core/application/nav/ApplicationRefresher';
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 { 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> {
constructor(props: IApplicationComponentProps) {
super(props);
const { app } = props;
this.state = this.parseState(props);
if (props.app.notFound) {
ReactInjector.recentHistoryService.removeLastItem('applications');
return;
}
DebugWindow.application = app;
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();
}
}
public pageApplicationOwner(): void {
ReactInjector.pagerDutyWriter.pageApplicationOwnerModal(this.props.app);
}
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;
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>
</div>
</div>
<div className="container scrollable-columns">
<UIView className="secondary-panel" name="insight"/>
</div>
</div>
);
}
}