INT app gui2
This patch contains the files needed by the INT app to work with gui2.
More in detail I reuse/modifie the html and the css, already provided in
the inbandtelemetry folder. I add the file needed to utilize the gui2,
e.g,intapp-gui2-lib.module.ts.
Link to my dropbox for screenshots:
https://www.dropbox.com/sh/ie2l0flcm8igesk/AAAsP2RdMbNbnt6A88lmBczaa?dl=0
Change-Id: I710c09f3a04a139a4482bb7aae3b3b76b39e67e6
diff --git a/apps/inbandtelemetry/intApp-gui2/intApp/lib/intapp/intapp.component.css b/apps/inbandtelemetry/intApp-gui2/intApp/lib/intapp/intapp.component.css
new file mode 100644
index 0000000..c57601b
--- /dev/null
+++ b/apps/inbandtelemetry/intApp-gui2/intApp/lib/intapp/intapp.component.css
@@ -0,0 +1,215 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+/*
+ ONOS GUI -- INT App View (theme) -- CSS file
+ */
+
+#ov-int-app-main {
+ padding: 5px;
+}
+
+#ov-int-app-main .button-panel {
+ margin: 10px;
+ width: 200px;
+}
+
+.light #ov-int-app-main .button-panel {
+ background-color: #ccf;
+}
+
+.dark #ov-int-app-main .button-panel {
+ background-color: #444;
+}
+
+#ov-int-app-main .int-app-button {
+ cursor: pointer;
+ padding: 4px;
+ text-align: center;
+}
+
+.dark #ov-int-app-main .int-app-button {
+ color: black;
+ background-color: #aaa;
+}
+
+#ov-int-app-main .config-button-panel {
+ margin: 10px;
+ width: 200px;
+}
+
+.light #ov-int-app-main .config-button-panel {
+ background-color: #ccf;
+}
+
+.dark #ov-int-app-main .config-button-panel {
+ background-color: #444;
+}
+
+#ov-int-app-main .int-app-config-button {
+ cursor: pointer;
+ padding: 4px;
+ text-align: center;
+}
+
+#ov-int-app-main input {
+ padding: 4px;
+ font-size: inherit;
+}
+
+.dark #ov-int-app-main .int-app-config-button {
+ color: black;
+ background-color: #aaa;
+}
+/*---------------------------------------------------------------------------*/
+#ov-int-app-main hr {
+ border: 0;
+ height: 1px;
+ background: #333;
+}
+
+#ov-int-app-main h2 {
+ display: inline-block;
+ margin: 10px 0px 10px;
+}
+
+#ov-int-app-main h3 {
+ display: inline-block;
+ margin-bottom: 5px;
+}
+
+#ov-int-app-main h4 {
+ display: inline-block;
+ margin-bottom: 5px;
+}
+
+
+/* Panel Styling */
+#ov-int-app-main-item-details-panel.floatpanel {
+ position: absolute;
+ top: 115px;
+}
+
+.light #ov-int-app-main-item-details-panel.floatpanel {
+ background-color: rgb(229, 234, 237);
+}
+
+.dark #ov-int-app-main-item-details-panel.floatpanel {
+ background-color: #3A4042;
+}
+
+#ov-int-app-main-item-details-panel h4 {
+ margin: 0;
+}
+
+#ov-int-app-main-item-details-panel h3 {
+ margin: 0;
+ font-size: medium;
+}
+#ov-int-app-main-item-details-panel td {
+ padding: 5px;
+}
+#ov-int-app-main-item-details-panel td.label {
+ font-style: italic;
+ opacity: 0.8;
+}
+
+.error-text{
+ color:red;
+}
+
+.myrow {
+ display: flex;
+ flex-wrap: wrap;
+}
+.mygrid {
+ flex: 1;
+ min-width: 25%;
+ padding : 10px;
+}
+
+/* Table Css*/
+
+#int-app-main-intents.tabular-header {
+ text-align: left;
+}
+#int-app-main-intents div.summary-list .table-header td {
+ font-weight: bold;
+ font-variant: small-caps;
+ text-transform: uppercase;
+ font-size: 10pt;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ letter-spacing: 0.02em;
+ cursor: pointer;
+ background-color: #e5e5e6;
+ color: #3c3a3a;
+}
+
+#int-app-main-intents div.summary-list .table-body {
+ overflow:scroll;
+}
+
+#ov-int-app-main hr {
+ border: 0;
+ height: 1px;
+ background: #333;
+}
+
+#ov-int-app-main h2 {
+ display: inline-block;
+ margin: 15px 0px 15px;
+}
+
+#ov-int-app-main h3 {
+ display: inline-block;
+ margin-bottom: 10px;
+}
+
+#ov-int-app-main h4 {
+ display: inline-block;
+ margin-bottom: 10px;
+}
+
+.light #ov-int-app-main-item-details-panel.floatpanel {
+ background-color: rgb(229, 234, 237);
+}
+.dark #ov-int-app-main-item-details-panel.floatpanel {
+ background-color: #3A4042;
+}
+
+#ov-int-app-main-item-details-panel h3 {
+ margin: 0;
+ font-size: large;
+}
+
+#ov-int-app-main-item-details-panel h4 {
+ margin: 0;
+}
+
+#ov-int-app-main-item-details-panel td {
+ padding: 5px;
+}
+
+#int-app-main-intents, div.ctrl-btns {
+}
+
+#int-app-main-intents th, td {
+ text-align: left;
+ padding: 8px;
+}
+
+