feat(ui): Add Last view

Closes #16 Signed-off-by: Dries De Peuter <[email protected]>
stenic · Dec 14, 2022 · 2c231a6 · 2c231a6
1 parent 32a36c9
commit 2c231a6
Show file tree

Hide file tree

Showing 7 changed files with 294 additions and 0 deletions.
diff --git a/graph/generated/generated.go b/graph/generated/generated.go
diff --git a/graph/schema.graphqls b/graph/schema.graphqls
@@ -42,6 +42,7 @@ type Query {
   environments: [Environment!]!
   applications: [Application!]!
   locations: [Location!]!
+  lastVersions: [Version]!
 }
 
 input NewVersion {

diff --git a/graph/schema.resolvers.go b/graph/schema.resolvers.go
diff --git a/internal/pkg/versions/versions.go b/internal/pkg/versions/versions.go
@@ -71,6 +71,15 @@ func GetAll(opts ...query.QueryOpts) []Version {
 	return versions
 }
 
+func GetLast() []Version {
+	q := query.AddQueryParts("select id, application, environment, location, version, timestamp from versions where id in (select max(id) from versions group by location, environment, application)")
+	versions, err := runQuery(q)
+	if err != nil {
+		log.Fatal(err)
+	}
+	return versions
+}
+
 func runQuery(query string) ([]Version, error) {
 	stmt, err := storage.Db.Prepare(query)
 	if err != nil {

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -6,6 +6,7 @@ import Actions from "./scenes/Actions";
 import Dashboard from "./scenes/dashboard";
 import Settings from "./scenes/settings";
 import Versions from "./scenes/versions";
+import LastVersions from "./scenes/last";
 import Versions2 from "./scenes/versions2";
 import Profile from "./scenes/profile";
 import Chart from "./scenes/chart";
@@ -48,6 +49,7 @@ const App = () => {
               <Route path="/settings" element={<Settings />} />
               <Route path="/versions2" element={<Versions2 />} />
               <Route path="/versions" element={<Versions />} />
+              <Route path="/last" element={<LastVersions />} />
               <Route path="/profile" element={<Profile />} />
               <Route path="/feed" element={<Feed />} />
               <Route path="/chart" element={<Chart />} />

diff --git a/ui/src/scenes/SideBar.tsx b/ui/src/scenes/SideBar.tsx
@@ -35,6 +35,11 @@ const menu = {
       icon: <LibraryBooksIcon />,
       to: "/versions",
     },
+    {
+      title: "Last",
+      icon: <LibraryBooksIcon />,
+      to: "/last",
+    },
     {
       title: "Feed",
       icon: <FormatListBulletedOutlinedIcon />,

diff --git a/ui/src/scenes/last/index.tsx b/ui/src/scenes/last/index.tsx
@@ -0,0 +1,120 @@
+import { Box } from "@mui/material";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+import Header from "../../components/Header";
+import { useGqlQuery } from "../../utils/http";
+import gql from "graphql-tag";
+import { VersionData } from "../../types/version";
+
+const LastVersions = () => {
+  const { data, isLoading } = useGqlQuery(
+    ["lastversions"],
+    gql`
+      query {
+        lastVersions {
+          id
+          application {
+            name
+          }
+          location {
+            name
+          }
+          timestamp
+          environment {
+            name
+          }
+          version
+        }
+      }
+    `
+  );
+
+  const columns = [
+    {
+      field: "application",
+      headerName: "Application",
+      flex: 1,
+      cellClassName: "name-column--cell",
+      valueGetter: (params: { row: VersionData }) =>
+        params.row.application.name,
+    },
+    {
+      field: "location",
+      headerName: "Location",
+      flex: 1,
+      valueGetter: (params: { row: VersionData }) => params.row.location.name,
+    },
+    {
+      field: "environment",
+      headerName: "Environment",
+      flex: 1,
+      valueGetter: (params: { row: VersionData }) =>
+        params.row.environment.name,
+    },
+    {
+      field: "version",
+      headerName: "Version",
+      flex: 1,
+      // renderCell: (params) => (
+      //   <Typography color="#4cceac">{params.row.cost}</Typography>
+      // ),
+    },
+    {
+      field: "timestamp",
+      headerName: "Date",
+      flex: 1,
+      type: "dateTime",
+      valueGetter: ({ value }: { value: string }) => value && new Date(value),
+    },
+  ];
+
+  return (
+    <Box m="20px">
+      <Header title="Versions" subtitle="List of versions" />
+      <Box
+        m="40px 0 0 0"
+        height="75vh"
+        sx={{
+          "& .MuiDataGrid-root": {
+            border: "none",
+            color: "#fff",
+          },
+          "& .MuiDataGrid-cell": {
+            borderBottom: "none",
+          },
+          "& .name-column--cell": {
+            color: "#94e2cd",
+          },
+          "& .MuiDataGrid-columnHeaders": {
+            backgroundColor: "#3e4396",
+            borderBottom: "none",
+          },
+          "& .MuiDataGrid-virtualScroller": {
+            backgroundColor: "#1F2A40",
+          },
+          "& .MuiDataGrid-footerContainer": {
+            borderTop: "none",
+            backgroundColor: "#3e4396",
+          },
+          "& .MuiCheckbox-root": {
+            color: `#b7ebde !important`,
+          },
+          "& .MuiButtonBase-root": {
+            color: "#fff !important",
+          },
+        }}
+      >
+        <DataGrid
+          checkboxSelection
+          loading={isLoading}
+          rows={data?.lastVersions ? data.lastVersions : []}
+          columns={columns}
+          components={{
+            Toolbar: GridToolbar,
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default LastVersions;