Refactor css (#152)

* remove uid from dashboard

* use plugin scope for css elements

Author: EddeCCC

provisioning/home/home.json

@@ -132,13 +132,12 @@
     "list": []
   },
   "time": {
-    "from": "now-6h",
+    "from": "now-1h",
     "to": "now"
   },
   "timepicker": {},
   "timezone": "browser",
   "title": "Dummy Dashboard",
-  "uid": "fegw5u6zfsao0f",
   "version": 1,
   "weekStart": ""
 }

src/css/novatec-service-dependency-graph-panel.css

@@ -5,108 +5,106 @@
   flex-direction: column;
 }
 
-.graph-container {
+.service-dependency-graph-panel .graph-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
 }
 
-.service-dependency-graph {
+.service-dependency-graph-panel .service-dependency-graph {
   position: relative;
   flex-grow: 1;
   min-width: 0;
 }
 
-.canvas-container {
+.service-dependency-graph-panel .canvas-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
 }
 
-.zoom-button-container {
+.service-dependency-graph-panel .zoom-button-container {
   position: absolute;
   top: 0;
   right: 1rem;
   z-index: 99;
   width: 35px;
 }
 
-.statistics {
+.service-dependency-graph-panel .statistics {
   flex-basis: 0;
   transition: flex-basis 250ms ease-in-out;
   overflow-y: scroll;
-  
+
 }
 
-.statistics.show {
+.service-dependency-graph-panel .statistics.show {
   flex-basis: 30rem;
   padding-left: 0.5%;
 }
 
-.header--selection {
+.service-dependency-graph-panel .header--selection {
   font-size: 1.25em;
   text-align: center;
   border-bottom: 2px solid #161719;
   font-weight: 500;
   color: rgb(216, 217, 218);
 }
 
-.secondHeader--selection {
+.service-dependency-graph-panel .secondHeader--selection {
   font-size: 1.2em;
   text-align: center;
   padding-top: 1.5rem;
   padding-bottom: 0.5rem;
 }
 
-.no-data--selection{
+.service-dependency-graph-panel .no-data--selection{
   color: #888888;
   text-align: center;
 }
 
-.table--selection {
+.service-dependency-graph-panel .table--selection {
   width: 99%;
   table-layout: fixed;
 }
 
-.table--selection th, .table--selection td {
+.service-dependency-graph-panel .table--selection th, .table--selection td {
   padding: 3px 5px;
 }
 
-.table--selection tr {
+.service-dependency-graph-panel .table--selection tr {
   border-bottom: 2px solid #161719;
 }
 
-.table--td--selection {
+.service-dependency-graph-panel .table--td--selection {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.threshold--bad {
+.service-dependency-graph-panel .threshold--bad {
   color:#f2495c;
 }
 
-.threshold--good {
+.service-dependency-graph-panel .threshold--good {
   color: #73bf69;
 }
 
-.table--th--selectionSmall {
+.service-dependency-graph-panel .table--th--selectionSmall {
   width: 5.5rem;
 }
 
-.table--th--selectionMedium {
+.service-dependency-graph-panel .table--th--selectionMedium {
   width: 8rem;
 }
 
-.table--selection--head {
+.service-dependency-graph-panel .table--selection--head {
   background-color: #28282a;
   border-top: 2px solid #161719;
   color: #33b5e5;
 }
 
-.width-100 {
+.service-dependency-graph-panel .width-100 {
   width: 100%;
 }
-
-

src/options/TypeAheadTextfield/TypeaheadTextfield.css

@@ -1,15 +1,15 @@
-.suggestion {
+.service-dependency-graph-panel .suggestion {
     width: 100%;
     border-right: 1px solid #3865AB ;
     border-left: 1px solid #3865AB ;
     background-color: #0B0C0E;
     padding-left: 10px;
 }
 
-ul {
+.service-dependency-graph-panel ul {
     list-style-type: none;
 }
 
-ul:last-child {
+.service-dependency-graph-panel ul:last-child {
     border-bottom: 1px solid #3865AB ;
-}
+}

src/options/iconMapping/IconMapping.css

@@ -1,21 +1,21 @@
-.no-background {
+.service-dependency-graph-panel .no-background {
     background-color: transparent;
 }
 
-.no-padding-left {
+.service-dependency-graph-panel .no-padding-left {
     padding-left: 0;
 }
 
-.icon-mapping-button {
+.service-dependency-graph-panel .icon-mapping-button {
     width: 46.5%;
     margin-left: 0;
 }
 
-.width-100 {
+.service-dependency-graph-panel .width-100 {
     width: 100%;
 }
 
-.width-half {
+.service-dependency-graph-panel .width-half {
     width: 47%;
     text-overflow: ellipsis;
-}
+}

src/panel/PanelController.tsx

@@ -223,9 +223,11 @@ export class PanelController extends PureComponent<Props, PanelState> {
     const data = this.processData();
     const error = this.getError();
     if (error === null) {
+      // This is our root DOM
       return (
         <div>
           <div
+            // The className is also used to scope all of our css rules
             className="service-dependency-graph-panel"
             style={{ height: this.props.height, width: this.props.width }}
             ref={this.ref}

src/panel/serviceDependencyGraph/ServiceDependencyGraph.css

@@ -1,20 +1,19 @@
-.graph-container {
+.service-dependency-graph-panel .graph-container {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row;
 }
 
-.canvas-container {
+.service-dependency-graph-panel .canvas-container {
     width: 100%;
     height: 100%;
     overflow: hidden;
 }
 
-.zoom-button-container {
+.service-dependency-graph-panel .zoom-button-container {
     position: absolute;
     top: 0;
     right: 1rem;
     z-index: 99;
-  }
-  
+}

src/panel/statistics/Statistics.css

@@ -1,15 +1,14 @@
-.margin {
+.service-dependency-graph-panel .margin {
     margin: 10px;
 }
 
-.statistics {
+.service-dependency-graph-panel .statistics {
     flex-basis: 0;
     transition: flex-basis 500ms ease-in-out;
     overflow-y: scroll;
-    
-  }
-  
-  .statistics.show {
-    flex-basis: 30rem;
-    padding-left: 0.5%;
-  }
+}
+
+.service-dependency-graph-panel .statistics.show {
+  flex-basis: 30rem;
+  padding-left: 0.5%;
+}