Convert dashboard files to tsx

tornjak-frontend/src/charts/PieChart.js → tornjak-frontend/src/charts/PieChart.tsx

@@ -2,23 +2,36 @@ import React from "react";
 import { PieChart } from "@carbon/charts-react";
 import "@carbon/charts/styles.css";
 import { connect } from 'react-redux';
-class PieChart1 extends React.Component {
-  constructor(props) {
+import { RootState } from "redux/reducers";
+import { Alignments, LegendPositions, PieChartOptions } from "@carbon/charts/interfaces";
+import { PieChartEntry } from "components/types";
+
+
+type PieChartProps = {
+  data: PieChartEntry[]
+}
+
+type PieChartState = {
+  options: PieChartOptions
+}
+
+class PieChart1 extends React.Component<PieChartProps, PieChartState> {
+  constructor(props:PieChartProps) {
     super(props);
     this.state = {
       options: {
         resizable: true,
         height: "300px",
         legend: {
-          position: "right",
+          position: LegendPositions.RIGHT,
           truncation: {
             "type": "mid_line",
             "threshold": 15,
             "numCharacter": 12
           },
         },
         pie: {
-          alignment: "center",
+          alignment: Alignments.CENTER,
         }
       }
     };
@@ -39,7 +52,7 @@ class PieChart1 extends React.Component {
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: RootState) => ({
 })
 
 export default connect(

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

@@ -1,32 +1,44 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core';
 import renderCellExpand from './render-cell-expand';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
 import TornjakHelper from 'components/tornjak-helper';
+import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
+import { RootState } from 'redux/reducers';
+import { GridCellParams, GridColDef } from '@material-ui/data-grid';
 
-const columns = [
-  { field: "spiffeid", headerName: "Name", flex: 1, renderCell: renderCellExpand },
+const columns: GridColDef[] = [
+  { field: "spiffeid", headerName: "Name", flex: 1, renderCell: renderCellExpand as (params: GridCellParams)=>JSX.Element },
   { field: "clusterName", headerName: "Cluster Name", width: 190 },
   { field: "numEntries", headerName: "Number of Entries", width: 200 },
   { field: "status", headerName: "Status", width: 120 },
   { field: "platformType", headerName: "Platform Type", width: 170 },
 ];
 
-const styles = theme => ({
-  seeMore: {
-    marginTop: theme.spacing(3),
-  },
+const styles = (theme:Theme) => createStyles({
+  seeMore: {marginTop: theme.spacing(3)}
 });
 
-class AgentDashboardTable extends React.Component {
-  constructor(props) {
+
+interface AgentDashboardTableProp extends WithStyles<typeof styles> {
+  filterByCluster?:string,
+  filterByAgentId?:string,
+  globalClickedDashboardTable: string,
+  numRows: number,
+  //From Redux
+  globalAgents: AgentsReducerState,
+  globalEntries: EntriesReducerState
+}
+
+class AgentDashboardTable extends React.Component<AgentDashboardTableProp> {
+  TornjakHelper: TornjakHelper;
+  SpiffeHelper: SpiffeHelper;
+  constructor(props: AgentDashboardTableProp) {
     super(props);
-    this.state = {
-    };
-    this.SpiffeHelper = new SpiffeHelper();
-    this.TornjakHelper = new TornjakHelper();
+    this.SpiffeHelper = new SpiffeHelper({});
+    this.TornjakHelper = new TornjakHelper({});
   }
 
   agentList() {
@@ -69,7 +81,7 @@ class AgentDashboardTable extends React.Component {
 
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state:RootState) => ({
   globalAgents: state.agents,
   globalEntries: state.entries,
   globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,

tornjak-frontend/src/components/dashboard/agents-pie-chart.js → tornjak-frontend/src/components/dashboard/agents-pie-chart.tsx

@@ -3,27 +3,38 @@ import { connect } from 'react-redux';
 import Title from './title';
 import PieChart1 from "charts/PieChart";
 import SpiffeHelper from '../spiffe-helper'
+import { AgentsList, EntriesList } from 'components/types';
+import { RootState } from 'redux/reducers';
+import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
 
-class AgentsPieChart extends React.Component {
-  constructor(props) {
+type AgentsPieChartProp = {
+  globalAgents: AgentsReducerState,
+  globalEntries: EntriesReducerState
+}
+class AgentsPieChart extends React.Component<AgentsPieChartProp> {
+  SpiffeHelper: SpiffeHelper;
+  constructor(props:AgentsPieChartProp) {
     super(props);
-    this.SpiffeHelper = new SpiffeHelper();
+    this.SpiffeHelper = new SpiffeHelper(props);
   }
 
-  getChildEntries(agent, agentEntriesDict) {
+  getChildEntries(agent: AgentsList, agentEntriesDict:{
+    [key: string]: EntriesList[];
+} | undefined) {
     var spiffeid = this.SpiffeHelper.getAgentSpiffeid(agent);
     var validIds = new Set([spiffeid]);
 
     // Also check for parent IDs associated with the agent
-    let agentEntries = agentEntriesDict[spiffeid];
+    let agentEntries = agentEntriesDict? agentEntriesDict[spiffeid]: undefined;
     if (agentEntries !== undefined) {
       for (let j=0; j < agentEntries.length; j++) {
           validIds.add(this.SpiffeHelper.getEntrySpiffeid(agentEntries[j]));
       }
     }
 
+    var check_id;
     if (typeof this.props.globalEntries.globalEntriesList !== 'undefined') {
-      var check_id = this.props.globalEntries.globalEntriesList.filter(thisentry => {
+      check_id = this.props.globalEntries.globalEntriesList.filter((thisentry:EntriesList) => {
         return validIds.has(this.SpiffeHelper.getEntryParentid(thisentry));
       });
     }
@@ -47,7 +58,7 @@ class AgentsPieChart extends React.Component {
     }
 
     let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList)
-    var valueMapping = this.props.globalAgents.globalAgentsList.map(currentAgent => {
+    var valueMapping = this.props.globalAgents.globalAgentsList.map((currentAgent:AgentsList) => {
       return this.getChildEntries(currentAgent, agentEntriesDict);
     })
     return valueMapping
@@ -71,7 +82,7 @@ class AgentsPieChart extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state:RootState) => ({
   globalAgents: state.agents,
   globalEntries: state.entries,
 })

tornjak-frontend/src/components/dashboard/clusters-dashboard-table.js → tornjak-frontend/src/components/dashboard/clusters-dashboard-table.tsx

@@ -1,28 +1,45 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme, WithStyles, createStyles, withStyles } from '@material-ui/core/styles';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
 import TornjakHelper from 'components/tornjak-helper';
+import { GridColDef } from '@material-ui/data-grid';
+import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
+import { RootState } from 'redux/reducers';
+import { ClustersList } from 'components/types';
 
-const columns = [
+const columns: GridColDef[] = [
   { field: "name", headerName: "Name", width: 200 },
   { field: "created", headerName: "Created", width: 300 },
   { field: "numNodes", headerName: "Number Of Nodes", width: 300 },
   { field: "numEntries", headerName: "Number of Entries", width: 200 }
 ];
 
-const styles = theme => ({
+const styles = (theme:Theme) => createStyles({
   seeMore: {
     marginTop: theme.spacing(3),
   },
 });
 
-class ClusterDashboardTable extends React.Component {
-  constructor(props) {
+interface ClusterDashboardTableProp extends WithStyles<typeof styles> {
+  filterByCluster?:string,
+  filterByAgentId?:string,
+  globalClickedDashboardTable: string,
+  numRows: number,
+  //From Redux
+  globalClustersList: ClustersList[],
+  globalAgents: AgentsReducerState,
+  globalEntries: EntriesReducerState
+}
+
+class ClusterDashboardTable extends React.Component<ClusterDashboardTableProp> {
+  TornjakHelper: TornjakHelper;
+  SpiffeHelper: SpiffeHelper;
+  constructor(props:ClusterDashboardTableProp) {
     super(props);
-    this.SpiffeHelper = new SpiffeHelper();
-    this.TornjakHelper = new TornjakHelper();
+    this.SpiffeHelper = new SpiffeHelper({});
+    this.TornjakHelper = new TornjakHelper({});
   }
 
   clusterList() {
@@ -60,7 +77,7 @@ class ClusterDashboardTable extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state:RootState) => ({
   globalClustersList: state.clusters.globalClustersList,
   globalAgents: state.agents,
   globalEntries: state.entries,

tornjak-frontend/src/components/dashboard/clusters-pie-chart.js → tornjak-frontend/src/components/dashboard/clusters-pie-chart.tsx

@@ -2,10 +2,14 @@ import React from 'react';
 import Title from './title';
 import { connect } from 'react-redux';
 import PieChart1 from "charts/PieChart";
+import { RootState } from 'redux/reducers';
 
+type ClustersPieChartProps = {
+  globalClustersList: Array<{[key:string]:any}>;
+}
 
-class ClustersPieChart extends React.Component {
-  cluster(entry) {
+class ClustersPieChart extends React.Component<ClustersPieChartProps, {}> {
+  cluster(entry: {[key:string]:any}) {
     return {
       "group": entry.name,
       "value": entry.agentsList.length
@@ -40,7 +44,7 @@ class ClustersPieChart extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: RootState) => ({
   globalClustersList: state.clusters.globalClustersList,
 })
 

tornjak-frontend/src/components/dashboard/entries-dashboard-table.js → tornjak-frontend/src/components/dashboard/entries-dashboard-table.tsx

@@ -1,32 +1,47 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme, WithStyles, createStyles, withStyles } from '@material-ui/core/styles';
 import renderCellExpand from './render-cell-expand';
 import TableDashboard from './table/dashboard-table';
 import SpiffeHelper from '../spiffe-helper';
 import TornjakHelper from 'components/tornjak-helper';
+import { GridCellParams, GridColDef } from '@material-ui/data-grid';
+import { AgentsReducerState, EntriesReducerState } from 'redux/actions/types';
+import { RootState } from 'redux/reducers';
 
-const columns = [
-  { field: "id", headerName: "ID", width: 170, renderCell: renderCellExpand },
-  { field: "spiffeid", headerName: "Name", width: 170, renderCell: renderCellExpand },
-  { field: "parentId", headerName: "Parent ID", width: 170, renderCell: renderCellExpand },
+const columns: GridColDef[] = [
+  { field: "id", headerName: "ID", width: 170, renderCell: renderCellExpand as (params: GridCellParams)=>JSX.Element },
+  { field: "spiffeid", headerName: "Name", width: 170, renderCell: renderCellExpand as (params: GridCellParams)=>JSX.Element },
+  { field: "parentId", headerName: "Parent ID", width: 170, renderCell: renderCellExpand as (params: GridCellParams)=>JSX.Element },
   { field: "clusterName", headerName: "Cluster Name", width: 170 },
   { field: "entryExpireTime", headerName: "Entry Expire Time", width: 190 },
   { field: "platformType", headerName: "Platform Type", width: 170 },
   { field: "adminFlag", headerName: "Admin Flag", width: 150, type: 'boolean'},
 ];
 
-const styles = (theme => ({
+const styles = (theme:Theme) => createStyles({
   seeMore: {
     marginTop: theme.spacing(3),
-  },
-}));
+  }
+});
+
+interface EntriesDashBoardTableProp extends WithStyles<typeof styles> {
+  filterByCluster?:string,
+  filterByAgentId?:string,
+  globalClickedDashboardTable: string,
+  numRows: number,
+  //From Redux
+  globalAgents: AgentsReducerState,
+  globalEntries: EntriesReducerState
+}
 
-class EntriesDashBoardTable extends React.Component {
-  constructor(props) {
+class EntriesDashBoardTable extends React.Component<EntriesDashBoardTableProp> {
+  TornjakHelper: TornjakHelper;
+  SpiffeHelper: SpiffeHelper;
+  constructor(props:EntriesDashBoardTableProp) {
     super(props)
-    this.SpiffeHelper = new SpiffeHelper();
-    this.TornjakHelper = new TornjakHelper();
+    this.SpiffeHelper = new SpiffeHelper({});
+    this.TornjakHelper = new TornjakHelper({});
   }
 
   entryList() {
@@ -73,7 +88,7 @@ class EntriesDashBoardTable extends React.Component {
   }
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state:RootState) => ({
   globalAgents: state.agents,
   globalEntries: state.entries,
   globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,