Merge pull request #130 from rancher/cluster-names

Updated to the areas of the app that display cluster id to now make use of cluster name when available

public/components/Breakdowns/Breakdowns.tsx

@@ -11,7 +11,7 @@ import Pod from './components/Pod';
 import Namespace from './components/Namesapce';
 import Rancher from './components/Rancher';
 import Longhorn from './components/Longhorn';
-import { BasicBreakdown, getControlPlaneBreakdown, getLogTypes, getNamespaceBreakdown, getPodBreakdown, getRancherBreakdown, getLonghornBreakdown } from '../../utils/requests';
+import { BasicBreakdown, getControlPlaneBreakdown, getLogTypes, getNamespaceBreakdown, getPodBreakdown, getRancherBreakdown, getLonghornBreakdown, getClusterMetadataById } from '../../utils/requests';
 import Loading from '../Loading/Loading';
 import { Granularity, isSameRange, Range } from '../../utils/time';
 
@@ -70,11 +70,12 @@ export default class Breakdowns extends Component<BreakdownsProps, BreakdownStat
   }
 
   load = async () => {
-    const controlPlaneBreakdownRequest =  getControlPlaneBreakdown(this.props.range, this.props.clusterId, this.props.keywords);
-    const podBreakdownRequest =  getPodBreakdown(this.props.range, this.props.clusterId, this.props.keywords);
-    const namespaceBreakdownRequest =  getNamespaceBreakdown(this.props.range, this.props.clusterId, this.props.keywords);
-    const rancherBreakdownRequest = getRancherBreakdown(this.props.range, this.props.clusterId, this.props.keywords);
-    const longhornBreakdownRequest = getLonghornBreakdown(this.props.range, this.props.clusterId, this.props.keywords);
+    const clusterById = await getClusterMetadataById();
+    const controlPlaneBreakdownRequest =  getControlPlaneBreakdown(this.props.range, this.props.clusterId, this.props.keywords, clusterById);
+    const podBreakdownRequest =  getPodBreakdown(this.props.range, this.props.clusterId, this.props.keywords, clusterById);
+    const namespaceBreakdownRequest =  getNamespaceBreakdown(this.props.range, this.props.clusterId, this.props.keywords, clusterById);
+    const rancherBreakdownRequest = getRancherBreakdown(this.props.range, this.props.clusterId, this.props.keywords, clusterById);
+    const longhornBreakdownRequest = getLonghornBreakdown(this.props.range, this.props.clusterId, this.props.keywords, clusterById);
     const logTypesRequest = getLogTypes();
 
     this.setState({

public/components/EventsTable/EventsTable.tsx

@@ -113,7 +113,6 @@ export default class EventsTable extends Component<EventsTableProps, EventsTable
     const getPagedEvents = () => {
       const start = this.state.pagination.pageIndex * this.state.pagination.pageSize;
       const end = start + this.state.pagination.pageSize;
-      console.log(this.state.events.slice(this.state.pagination.pageIndex * this.state.pagination.pageSize, this.state.pagination.pageSize))
       return this.state.events.slice(start, end);
     };
 

public/components/Filters/EventsFilter/EventsFilter.tsx

@@ -10,6 +10,7 @@ import {
   EuiSuperDatePicker
 } from '@elastic/eui';
 import { Settings } from '@elastic/charts';
+import { ClusterMetadata } from '../../../utils/requests';
 
 export interface Settings {
   range: {
@@ -20,7 +21,7 @@ export interface Settings {
 }
 export interface SelectorProps {
   settings: Settings;
-  clusterIds: string[];
+  clusters: ClusterMetadata[];
   onChange: (Settings) => void;
   onRefresh: () => void;
 };
@@ -56,7 +57,7 @@ export default class Selector extends Component<SelectorProps> {
 
   render() {
     const { range, cluster } = this.props.settings;
-    const clusterOptions = [...CLUSTER_OPTIONS, ...this.props.clusterIds.map(id => ({ value: id, text: id}))];
+    const clusterOptions = [...CLUSTER_OPTIONS, ...this.props.clusters.map(c => ({ value: c.id, text: c.name}))];
     const onTimeChange = (newRange) => {
       this.onChange('range')({start: newRange.start, end: (newRange.end.includes('now') ? 'now' : newRange.end) });
       setTimeout(() => this.props.onRefresh());

public/components/Selector/Selector.tsx

@@ -13,6 +13,7 @@ import { Settings } from '@elastic/charts';
 import { Granularity } from '../../utils/time';
 import Keywords from '../Keywords';
 import { CoreConsumer } from '../../utils/CoreContext';
+import { ClusterMetadata } from '../../utils/requests';
 
 export interface Settings {
   range: {
@@ -25,7 +26,7 @@ export interface Settings {
 }
 export interface SelectorProps {
   settings: Settings;
-  clusterIds: string[];
+  clusters: ClusterMetadata[];
   onChange: (Settings) => void;
   onRefresh: () => void;
 };
@@ -92,7 +93,7 @@ export default class Selector extends Component<SelectorProps, SelectorState> {
 
   render() {
     const { range, granularity, cluster, keywords } = this.props.settings;
-    const clusterOptions = [...CLUSTER_OPTIONS, ...this.props.clusterIds.map(id => ({ value: id, text: id}))];
+    const clusterOptions = [...CLUSTER_OPTIONS, ...this.props.clusters.map(c => ({ value: c.id, text: c.name}))];
     const onTimeChange = (newRange) => {
       this.onChange('range')({start: newRange.start, end: (newRange.end.includes('now') ? 'now' : newRange.end)});
       setTimeout(() => this.props.onRefresh());

public/pages/Events/Events.tsx

@@ -2,16 +2,16 @@ import React, { Component } from 'react';
 import EventsFilter from '../../components/Filters/EventsFilter';
 import { DEFAULT_SETTINGS, Settings } from '../../components/Filters/EventsFilter';
 import { Range } from '../../utils/time';
-import { getClusterIds } from '../../utils/requests';
+import { ClusterMetadata, getClusterMetadata } from '../../utils/requests';
 import dateMath from '@elastic/datemath';
 import PrimaryLayout from '../../components/Layout/PrimaryLayout';
 import EventsTable from '../../components/EventsTable/EventsTable';
 import { Moment } from 'moment';
 
 interface EventsState {
   settings: Settings,
-  clustersRequest: Promise<string[]>;
-  clusters: string[];
+  clustersRequest: Promise<ClusterMetadata[]>;
+  clusters: ClusterMetadata[];
   range: Range;
   cluster: string;
 };
@@ -53,21 +53,22 @@ export default class Events extends Component<any, EventsState> {
   };
 
   load = async () => {
-    const clustersRequest = getClusterIds();
+    const clustersRequest = getClusterMetadata();
     this.setState({
       clustersRequest
     });
 
     this.setState({
       clusters: await clustersRequest
     });
+
   };
 
 
   render() {
     return (
       <PrimaryLayout loadingPromise={this.state.clustersRequest}>
-        <EventsFilter settings={this.state.settings} onChange={this.onSettingsChange} clusterIds={this.state.clusters} onRefresh={this.onRefresh}/>
+        <EventsFilter settings={this.state.settings} onChange={this.onSettingsChange} clusters={this.state.clusters} onRefresh={this.onRefresh}/>
         <EventsTable range={this.state.range} clusterId={this.state.cluster} />
       </PrimaryLayout>
     );

public/pages/Insights/Insights.tsx

@@ -4,18 +4,17 @@ import Selector from '../../components/Selector';
 import Breakdowns from '../../components/Breakdowns';
 import { DEFAULT_SETTINGS, Settings } from '../../components/Selector/Selector';
 import { Range, Granularity } from '../../utils/time';
-import AnomalyChart from '../../components/AnomalyChart';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { getClusterIds, getInsights, getK8sEvents } from '../../utils/requests';
+import { ClusterMetadata, getClusterMetadata, getInsights, getK8sEvents } from '../../utils/requests';
 import dateMath from '@elastic/datemath';
 import Cookies from 'js-cookie';
 import PrimaryLayout from '../../components/Layout/PrimaryLayout';
 import { Moment } from 'moment';
 
 interface MainState {
   settings: Settings,
-  clustersRequest: Promise<string[]>;
-  clusters: string[];
+  clustersRequest: Promise<ClusterMetadata[]>;
+  clusters: ClusterMetadata[];
   range: Range;
   granularity: Granularity,
   cluster: string;
@@ -69,7 +68,7 @@ class Main extends Component<any, MainState> {
   };
 
   load = async () => {
-    const clustersRequest = getClusterIds();
+    const clustersRequest = getClusterMetadata();
     this.setState({
       clustersRequest
     });
@@ -82,7 +81,7 @@ class Main extends Component<any, MainState> {
   render() {
     return (
       <PrimaryLayout loadingPromise={this.state.clustersRequest}>
-        <Selector settings={this.state.settings} onChange={this.onSettingsChange} clusterIds={this.state.clusters} onRefresh={this.onRefresh}/>
+        <Selector settings={this.state.settings} onChange={this.onSettingsChange} clusters={this.state.clusters} onRefresh={this.onRefresh}/>
         <EuiFlexGroup style={{ padding: '0 15px' }} className="selector">
           <EuiFlexItem><InsightsChart range={this.state.range} granularity={this.state.granularity} clusterId={this.state.cluster} insightsProvider={getInsights} eventsProvider={(range, clusterId) => getK8sEvents(range, clusterId, 'Warning')} keywords={this.state.keywords} showTitle={true} /></EuiFlexItem>
         </EuiFlexGroup>

public/pages/Templates/Templates.tsx

@@ -2,16 +2,16 @@ import React, { Component } from 'react';
 import EventsFilter from '../../components/Filters/EventsFilter';
 import { DEFAULT_SETTINGS, Settings } from '../../components/Filters/EventsFilter';
 import { Range } from '../../utils/time';
-import { getClusterIds } from '../../utils/requests';
+import { ClusterMetadata, getClusterMetadata } from '../../utils/requests';
 import dateMath from '@elastic/datemath';
 import PrimaryLayout from '../../components/Layout/PrimaryLayout';
 import TemplatesTable from '../../components/TemplatesTable';
 import { Moment } from 'moment';
 
 interface EventsState {
   settings: Settings,
-  clustersRequest: Promise<string[]>;
-  clusters: string[];
+  clustersRequest: Promise<ClusterMetadata[]>;
+  clusters: ClusterMetadata[];
   range: Range;
   cluster: string;
 };
@@ -53,7 +53,7 @@ export default class Events extends Component<any, EventsState> {
   };
 
   load = async () => {
-    const clustersRequest = getClusterIds();
+    const clustersRequest = getClusterMetadata();
     this.setState({
       clustersRequest
     });
@@ -66,7 +66,7 @@ export default class Events extends Component<any, EventsState> {
   render() {
     return (
       <PrimaryLayout loadingPromise={this.state.clustersRequest}>
-        <EventsFilter settings={this.state.settings} onChange={this.onSettingsChange} clusterIds={this.state.clusters} onRefresh={this.onRefresh}/>
+        <EventsFilter settings={this.state.settings} onChange={this.onSettingsChange} clusters={this.state.clusters} onRefresh={this.onRefresh}/>
         <TemplatesTable range={this.state.range} clusterId={this.state.cluster} />
       </PrimaryLayout>
     );

public/utils/group.ts

@@ -5,16 +5,16 @@ import { BasicBreakdown } from "./requests";
 export function getGroupBreakdown(breakdown: BasicBreakdown[]): Item[] {
     const grouping = {};
     breakdown.forEach(b => {
-        grouping[b.clusterId] = grouping[b.clusterId] || [];
-        grouping[b.clusterId].push(b);
+        grouping[b.clusterName] = grouping[b.clusterName] || [];
+        grouping[b.clusterName].push(b);
     });
 
     Object.keys(grouping).forEach(groupKey => {
         grouping[groupKey] = sortBy(grouping[groupKey], [(group) => (group.anomaly || 0), (group) => (group.normal || 0)]).reverse()
     });
 
     const groupingArray = Object.entries(grouping)
-        .map(([clusterId, values]) => [{ group: true, name: `Cluster: ${clusterId}` }, ...(values as any)]);
+        .map(([clusterName, values]) => [{ group: true, name: `Cluster: ${clusterName}` }, ...(values as any)]);
 
     const sortedGroupingArray = sortBy(groupingArray, (group) => (group[1].anomaly || 0), (group) => (group[1].keywords || 0), (group) => (group[1].normal || 0)).reverse();