@flightctl/ui-components 0.0.4 → 0.0.5

package/src/utils/api.ts

@@ -0,0 +1,87 @@
+import { Condition, ConditionStatus, ConditionType, ListMeta, ObjectMeta } from '@flightctl/types';
+
+import { AnnotationType, ApiQuery, FlightControlQuery, MetricsQuery } from '../types/extraTypes';
+import { getPeriodTimestamps } from '../utils/metrics';
+
+const isApiQuery = (query: ApiQuery | MetricsQuery): query is ApiQuery => 'endpoint' in query;
+
+const getApiQueryString = (apiQuery: ApiQuery) => apiQuery.endpoint;
+
+const getMetricsQueryString = (metricsQuery: MetricsQuery) => {
+  const { metrics, period } = metricsQuery;
+  const range = getPeriodTimestamps(period);
+
+  const metric = metrics.length === 1 ? metrics[0] : `__name__=~"${metrics.join('|')}"`;
+  let query = `query=${metric}`;
+  if (range) {
+    query += `&start=${range.from}&end=${range.to}&step=${range.step}`;
+  }
+  return query;
+};
+
+/**
+ * Builds the query string hash that identifies this query based only on its parameters
+ * @param queryObj
+ */
+const getQueryStringHash = (queryObj: FlightControlQuery) => {
+  if (isApiQuery(queryObj)) {
+    return getApiQueryString(queryObj);
+  }
+  // We just need to generate a unique string based on the data, but without the timestamps
+  return `metric=${queryObj.metrics.join(',')}&period=${queryObj.period}`;
+};
+
+/**
+ * Builds the query string that should be triggered, adding time parameters etc to the base query string
+ * @param queryObj
+ */
+const getRequestQueryString = (queryObj: FlightControlQuery) => {
+  if (isApiQuery(queryObj)) {
+    return getApiQueryString(queryObj);
+  }
+  return getMetricsQueryString(queryObj);
+};
+
+interface ApiList {
+  items: Array<unknown>;
+  metadata: ListMeta;
+}
+
+const getApiListCount = (listResponse: ApiList | undefined): number | undefined => {
+  if (listResponse === undefined) {
+    return undefined;
+  }
+  const hasItems = listResponse.items.length > 0;
+  const extraItems = listResponse.metadata.remainingItemCount || 0;
+  return hasItems ? 1 + extraItems : 0;
+};
+
+const getMetadataAnnotation = (metadata: ObjectMeta | undefined, annotation: AnnotationType) => {
+  if (metadata?.annotations) {
+    return metadata.annotations[annotation];
+  }
+  return undefined;
+};
+
+const getCondition = (
+  conditions: Condition[] | undefined,
+  type: ConditionType,
+  status: ConditionStatus = ConditionStatus.ConditionStatusTrue,
+) => {
+  const typeCond = conditions?.filter((c) => c.type === type);
+  if (typeCond) {
+    return typeCond.find((tc) => tc.status === status);
+  }
+  return undefined;
+};
+
+export {
+  isApiQuery,
+  getRequestQueryString,
+  getQueryStringHash,
+  getMetadataAnnotation,
+  getApiQueryString,
+  getMetricsQueryString,
+  getApiListCount,
+  getCondition,
+};

package/src/utils/dates.ts

@@ -0,0 +1,60 @@
+import { TFunction } from 'i18next';
+
+type ArgumentTypes = Parameters<typeof Intl.DateTimeFormat>;
+
+const EMPTY_DATE = '0001-01-01T00:00:00Z';
+
+// TODO use a date library and display dates according to user locale
+const getDateDisplay = (timestamp?: string, withTime: boolean = false) => {
+  if (!timestamp) {
+    return 'N/A';
+  }
+
+  let options: ArgumentTypes[1];
+  let timeStr = '';
+
+  if (withTime) {
+    options = { month: 'long', day: 'numeric' };
+    timeStr = ` ${timestamp.slice(11, 16)}`;
+  } else {
+    options = { year: 'numeric', month: 'long', day: 'numeric' };
+  }
+
+  const date = new Date(timestamp);
+  return `${new Intl.DateTimeFormat('en-GB', options).format(date)}${timeStr}`;
+};
+
+// https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
+const timeSinceText = (t: TFunction, timestampStr?: string) => {
+  if (!timestampStr || timestampStr === EMPTY_DATE) {
+    return 'N/A';
+  }
+
+  const timestamp = new Date(timestampStr).getTime();
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+
+  let interval = seconds / 31536000;
+
+  if (interval > 1) {
+    return t('{{count}} years ago', { count: Math.floor(interval) });
+  }
+  interval = seconds / 2592000;
+  if (interval > 1) {
+    return t('{{count}} months ago', { count: Math.floor(interval) });
+  }
+  interval = seconds / 86400;
+  if (interval > 1) {
+    return t('{{count}} days ago', { count: Math.floor(interval) });
+  }
+  interval = seconds / 3600;
+  if (interval > 1) {
+    return t('{{count}} hours ago', { count: Math.floor(interval) });
+  }
+  interval = seconds / 60;
+  if (interval > 1) {
+    return t('{{count}} minutes ago', { count: Math.floor(interval) });
+  }
+  return t('< 1 minute ago');
+};
+
+export { getDateDisplay, timeSinceText };

package/src/utils/devices.ts

@@ -0,0 +1,10 @@
+import { ObjectMeta } from '@flightctl/types';
+
+const deviceFleetRegExp = /^Fleet\/(?<fleetName>.*)$/;
+
+const getDeviceFleet = (metadata: ObjectMeta) => {
+  const match = deviceFleetRegExp.exec(metadata.owner || '');
+  return match?.groups?.fleetName || null;
+};
+
+export { getDeviceFleet };

package/src/utils/error.ts

@@ -0,0 +1,24 @@
+import upperFirst from 'lodash/upperFirst';
+import toLower from 'lodash/toLower';
+
+import type { Condition } from '@flightctl/types';
+
+export const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message || '';
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+  if (error instanceof String) {
+    return error.toString();
+  }
+  return 'Unexpected error';
+};
+
+const uppercaseSentence = (s: string | undefined) => (s ? upperFirst(toLower(s)) : '');
+
+export const getConditionMessage = (condition: Condition, reason?: string): string =>
+  [uppercaseSentence(reason || condition.reason), uppercaseSentence(condition.message)]
+    .filter((msg) => !!msg)
+    .join('. ');

package/src/utils/labels.ts

@@ -0,0 +1,40 @@
+import { FlightCtlLabel } from '../types/extraTypes';
+
+type LabelOptions = {
+  isDefault?: boolean;
+};
+
+export const fromAPILabel = (labels: Record<string, string>, options?: LabelOptions): FlightCtlLabel[] =>
+  Object.entries(labels).map((labelEntry) => ({
+    key: labelEntry[0],
+    value: labelEntry[1],
+    isDefault: options?.isDefault || false,
+  }));
+
+export const toAPILabel = (labels: FlightCtlLabel[]): Record<string, string> =>
+  labels.reduce(
+    (acc, curr) => {
+      if (!curr.isDefault) {
+        acc[curr.key] = curr.value || '';
+      }
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+
+export const labelToString = (label: FlightCtlLabel) => `${label.key}${label.value ? `=${label.value}` : ''}`;
+
+export const stringToLabel = (labelStr: string): FlightCtlLabel => {
+  const labelParts = labelStr.split('=');
+  return {
+    key: labelParts[0],
+    value: labelParts.length > 1 ? labelParts[1] : undefined,
+  };
+};
+
+export const filterDevicesLabels = (allLabels: FlightCtlLabel[], selectedLabels: FlightCtlLabel[], filter: string) => {
+  const filteredLabels = [...new Set(allLabels.concat(selectedLabels).map(labelToString))]
+    .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' })) // ignore case
+    .filter((label) => label.includes(filter));
+  return filteredLabels;
+};

package/src/utils/metrics.ts

@@ -0,0 +1,49 @@
+import { MetricValue, PrometheusMetric } from '../types/extraTypes';
+
+const getMetricSeries = (metrics: PrometheusMetric[], name: string): MetricValue[] => {
+  const metricItem = metrics.find((metric) => {
+    if (metric.metric.__name__ !== name) {
+      return false;
+    }
+    return true;
+  });
+  return metricItem?.values || [];
+};
+
+// TODO use a standard library for the calculation
+const getPeriodTimestamps = (period: string) => {
+  const to = Date.now();
+
+  let step = 5;
+
+  let from: number;
+  switch (period) {
+    case '15m':
+      from = to - 15 * 60 * 1000;
+      break;
+    case '30m':
+      from = to - 30 * 60 * 1000;
+      break;
+    case '1h':
+      from = to - 1 * 60 * 60 * 1000;
+      step = 20;
+      break;
+    case '8h':
+      from = to - 8 * 60 * 60 * 1000;
+      step = 30;
+      break;
+    case '24h':
+      step = 120;
+      from = to - 24 * 60 * 60 * 1000;
+      break;
+    case '72h':
+    default:
+      step = 600;
+      from = to - 72 * 60 * 60 * 1000;
+      break;
+  }
+  // Prometheus query requires seconds, not milliseconds
+  return { from: from / 1000, to: to / 1000, step };
+};
+
+export { getMetricSeries, getPeriodTimestamps };

package/src/utils/patch.ts

@@ -0,0 +1,202 @@
+import { ApplicationSpec, PatchRequest } from '@flightctl/types';
+import isNil from 'lodash/isNil';
+import isEqual from 'lodash/isEqual';
+import differenceWith from 'lodash/differenceWith';
+
+import { FlightCtlLabel } from '../types/extraTypes';
+import { toAPILabel } from './labels';
+import { ApplicationFormSpec } from '../components/Device/EditDeviceWizard/types';
+
+export const appendJSONPatch = <V = unknown>({
+  patches,
+  newValue,
+  originalValue,
+  path,
+  encodeB64,
+}: {
+  patches: PatchRequest;
+  newValue: V;
+  originalValue: V;
+  path: string;
+  encodeB64?: boolean;
+}) => {
+  if (newValue === originalValue) {
+    return;
+  }
+  if (!newValue && originalValue) {
+    patches.push({
+      op: 'remove',
+      path,
+    });
+    return;
+  }
+  const value = encodeB64 ? btoa(newValue as string) : newValue;
+  patches.push({
+    op: isNil(originalValue) ? 'add' : 'replace',
+    path,
+    value,
+  });
+};
+
+export const getStringListPatches = (
+  path: string,
+  currentList: string[],
+  newList: string[],
+  valueBuilder: (value: string[]) => unknown,
+) => {
+  const patches: PatchRequest = [];
+
+  const newLen = newList.length;
+  const curLen = currentList.length;
+
+  if (newLen === 0 && curLen > 0) {
+    patches.push({
+      path,
+      op: 'remove',
+    });
+  } else if (newLen > 0 && curLen === 0) {
+    patches.push({
+      path,
+      op: 'add',
+      value: valueBuilder(newList),
+    });
+  } else {
+    const hasDifferentItems = differenceWith(currentList, newList, isEqual).length > 0;
+
+    if (newLen !== curLen || hasDifferentItems) {
+      patches.push({
+        path,
+        op: 'replace',
+        value: valueBuilder(newList),
+      });
+    }
+  }
+
+  return patches;
+};
+
+export const getLabelPatches = (
+  basePath: string,
+  currentLabels: Record<string, string>,
+  newLabels: FlightCtlLabel[],
+) => {
+  const patches: PatchRequest = [];
+  const currentLen = Object.keys(currentLabels).length;
+  const newLen = newLabels.length;
+
+  const newLabelMap = toAPILabel(newLabels);
+
+  if (currentLen === 0 && newLen > 0) {
+    // First label(s) have been added
+    patches.push({
+      path: basePath,
+      op: 'add',
+      value: newLabelMap,
+    });
+  } else if (currentLen > 0 && newLen === 0) {
+    // Last label(s) have been removed
+    patches.push({
+      path: basePath,
+      op: 'remove',
+    });
+  } else if (currentLen !== newLen) {
+    patches.push({
+      path: basePath,
+      op: 'replace',
+      value: newLabelMap,
+    });
+  } else {
+    const needsPatch = Object.entries(newLabelMap).some(([key, value]) => {
+      if (!(key in currentLabels)) {
+        // A new label has been added
+        return true;
+      } else if (currentLabels[key] !== value) {
+        // An existing label has changed its value
+        return true;
+      }
+      return false;
+    });
+    if (needsPatch) {
+      patches.push({
+        path: basePath,
+        op: 'replace',
+        value: newLabelMap,
+      });
+    }
+  }
+  return patches;
+};
+
+export const toAPIApplication = (app: ApplicationFormSpec): ApplicationSpec => {
+  const envVars = app.variables.reduce((acc, variable) => {
+    acc[variable.name] = variable.value;
+    return acc;
+  }, {});
+
+  return app.name
+    ? {
+        name: app.name,
+        image: app.image,
+        envVars,
+      }
+    : {
+        // Name must not be sent, otherwise the API expects it to have a value
+        image: app.image,
+        envVars,
+      };
+};
+
+export const getApplicationPatches = (
+  basePath: string,
+  currentApps: ApplicationSpec[],
+  updatedApps: ApplicationFormSpec[],
+) => {
+  const patches: PatchRequest = [];
+
+  const currentLen = currentApps.length;
+  const newLen = updatedApps.length;
+  if (currentLen === 0 && newLen > 0) {
+    // First apps(s) have been added
+    patches.push({
+      path: `${basePath}/applications`,
+      op: 'add',
+      value: updatedApps.map(toAPIApplication),
+    });
+  } else if (currentLen > 0 && newLen === 0) {
+    // Last app(s) have been removed
+    patches.push({
+      path: `${basePath}/applications`,
+      op: 'remove',
+    });
+  } else if (currentLen !== newLen) {
+    patches.push({
+      path: `${basePath}/applications`,
+      op: 'replace',
+      value: updatedApps.map(toAPIApplication),
+    });
+  } else {
+    const needsPatch = currentApps.some((currentApp, index) => {
+      const updatedApp = updatedApps[index];
+      if (updatedApp.name !== currentApp.name || updatedApp.image !== currentApp.image) {
+        return true;
+      }
+      const currentVars = Object.entries(currentApp.envVars || {});
+      if (currentVars.length !== updatedApp.variables.length) {
+        return true;
+      }
+      return updatedApp.variables.some((variable) => {
+        const currentValue = currentApp.envVars ? currentApp.envVars[variable.name] : undefined;
+        return !currentValue || currentValue !== variable.value;
+      });
+    });
+    if (needsPatch) {
+      patches.push({
+        path: `${basePath}/applications`,
+        op: 'replace',
+        value: updatedApps.map(toAPIApplication),
+      });
+    }
+  }
+
+  return patches;
+};

package/src/utils/resource.ts

@@ -0,0 +1,4 @@
+import { ObjectMeta } from '@flightctl/types';
+
+export const getResourceId = <R extends { kind: string; metadata: ObjectMeta }>(resource: R) =>
+  `${resource.kind}/${resource.metadata.name || ''}`;

package/src/utils/search.ts

@@ -0,0 +1,25 @@
+import fuzzy from 'fuzzysearch';
+
+// Must be an even number for "getSearchResultsCount" to work
+const MAX_TOTAL_SEARCH_RESULTS = 10;
+
+export const fuzzySeach = (filter: string | undefined, value?: string): boolean => {
+  if (!filter) {
+    return true;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  return fuzzy(filter.toLowerCase(), value ? value.toLowerCase() : value) as boolean;
+};
+
+export const getSearchResultsCount = (labelCount: number, fleetCount: number) => {
+  if (labelCount + fleetCount <= MAX_TOTAL_SEARCH_RESULTS) {
+    return [labelCount, fleetCount];
+  }
+  const min = Math.min(labelCount, fleetCount, MAX_TOTAL_SEARCH_RESULTS / 2);
+  if (min === MAX_TOTAL_SEARCH_RESULTS / 2) {
+    return [MAX_TOTAL_SEARCH_RESULTS / 2, MAX_TOTAL_SEARCH_RESULTS / 2];
+  }
+
+  const rest = MAX_TOTAL_SEARCH_RESULTS - min;
+  return labelCount === min ? [labelCount, rest] : [rest, fleetCount];
+};

package/src/utils/sort/device.ts

@@ -0,0 +1,60 @@
+import { Device } from '@flightctl/types';
+import { getDeviceFleet } from '../devices';
+
+import {
+  deviceStatusOrder,
+  getApplicationSummaryStatus,
+  getDeviceSummaryStatus,
+  getSystemUpdateStatus,
+} from '../status/devices';
+import { applicationSummaryStatusOrder } from '../status/applications';
+import { systemUpdateStatusOrder } from '../status/system';
+
+const sortByApplicationStatus = (a: Device, b: Device) => {
+  const aStatus = getApplicationSummaryStatus(a.status?.applicationsSummary);
+  const bStatus = getApplicationSummaryStatus(b.status?.applicationsSummary);
+
+  const aIndex = applicationSummaryStatusOrder.indexOf(aStatus);
+  const bIndex = applicationSummaryStatusOrder.indexOf(bStatus);
+  return aIndex - bIndex;
+};
+
+const sortByDeviceStatus = (a: Device, b: Device) => {
+  const aStatus = getDeviceSummaryStatus(a.status?.summary);
+  const bStatus = getDeviceSummaryStatus(b.status?.summary);
+
+  const aIndex = deviceStatusOrder.indexOf(aStatus);
+  const bIndex = deviceStatusOrder.indexOf(bStatus);
+  return aIndex - bIndex;
+};
+
+const sortBySystemUpdateStatus = (a: Device, b: Device) => {
+  const aStatus = getSystemUpdateStatus(a.status?.updated);
+  const bStatus = getSystemUpdateStatus(b.status?.updated);
+
+  const aIndex = systemUpdateStatusOrder.indexOf(aStatus);
+  const bIndex = systemUpdateStatusOrder.indexOf(bStatus);
+  return aIndex - bIndex;
+};
+
+export const sortDeviceStatus = (
+  devices: Array<Device>,
+  status: 'DeviceStatus' | 'ApplicationStatus' | 'SystemUpdateStatus',
+) =>
+  devices.sort((a, b) => {
+    switch (status) {
+      case 'ApplicationStatus':
+        return sortByApplicationStatus(a, b);
+      case 'DeviceStatus':
+        return sortByDeviceStatus(a, b);
+      case 'SystemUpdateStatus':
+        return sortBySystemUpdateStatus(a, b);
+    }
+  });
+
+export const sortDevicesByFleet = (resources: Array<Device>) =>
+  resources.sort((a, b) => {
+    const aFleet = getDeviceFleet(a.metadata);
+    const bFleet = getDeviceFleet(b.metadata);
+    return (aFleet || '-').localeCompare(bFleet || '-');
+  });

package/src/utils/sort/fleet.ts

@@ -0,0 +1,16 @@
+import { Fleet } from '@flightctl/types';
+import { getFleetSyncStatus } from '../status/fleet';
+
+export const sortFleetsByOSImg = (fleets: Array<Fleet>) =>
+  fleets.sort((a, b) => {
+    const aOS = a.spec.template.spec.os?.image || '-';
+    const bOS = b.spec.template.spec.os?.image || '-';
+    return aOS.localeCompare(bOS);
+  });
+
+export const sortByStatus = (fleets: Array<Fleet>) =>
+  fleets.sort((a, b) => {
+    const aStatus = getFleetSyncStatus(a).status;
+    const bStatus = getFleetSyncStatus(b).status;
+    return aStatus.localeCompare(bStatus);
+  });

package/src/utils/sort/generic.ts

@@ -0,0 +1,37 @@
+import { Device, EnrollmentRequest, ObjectMeta } from '@flightctl/types';
+
+export const sortByName = <R extends { metadata: ObjectMeta }>(resources: R[]) =>
+  resources.sort((a, b) => {
+    const aName = a.metadata.name || '-';
+    const bName = b.metadata.name || '-';
+    return aName.localeCompare(bName);
+  });
+
+export const sortByLastSeenDate = (devices: Device[]) =>
+  devices.sort((a, b) => {
+    const getDate = (device: Device) => {
+      const lastSeen = device.status?.lastSeen;
+      if (lastSeen) {
+        return lastSeen;
+      }
+      return device.metadata.creationTimestamp || 0;
+    };
+
+    const aDate = getDate(a);
+    const bDate = getDate(b);
+    return new Date(aDate).getTime() - new Date(bDate).getTime();
+  });
+
+export const sortByCreationDate = (enrollments: EnrollmentRequest[]) =>
+  enrollments.sort((a, b) => {
+    const aDate = a.metadata.creationTimestamp || 0;
+    const bDate = b.metadata.creationTimestamp || 0;
+    return new Date(aDate).getTime() - new Date(bDate).getTime();
+  });
+
+export const sortByAlias = (devices: Device[]) =>
+  devices.sort((a, b) => {
+    const aAlias = a.metadata.labels?.alias || '-';
+    const bAlias = b.metadata.labels?.alias || '-';
+    return aAlias.localeCompare(bAlias);
+  });

package/src/utils/sort/repository.ts

@@ -0,0 +1,28 @@
+import { RepoSpecType, Repository } from '@flightctl/types';
+import { getLastTransitionTimeText, getRepositorySyncStatus } from '../status/repository';
+
+export const sortRepositoriesByUrl = (resources: Repository[]) =>
+  resources.sort((a, b) => {
+    const aUrl = a.spec.url || '-';
+    const bUrl = b.spec.url || '-';
+    return aUrl.localeCompare(bUrl);
+  });
+
+export const sortRepositoriesBySyncStatus = (resources: Repository[]) =>
+  resources.sort((a, b) => {
+    const aStatus = getRepositorySyncStatus(a);
+    const bStatus = getRepositorySyncStatus(b);
+    return aStatus.status.localeCompare(bStatus.status);
+  });
+
+export const sortRepositoriesByLastTransition = (resources: Repository[]) =>
+  resources.sort((a, b) => {
+    const aTransition = getLastTransitionTimeText(a).timestamp;
+    const bTransition = getLastTransitionTimeText(b).timestamp;
+    return new Date(bTransition).getTime() - new Date(aTransition).getTime();
+  });
+
+export const sortRepositoriesByType = (resources: Repository[]) =>
+  resources.sort((a, b) => {
+    return (a.spec.type || RepoSpecType.GIT).localeCompare(b.spec.type || RepoSpecType.GIT);
+  });

package/src/utils/sort/resourceSync.ts

@@ -0,0 +1,30 @@
+import { ResourceSync } from '@flightctl/types';
+import { getObservedHash, getRepositorySyncStatus } from '../status/repository';
+
+export const sortResourceSyncsByPath = (resources: ResourceSync[]) =>
+  resources.sort((a, b) => {
+    const aPath = a.spec.path || '-';
+    const bPath = b.spec.path || '-';
+    return aPath.localeCompare(bPath);
+  });
+
+export const sortResourceSyncsByRevision = (resources: ResourceSync[]) =>
+  resources.sort((a, b) => {
+    const aRevision = a.spec.targetRevision || '-';
+    const bRevision = b.spec.targetRevision || '-';
+    return aRevision.localeCompare(bRevision);
+  });
+
+export const sortResourceSyncsByStatus = (resources: ResourceSync[]) =>
+  resources.sort((a, b) => {
+    const aStatus = getRepositorySyncStatus(a);
+    const bStatus = getRepositorySyncStatus(b);
+    return aStatus.status.localeCompare(bStatus.status);
+  });
+
+export const sortResourceSyncsByHash = (resources: ResourceSync[]) =>
+  resources.sort((a, b) => {
+    const aHash = getObservedHash(a) || '-';
+    const bHash = getObservedHash(b) || '-';
+    return aHash.localeCompare(bHash);
+  });