review - adjusting field widths and error messages

Signed-off-by: Maia Iyer <maia.raj.iyer@gmail.com>

tornjak-frontend/src/components/dashboard/agents-dashboard-table.js

@@ -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);
  })

tornjak-frontend/src/components/entry-create.js

@@ -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';
@@ -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: "",
@@ -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,
@@ -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)
  })
  }
 
@@ -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) {
@@ -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>
  }

tornjak-frontend/src/components/spiffe-helper.js

@@ -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 = [];

tornjak-frontend/src/components/style.css

@@ -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 {