ui

Author: sokil

agent/agent-pull-stub.php

@@ -12,7 +12,9 @@
 $phpFileContent = '<?php $a=md5("' . str_repeat('4', 200) . '");';
 
 for ($i = 0; $i < 200; $i++) {
-    $path = sys_get_temp_dir() . '/opcache-dashboard-' . $i . '.php';
+    $postfix = ($i % 10 === 1) ? '-' . str_repeat('42', 50) . '-' : '';
+
+    $path = sys_get_temp_dir() . '/opcache-dashboard-' . $i . $postfix . '.php';
 
     if (!file_exists($path)) {
         file_put_contents($path, $phpFileContent);

ui/assets/components/pages/ScriptsPage.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { DataGrid, ValueGetterParams } from '@material-ui/data-grid';
+import MaterialTable from 'material-table';
 import {DateTime} from 'luxon';
 import prettyBytes from 'pretty-bytes';
 import { Paper } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-    dataGridRoot: {
-        '& .MuiDataGrid-cell': {
-            fontSize: '0.9em',
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        dataGridRoot: {
+            border: '1px solid red',
+            background: 'red',
+            '& .MuiTableCell-body': {
+                padding: '6px 16px',
+                fontSize: '0.8em',
+                background: 'red',
+            },
         },
-    },
-}));
+    }),
+);
 
 const mapStateToProps = (state: Object) => {
     return {
@@ -69,75 +75,75 @@ const buildScriptAggregatedStatus = function(clusterOpcacheStatuses): Array<Obje
     return Object.values(scriptAggregatedStatus);
 }
 
-function ScriptsDataGrid(props) 
-{
+function ScriptsMaterialTable(props) {
     const columns = [
         {
             field: 'script',
-            headerName: 'Script',
+            title: 'Script',
             sortable: true,
-            flex: 1,
         },
         {
             field: 'hits',
-            headerName: 'Hits',
+            title: 'Hits',
             sortable: true,
-            width: 90,
-            hide: false,
-            type: 'number',
+            headerStyle: {
+                width: "90px",
+            },
+            hidden: false,
+            type: 'numeric',
         },
         {
             field: 'memoryHumanReadable',
-            headerName: 'Size',
+            title: 'Size',
             sortable: true,
-            width: 85,
-            valueGetter: (params: ValueGetterParams) => {
-                return prettyBytes(params.getValue('memory'));
+            headerStyle: {
+                width: "85px",
+            },
+            render: (row) => {
+                return prettyBytes(row.memory);
             },
-            hide: false,
-            type: 'number',
+            customSort: (a, b) => a.memory - b.memory,
+            hidden: false,
         },
         {
             field: 'lastUsedDate',
-            headerName: 'Last used',
+            title: 'Last used',
             sortable: true,
-            width: 170,
-            valueGetter: (params: ValueGetterParams) => {
-                return formatTime(params.getValue('lastUsedTimestamp'));
+            headerStyle: {
+                width: "170x"
             },
-            hide: false,
-            type: 'dateTime',
-        },
-        {
-            field: 'createDate',
-            headerName: 'Created',
-            sortable: true,
-            width: 170,
-            valueGetter: (params: ValueGetterParams) => {
-                return formatTime(params.getValue('createTimestamp'));
+            render: (row) => {
+                return formatTime(row.lastUsedTimestamp);
             },
-            type: 'dateTime',
-            hide: true,
-        },
+            customSort: (a, b) => a.lastUsedTimestamp - b.lastUsedTimestamp,
+            hidden: false,
+            type: 'datetime',
+        }
     ];
 
     return (
-        <DataGrid
-            rows={props.rows}
+        <MaterialTable
+            title=""
+            options={{
+                search: true,
+                sorting: true,
+                pageSize: 100,
+                pageSizeOptions: [20, 50, 100],
+                rowStyle: {
+                    fontSize: '0.8em',
+                },
+                padding: "dense",
+                tableLayout: "auto"
+            }}
             columns={columns}
-            autoHeight="true"
-            autoPageSize="true"
-            density="compact"
-            className={props.className}
-        ></DataGrid>
+            data={props.rows}
+        ></MaterialTable>
     );
 }
 
-function ScriptsMaterialTable(props) {
-
-}
-
 function ScriptsPageComponent(props: Object) {
+    const classes = useStyles();
+
     if (props.selectedClusterName === null) {
         return <div>Loading</div>
     }
@@ -146,12 +152,8 @@ function ScriptsPageComponent(props: Object) {
         return <div>No scripts found</div>
     }
 
-    const classes = useStyles();
-
     return <div style={{ minHeight: '400px', width: '100%' }}>
-        <Paper>
-            <ScriptsDataGrid rows={props.scriptAggregatedStatus} className={classes.dataGridRoot}></ScriptsDataGrid>
-        </Paper>
+        <ScriptsMaterialTable rows={props.scriptAggregatedStatus} className={classes.dataGridRoot}></ScriptsMaterialTable>
     </div>
 }
 

ui/assets/package.json

@@ -17,10 +17,9 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.12.16",
-    "@babel/preset-flow": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
     "@material-ui/core": "^4.11.3",
-    "@material-ui/data-grid": "^4.0.0-alpha.20",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "babel-loader": "^8.2.2",
@@ -43,7 +42,7 @@
     "redux-thunk": "^2.3.0",
     "sass-loader": "^11.0.1",
     "style-loader": "^0.21.0",
-    "typescript": "^4.1.5",
+    "typescript": "^4.2.3",
     "webpack": "^5.22",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"

ui/assets/tsconfig.json

@@ -10,7 +10,7 @@
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
-      "strict": true,
+      "strict": false,
       "forceConsistentCasingInFileNames": true,
       "module": "esnext",
       "moduleResolution": "node",

ui/assets/webpack.config.js

@@ -77,6 +77,10 @@ module.exports = {
                                 },
                             ],
                             '@babel/preset-react',
+                            [
+                                "@babel/preset-typescript",
+                                { isTSX: true, allExtensions: true }
+                            ]
                         ],
                         plugins: [
                             '@babel/plugin-syntax-dynamic-import',