From a2041a822f0406742edbd7a1074a73f9c838c0bf Mon Sep 17 00:00:00 2001
From: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Date: Fri, 21 Feb 2020 12:45:38 +0100
Subject: Update odlux

Update performance app: fix scrolling bug, reduce loading times, update ui to use tabs instead of panels, change the view to toggle between chart and table to better visualize data, minior bugfixes for other apps

Issue-ID: SDNC-1080
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I2b5cf3a5f580f4193421bc047e5256d8e9497e6b
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
---
 .../src/components/ltpSelection.tsx                | 87 ++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx

(limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx')

diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
new file mode 100644
index 000000000..8327ec4ed
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -0,0 +1,87 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as React from 'react';
+import { MenuItem, Select, FormControl } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { LtpIds } from 'models/availableLtps';
+import { Loader } from '../../../../framework/src/components/material-ui';
+
+
+const useStyles = makeStyles(theme => ({
+    display: {
+        display: "inline-block"
+    },
+    selectDropdown: {
+        borderRadius: 1,
+        position: "relative",
+        backgroundColor: theme.palette.background.paper,
+        border: "1px solid #ced4da",
+        fontSize: 16,
+        width: "auto",
+        padding: "5px 26px 5px 12px",
+        transition: theme.transitions.create(["border-color", "box-shadow"]),
+    },
+    center: {
+        "flex": "1",
+        "height": "100%",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+    }
+}));
+
+type LtpSelectionProps = { selectedNE: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void };
+
+export const LtpSelection = (props: LtpSelectionProps) => {
+    const classes = useStyles();
+    return (
+        <>
+            <h3>Selected Network Element: {props.selectedNE} </h3>
+            <FormControl className={classes.display}>
+                <span>
+                    Select LTP
+                </span>
+                <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp}  >
+                    <MenuItem value={"-1"}><em>--Select--</em></MenuItem>
+                    {props.availableLtps.map(ltp =>
+                        (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))}
+                </Select>
+                <span> Time-Period </span>
+                <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} >
+                    <MenuItem value={"15min"}>15min</MenuItem>
+                    <MenuItem value={"24hours"}>24hours</MenuItem>
+                </Select>
+            </FormControl>
+            {
+                !props.finishedLoading &&
+                <div className={classes.center}>
+                    <Loader />
+                    <h3>Collecting Data ...</h3>
+                </div>
+            }
+            {
+                props.selectedLtp === "-1" && props.finishedLoading &&
+                <div className={classes.center}>
+                    <h3>Please select a LTP</h3>
+                </div>
+            }
+        </>)
+}
+
+export default LtpSelection;
\ No newline at end of file
-- 
cgit 1.2.3-korg