Skip to content

Commit

Permalink
feat: fetching incidents with nrql query
Browse files Browse the repository at this point in the history
  • Loading branch information
@norbertsuski
norbertsuski committed Jul 16, 2020
1 parent d009399 commit fc8215a
Show file tree
Hide file tree
Showing 9 changed files with 198 additions and 79 deletions.
36 changes: 26 additions & 10 deletions components/current-incidents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,19 @@ import dayjs from 'dayjs';

import { navigation, Icon, Button } from 'nr1';
import FormatService from '../utilities/format-service';
import NRQLHelper from '../utilities/nrql-helper';
// import { hostname } from 'os';

const NRQL_PROVIDER_NAME = 'nrql';

export default class CurrentIncidents extends React.PureComponent {
static propTypes = {
hostname: PropTypes.string.isRequired,
hostname: PropTypes.string,
provider: PropTypes.string.isRequired,
refreshRate: PropTypes.number,
handleTileClick: PropTypes.func
handleTileClick: PropTypes.func,
accountId: PropTypes.string,
nrqlQuery: PropTypes.string
};

constructor(props) {
Expand All @@ -21,12 +26,22 @@ export default class CurrentIncidents extends React.PureComponent {
currentIncidents: undefined,
isPolling: false
};

if (this.props.provider !== NRQL_PROVIDER_NAME) {
this.statusPageNetwork = new Network(
this.props.hostname,
this.props.refreshRate,
this.props.provider
);
} else {
this.statusPageNetwork = new NRQLHelper(
this.props.nrqlQuery,
this.props.refreshRate,
this.props.accountId
);
}
this.FormatService = new FormatService(this.props.provider);
this.statusPageNetwork = new Network(
this.props.hostname,
this.props.refreshRate,
this.props.provider
);

this.seeMore = this.seeMore.bind(this);
}

Expand All @@ -45,7 +60,8 @@ export default class CurrentIncidents extends React.PureComponent {
id: 'incident-details',
urlState: {
hostname: this.props.hostname,
provider: this.props.provider
provider: this.props.provider,
nrqlQuery: this.props.nrqlQuery
}
};
navigation.openStackedNerdlet(nerdletWithState);
Expand Down Expand Up @@ -122,8 +138,8 @@ export default class CurrentIncidents extends React.PureComponent {
</div>
);
}

this.statusPageNetwork.refreshRateInSeconds = this.props.refreshRate;
// console.table(currentIncidents);
// this.statusPageNetwork.refreshRateInSeconds = this.props.refreshRate;
const first3Incicdents = currentIncidents.slice(0, 3);
const first3TimelineItems = first3Incicdents.map((incident, i) => {
return (
Expand Down
130 changes: 80 additions & 50 deletions components/status-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export default class StatusPage extends React.PureComponent {
refreshRate: PropTypes.number,
handleDeleteTileModal: PropTypes.func,
editHostName: PropTypes.func,
setServiceTileRef: PropTypes.object
setServiceTileRef: PropTypes.object,
accountId: PropTypes.string
};

constructor(props) {
Expand All @@ -49,7 +50,8 @@ export default class StatusPage extends React.PureComponent {
} else {
this.StatusPageNetwork = new NRQLHelper(
this.props.hostname.nrqlQuery,
this.props.refreshRate
this.props.refreshRate,
this.props.accountId
);
}

Expand All @@ -65,6 +67,7 @@ export default class StatusPage extends React.PureComponent {
settingsPopoverActive: false,
editedServiceName: this.props.hostname.serviceName,
editedHostName: this.props.hostname.hostName,
editedNrqlQuery: this.props.hostname.nrqlQuery,
editedHostProvider: this.props.hostname.provider,
editedHostLogo: this.props.hostname.hostLogo,
editedHostId: this.props.hostname.id
Expand Down Expand Up @@ -248,6 +251,7 @@ export default class StatusPage extends React.PureComponent {
refreshRate,
hostname,
provider,
nrqlQuery,
selectedIndex
) {
if (!event.target.closest('.destructive')) {
Expand All @@ -259,6 +263,8 @@ export default class StatusPage extends React.PureComponent {
refreshRate: refreshRate,
hostname: hostname,
provider: provider,
nrqlQuery: nrqlQuery,
accountId: this.props.accountId,
timelineItemIndex: selectedIndex
}
});
Expand All @@ -271,7 +277,9 @@ export default class StatusPage extends React.PureComponent {
statusPageIoSummaryData: statusPageIoSummaryData,
refreshRate: refreshRate,
hostname: hostname,
provider: provider
provider: provider,
nrqlQuery: nrqlQuery,
accountId: this.props.accountId
}
});
}
Expand Down Expand Up @@ -302,6 +310,7 @@ export default class StatusPage extends React.PureComponent {
hostName: this.state.editedHostName,
provider: this.state.editedHostProvider,
hostLogo: this.state.editedHostLogo,
nrqlQuery: this.state.editedNrqlQuery,
id: this.state.editedHostId
};

Expand Down Expand Up @@ -400,55 +409,72 @@ export default class StatusPage extends React.PureComponent {
}
defaultValue={hostname.serviceName}
/>
<TextField
label="Hostname"
placeholder="https://status.myservice.com/"
className="status-page-setting"
onChange={() =>
this.setState(previousState => ({
...previousState,
editedHostName: event.target.value
}))
}
defaultValue={hostname.hostName}
/>
<Dropdown
title="Choose a provider"
label="Provider"
className="status-page-setting"
>
<DropdownItem
selected
onClick={() =>
this.setState(previousState => ({
...previousState,
editedHostProvider: event.target.innerHTML
}))
}
>
Status Page
</DropdownItem>
<DropdownItem
onClick={() =>
this.setState(previousState => ({
...previousState,
editedHostProvider: event.target.innerHTML
}))
}
>
Google
</DropdownItem>
<DropdownItem
onClick={() =>
{hostname.provider !== NRQL_PROVIDER_NAME ? (
<>
<TextField
label="Hostname"
placeholder="https://status.myservice.com/"
className="status-page-setting"
onChange={() =>
this.setState(previousState => ({
...previousState,
editedHostName: event.target.value
}))
}
defaultValue={hostname.hostName}
/>
<Dropdown
title="Choose a provider"
label="Provider"
className="status-page-setting"
>
<DropdownItem
selected
onClick={() =>
this.setState(previousState => ({
...previousState,
editedHostProvider: event.target.innerHTML
}))
}
>
Status Page
</DropdownItem>
<DropdownItem
onClick={() =>
this.setState(previousState => ({
...previousState,
editedHostProvider: event.target.innerHTML
}))
}
>
Google
</DropdownItem>
<DropdownItem
onClick={() =>
this.setState(previousState => ({
...previousState,
editedHostProvider: event.target.innerHTML
}))
}
>
Status Io
</DropdownItem>
</Dropdown>
</>
) : (
<TextField
label="NRQL"
placeholder="Put your NRQL query here"
className="status-page-setting"
onChange={() =>
this.setState(previousState => ({
...previousState,
editedHostProvider: event.target.innerHTML
editedNrqlQuery: event.target.value
}))
}
>
Status Io
</DropdownItem>
</Dropdown>
defaultValue={hostname.nrqlQuery}
/>
)}
<TextField
label="Service logo"
className="status-page-setting"
Expand Down Expand Up @@ -497,7 +523,7 @@ export default class StatusPage extends React.PureComponent {
}

renderSuccessfulState() {
const { refreshRate, hostname } = this.props;
const { refreshRate, hostname, accountId } = this.props;
const { statusPageIoSummaryData = {} } = this.state;

return (
Expand All @@ -509,7 +535,8 @@ export default class StatusPage extends React.PureComponent {
statusPageIoSummaryData,
refreshRate,
hostname.hostName,
hostname.provider
hostname.provider,
hostname.nrqlQuery
)
}
>
Expand Down Expand Up @@ -574,12 +601,15 @@ export default class StatusPage extends React.PureComponent {
refreshRate={refreshRate}
hostname={hostname.hostName}
provider={hostname.provider}
accountId={accountId}
nrqlQuery={hostname.nrqlQuery}
handleTileClick={i => {
this.handleTileClick(
statusPageIoSummaryData,
refreshRate,
hostname.hostName,
hostname.provider,
hostname.nrqlQuery,
i
);
}}
Expand Down
6 changes: 5 additions & 1 deletion nerdlets/service-details/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ export default class ServiceDetailsWrapper extends React.PureComponent {
provider,
hostname,
timelineItemIndex,
refreshRate
refreshRate,
nrqlQuery,
accountDetails
} = nerdletUrlState;

return (
Expand All @@ -26,6 +28,8 @@ export default class ServiceDetailsWrapper extends React.PureComponent {
provider={provider}
refreshRate={refreshRate}
timelineItemIndex={timelineItemIndex}
nrqlQuery={nrqlQuery}
accountDetails={accountDetails}
/>
</>
);
Expand Down
21 changes: 18 additions & 3 deletions nerdlets/service-details/service-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,18 @@ import FormatService from '../../utilities/format-service';
import dayjs from 'dayjs';

import { Icon, Button } from 'nr1';
import NRQLHelper from '../../utilities/nrql-helper';

const NRQL_PROVIDER_NAME = 'nrql';

export default class ServiceDetails extends React.PureComponent {
static propTypes = {
hostname: PropTypes.string.isRequired,
hostname: PropTypes.string,
provider: PropTypes.string.isRequired,
refreshRate: PropTypes.number,
timelineItemIndex: PropTypes.object
timelineItemIndex: PropTypes.object,
nrqlQuery: PropTypes.string,
accountId: PropTypes.string
};

constructor(props) {
Expand Down Expand Up @@ -53,7 +58,17 @@ export default class ServiceDetails extends React.PureComponent {

this.FormatService = new FormatService(provider);

this.statusPageNetwork = new Network(hostname, refreshRate, provider);
if (NRQL_PROVIDER_NAME === provider) {
const { nrqlQuery, accountId } = this.props;
this.statusPageNetwork = new NRQLHelper(
nrqlQuery,
refreshRate,
accountId
);
} else {
this.statusPageNetwork = new Network(hostname, refreshRate, provider);
}

this.statusPageNetwork.pollCurrentIncidents(this.setIncidentData);
};

Expand Down
7 changes: 4 additions & 3 deletions nerdlets/status-page-dashboard/main-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,11 +162,11 @@ export default class StatusPagesDashboard extends React.PureComponent {
} = formInputs;

let formattedHostName;
if (providerName !== PROVIDERS.NRQL.value) {
if (providerName.inputValue !== PROVIDERS.NRQL.value) {
const CORSproxy = 'https://cors-anywhere.herokuapp.com/';
formattedHostName = hostRequiresProxy
? `${CORSproxy}${hostName?.inputValue}`
: hostName.inputValue;
: hostName?.inputValue;
}

const hostNameObject = {
Expand Down Expand Up @@ -236,6 +236,7 @@ export default class StatusPagesDashboard extends React.PureComponent {

if (filledInputs.providerName.inputValue === PROVIDERS.NRQL.value) {
filledInputs.hostName = { ...emptyInputState };
delete filledInputs.nrqlQuery;
}

filledInputs.hostName.inputValue = selectedPopularSite.hostName;
Expand Down Expand Up @@ -391,7 +392,7 @@ export default class StatusPagesDashboard extends React.PureComponent {
handleDeleteTileModal={() => this.handleDeleteTileModal}
editHostName={() => this.editHostName}
setSearchQuery={() => this.setSearchQuery}
keyObject={keyObject}
accountId={this.state.selectedAccountId}
/>
</GridItem>
));
Expand Down
2 changes: 1 addition & 1 deletion nr1.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"schemaType": "NERDPACK",
"id": "2522268e-d37f-47db-a9b8-816da0ee2584",
"id": "f71018a3-cb76-431a-af7e-74623b1f7c6a",
"displayName": "Status Pages",
"description": "Collect and display the statuses of key dependencies in one place"
}
Loading

0 comments on commit fc8215a

Please sign in to comment.