@spinnaker/kubernetes 0.0.0-main-2

package/src/manifest/selector/ManifestSelector.tsx

@@ -0,0 +1,424 @@
+import { get, isEmpty } from 'lodash';
+import { $q } from 'ngimport';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select, { Creatable } from 'react-select';
+import { from as observableFrom, Subject } from 'rxjs';
+import { switchMap, takeUntil, tap } from 'rxjs/operators';
+
+import type { Application, IAccountDetails, IServerGroup } from '@spinnaker/core';
+import {
+  AccountSelectInput,
+  AccountService,
+  AppListExtractor,
+  NgReact,
+  noop,
+  ScopeClusterSelector,
+  SETTINGS,
+  StageConfigField,
+  StageConstants,
+} from '@spinnaker/core';
+
+import type { IManifestLabelSelector } from './IManifestLabelSelector';
+import type { IManifestSelector } from './IManifestSelector';
+import { SelectorMode, SelectorModeDataMap } from './IManifestSelector';
+import { ManifestKindSearchService } from '../ManifestKindSearch';
+import LabelEditor from './labelEditor/LabelEditor';
+
+export interface IManifestSelectorProps {
+  selector: IManifestSelector;
+  application?: Application;
+  includeSpinnakerKinds?: string[];
+  modes?: SelectorMode[];
+  onChange(selector: IManifestSelector): void;
+}
+
+export interface IManifestSelectorState {
+  accounts: IAccountDetails[];
+  selector: IManifestSelector;
+  namespaces: string[];
+  kinds: string[];
+  resources: string[];
+  loading: boolean;
+}
+
+interface ISelectorHandler {
+  handles(mode: SelectorMode): boolean;
+  handleModeChange(): void;
+  handleKindChange(kind: string): void;
+  getKind(): string;
+}
+
+const parseSpinnakerName = (spinnakerName: string): { name: string; kind: string } => {
+  const [kind, name] = (spinnakerName || '').split(' ');
+  return { kind, name };
+};
+
+class StaticManifestSelectorHandler implements ISelectorHandler {
+  constructor(private component: ManifestSelector) {}
+
+  public handles = (mode: SelectorMode): boolean => mode === SelectorMode.Static;
+
+  public handleModeChange = (): void => {
+    const { selector } = this.component.state;
+    this.handleKindChange(selector.kind);
+    Object.assign(selector, SelectorModeDataMap.static.selectorDefaults);
+    this.component.setStateAndUpdateStage({ selector });
+  };
+
+  public handleKindChange = (kind: string): void => {
+    const { selector } = this.component.state;
+    const { name } = parseSpinnakerName(selector.manifestName);
+    selector.manifestName = kind ? (name ? `${kind} ${name}` : kind) : name;
+  };
+
+  public getKind = (): string => parseSpinnakerName(this.component.state.selector.manifestName).kind;
+}
+
+class DynamicManifestSelectorHandler implements ISelectorHandler {
+  constructor(private component: ManifestSelector) {}
+
+  public handles = (mode: SelectorMode): boolean => mode === SelectorMode.Dynamic;
+
+  public handleModeChange = (): void => {
+    const { selector } = this.component.state;
+    const { kind } = parseSpinnakerName(selector.manifestName);
+    selector.kind = kind || null;
+    Object.assign(selector, SelectorModeDataMap.dynamic.selectorDefaults);
+    this.component.setStateAndUpdateStage({ selector });
+  };
+
+  public handleKindChange = (kind: string): void => {
+    this.component.state.selector.kind = kind;
+  };
+
+  public getKind = (): string => this.component.state.selector.kind;
+}
+
+class LabelManifestSelectorHandler implements ISelectorHandler {
+  constructor(private component: ManifestSelector) {}
+
+  public handles = (mode: SelectorMode): boolean => mode === SelectorMode.Label;
+
+  public handleModeChange = (): void => {
+    const { selector } = this.component.state;
+    Object.assign(selector, SelectorModeDataMap.label.selectorDefaults);
+    this.component.setStateAndUpdateStage({ selector });
+  };
+
+  public handleKindChange = (): void => {};
+
+  public getKind = (): string => null;
+}
+
+export class ManifestSelector extends React.Component<IManifestSelectorProps, IManifestSelectorState> {
+  private search$ = new Subject<{ kind: string; namespace: string; account: string }>();
+  private destroy$ = new Subject<void>();
+  private handlers: ISelectorHandler[];
+
+  constructor(props: IManifestSelectorProps) {
+    super(props);
+
+    if (!this.props.selector.mode) {
+      this.props.selector.mode = SelectorMode.Static;
+      this.props.onChange && this.props.onChange(this.props.selector);
+    }
+
+    this.state = {
+      selector: props.selector,
+      accounts: [],
+      namespaces: [],
+      kinds: [],
+      resources: [],
+      loading: false,
+    };
+    this.handlers = [
+      new StaticManifestSelectorHandler(this),
+      new DynamicManifestSelectorHandler(this),
+      new LabelManifestSelectorHandler(this),
+    ];
+  }
+
+  public setStateAndUpdateStage = (state: Partial<IManifestSelectorState>, cb?: () => void): void => {
+    if (state.selector && this.props.onChange) {
+      this.props.onChange(state.selector);
+    }
+    this.setState(state as IManifestSelectorState, cb || noop);
+  };
+
+  public componentDidMount = (): void => {
+    this.loadAccounts();
+
+    this.search$
+      .pipe(
+        tap(() => this.setStateAndUpdateStage({ loading: true })),
+        switchMap(({ kind, namespace, account }) => observableFrom(this.search(kind, namespace, account))),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((resources) => {
+        if (this.state.selector.manifestName == null && this.getSelectedMode() === SelectorMode.Static) {
+          this.handleNameChange('');
+        }
+        this.setStateAndUpdateStage({ loading: false, resources: resources, selector: this.state.selector });
+      });
+  };
+
+  public componentWillUnmount = () => this.destroy$.next();
+
+  public loadAccounts = (): PromiseLike<void> => {
+    return AccountService.getAllAccountDetailsForProvider('kubernetes').then((accounts) => {
+      const selector = this.state.selector;
+      const kind = parseSpinnakerName(selector.manifestName).kind;
+
+      this.setStateAndUpdateStage({ accounts });
+
+      if (!selector.account && accounts.length > 0) {
+        selector.account = accounts.some((e) => e.name === SETTINGS.providers.kubernetes.defaults.account)
+          ? SETTINGS.providers.kubernetes.defaults.account
+          : accounts[0].name;
+      }
+      if (selector.account) {
+        this.handleAccountChange(selector.account);
+      }
+      if (kind) {
+        this.search$.next({ kind, namespace: selector.location, account: selector.account });
+      }
+    });
+  };
+
+  private handleAccountChange = (selectedAccount: string): void => {
+    const details = (this.state.accounts || []).find((account) => account.name === selectedAccount);
+    if (!details) {
+      return;
+    }
+    const namespaces = (details.namespaces || []).sort();
+    const kinds = Object.entries(details.spinnakerKindMap || {})
+      .filter(([, spinnakerKind]) =>
+        this.props.includeSpinnakerKinds && this.props.includeSpinnakerKinds.length
+          ? this.props.includeSpinnakerKinds.includes(spinnakerKind)
+          : true,
+      )
+      .map(([kind]) => kind)
+      .sort();
+
+    if (
+      !this.isExpression(this.state.selector.location) &&
+      namespaces.every((ns) => ns !== this.state.selector.location)
+    ) {
+      this.state.selector.location = null;
+    }
+    this.state.selector.account = selectedAccount;
+
+    this.search$.next({
+      kind: parseSpinnakerName(this.state.selector.manifestName).kind || this.state.selector.kind,
+      namespace: this.state.selector.location,
+      account: this.state.selector.account,
+    });
+    this.setStateAndUpdateStage({
+      namespaces,
+      kinds,
+      selector: this.state.selector,
+    });
+  };
+
+  private handleNamespaceChange = (selectedNamespace: Option): void => {
+    this.state.selector.location =
+      selectedNamespace && selectedNamespace.value ? (selectedNamespace.value as string) : null;
+    this.search$.next({
+      kind: parseSpinnakerName(this.state.selector.manifestName).kind,
+      namespace: this.state.selector.location,
+      account: this.state.selector.account,
+    });
+    this.setStateAndUpdateStage({ selector: this.state.selector });
+  };
+
+  public handleKindChange = (kind: string): void => {
+    this.modeDelegate().handleKindChange(kind);
+    this.search$.next({ kind: kind, namespace: this.state.selector.location, account: this.state.selector.account });
+  };
+
+  private handleNameChange = (selectedName: string): void => {
+    const { kind } = parseSpinnakerName(this.state.selector.manifestName);
+    this.state.selector.manifestName = kind ? `${kind} ${selectedName}` : ` ${selectedName}`;
+    this.setStateAndUpdateStage({ selector: this.state.selector });
+  };
+
+  private isExpression = (value: string): boolean => (typeof value === 'string' ? value.includes('${') : false);
+
+  private search = (kind: string, namespace: string, account: string): PromiseLike<string[]> => {
+    if (this.isExpression(account)) {
+      return $q.resolve([]);
+    }
+    return ManifestKindSearchService.search(kind, namespace, account).then((results) =>
+      results.map((result) => result.name).sort(),
+    );
+  };
+
+  private handleModeSelect = (mode: SelectorMode) => {
+    this.state.selector.mode = mode;
+    this.setStateAndUpdateStage({ selector: this.state.selector }, () => {
+      this.modeDelegate().handleModeChange();
+    });
+  };
+
+  private handleClusterChange = ({ clusterName }: { clusterName: string }) => {
+    this.state.selector.cluster = clusterName;
+    this.setStateAndUpdateStage({ selector: this.state.selector });
+  };
+
+  private handleCriteriaChange = (criteria: string) => {
+    this.state.selector.criteria = criteria;
+    this.setStateAndUpdateStage({ selector: this.state.selector });
+  };
+
+  public handleKindsChange = (kinds: string[]): void => {
+    this.state.selector.kinds = kinds;
+    this.setStateAndUpdateStage({ selector: this.state.selector });
+  };
+
+  public handleLabelSelectorsChange = (labelSelectors: IManifestLabelSelector[]): void => {
+    this.state.selector.labelSelectors.selectors = labelSelectors;
+    this.setStateAndUpdateStage({ selector: this.state.selector });
+  };
+
+  private modeDelegate = (): ISelectorHandler =>
+    this.handlers.find((handler) => handler.handles(this.getSelectedMode()));
+
+  private promptTextCreator = (text: string) => `Use custom expression: ${text}`;
+
+  private getSelectedMode = (): SelectorMode => this.state.selector.mode || SelectorMode.Static;
+
+  private getFilteredClusters = (): string[] => {
+    const { application, includeSpinnakerKinds } = this.props;
+    const { selector } = this.state;
+    const applications = application ? [application] : [];
+    // If the only allowlisted Spinnaker kind is `serverGroups`, exclude server groups with `serverGroupManagers`.
+    // This is because traffic management stages only allow ReplicaSets.
+    const includeServerGroupsWithManagers: boolean =
+      isEmpty(includeSpinnakerKinds) || includeSpinnakerKinds.length > 1 || includeSpinnakerKinds[0] !== 'serverGroups';
+    const filter = (serverGroup: IServerGroup): boolean => {
+      const accountAndNamespaceFilter: boolean = AppListExtractor.clusterFilterForCredentialsAndRegion(
+        selector.account,
+        selector.location,
+      )(serverGroup);
+      const hasServerGroupManagers: boolean = get(serverGroup, 'serverGroupManagers.length', 0) > 0;
+      const serverGroupManagerFilter: boolean = includeServerGroupsWithManagers || !hasServerGroupManagers;
+      const nameToParseKind: string = hasServerGroupManagers ? serverGroup.cluster : serverGroup.name;
+      const kindFilter: boolean = parseSpinnakerName(nameToParseKind).kind === this.modeDelegate().getKind();
+      return accountAndNamespaceFilter && serverGroupManagerFilter && kindFilter;
+    };
+    return AppListExtractor.getClusters(applications, filter);
+  };
+
+  public render() {
+    const { TargetSelect } = NgReact;
+    const selectedMode = this.getSelectedMode();
+    const modes = this.props.modes || [selectedMode];
+    const { selector, accounts, kinds, namespaces, resources, loading } = this.state;
+    const kind = this.modeDelegate().getKind();
+    const name = parseSpinnakerName(selector.manifestName).name;
+    const resourceNames = resources.map((resource) => parseSpinnakerName(resource).name);
+    const selectedKinds = selector.kinds || [];
+    const KindField = (
+      <StageConfigField label="Kind">
+        <Creatable
+          clearable={false}
+          value={{ value: kind, label: kind }}
+          options={kinds.map((k) => ({ value: k, label: k }))}
+          onChange={(option: Option<string>) => this.handleKindChange(option && option.value)}
+          promptTextCreator={this.promptTextCreator}
+        />
+      </StageConfigField>
+    );
+
+    return (
+      <>
+        <StageConfigField label="Account">
+          <AccountSelectInput
+            value={selector.account}
+            onChange={(evt: any) => this.handleAccountChange(evt.target.value)}
+            accounts={accounts}
+            provider="'kubernetes'"
+          />
+        </StageConfigField>
+        <StageConfigField label="Namespace">
+          <Creatable
+            clearable={false}
+            value={{ value: selector.location, label: selector.location }}
+            options={namespaces.map((ns) => ({ value: ns, label: ns }))}
+            onChange={this.handleNamespaceChange}
+            promptTextCreator={this.promptTextCreator}
+          />
+        </StageConfigField>
+        {!modes.includes(SelectorMode.Label) && KindField}
+        {modes.length > 1 && (
+          <StageConfigField label="Selector">
+            {modes.map((mode) => (
+              <div className="radio" key={mode}>
+                <label htmlFor={mode}>
+                  <input
+                    type="radio"
+                    onChange={() => this.handleModeSelect(mode)}
+                    checked={selectedMode === mode}
+                    id={mode}
+                  />{' '}
+                  {get(SelectorModeDataMap, [mode, 'label'], '')}
+                </label>
+              </div>
+            ))}
+          </StageConfigField>
+        )}
+        {modes.includes(SelectorMode.Label) && selectedMode !== SelectorMode.Label && KindField}
+        {modes.includes(SelectorMode.Static) && selectedMode === SelectorMode.Static && (
+          <StageConfigField label="Name">
+            <Creatable
+              isLoading={loading}
+              clearable={false}
+              value={{ value: name, label: name }}
+              options={resourceNames.map((r) => ({ value: r, label: r }))}
+              onChange={(option: Option) => this.handleNameChange(option ? (option.value as string) : '')}
+              promptTextCreator={this.promptTextCreator}
+            />
+          </StageConfigField>
+        )}
+        {modes.includes(SelectorMode.Dynamic) && selectedMode === SelectorMode.Dynamic && (
+          <>
+            <StageConfigField label="Cluster">
+              <ScopeClusterSelector
+                clusters={this.getFilteredClusters()}
+                model={selector.cluster}
+                onChange={this.handleClusterChange}
+              />
+            </StageConfigField>
+            <StageConfigField label="Target">
+              <TargetSelect
+                onChange={this.handleCriteriaChange}
+                model={{ target: selector.criteria }}
+                options={StageConstants.MANIFEST_CRITERIA_OPTIONS}
+              />
+            </StageConfigField>
+          </>
+        )}
+        {modes.includes(SelectorMode.Label) && selectedMode === SelectorMode.Label && (
+          <>
+            <StageConfigField label="Kinds">
+              <Select
+                clearable={false}
+                multi={true}
+                value={selectedKinds}
+                options={kinds.map((k) => ({ value: k, label: k }))}
+                onChange={(options: Array<Option<string>>) => this.handleKindsChange(options.map((o) => o.value))}
+              />
+            </StageConfigField>
+            <StageConfigField label="Labels">
+              <LabelEditor
+                labelSelectors={get(selector, 'labelSelectors.selectors', [])}
+                onLabelSelectorsChange={this.handleLabelSelectorsChange}
+              />
+            </StageConfigField>
+          </>
+        )}
+      </>
+    );
+  }
+}

package/src/manifest/selector/labelEditor/LabelEditor.spec.tsx

@@ -0,0 +1,81 @@
+import type { ShallowWrapper } from 'enzyme';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import type { ILabelEditorProps } from './LabelEditor';
+import LabelEditor from './LabelEditor';
+
+describe('<LabelEditor />', () => {
+  let onChangeSpy: jasmine.Spy;
+  let props: ILabelEditorProps;
+  let component: ShallowWrapper<LabelEditor>;
+
+  beforeEach(() => {
+    onChangeSpy = jasmine.createSpy('onChangeSpy');
+    props = {
+      labelSelectors: [
+        {
+          key: 'my-label-1',
+          kind: 'EQUALS',
+          values: ['my-value-1', 'my-value-2'],
+        },
+        {
+          key: 'my-label-2',
+          kind: 'NOT_EQUALS',
+          values: ['my-value-3'],
+        },
+      ],
+      onLabelSelectorsChange: onChangeSpy,
+    };
+    component = shallow(<LabelEditor {...props} />);
+  });
+
+  describe('view', () => {
+    it('renders a row for each label selector', () => {
+      expect(component.find('.label-editor-selector-row').length).toEqual(props.labelSelectors.length);
+    });
+    it('renders selector values as comma-separated lists', () => {
+      expect(component.find('.label-editor-values-input').at(0).props().value).toEqual('my-value-1, my-value-2');
+      expect(component.find('.label-editor-values-input').at(1).props().value).toEqual('my-value-3');
+    });
+  });
+
+  describe('functionality', () => {
+    it('calls `props.onLabelSelectorsChange` when selector properties are changed', () => {
+      component
+        .find('.label-editor-key-input')
+        .at(0)
+        .simulate('change', { target: { value: 'my-label-1-edited' } });
+      expect(onChangeSpy).toHaveBeenCalledWith([
+        {
+          ...props.labelSelectors[0],
+          key: 'my-label-1-edited',
+        },
+        props.labelSelectors[1],
+      ]);
+      component
+        .find('.label-editor-values-input')
+        .at(1)
+        .simulate('change', { target: { value: 'my-value-3, my-value-4' } });
+      expect(onChangeSpy).toHaveBeenCalledWith([
+        props.labelSelectors[0],
+        {
+          ...props.labelSelectors[1],
+          values: ['my-value-3', 'my-value-4'],
+        },
+      ]);
+    });
+    it('handles adding label selectors', () => {
+      component.find('.add-new').simulate('click');
+      expect(onChangeSpy).toHaveBeenCalledWith([...props.labelSelectors, { key: '', kind: 'EQUALS', values: [] }]);
+    });
+    it('handles removing label selectors', () => {
+      component.find('.label-editor-remove').at(1).simulate('click');
+      expect(onChangeSpy).toHaveBeenCalledWith([
+        {
+          ...props.labelSelectors[0],
+        },
+      ]);
+    });
+  });
+});

package/src/manifest/selector/labelEditor/LabelEditor.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import { noop } from '@spinnaker/core';
+
+import type { IManifestLabelSelector } from '../IManifestLabelSelector';
+import { LABEL_KINDS } from '../IManifestLabelSelector';
+
+import './labelEditor.less';
+
+export interface ILabelEditorProps {
+  labelSelectors: IManifestLabelSelector[];
+  onLabelSelectorsChange: (labelSelectors: IManifestLabelSelector[]) => void;
+}
+
+const LabelKeyOptions: Array<Option<string>> = LABEL_KINDS.map((kind) => ({ label: kind, value: kind }));
+
+export default class LabelEditor extends React.Component<ILabelEditorProps> {
+  public static defaultProps: Partial<ILabelEditorProps> = {
+    labelSelectors: [],
+    onLabelSelectorsChange: noop,
+  };
+
+  private static convertValueStringToArray = (value: string): string[] => {
+    return value.split(',').map((v: string) => v.trim());
+  };
+
+  private handleChange = (idx: number, property: keyof IManifestLabelSelector, value: string | string[]): void => {
+    this.props.onLabelSelectorsChange(
+      this.props.labelSelectors.map((ls, i) => {
+        if (idx !== i) {
+          return ls;
+        }
+        return {
+          ...ls,
+          [property]: value,
+        };
+      }),
+    );
+  };
+
+  private removeField = (idx: number): void => {
+    this.props.onLabelSelectorsChange(
+      this.props.labelSelectors.filter((_ls, i) => {
+        return idx !== i;
+      }),
+    );
+  };
+
+  private addField = (): void => {
+    return this.props.onLabelSelectorsChange(
+      this.props.labelSelectors.concat([
+        {
+          key: '',
+          kind: 'EQUALS',
+          values: [],
+        },
+      ]),
+    );
+  };
+
+  public render() {
+    return (
+      <table className="table table-condensed packed tags">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Kind</th>
+            <th>Value(s)</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {this.props.labelSelectors.map((selector, idx) => (
+            <tr className="label-editor-selector-row" key={idx}>
+              <td>
+                <input
+                  className="form-control input input-sm label-editor-key-input"
+                  type="text"
+                  value={selector.key}
+                  onChange={(e: any) => this.handleChange(idx, 'key', e.target.value)}
+                />
+              </td>
+              <td>
+                <Select
+                  className="label-editor-kind-select"
+                  clearable={false}
+                  onChange={(option: Option<string>) => this.handleChange(idx, 'kind', option.value)}
+                  options={LabelKeyOptions}
+                  value={selector.kind}
+                />
+              </td>
+              <td>
+                <input
+                  className="form-control input input-sm label-editor-values-input"
+                  onChange={(e: any) =>
+                    this.handleChange(idx, 'values', LabelEditor.convertValueStringToArray(e.target.value))
+                  }
+                  placeholder="Comma-separated values"
+                  value={selector.values.join(', ')}
+                  type="text"
+                />
+              </td>
+              <td>
+                <button className="link label-editor-remove" onClick={() => this.removeField(idx)}>
+                  <span className="glyphicon glyphicon-trash" />
+                  <span className="sr-only">Remove field</span>
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colSpan={4}>
+              <button className="btn btn-block btn-sm add-new" onClick={this.addField}>
+                <span className="glyphicon glyphicon-plus-sign" /> Add Label
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    );
+  }
+}

package/src/manifest/selector/labelEditor/labelEditor.less

@@ -0,0 +1,3 @@
+.label-editor-kind-select {
+  min-width: 125px;
+}

package/src/manifest/selector/selector.component.ts

@@ -0,0 +1,17 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { ManifestSelector } from './ManifestSelector';
+
+export const KUBERNETES_MANIFEST_SELECTOR = 'spinnaker.kubernetes.v2.manifest.selector.component';
+module(KUBERNETES_MANIFEST_SELECTOR, []).component(
+  'kubernetesManifestSelector',
+  react2angular(withErrorBoundary(ManifestSelector, 'kubernetesManifestSelector'), [
+    'selector',
+    'modes',
+    'application',
+    'onChange',
+  ]),
+);

package/src/manifest/status/ManifestCondition.tsx

@@ -0,0 +1,32 @@
+import { DateTime } from 'luxon';
+import React from 'react';
+
+import { relativeTime } from '@spinnaker/core';
+
+export interface IKubernetesManifestCondition {
+  status: string;
+  type: string;
+  lastTransitionTime: string;
+  message: string;
+}
+
+export interface IKubernetesManifestConditionProps {
+  condition: IKubernetesManifestCondition;
+}
+
+export class ManifestCondition extends React.Component<IKubernetesManifestConditionProps> {
+  public render() {
+    const { condition } = this.props;
+    const transitionTime = DateTime.fromISO(condition.lastTransitionTime);
+    return [
+      <span key="properties">
+        {condition.status === 'True' && <span style={{ marginRight: '3px' }} className="glyphicon glyphicon-Normal" />}
+        {condition.status === 'False' && <span style={{ marginRight: '3px' }} className="glyphicon glyphicon-Warn" />}
+        {condition.status === 'Unknown' && <span style={{ marginRight: '3px' }}>?</span>}
+        <b style={{ marginRight: '3px' }}>{condition.type}</b>
+        <i>{transitionTime.isValid && relativeTime(transitionTime.toMillis())}</i>
+      </span>,
+      <div key="message">{condition.message}</div>,
+    ];
+  }
+}