Skip to content

Commit

Permalink
feat: nrql handled in create new service form
Browse files Browse the repository at this point in the history
  • Loading branch information
@norbertsuski
norbertsuski committed Jul 14, 2020
1 parent 4f5d347 commit af56bd4
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 62 deletions.
41 changes: 34 additions & 7 deletions components/status-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import 'web-animations-js';

import Network from '../utilities/network';
import NRQLHelper from '../utilities/nrql-helper';
import CurrentIncidents from './current-incidents';
import FormatService from '../utilities/format-service';
import {
Expand All @@ -24,6 +25,9 @@ const createOption = label => ({
label,
value: label
});

const NRQL_PROVIDER_NAME = 'nrql';

export default class StatusPage extends React.PureComponent {
static propTypes = {
hostname: PropTypes.object.isRequired,
Expand All @@ -36,11 +40,18 @@ export default class StatusPage extends React.PureComponent {
constructor(props) {
super(props);

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

this.FormatService = new FormatService(this.props.hostname.provider);
this.popupHoverTimer = null;
Expand All @@ -64,7 +75,9 @@ export default class StatusPage extends React.PureComponent {
}

async componentDidMount() {
this.StatusPageNetwork.pollSummaryData(this.setSummaryData.bind(this));
if (this.StatusPageNetwork) {
this.StatusPageNetwork.pollSummaryData(this.setSummaryData.bind(this));
}
}

handleSelectChange = value => {
Expand All @@ -90,7 +103,16 @@ export default class StatusPage extends React.PureComponent {
};

autoSetLogo(hostname) {
const { serviceName, hostName, hostLogo } = hostname;
const { serviceName, hostName, hostLogo, provider } = hostname;

if (provider === NRQL_PROVIDER_NAME) {
if (hostLogo) {
return <img src={hostLogo} className="service-logo" alt="nrql" />;
} else {
return <h2 className="service-name">{serviceName}</h2>;
}
}

if (hostName.includes('githubstatus')) {
return <img src={GitHubLogo} className="service-logo" alt="GitHub" />;
} else if (hostName.includes('jira-software')) {
Expand Down Expand Up @@ -478,6 +500,11 @@ export default class StatusPage extends React.PureComponent {

render() {
const { statusPageIoSummaryData, errorInfo } = this.state;
console.log('StatusPage -> render -> errorInfo', errorInfo);
console.log(
'StatusPage -> render -> statusPageIoSummaryData',
statusPageIoSummaryData
);
if (!statusPageIoSummaryData && !errorInfo) {
return this.renderAlternativeState('loading');
}
Expand Down
161 changes: 113 additions & 48 deletions nerdlets/status-page-dashboard/main-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,31 @@ const createOption = label => ({
label,
value: label
});

const PROVIDERS = {
STATUS_PAGE: {
value: 'statusPageIo',
label: 'Status Page'
},
GOOGLE: {
value: 'google',
label: 'Google'
},
STATUS_IO: {
value: 'statusIo',
label: 'Status Io'
},
NRQL: {
value: 'nrql',
label: 'NRQL'
}
};

const emptyInputState = {
inputValue: '',
validationText: ''
};

export default class StatusPagesDashboard extends React.PureComponent {
static propTypes = {
entityGuid: PropTypes.string
Expand All @@ -26,11 +51,6 @@ export default class StatusPagesDashboard extends React.PureComponent {
constructor(props) {
super(props);

const emptyInputState = {
inputValue: '',
validationText: ''
};

this.state = {
entityGuid: props.entityGuid ? props.entityGuid : null,
selectedAccountId: undefined,
Expand Down Expand Up @@ -82,23 +102,25 @@ export default class StatusPagesDashboard extends React.PureComponent {
const { formInputs } = this.state;
const updatedInputs = { ...formInputs };
Object.keys(updatedInputs).forEach(inputName => {
updatedInputs[inputName].validationText = '';
updatedInputs[inputName].inputValue = '';
updatedInputs[inputName] = { ...emptyInputState };
});

delete updatedInputs.nrqlQuery;
updatedInputs.hostName = { ...emptyInputState };

this.setState({ formInputs: updatedInputs, selectedPopularSiteIndex: '' });
};

validateFormAndReturnStatus = () => {
const { formInputs } = this.state;
const updatedFormInputs = { ...formInputs };
const inputsList = Object.keys(formInputs);
const genericValidatioError = 'Please fill this field before saving.';
const genericValidationError = 'Please fill this field before saving.';
let isFormValid = true;

for (const inputName of inputsList) {
if (formInputs[inputName].inputValue.length < 2) {
updatedFormInputs[inputName].validationText = genericValidatioError;
updatedFormInputs[inputName].validationText = genericValidationError;
isFormValid = false;
} else {
updatedFormInputs[inputName].validationText = '';
Expand All @@ -118,21 +140,28 @@ export default class StatusPagesDashboard extends React.PureComponent {
return isFormValid;
};

handleAddNewService = () => {
handleAddNewService = async () => {
if (this.validateFormAndReturnStatus() === false) return;

const { formInputs } = this.state;
const { serviceName, hostName, providerName, logoUrl } = formInputs;
const {
serviceName,
hostName,
providerName,
logoUrl,
nrqlQuery
} = formInputs;

const hostNameObject = {
id: uuid(),
serviceName: serviceName.inputValue,
hostName: hostName.inputValue,
hostName: hostName?.inputValue,
provider: providerName.inputValue,
hostLogo: logoUrl.inputValue
hostLogo: logoUrl.inputValue,
nrqlQuery: nrqlQuery?.inputValue
};

this.addHostName(hostNameObject);
await this.addHostName(hostNameObject);
this.clearFormInputs();
};

Expand Down Expand Up @@ -188,8 +217,12 @@ export default class StatusPagesDashboard extends React.PureComponent {
const { formInputs } = this.state;
const filledInputs = { ...formInputs };

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

filledInputs.hostName.inputValue = selectedPopularSite.hostName;
filledInputs.serviceName.inputValue = selectedPopularSite.serviceName;
filledInputs.providerName.inputValue = selectedPopularSite.provider;
filledInputs.logoUrl.inputValue = selectedPopularSite.hostLogo;

Expand All @@ -213,6 +246,27 @@ export default class StatusPagesDashboard extends React.PureComponent {
}
};

handleProviderChange = event => {
event.persist();
const { formInputs } = this.state;
const updatedFormInputs = { ...formInputs };
updatedFormInputs.providerName.inputValue = event.target.value;

if (updatedFormInputs.providerName.inputValue) {
updatedFormInputs.providerName.validationText = '';

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

this.setState({ formInputs: updatedFormInputs });
};

onAccountSelected = async (accountId, accounts) => {
if (!this.state.entityGuid) {
let { keyObject } = this.state;
Expand Down Expand Up @@ -362,7 +416,13 @@ export default class StatusPagesDashboard extends React.PureComponent {
selectedPopularSiteIndex
} = this.state;

const { serviceName, hostName, providerName, logoUrl } = formInputs;
const {
serviceName,
hostName,
providerName,
logoUrl,
nrqlQuery
} = formInputs;

return (
<div>
Expand Down Expand Up @@ -442,44 +502,18 @@ export default class StatusPagesDashboard extends React.PureComponent {

<hr className="or-sep" />

<TextFieldWrapper
label="Service name"
onChange={event => {
this.updateInputValue(event, 'serviceName');
}}
value={serviceName.inputValue}
validationText={serviceName.validationText}
/>
<TextFieldWrapper
label="Hostname"
placeholder="https://status.myservice.com/"
onChange={event => {
this.updateInputValue(event, 'hostName');
}}
value={hostName.inputValue}
validationText={hostName.validationText}
/>
<div className="select-container">
<label>Provider</label>
<select
onChange={event => {
event.persist();
const { formInputs } = this.state;
const updatedFormInputs = { ...formInputs };
updatedFormInputs.providerName.inputValue = event.target.value;

if (updatedFormInputs.providerName.inputValue) {
updatedFormInputs.providerName.validationText = '';
}

this.setState({ formInputs: updatedFormInputs });
}}
onChange={this.handleProviderChange}
value={providerName.inputValue}
>
<option value="">Choose a provider</option>
<option value="statusPageIo">Status Page</option>
<option value="google">Google</option>
<option value="statusIo">Status Io</option>
{Object.values(PROVIDERS).map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
))}
</select>
</div>
{providerName.validationText && (
Expand All @@ -488,6 +522,37 @@ export default class StatusPagesDashboard extends React.PureComponent {
</p>
)}

<TextFieldWrapper
label="Service name"
onChange={event => {
this.updateInputValue(event, 'serviceName');
}}
value={serviceName.inputValue}
validationText={serviceName.validationText}
/>

{providerName.inputValue === PROVIDERS.NRQL.value ? (
<TextFieldWrapper
label="NRQL"
placeholder="Put your NRQL query here"
onChange={event => {
this.updateInputValue(event, 'nrqlQuery');
}}
value={nrqlQuery.inputValue}
validationText={nrqlQuery.validationText}
/>
) : (
<TextFieldWrapper
label="Hostname"
placeholder="https://status.myservice.com/"
onChange={event => {
this.updateInputValue(event, 'hostName');
}}
value={hostName.inputValue}
validationText={hostName.validationText}
/>
)}

<TextFieldWrapper
label="Service logo (url)"
onChange={event => {
Expand Down
2 changes: 1 addition & 1 deletion nerdlets/status-page-dashboard/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -602,7 +602,7 @@ button[class*='Dropdown-trigger'],
border-bottom: 1px solid #edeeee;
padding: 0 8px;

.key {
.key {
margin-right: 8px;
font-weight: 600;
color: #464e4e;
Expand Down
19 changes: 13 additions & 6 deletions popular-status-pages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,46 @@ export const popularSites = {
hostName: 'https://status.cloud.google.com',
provider: 'google',
hostLogo:
'https://cloud.google.com/_static/47b8b6d10c/images/cloud/cloud-logo.svg',
'https://cloud.google.com/_static/47b8b6d10c/images/cloud/cloud-logo.svg'
},
{
id: 'f10f56ce-a9f1-41b7-8795-f3dc552de84b',
serviceName: 'New Relic',
hostName: 'https://status.newrelic.com/',
provider: 'statusPageIo',
hostLogo:
'https://newrelic.com/assets/newrelic/brand/logo-newrelic-068be7f47972f39427fe4a41ad1cad71.svg',
'https://newrelic.com/assets/newrelic/brand/logo-newrelic-068be7f47972f39427fe4a41ad1cad71.svg'
},
{
id: '6bec0401-d3e7-4b64-873b-239afc85b110',
serviceName: 'Jira',
hostName: 'https://jira-software.status.atlassian.com/',
provider: 'statusPageIo',
hostLogo:
'https://www.atlassian.com/dam/jcr:e33efd9e-e0b8-4d61-a24d-68a48ef99ed5/Jira%20Software@2x-blue.png',
'https://www.atlassian.com/dam/jcr:e33efd9e-e0b8-4d61-a24d-68a48ef99ed5/Jira%20Software@2x-blue.png'
},
{
serviceName: 'GitHub',
id: '93f445cf-a248-4c70-9d69-dc5790dbf0cd',
hostName: 'https://www.githubstatus.com/',
provider: 'statusPageIo',
hostLogo:
'https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png',
'https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png'
},
{
serviceName: 'Ezidebit',
id: 'c6d03b68-014c-4ce3-8b30-e5cdd89de6a3',
hostName:
'https://ezidebit.status.io/pages/history/598a973f96a8201305000142',
provider: 'statusIo',
hostLogo: 'https://image.status.io/rzhxxLCLmUBz.png',
hostLogo: 'https://image.status.io/rzhxxLCLmUBz.png'
},
],
{
serviceName: 'NRQL',
hostname: 'NRQL Query',
provider: 'NRQL',
hostLogo:
'https://newrelic.com/assets/newrelic/brand/logo-newrelic-068be7f47972f39427fe4a41ad1cad71.svg'
}
]
};
Loading

0 comments on commit af56bd4

Please sign in to comment.