Merge pull request #140 from alanconway/better-timerange

NO-JIRA: Improved layout, time duration option.

Author: openshift-merge-bot[bot]

web/locales/en/plugin__troubleshooting-panel-console-plugin.json

@@ -1,24 +1,29 @@
 {
   "Correlation result was empty.": "Correlation result was empty.",
-  "Depth": "Depth",
+  "Duration": "Duration",
   "Find related resources.": "Find related resources.",
   "Focus": "Focus",
+  "Follow paths to class": "Follow paths to class",
+  "Follow up to": "Follow up to",
   "Generate a correlation graph starting from resources in the current view.": "Generate a correlation graph starting from resources in the current view.",
-  "Goal directed search": "Goal directed search",
+  "Goal": "Goal",
   "Korrel8r Error": "Korrel8r Error",
+  "Last": "Last",
   "Logging Plugin Disabled": "Logging Plugin Disabled",
-  "Neighbourhood search": "Neighbourhood search",
+  "Neighbourhood": "Neighbourhood",
   "Netflow Plugin Disabled": "Netflow Plugin Disabled",
   "No Correlated Signals Found": "No Correlated Signals Found",
   "Open the Troubleshooting Panel": "Open the Troubleshooting Panel",
+  "Query": "Query",
   "Query to select the starting resources for correlation.": "Query to select the starting resources for correlation.",
+  "Range": "Range",
   "Refresh the graph using the current search settings": "Refresh the graph using the current search settings",
   "Request Failed": "Request Failed",
-  "Search for  correlated resources up to the specified depth.": "Search for  correlated resources up to the specified depth.",
-  "Search for paths to resources of the specified class.": "Search for paths to resources of the specified class.",
+  "rules": "rules",
+  "Search Type": "Search Type",
   "The current view does not support correlation.": "The current view does not support correlation.",
+  "Time Range": "Time Range",
   "Troubleshooting": "Troubleshooting",
   "Troubleshooting Panel": "Troubleshooting Panel",
-  "Unable to find Console Link": "Unable to find Console Link",
-  "Update": "Update"
+  "Unable to find Console Link": "Unable to find Console Link"
 }

web/package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "npm run clean && NODE_ENV=production npm run ts-node node_modules/.bin/webpack",
+    "build": "npm run clean && npm run ts-node node_modules/.bin/webpack",
     "build-dev": "npm run clean && npm run ts-node node_modules/.bin/webpack",
     "start": "npm run ts-node node_modules/.bin/webpack serve",
     "start-console": "../scripts/start-console.sh",

web/src/__tests__/time.spec.ts

@@ -0,0 +1,29 @@
+import * as time from '../time';
+
+describe('Range', () => {
+  it('constructs', () => {
+    const [start, end] = [new Date(1969, 3, 21), new Date(1969, 3, 22)];
+    const range = new time.Range(start, end);
+    expect(range.startEnd()).toEqual([start, end]);
+  });
+});
+
+describe('Duration', () => {
+  it('constructs', () => {
+    const duration = new time.Duration(1000, time.SECOND);
+    const [start, end] = duration.startEnd();
+    const now = Date.now();
+    expect(duration.duration()).toEqual(1000 * time.SECOND.value);
+    expect(end.getTime() - start.getTime()).toEqual(1000 * time.SECOND.value);
+    expect(Math.floor(end.getTime() / 100)).toEqual(Math.floor(now / 100));
+  });
+});
+
+describe('Unit', () => {
+  it('all', () => {
+    expect(time.Unit.all()).toEqual([time.SECOND, time.MINUTE, time.HOUR, time.DAY, time.WEEK]);
+  });
+  it('get', () => {
+    expect(time.Unit.get('seconds')).toEqual(time.SECOND);
+  });
+});

web/src/components/Chooser.tsx

@@ -0,0 +1,25 @@
+import { ToggleGroup, ToggleGroupItem, Tooltip } from '@patternfly/react-core';
+import * as React from 'react';
+import './korrel8rpanel.css';
+
+export interface ChooserProps {
+  selectedID: string;
+  items: { label: string; id: string; tooltip?: string }[];
+  onChange: (id: string) => void;
+}
+
+export const Chooser: React.FC<ChooserProps> = ({ selectedID, items, onChange }) => (
+  <ToggleGroup>
+    {items.map(({ label, id, tooltip }) => {
+      let item = (
+        <ToggleGroupItem
+          text={label}
+          isSelected={selectedID === id}
+          onChange={(_, on) => on && onChange && onChange(id)}
+        />
+      );
+      if (tooltip) item = <Tooltip content={tooltip}>{item}</Tooltip>;
+      return item;
+    })}
+  </ToggleGroup>
+);

web/src/components/DateTimePicker.tsx

@@ -0,0 +1,42 @@
+import {
+  DatePicker,
+  InputGroup,
+  InputGroupItem,
+  InputGroupText,
+  isValidDate,
+  TimePicker,
+  yyyyMMddFormat,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import { copyTime, setTime } from '../time';
+
+/** Combine date and time pickers, return the result as a Date */
+export const DateTimePicker: React.FC<{
+  date: Date;
+  onChange: (date: Date) => void;
+  label: string;
+}> = ({ date, onChange, label }) => {
+  if (!isValidDate(date)) date = new Date();
+  return (
+    <InputGroup>
+      <InputGroupText isPlain>{label}</InputGroupText>
+      <InputGroupItem>
+        <DatePicker
+          value={isValidDate(date) ? yyyyMMddFormat(date) : ''}
+          onChange={(_event, _inputDate, newDate) => onChange(copyTime(newDate, date))}
+          aria-label={label}
+        />
+      </InputGroupItem>
+      <InputGroupItem>
+        <TimePicker
+          time={date}
+          onChange={(_event, _time, hour, minute, second, isValid) => {
+            if (isValid) onChange(setTime(date, hour, minute, second));
+          }}
+          is24Hour={true}
+          width="80px"
+        />
+      </InputGroupItem>
+    </InputGroup>
+  );
+};