Skip to content

Commit

Permalink
add support for nextjs (#317)
Browse files Browse the repository at this point in the history 
Signed-off-by: Mohammed Abdi <[email protected]>
Co-authored-by: Mohammed Abdi <[email protected]>
  • Loading branch information
@mamy-CS @maia-iyer
2 people authored and maia-iyer committed Mar 20, 2024
1 parent 8389d74 commit 5503380
Show file tree
Hide file tree
Showing 8 changed files with 2,705 additions and 2,285 deletions.
4,876 changes: 2,651 additions & 2,225 deletions tornjak-frontend/package-lock.json
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions tornjak-frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"private": true,
"dependencies": {
"@babel/runtime": "^7.22.0",
"@carbon/charts": "^0.41.80",
"@carbon/charts-react": "^0.41.80",
"@carbon/charts": "^1.8.0",
"@carbon/charts-react": "^1.8.0",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
Expand All @@ -21,16 +21,17 @@
"axios": "^0.21.4",
"bootstrap": "^5.3.0",
"carbon-components": "^10.36.0",
"carbon-components-react": "^7.30.0",
"carbon-components-react": "^8.31.3",
"env-cmd": "^10.1.0",
"file-saver": "^2.0.5",
"fs": "^0.0.1-security",
"jwt-decode": "^3.1.2",
"keycloak-js": "^19.0.1",
"moment": "^2.29.4",
"next": "^13.4.6",
"prop-types": "^15.6.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.3",
Expand Down Expand Up @@ -82,12 +83,11 @@
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.6",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.1",
"@testing-library/react": "^14.0.0",
"@types/jest": "^27.0.2",
"@types/node": "^16.10.2",
"@types/react": "^17.0.24",
"@types/react-redux": "^7.1.20",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"check-prop-types": "^1.1.2",
"concurrently": "^6.2.2",
"enzyme": "^3.11.0",
Expand All @@ -100,7 +100,7 @@
"nodemon": "^2.0.13",
"puppeteer": "^20.1.2",
"react-inject-env": "^2.1.0",
"react-test-renderer": "^17.0.2",
"react-test-renderer": "^18.2.0",
"redux-mock-store": "^1.5.4"
},
"jest": {
Expand Down
7 changes: 5 additions & 2 deletions tornjak-frontend/src/charts/PieChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from "react";
import { PieChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";
import "@carbon/styles/css/styles.css";
import { connect } from 'react-redux';
import { RootState } from "redux/reducers";
import { Alignments, LegendPositions, PieChartOptions } from "@carbon/charts/interfaces";
import { Alignments, LegendPositions, PieChartOptions } from "@carbon/charts";
import { PieChartEntry } from "components/types";


type PieChartProps = {
data: PieChartEntry[]
data: PieChartEntry[],
title: string
}

type PieChartState = {
Expand All @@ -20,6 +22,7 @@ class PieChart1 extends React.Component<PieChartProps, PieChartState> {
super(props);
this.state = {
options: {
title: props.title,
resizable: true,
height: "300px",
legend: {
Expand Down
45 changes: 21 additions & 24 deletions tornjak-frontend/src/components/dashboard/agents-pie-chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
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';
Expand All @@ -13,34 +12,34 @@ type AgentsPieChartProp = {
}
class AgentsPieChart extends React.Component<AgentsPieChartProp> {
SpiffeHelper: SpiffeHelper;
constructor(props:AgentsPieChartProp) {
constructor(props: AgentsPieChartProp) {
super(props);
this.SpiffeHelper = new SpiffeHelper(props);
}

getChildEntries(agent: AgentsList, agentEntriesDict:{
getChildEntries(agent: AgentsList, agentEntriesDict: {
[key: string]: EntriesList[];
} | undefined) {
} | undefined) {
var spiffeid = this.SpiffeHelper.getAgentSpiffeid(agent);
var validIds = new Set([spiffeid]);

// Also check for parent IDs associated with the agent
let agentEntries = agentEntriesDict? agentEntriesDict[spiffeid]: undefined;
let agentEntries = agentEntriesDict ? agentEntriesDict[spiffeid] : undefined;
if (agentEntries !== undefined) {
for (let j=0; j < agentEntries.length; j++) {
validIds.add(this.SpiffeHelper.getEntrySpiffeid(agentEntries[j]));
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') {
check_id = this.props.globalEntries.globalEntriesList.filter((thisentry:EntriesList) => {
check_id = this.props.globalEntries.globalEntriesList.filter((thisentry: EntriesList) => {
return validIds.has(this.SpiffeHelper.getEntryParentid(thisentry));
});
}
if (typeof check_id === 'undefined') {
return {
"group": spiffeid,
"group": spiffeid,
"value": 0,
}
} else {
Expand All @@ -52,13 +51,13 @@ class AgentsPieChart extends React.Component<AgentsPieChartProp> {
}

agentList() {
if ((typeof this.props.globalEntries.globalEntriesList === 'undefined') ||
(typeof this.props.globalAgents.globalAgentsList === 'undefined')) {
return [];
if ((typeof this.props.globalEntries.globalEntriesList === 'undefined') ||
(typeof this.props.globalAgents.globalAgentsList === 'undefined')) {
return [];
}

let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList)
var valueMapping = this.props.globalAgents.globalAgentsList.map((currentAgent:AgentsList) => {
var valueMapping = this.props.globalAgents.globalAgentsList.map((currentAgent: AgentsList) => {
return this.getChildEntries(currentAgent, agentEntriesDict);
})
return valueMapping
Expand All @@ -68,23 +67,21 @@ class AgentsPieChart extends React.Component<AgentsPieChartProp> {
var groups = this.agentList()
return (
<React.Fragment>
<Title>Number of Workloads per Agent</Title>
{(groups.length === 0 || groups.every(item => item.value === 0))
? (
<p className="no-data">No Data To Display</p>
)
: (
<PieChart1
data={groups}
/>
)
{groups.length === 0 &&
<p className="no-data">No Data To Display</p>
}
{groups.length !== 0 &&
<PieChart1
data={groups}
title='Number of Workloads per Agent'
/>
}
</React.Fragment>
);
}
}

const mapStateToProps = (state:RootState) => ({
const mapStateToProps = (state: RootState) => ({
globalAgents: state.agents,
globalEntries: state.entries,
})
Expand Down
19 changes: 8 additions & 11 deletions tornjak-frontend/src/components/dashboard/clusters-pie-chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import Title from './title';
import { connect } from 'react-redux';
import PieChart1 from "charts/PieChart";
import { RootState } from 'redux/reducers';
Expand Down Expand Up @@ -30,16 +29,14 @@ class ClustersPieChart extends React.Component<ClustersPieChartProps, {}> {
var sections = this.clusterList()
return (
<React.Fragment>
<Title>Number of Agents per Cluster</Title>
{(sections.length === 0 || sections.every(item => item.value === 0))
? (
<p className="no-data">No Data To Display</p>
)
: (
<PieChart1
data={sections}
/>
)
{sections.length === 0 &&
<p className="no-data">No Data To Display</p>
}
{sections.length !== 0 &&
<PieChart1
data={sections}
title='Number of Agents per Cluster'
/>
}
</React.Fragment>
);
Expand Down
8 changes: 4 additions & 4 deletions tornjak-frontend/src/components/entry-create-json.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Link,
Dropdown
} from 'carbon-components-react';
import { Launch16, NextOutline16 } from '@carbon/icons-react';
import { Launch, NextOutline } from '@carbon/icons-react';
import { connect } from 'react-redux';
import TornjakApi from './tornjak-api-helpers';
import './style.css';
Expand Down Expand Up @@ -68,7 +68,7 @@ type CreateEntryJsonState = {
const NewEntryJsonFormatLink = (props: { link: link }) => (
<div>
<a rel="noopener noreferrer" href={props.link} target="_blank">(Click to see new entry JSON format)</a>
<a rel="noopener noreferrer" href={props.link} target="_blank">{<Launch16 />}</a>
<a rel="noopener noreferrer" href={props.link} target="_blank">{<Launch />}</a>
</div>
)
class CreateEntryJson extends Component<CreateEntryJsonProp, CreateEntryJsonState> {
Expand Down Expand Up @@ -694,7 +694,7 @@ class CreateEntryJson extends Component<CreateEntryJsonProp, CreateEntryJsonStat
className='selected-entry'
id={entryId.spiffeId}
href="#"
renderIcon={NextOutline16}
renderIcon={NextOutline}
visited={false}
inline
onClick={(e) => {
Expand All @@ -711,7 +711,7 @@ class CreateEntryJson extends Component<CreateEntryJsonProp, CreateEntryJsonStat
<Link
id={entryId.spiffeId}
href="#"
renderIcon={NextOutline16}
renderIcon={NextOutline}
onClick={(e) => {
this.setSelectedEntriesIds(index, index, undefined);
e.preventDefault();
Expand Down
14 changes: 6 additions & 8 deletions tornjak-frontend/src/components/navbar-header-toolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, { Component } from 'react';
import {
HeaderGlobalAction,
} from "carbon-components-react/lib/components/UIShell";
import { UserAvatar20, Notification20, Search20 } from "@carbon/icons-react";
import { Component } from 'react';
import { HeaderGlobalAction } from "carbon-components-react";
import { UserAvatar, Notification, Search } from "@carbon/icons-react";
import KeycloakService from "auth/KeycloakAuth";
import {env} from '../env';

Expand All @@ -25,7 +23,7 @@ class HeaderToolBar extends Component<HeaderToolBarProp, HeaderToolBarState> {
<div className="user-dropdown">
<HeaderGlobalAction
aria-label="User">
<UserAvatar20 />
<UserAvatar />
</HeaderGlobalAction>
<div className="user-dropdown-content">
{KeycloakService.isLoggedIn() && (
Expand All @@ -43,12 +41,12 @@ class HeaderToolBar extends Component<HeaderToolBarProp, HeaderToolBarState> {
<HeaderGlobalAction
aria-label="Notifications"
onClick={() => { alert("This is a place holder, functionality to be implemented on future work!") }}>
<Notification20 />
<Notification />
</HeaderGlobalAction>
<HeaderGlobalAction
aria-label="Search"
onClick={() => { alert("This is a place holder, functionality to be implemented on future work!") }}>
<Search20 />
<Search />
</HeaderGlobalAction>

</div>
Expand Down
5 changes: 2 additions & 3 deletions tornjak-frontend/src/components/spire-health-check.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { Component } from 'react';
import { Component } from 'react';
import './style.css';
import { RootState } from 'redux/reducers';
import { connect } from 'react-redux';
import InlineLoading from 'carbon-components-react/lib/components/InlineLoading';
import { Dropdown, Tooltip } from 'carbon-components-react';
import { Dropdown, Tooltip, InlineLoading } from 'carbon-components-react';
import TornjakApi from './tornjak-api-helpers';
import {
spireHealthCheckFunc,
Expand Down

0 comments on commit 5503380

Please sign in to comment.