Skip to content

Commit

Permalink
review - adjusting field widths and error messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@maia-iyer
maia-iyer committed Aug 12, 2021
1 parent 3100b66 commit 8273a34
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 58 deletions.
2 changes: 1 addition & 1 deletion tornjak-frontend/src/components/dashboard/agents-dashboard-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ class AgentDashboardTable extends React.Component {
return [];
}

let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList)
let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList) // TODO this.props.globalEntries.globalEntriesList may be undefined if there are no entries
return this.props.globalAgents.globalAgentsList.map(currentAgent => {
return this.getChildEntries(currentAgent, agentEntriesDict);
})
Expand Down
109 changes: 60 additions & 49 deletions tornjak-frontend/src/components/entry-create.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import { Dropdown, TextInput, MultiSelect, Checkbox, TextArea, NumberInput, DatePicker, DatePickerInput, TimePicker } from 'carbon-components-react';
import { Dropdown, TextInput, MultiSelect, Checkbox, TextArea, NumberInput } from 'carbon-components-react';
import GetApiServerUri from './helpers';
import IsManager from './is_manager';
import TornjakApi from './tornjak-api-helpers';
Expand Down Expand Up @@ -43,7 +43,6 @@ class CreateEntry extends Component {
this.onChangeDownStream = this.onChangeDownStream.bind(this);
this.onChangeDnsNames = this.onChangeDnsNames.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.setState = this.setState.bind(this);

this.state = {
name: "",
Expand All @@ -67,9 +66,10 @@ class CreateEntry extends Component {
expiryOption: "None",
expiryOptionList: ["None", "Seconds Since Epoch", "Date/Time"],
expiryDate: "1/1/2021",
expiryTime: "13:01",
expiryTime: "00:00",
expiresAt: 0,
expiryBad: false,
expiryUnsafe: false,
expiryInvalid: false,
dnsNames: [],
federatesWith: [],
downstream: false,
Expand Down Expand Up @@ -223,21 +223,15 @@ class CreateEntry extends Component {
});
}

isValidJSTime(seconds) {
const JSMaxSafeTime = 8640000000000
isValidExpiryTime(seconds) {
const JSMaxSafeTime = 8640000000000 // JS cannot represent times safely larger than this
return seconds > 0 && seconds <= JSMaxSafeTime
}

expiryTimeUpdate(seconds) {
if (!this.isValidJSTime(seconds)) {
this.setState({
expiryBad: true,
})
return
}
this.setState({
expiryBad: false,
expiresAt: seconds
expiresAt: seconds,
expiryUnsafe: !this.isValidExpiryTime(seconds)
})
}

Expand All @@ -247,20 +241,28 @@ class CreateEntry extends Component {
}

// TODO some odd behavior with dates like February 33 exists
isValidDate(d) { // date is successfully translated
isValidDate(d) { // date is successfully translated in Javascript
return d instanceof Date && isFinite(d)
}

updateValidDateAndTime(d, t) {
var testDate = new Date(d + ", " + t)
this.setState({ // should always reflect what the user sees
expiryDate: d,
expiryTime: t
})
if (this.isValidDate(testDate)) {
this.setState({
expiryDate: d,
expiryTime: t
expiryInvalid: false,
})
var seconds = Math.round(testDate / 1000)
this.expiryTimeUpdate(seconds)
}
console.log(d, t, this.state.expiryDate, this.state.expiryTime)
return
}
this.setState({
expiryInvalid: true,
})
}

onChangeExpiresAtDate(e) {
Expand Down Expand Up @@ -683,51 +685,60 @@ class CreateEntry extends Component {
{this.state.expiryOption !== "None" && <div className="expiryEntryFields">
{this.state.expiryOption === "Seconds Since Epoch" &&
<div className="expiryOption-field">
<NumberInput
aria-required="true"
helperText="(seconds since Unix epoch)"
id="expiresAt-input"
invalidText="Number is not valid"
label="Enter expiry time [*required]"
min={1}
step={1}
//value={1}
onChange={this.onChangeExpiresAtSeconds}
/>
<div className="expiryOption-entry">
<NumberInput
aria-required="true"
helperText="(seconds since Unix epoch)"
id="expiresAt-input"
invalidText="Number is not valid"
label="Enter expiry time [*required]"
min={1}
step={1}
onChange={this.onChangeExpiresAtSeconds}
/>
</div>
</div>
}
{this.state.expiryOption === "Date/Time" &&
<div className="expiryOption-field">
<div className="expiryOption-entry">
<DatePicker datePickerType="simple">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Enter a date"
onChange={this.onChangeExpiresAtDate}
/>
</DatePicker>
<TextInput
labelText="Enter expiry date [*required]"
helperText="mm/dd/yyyy or mm/dd/yyyyy"
placeholder="08/13/2345"
pattern={["^\\d{2}/\\d{2}/\\d{4,5}$"]}
onChange={this.onChangeExpiresAtDate}
required
/>
</div>
<div className="expiryOption-entry">
<TextInput
labelText="Enter local time (15:45)"
labelText="Enter local time [*required]"
helperText="00:00:00 - 23:59:59"
placeholder="hh:mm:ss"
maxDetail="seconds"
pattern={["^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$"]} // Allows
pattern={["^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$"]}
onChange={this.onChangeExpiresAtTime}
invalidText="NotGoodTime"
required
/>
</div>
</div>
}
{this.state.expiryBad &&
<div role="alert">
<p className="failed-message">Warning: expiry time either in invalid format, is negative, or is too large. Submitting this time may result in undefined behavior.</p>
{this.state.expiryOption === "Seconds Since Epoch" &&
<p className="failed-message">Seconds must be positive and less than 8640000000000</p>
}
{this.state.expiryOption === "Date/Time" &&
<p className="failed-message">Date must be past January 1, 1970 @ 12:00AM GMT</p>
}
</div>
</div>


}
{(this.state.expiryUnsafe || this.state.expiryInvalid) &&
<div role="alert">
<p className="failed-message">Warning: expiry time either in invalid format, is negative, or is too large. Submitting this time may result in undefined behavior.</p>
{this.state.expiryOption === "Seconds Since Epoch" && this.state.expiryUnsafe &&
<p className="failed-message">Seconds must be positive and less than 8640000000000</p>
}
{this.state.expiryOption === "Date/Time" && this.state.expiryUnsafe &&
<p className="failed-message">Date must be past January 1, 1970 @ 12:00AM GMT</p>
}
{this.state.expiryOption === "Date/Time" && this.state.expiryInvalid &&
<p className="failed-message">Date or time format is invalid</p>
}
</div>
}
Expand Down
3 changes: 2 additions & 1 deletion tornjak-frontend/src/components/spiffe-helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@ class SpiffeHelper extends Component {
// performance is impacted.
getAgentsEntries (agents, entries) {
if (typeof entries === 'undefined') {
return {};
console.log("spiffe-helper.js: getAgentEntries: this should not happen, entries undefined`")
//return {};
}
let nodeEntries = entries.filter(e => e.parent_id.path === "/spire/server");
var lambdas = [];
Expand Down
15 changes: 8 additions & 7 deletions tornjak-frontend/src/components/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,47 +126,48 @@
.ttl-input {
margin-right: 20px;
margin-bottom: 20px;
width: 300px
width: 200px
}

.expiresAt-input {
margin-right: 20px;
margin-bottom: 20px;
width: 700px;
width: 600px;
}

.expiry-drop-down {
display: inline-block;
vertical-align: top;
margin-right: 20px;
width: 240px;
width: 200px;
}

.expiryEntryFields {
display: inline-block;
vertical-align: top;
width: 400px;
width: 200px;
}

.expiryOption-field {
display: inline-block;
vertical-align: top;
width: 400px;
width: 500px;
}

.expiryOption-entry {
margin-right: 20px;
display: inline-block;
vertical-align: top;
width: 200px;
}

.federates-with-input-field {
margin-bottom: 20px;
width: 55%;
width: 420px;
}
.dnsnames-input-field {
margin-bottom: 20px;
width: 55%;
width: 420px;
}

.servers-drp-dwn {
Expand Down

0 comments on commit 8273a34

Please sign in to comment.