Skip to content

Commit 35bc09f

Browse files
author
jan hof
committed
added filter for services
1 parent b8841a0 commit 35bc09f

File tree

3 files changed

+84
-65
lines changed

3 files changed

+84
-65
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎src/setupProxy.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
const { createProxyMiddleware } = require('http-proxy-middleware');
1+
const { createProxyMiddleware } = require("http-proxy-middleware");
22

33
module.exports = function(app) {
44
app.use(
5-
'/api',
5+
["/api", "/socket.io*"],
66
createProxyMiddleware({
7-
target: 'http://localhost:3000',
7+
target: "http://localhost:3000",
88
changeOrigin: true,
99
})
1010
);
11-
};
11+
};

‎src/views/dashboard/Dashboard.tsx

Lines changed: 78 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState } from "react";
22
import {
3+
CButton,
34
CCol,
45
CDropdown,
56
CDropdownItem,
@@ -12,7 +13,6 @@ import { Service, ServiceState } from "../../types/ServiceTypes";
1213
import CIcon from "@coreui/icons-react";
1314
import { freeSet } from "@coreui/icons";
1415
import io from "socket.io-client";
15-
import Axios from "axios";
1616
import useWebsocketUrl from "../../hooks/websocketFetcher";
1717
import { useHistory } from "react-router-dom";
1818

@@ -34,6 +34,7 @@ function getStateStyle(service: Service) {
3434
}
3535

3636
const Dashboard = () => {
37+
const [filterRequired, setFilterRequired] = useState<boolean>(true);
3738
const [services, setServices] = useState<Service[]>([]);
3839

3940
//useServiceFetcher(setServices);
@@ -46,7 +47,6 @@ const Dashboard = () => {
4647

4748
useEffect(() => {
4849
ws.on("service-update", (services: Service[]) => {
49-
services.forEach((s) => (s.error = ""));
5050
setServices(services);
5151
});
5252
ws.on("service-crash", (crash: any) => {
@@ -64,65 +64,82 @@ const Dashboard = () => {
6464
}, [websocketUrl, services]);
6565

6666
return (
67-
<CRow>
68-
{services
69-
.sort((a, b) => a.state - b.state)
70-
.map((service) => {
71-
return (
72-
<CCol sm="6" lg="3">
73-
<CWidgetDropdown
74-
color={getStateStyle(service)}
75-
header={service.name}
76-
text={"Version: " + service.version}
77-
key={service.namespace}
78-
footerSlot={
79-
<>
80-
<p className="add-padding">{service.description}</p>
81-
<p className="add-padding">{service.error}</p>
82-
</>
83-
}
84-
>
85-
<CDropdown>
86-
<CDropdownToggle caret={false} color="transparent">
87-
<CIcon name="cil-settings" />
88-
</CDropdownToggle>
89-
<CDropdownMenu className="pt-0 dark" placement="bottom-end">
90-
<CDropdownItem
91-
disabled={
92-
service.required &&
93-
service.state !== ServiceState.STOPPED
94-
}
95-
onClick={() =>
96-
ws.emit("service-toggle", {
97-
namespace: service.namespace,
98-
})
99-
}
100-
>
101-
{service.state === ServiceState.STOPPED
102-
? "Enable"
103-
: "Disable"}
104-
{service.required &&
105-
service.state !== ServiceState.STOPPED && (
106-
<CIcon name="cil-ban" className="pull-right" />
107-
)}
108-
</CDropdownItem>
109-
<CDropdownItem
110-
onClick={() =>
111-
ws.emit("service-restart", {
112-
namespace: service.namespace,
113-
})
114-
}
115-
>
116-
Restart
117-
<CIcon content={freeSet.cilSync} className="pull-right" />
118-
</CDropdownItem>
119-
</CDropdownMenu>
120-
</CDropdown>
121-
</CWidgetDropdown>
122-
</CCol>
123-
);
124-
})}
125-
</CRow>
67+
<>
68+
<CRow>
69+
<CCol sm="12" lg="12" style={{ paddingBottom: "30px" }}>
70+
<CButton
71+
color="primary"
72+
className="pull-right"
73+
onClick={() => setFilterRequired(!filterRequired)}
74+
>
75+
<CIcon
76+
content={filterRequired ? freeSet.cilFilterX : freeSet.cilFilter}
77+
/>
78+
</CButton>
79+
</CCol>
80+
{services
81+
.sort((a, b) => a.state - b.state)
82+
.filter((s) => (filterRequired && !s.required) || !filterRequired)
83+
.map((service) => {
84+
return (
85+
<CCol sm="6" lg="3">
86+
<CWidgetDropdown
87+
color={getStateStyle(service)}
88+
header={service.name}
89+
text={"Version: " + service.version}
90+
key={service.namespace}
91+
footerSlot={
92+
<>
93+
<p className="add-padding">{service.description}</p>
94+
<p className="add-padding">{service.error}</p>
95+
</>
96+
}
97+
>
98+
<CDropdown>
99+
<CDropdownToggle caret={false} color="transparent">
100+
<CIcon name="cil-settings" />
101+
</CDropdownToggle>
102+
<CDropdownMenu className="pt-0 dark" placement="bottom-end">
103+
<CDropdownItem
104+
disabled={
105+
service.required &&
106+
service.state !== ServiceState.STOPPED
107+
}
108+
onClick={() =>
109+
ws.emit("service-toggle", {
110+
namespace: service.namespace,
111+
})
112+
}
113+
>
114+
{service.state === ServiceState.STOPPED
115+
? "Enable"
116+
: "Disable"}
117+
{service.required &&
118+
service.state !== ServiceState.STOPPED && (
119+
<CIcon name="cil-ban" className="pull-right" />
120+
)}
121+
</CDropdownItem>
122+
<CDropdownItem
123+
onClick={() =>
124+
ws.emit("service-restart", {
125+
namespace: service.namespace,
126+
})
127+
}
128+
>
129+
Restart
130+
<CIcon
131+
content={freeSet.cilSync}
132+
className="pull-right"
133+
/>
134+
</CDropdownItem>
135+
</CDropdownMenu>
136+
</CDropdown>
137+
</CWidgetDropdown>
138+
</CCol>
139+
);
140+
})}
141+
</CRow>
142+
</>
126143
);
127144
};
128145

0 commit comments

Comments
 (0)